added context provider for user profile

components/Authentication/SignInForm.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { setCookie } from "cookies-next";
-import Link from "next/link";
+import { useSnackbar } from "notistack";
 import Grid from "@mui/material/Grid";
 import LoadingButton from "@mui/lab/LoadingButton";
 import IconButton from "@mui/material/IconButton";
@@ -14,8 +14,12 @@ 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";
+import { useUserProfile } from "contexts/userProfileContext";
 
 const SignInForm = () => {
+  const { state, dispatch } = useUserProfile();
+
+  // Define and initialize state variables
   const [formValues, setFormValues] = useState({
     email: "",
     password: "",
@@ -27,55 +31,70 @@ const SignInForm = () => {
   const [loading, setLoading] = useState(false);
   const [errMsg, setErrMsg] = useState("");
 
+  // Create instances of external services
   const api = new Fetcher();
   const router = useRouter();
 
+  // Access the Snackbar notification function
+  const { enqueueSnackbar } = useSnackbar();
+
+  // Handle changes in the input fields
   const handleChange = (event) => {
     setFormValues({ ...formValues, [event.target.name]: event.target.value });
   };
 
-  // "use server"
+  // Handle form submission
   const handleSubmit = async (event) => {
     event.preventDefault();
 
     const { email, password } = formValues;
 
-    if (email === "" || password === "") {
+    // Validate the form fields
+    if (email === "" && password === "") {
       setErrorHandlers({ ...errorHandlers, email: true, password: true });
+      setErrMsg("all fields are required");
       setTimeout(() => {
         setErrorHandlers({ ...errorHandlers, email: false, password: false });
-      }, 1500);
+        setErrMsg("");
+      }, 2000);
       return;
     } else if (email === "") {
       setErrorHandlers({ ...errorHandlers, email: true });
+      setErrMsg("email field is required");
       setTimeout(() => {
         setErrorHandlers({ ...errorHandlers, email: false });
-      }, 1500);
+        setErrMsg("");
+      }, 2000);
       return;
     } else if (password === "") {
       setErrorHandlers({ ...errorHandlers, password: true });
+      setErrMsg("password field is required");
       setTimeout(() => {
         setErrorHandlers({ ...errorHandlers, password: false });
-      }, 1500);
+        setErrMsg("");
+      }, 2000);
       return;
     }
 
+    // Initiate the login process
     setLoading(true);
     try {
+      // Prepare the login request data
       const data = {
         username: email,
         password,
       };
+
+      // Send the login request to the server
       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);
+        // Handle login failure
+        enqueueSnackbar("Wrong Credentials", {
+          variant: "error",
+        });
+        setLoading(false);
+        return;
       }
 
       // Store the token in cookies
@@ -87,29 +106,45 @@ const SignInForm = () => {
         expires: expirationDate,
         httpOnly: true, // Make the cookie accessible only via HTTP (recommended for security)
       };
+
       
+      // Set the login token in a cookie
       await setCookie("cmc-token", res.token);
+
+      const userProfileData = res.profile;
+      dispatch({ type: 'SET_USER_PROFILE', payload: userProfileData });
+
+      enqueueSnackbar("Login Successful", {
+        variant: "success",
+        autoHideDuration: 4000,
+      });
+
+      // Redirect the user to a new page after successful login
       router.push("/");
 
       console.log(res);
     } catch (error) {
+      // Handle any errors that occur during login
       setLoading(false);
       console.log(error);
     } finally {
+      // Ensure that the loading indicator is cleared after a short delay
       setTimeout(() => {
         setLoading(false);
       }, 5000);
     }
   };
 
+  // Define and initialize the state variable for toggling password visibility
   const [showPassword, setShowPassword] = useState(false);
 
+  // Toggle password visibility
   const handleTogglePassword = () => {
     setShowPassword(!showPassword);
   };
 
   useEffect(() => {
-    // Prefetch the dashboard
+    // Prefetch the dashboard page to optimize navigation
     router.prefetch("/");
   });
 
@@ -142,15 +177,6 @@ const SignInForm = () => {
                   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
@@ -164,25 +190,13 @@ const SignInForm = () => {
                 >
                   <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"
+                          errorHandlers.email && errMsg !== ""
+                            ? errMsg
                             : "Email Address"
                         }
                         value={formValues.email}
@@ -198,25 +212,13 @@ const SignInForm = () => {
                     </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"
+                          errorHandlers.password && errMsg !== ""
+                            ? errMsg
                             : "Password"
                         }
                         value={formValues.password}
@@ -274,9 +276,7 @@ const SignInForm = () => {
                       },
                     }}
                   >
-                    <span>
-                      {loading ? "Signing in…" : errMsg ? errMsg : "Sign In"}
-                    </span>
+                    <span>{loading ? "Signing in…" : "Sign In"}</span>
                   </LoadingButton>
                 </Box>
               </Box>