From 5f339323c3eec54b7092105936157f8cfd7b649b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 15:44:56 -0400
Subject: [PATCH] Final auth design and removed email from session storage upon
 navigation to /login

---
 Client/src/Pages/Auth/CheckEmail.jsx          |  9 ++--
 Client/src/Pages/Auth/ForgotPassword.jsx      |  9 ++--
 .../src/Pages/Auth/NewPasswordConfirmed.jsx   | 52 ++++++++-----------
 3 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index bdf4974a0..88a4afa1f 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/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
diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index 60c8da190..e1f6ae56e 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/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
diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
index 5bb9d57d9..12a6995f9 100644
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/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>
   );
 };