CMS-Client/components/Authentication/SignInForm.js

import React, { useState } from "react";
import { useRouter } from "next/router";
import { setCookie } from 'cookies-next';
import Link from "next/link";
import Grid from "@mui/material/Grid";
import LoadingButton from "@mui/lab/LoadingButton";
import IconButton from "@mui/material/IconButton";
import { Typography } from "@mui/material";
import { Box } from "@mui/system";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import Button from "@mui/material/Button";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import styles from "./signinform.module.css";
import Fetcher from "services/Fetcher";

const SignInForm = () => {
  const [formValues, setFormValues] = useState({
    email: "",
    password: "",
  });
  const [errorHandlers, setErrorHandlers] = useState({
    email: false,
    password: false,
  });
  const [loading, setLoading] = useState(false);
  const [errMsg, setErrMsg] = useState("");

  const api = new Fetcher();
  const router = useRouter();

  const handleChange = (event) => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  // "use server"
  const handleSubmit = async (event) => {
    event.preventDefault();

    const { email, password } = formValues;

    if (email === "" || password === "") {
      setErrorHandlers({ ...errorHandlers, email: true, password: true });
      setTimeout(() => {
        setErrorHandlers({ ...errorHandlers, email: false, password: false });
      }, 1500);
      return;
    } else if (email === "") {
      setErrorHandlers({ ...errorHandlers, email: true });
      setTimeout(() => {
        setErrorHandlers({ ...errorHandlers, email: false });
      }, 1500);
      return;
    } else if (password === "") {
      setErrorHandlers({ ...errorHandlers, password: true });
      setTimeout(() => {
        setErrorHandlers({ ...errorHandlers, password: false });
      }, 1500);
      return;
    }

    setLoading(true);
    try {
      const data = {
        username: email,
        password,
      };
      const res = await api.login(data);

      if (res.status === 204 || res.length === 0) {
        setErrorHandlers({ ...errorHandlers, email: true, password: true });
        setErrMsg("Wrong Credentials");
        setTimeout(() => {
          setErrorHandlers({ ...errorHandlers, email: false, password: false });
          setLoading(false);
          setErrMsg("");
        }, 1500);
      }

      // Store the token in cookies
       await setCookie("cmc-token", res.token);
       router.push("/");


      console.log(res);
    } catch (error) {
      setLoading(false);
      console.log(error);
    } finally {
      setTimeout(() => {
        setLoading(false);
      }, 5000);
    }
  };

  const [showPassword, setShowPassword] = useState(false);

  const handleTogglePassword = () => {
    setShowPassword(!showPassword);
  };

  return (
    <>
      <div className={styles.authenticationBox}>
        <Box
          component="main"
          sx={{
            maxWidth: "510px",
            ml: "auto",
            mr: "auto",
            padding: "50px 0 100px",
            paddingInline: { sm: "10px", lg: "0" },
            zIndex: "999",
            position: "relative",
          }}
        >
          <Grid item xs={12} md={12} lg={12} xl={12}>
            <Box>
              <Box
                display="flex"
                alignItems="center"
                justifyContent="center"
                mb="70px"
              >
                <img
                  src="/images/logos/android-chrome-512x512.png"
                  alt="logo"
                  className={styles.favicon}
                />
              </Box>
              {/* <Typography
                as="h1"
                fontSize="28px"
                fontWeight="700"
                mb="5px"
                color="#fff"
              >
                Sign In{" "}
              </Typography> */}

              <Box component="form" noValidate onSubmit={handleSubmit}>
                <Box
                  sx={{
                    background: "#fff",
                    padding: "30px 20px",
                    borderRadius: "10px",
                    mb: "20px",
                  }}
                  className="bg-black"
                >
                  <Grid container alignItems="center" spacing={2}>
                    <Grid item xs={12}>
                      {/* <Typography
                        component="label"
                        sx={{
                          fontWeight: "500",
                          fontSize: "14px",
                          mb: "10px",
                          display: "block",
                        }}
                      >
                        Email
                      </Typography> */}

                      <TextField
                        required
                        fullWidth
                        id="email"
                        label={
                          errorHandlers.email
                            ? "Incomplete/wrong email"
                            : "Email Address"
                        }
                        value={formValues.email}
                        onChange={handleChange}
                        name="email"
                        autoComplete="email"
                        InputProps={{
                          style: { borderRadius: 8 },
                        }}
                        sx={textFieldStyles}
                        error={errorHandlers.email}
                      />
                    </Grid>

                    <Grid item xs={12}>
                      {/* <Typography
                        component="label"
                        sx={{
                          fontWeight: "500",
                          fontSize: "14px",
                          mb: "10px",
                          display: "block",
                        }}
                      >
                        Password
                      </Typography> */}

                      <TextField
                        required
                        fullWidth
                        name="password"
                        label={
                          errorHandlers.password
                            ? "Incomplete/wrong password"
                            : "Password"
                        }
                        value={formValues.password}
                        type={showPassword ? "text" : "password"}
                        id="password"
                        autoComplete="new-password"
                        onChange={handleChange}
                        error={errorHandlers.password}
                        InputProps={{
                          style: { borderRadius: 8 },
                          endAdornment: (
                            <InputAdornment position="end">
                              <IconButton
                                onClick={handleTogglePassword}
                                sx={{
                                  color: "#4687BA",
                                  "&:hover": {
                                    color: "#4687BA",
                                  },
                                }}
                              >
                                {showPassword ? (
                                  <VisibilityOff />
                                ) : (
                                  <Visibility />
                                )}
                              </IconButton>
                            </InputAdornment>
                          ),
                        }}
                        sx={textFieldStyles}
                      />
                    </Grid>
                  </Grid>
                </Box>

                <Box sx={{ backgroundColor: "#4687BA" }}>
                  <LoadingButton
                    type="submit"
                    fullWidth
                    variant="contained"
                    loading={loading}
                    disabled={loading}
                    loadingIndicator="Signing in…"
                    sx={{
                      backgroundColor: "#4687BA",
                      textTransform: "capitalize",
                      borderRadius: "8px",
                      fontWeight: "500",
                      fontSize: "16px",
                      padding: "12px 10px",
                      color: "#fff !important",
                      "&:hover": {
                        backgroundColor: "rgba(70, 135, 186, 0.8)",
                      },
                    }}
                  >
                    <span>
                      {loading ? "Signing in…" : errMsg ? errMsg : "Sign In"}
                    </span>
                  </LoadingButton>
                </Box>
              </Box>
            </Box>
          </Grid>
        </Box>
      </div>
    </>
  );
};

export default SignInForm;

// Custom styles for text fields in sign up
const textFieldStyles = {
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "#4687BA",
      "&:hover": {
        borderColor: "#4687BA",
      },
    },
    "&.Mui-focused fieldset": {
      borderColor: "#4687BA",
    },
  },
  "& .MuiInputAdornment-positionEnd": {
    cursor: "pointer",
  },
  "& .MuiFormLabel-root": {
    color: "#4687BA",
  },
  "&:hover .MuiFormLabel-root": {
    color: "#4687BA",
  },
  "&.Mui-focused .MuiFormLabel-root": {
    color: "#4687BA",
  },
  "& .MuiInputBase-input": {
    color: "#4687BA",
  },
  "&:hover .MuiInputBase-input": {
    color: "#4687BA",
  },
  "&.Mui-focused .MuiInputBase-input": {
    color: "#4687BA",
  },
};