From c4071a945d442dbde74047f873ed23b9431854c7 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 15:35:36 -0400
Subject: [PATCH 1/2] Added bluewave icon and initial design

---
 Client/src/Pages/Auth/CheckEmail.jsx          | 44 +------------
 Client/src/Pages/Auth/ForgotPassword.jsx      |  2 +-
 .../src/Pages/Auth/NewPasswordConfirmed.jsx   | 63 ++++++++++++++++---
 Client/src/Pages/Auth/index.css               | 27 +++-----
 4 files changed, 64 insertions(+), 72 deletions(-)

diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index 24c3bb89a..bdf4974a0 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -118,7 +118,7 @@ const CheckEmail = () => {
       >
         <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
           <Box>
-            <EmailIcon />
+            <EmailIcon alt="email icon" />
             <Typography component="h1">Check your email</Typography>
             <Typography mt={theme.gap.xs} sx={{ width: "max-content" }}>
               We sent a password reset link to{" "}
@@ -167,48 +167,6 @@ const CheckEmail = () => {
           Log In
         </Typography>
       </Box>
-      {/* <form className="check-email-form">
-        <Stack direction="column" alignItems="center" gap={theme.gap.small}>
-          <EmailIcon alt="EmailIcon" style={{ fill: "white" }} />
-          <Typography component="h1" sx={{ mt: theme.gap.ml }}>
-            Check your email
-          </Typography>
-          <Typography sx={{ width: "max-content" }}>
-            We sent a password reset link to{" "}
-            <Typography component="span">
-              {email || "username@email.com"}
-            </Typography>
-          </Typography>
-        </Stack>
-        <Stack gap={theme.gap.ml} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
-          <Button level="primary" label="Open email app" onClick={openMail} />
-          <Typography sx={{ alignSelf: "center", mb: theme.gap.medium }}>
-            Didn't receive the email?{" "}
-            <Typography
-              component="span"
-              onClick={resendToken}
-              sx={{
-                color: theme.palette.primary.main,
-                letterSpacing: "-0.1px",
-                userSelect: "none",
-                pointerEvents: disabled ? "none" : "auto",
-                cursor: disabled ? "default" : "pointer",
-                opacity: disabled ? 0.5 : 1,
-              }}
-            >
-              Click to resend
-            </Typography>
-          </Typography>
-
-          <Button
-            level="tertiary"
-            label="Back to log in"
-            img={<ArrowBackRoundedIcon />}
-            sx={{ alignSelf: "center", width: "fit-content" }}
-            onClick={() => navigate("/login")}
-          />
-        </Stack>
-      </form> */}
     </Stack>
   );
 };
diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index c7aca10c9..60c8da190 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -120,7 +120,7 @@ const ForgotPassword = () => {
       >
         <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
           <Box>
-            <Key />
+            <Key alt="password key icon" />
             <Typography component="h1">Forgot password?</Typography>
             <Typography>
               No worries, we'll send you reset instructions.
diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
index f73e5edcf..5bb9d57d9 100644
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -1,14 +1,14 @@
-import "./index.css";
-import background from "../../assets/Images/background_pattern_decorative.png";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
-import ConfirmIcon from "../../assets/icons/confirm-icon.svg?react";
-import Button from "../../Components/Button";
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router";
 import { useDispatch } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice";
 import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import Button from "../../Components/Button";
+import background from "../../assets/Images/background_pattern_decorative.png";
+import ConfirmIcon from "../../assets/icons/confirm-icon.svg?react";
+import Logo from "../../assets/icons/bwu-icon.svg?react";
+import "./index.css";
 
 const NewPasswordConfirmed = () => {
   const theme = useTheme();
@@ -22,13 +22,56 @@ const NewPasswordConfirmed = () => {
   };
 
   return (
-    <div className="password-confirmed-page">
+    <Stack className="password-confirmed-page auth" overflow="hidden">
       <img
         className="background-pattern-svg"
         src={background}
         alt="background pattern"
       />
-      <form className="password-confirmed-form">
+      <Stack
+        direction="row"
+        alignItems="center"
+        px={theme.gap.large}
+        gap={theme.gap.small}
+      >
+        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
+        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
+      </Stack>
+      <Stack
+        width="100%"
+        maxWidth={600}
+        flex={1}
+        justifyContent="center"
+        p={theme.gap.xl}
+        pb={theme.gap.triplexl}
+        mx="auto"
+        sx={{
+          "& > .MuiStack-root": {
+            border: 1,
+            borderRadius: theme.shape.borderRadius,
+            borderColor: theme.palette.otherColors.graishWhite,
+            backgroundColor: theme.palette.otherColors.white,
+            padding: {
+              xs: theme.gap.large,
+              sm: theme.gap.xl,
+            },
+          },
+        }}
+      ></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");
+          }}
+          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 }}>
@@ -53,8 +96,8 @@ const NewPasswordConfirmed = () => {
             onClick={handleNavigate}
           />
         </Stack>
-      </form>
-    </div>
+      </form> */}
+    </Stack>
   );
 };
 
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index e66fc399b..feb48bfb7 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -1,26 +1,21 @@
 /* ////// */
 /* SHARED */
 /* ////// */
-.set-new-password-page,
-.password-confirmed-page {
+.set-new-password-page {
   display: flex;
   justify-content: center;
   height: var(--env-var-height-1);
 }
-.set-new-password-page h1.MuiTypography-root,
-.password-confirmed-page h1.MuiTypography-root {
+.set-new-password-page h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
   color: var(--env-var-color-1);
   font-weight: 600;
 }
 .set-new-password-page p.MuiTypography-root,
-.set-new-password-page button,
-.password-confirmed-page p.MuiTypography-root,
-.password-confirmed-page button {
+.set-new-password-page button {
   font-size: var(--env-var-font-size-medium);
 }
-.set-new-password-page button:not(.MuiIconButton-root),
-.password-confirmed-page button:not(.MuiIconButton-root) {
+.set-new-password-page button:not(.MuiIconButton-root) {
   height: 34px;
   border-radius: var(--env-var-radius-2);
   line-height: 0;
@@ -31,20 +26,15 @@
   margin-top: 65px;
   width: var(--env-var-width-2);
 }
-.set-new-password-page p.MuiTypography-root,
-.password-confirmed-page p.MuiTypography-root {
+.set-new-password-page p.MuiTypography-root {
   color: var(--env-var-color-2);
 }
 
-.set-new-password-page button:not(.MuiIconButton-root) svg,
-.password-confirmed-page button:not(.MuiIconButton-root) svg {
+.set-new-password-page button:not(.MuiIconButton-root) svg {
   margin-right: 5px;
 }
 
 .set-new-password-page
-  .MuiFormControl-root:has(#register-password-input)
-  + span.MuiTypography-root,
-.password-confirmed-page
   .MuiFormControl-root:has(#register-password-input)
   + span.MuiTypography-root {
   display: none;
@@ -129,6 +119,7 @@
 }
 
 .forgot-password-page h1,
-.check-email-page h1 {
+.check-email-page h1,
+.password-confirmed-page h1 {
   font-size: var(--env-var-font-size-large-plus);
-}
\ No newline at end of file
+}

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 2/2] 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>
   );
 };