Final auth design and removed email from session storage upon navigation to /login

Client/src/Pages/Auth/CheckEmail.jsx

@@ -79,6 +79,11 @@ const CheckEmail = () => {
     }
   };
 
+  const handleNavigate = () => {
+    sessionStorage.removeItem("email");
+    navigate("/login");
+  };
+
   return (
     <Stack className="check-email-page auth" overflow="hidden">
       <img
@@ -159,9 +164,7 @@ const CheckEmail = () => {
         <Typography
           component="span"
           ml={theme.gap.xs}
-          onClick={() => {
-            navigate("/login");
-          }}
+          onClick={handleNavigate}
           sx={{ userSelect: "none" }}
         >
           Log In

Client/src/Pages/Auth/ForgotPassword.jsx

@@ -81,6 +81,11 @@ const ForgotPassword = () => {
     else delete errors.email;
   };
 
+  const handleNavigate = () => {
+    sessionStorage.removeItem("email");
+    navigate("/login");
+  };
+
   return (
     <Stack className="forgot-password-page auth" overflow="hidden">
       <img
@@ -159,9 +164,7 @@ const ForgotPassword = () => {
         <Typography
           component="span"
           ml={theme.gap.xs}
-          onClick={() => {
-            navigate("/login");
-          }}
+          onClick={handleNavigate}
           sx={{ userSelect: "none" }}
         >
           Log In

Client/src/Pages/Auth/NewPasswordConfirmed.jsx

@@ -57,46 +57,38 @@ const NewPasswordConfirmed = () => {
             },
           },
         }}
-      ></Stack>
+      >
+        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+          <Box>
+            <ConfirmIcon alt="password confirm icon" />
+            <Typography component="h1">Password reset</Typography>
+            <Typography mt={theme.gap.xs}>
+              Your password has been successfully reset. Click below to log in
+              magically.
+            </Typography>
+          </Box>
+          <Button
+            level="primary"
+            label="Continue"
+            onClick={() => navigate("/monitors")}
+            sx={{
+              width: "100%",
+              maxWidth: 400,
+            }}
+          />
+        </Stack>
+      </Stack>
       <Box textAlign="center" p={theme.gap.large}>
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
           component="span"
           ml={theme.gap.xs}
-          onClick={() => {
-            navigate("/login");
-          }}
+          onClick={handleNavigate}
           sx={{ userSelect: "none" }}
         >
           Log In
         </Typography>
       </Box>
-      {/* <form className="password-confirmed-form">
-        <Stack direction="column" alignItems="center" gap={theme.gap.small}>
-          <ConfirmIcon alt="confirm icon" style={{ fill: "white" }} />
-          <Typography component="h1" sx={{ mt: theme.gap.ml }}>
-            Password reset
-          </Typography>
-          <Typography sx={{ textAlign: "center" }}>
-            Your password has been successfully reset. Click below to log in
-            magically.
-          </Typography>
-        </Stack>
-        <Stack gap={theme.gap.large} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
-          <Button
-            level="primary"
-            label="Continue"
-            onClick={() => navigate("/monitors")}
-          />
-          <Button
-            level="tertiary"
-            label="Back to log in"
-            img={<ArrowBackRoundedIcon />}
-            sx={{ alignSelf: "center", width: "fit-content" }}
-            onClick={handleNavigate}
-          />
-        </Stack>
-      </form> */}
     </Stack>
   );
 };