added authentication

components/Authentication/SignInForm.js

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
+import { useRouter } from "next/router";
+// import { cookies } from "next/headers";
 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";
@@ -10,16 +13,77 @@ 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 WrenchBoardLogo from "@/public/images/logos/wrenchboard-logo.png";
+import Fetcher from "services/Fetcher";
 
 const SignInForm = () => {
-  const handleSubmit = (event) => {
+  const [formValues, setFormValues] = useState({
+    email: "",
+    password: "",
+  });
+  const [errorHandlers, setErrorHandlers] = useState({
+    email: false,
+    password: false,
+  });
+  const [loading, setLoading] = useState(false);
+  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 data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get("email"),
-      password: data.get("password"),
-    });
+
+    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 });
+      }
+
+      // Store the token in cookies
+      // const cookieStore = cookies();
+      // cookieStore.set("cmc-profile", { ...res.profile }, { secure: true });
+      // cookieStore.set("cmc-token", res.token, { secure: true });
+      document.cookie = "cmc-token=" + res.token;
+
+      // setLoading(false);
+      router.push("/");
+
+      console.log(res);
+    } catch (error) {
+      setLoading(false);
+      console.log(error);
+    }
   };
 
   const [showPassword, setShowPassword] = useState(false);
@@ -95,13 +159,20 @@ const SignInForm = () => {
                         required
                         fullWidth
                         id="email"
-                        label="Email Address"
+                        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>
 
@@ -122,10 +193,17 @@ const SignInForm = () => {
                         required
                         fullWidth
                         name="password"
-                        label="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: (
@@ -154,26 +232,29 @@ const SignInForm = () => {
                   </Grid>
                 </Box>
 
-                <Button
-                  type="submit"
-                  fullWidth
-                  variant="contained"
-                  sx={{
-                    mt: 2,
-                    backgroundColor: "#4687BA",
-                    textTransform: "capitalize",
-                    borderRadius: "8px",
-                    fontWeight: "500",
-                    fontSize: "16px",
-                    padding: "12px 10px",
-                    color: "#fff !important",
-                    "&:hover": {
-                      backgroundColor: "rgba(70, 135, 186, 0.8)"
-                    },
-                  }}
-                >
-                  Sign In
-                </Button>
+                <Box sx={{ backgroundColor: "#4687BA" }}>
+                  <LoadingButton
+                    type="submit"
+                    fullWidth
+                    variant="contained"
+                    loading={loading}
+                    disabled={loading}
+                    // loadingPosition="end"
+                    sx={{
+                      textTransform: "capitalize",
+                      borderRadius: "8px",
+                      fontWeight: "500",
+                      fontSize: "16px",
+                      padding: "12px 10px",
+                      color: "#fff !important",
+                      "&:hover": {
+                        backgroundColor: "rgba(70, 135, 186, 0.8)",
+                      },
+                    }}
+                  >
+                    <span>Sign In</span>
+                  </LoadingButton>
+                </Box>
               </Box>
             </Box>
           </Grid>

components/_App/Layout.js

@@ -20,7 +20,7 @@ const Layout = ({ children }) => {
 
   useEffect(() => {
     const authenticationPages = [
-      "/",
+      // "/",
       "/auth",
       "/auth/login",
       "/auth/sign-up",