From 938226015da36b586f83daf927f63e9742ee5276 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 13:16:02 -0400
Subject: [PATCH 1/3] Added bluewave icon and initial design

---
 Client/src/Pages/Auth/ForgotPassword.jsx | 57 ++++++++++++++++++------
 Client/src/Pages/Auth/index.css          |  8 ----
 2 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index 86db72076..fa1f216ed 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -1,18 +1,19 @@
-import "./index.css";
-import background from "../../assets/Images/background_pattern_decorative.png";
-import Logomark from "../../assets/icons/key.svg?react";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { createToast } from "../../Utils/toastUtils";
+import { useDispatch, useSelector } from "react-redux";
+import { forgotPassword } from "../../Features/Auth/authSlice";
 import { useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
 import Field from "../../Components/Inputs/Field";
-import { createToast } from "../../Utils/toastUtils";
-import { useDispatch, useSelector } from "react-redux";
-import { forgotPassword } from "../../Features/Auth/authSlice";
 import ButtonSpinner from "../../Components/ButtonSpinner";
-import { Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
 import Button from "../../Components/Button";
+import Logo from "../../assets/icons/bwu-icon.svg?react";
+import Key from "../../assets/icons/key.svg?react";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import background from "../../assets/Images/background_pattern_decorative.png";
+import "./index.css";
 
 const ForgotPassword = () => {
   const navigate = useNavigate();
@@ -92,13 +93,43 @@ const ForgotPassword = () => {
   };
 
   return (
-    <div className="forgot-password-page">
+    <Stack className="forgot-password-page auth" overflow="hidden">
       <img
         className="background-pattern-svg"
         src={background}
         alt="background pattern"
       />
-      <form className="forgot-password-form" onSubmit={handleSubmit}>
+      <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>
+      {/* <form className="forgot-password-form" onSubmit={handleSubmit}>
         <Stack direction="column" alignItems="center" gap={theme.gap.small}>
           <Logomark alt="Logomark" style={{ fill: "white" }} />
           <Typography component="h1" sx={{ mt: theme.gap.ml }}>
@@ -135,8 +166,8 @@ const ForgotPassword = () => {
             onClick={() => navigate("/login")}
           />
         </Stack>
-      </form>
-    </div>
+      </form> */}
+    </Stack>
   );
 };
 
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index 577f27799..45efc6ce3 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -3,7 +3,6 @@
 /* ////// */
 .set-new-password-page,
 .password-confirmed-page,
-.forgot-password-page,
 .check-email-page {
   display: flex;
   justify-content: center;
@@ -11,7 +10,6 @@
 }
 .set-new-password-page h1.MuiTypography-root,
 .password-confirmed-page h1.MuiTypography-root,
-.forgot-password-page h1.MuiTypography-root,
 .check-email-page h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
   color: var(--env-var-color-1);
@@ -21,8 +19,6 @@
 .set-new-password-page button,
 .password-confirmed-page p.MuiTypography-root,
 .password-confirmed-page button,
-.forgot-password-page p.MuiTypography-root,
-.forgot-password-page button,
 .check-email-page p.MuiTypography-root,
 .check-email-page button,
 .check-email-page span.MuiTypography-root {
@@ -30,7 +26,6 @@
 }
 .set-new-password-page button:not(.MuiIconButton-root),
 .password-confirmed-page button:not(.MuiIconButton-root),
-.forgot-password-page button:not(.MuiIconButton-root),
 .check-email-page button:not(.MuiIconButton-root) {
   height: 34px;
   border-radius: var(--env-var-radius-2);
@@ -39,21 +34,18 @@
 
 .set-new-password-form,
 .password-confirmed-form,
-.forgot-password-form,
 .check-email-form {
   margin-top: 65px;
   width: var(--env-var-width-2);
 }
 .set-new-password-page p.MuiTypography-root,
 .password-confirmed-page p.MuiTypography-root,
-.forgot-password-page p.MuiTypography-root,
 .check-email-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,
-.forgot-password-page button svg,
 .check-email-page button svg {
   margin-right: 5px;
 }

From 12992c8ae168e28985b2c31c83fef89e21cf9aa0 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 13:58:18 -0400
Subject: [PATCH 2/3] Final auth design

---
 Client/src/Pages/Auth/ForgotPassword.jsx | 117 +++++++++++------------
 Client/src/Pages/Auth/index.css          |   4 +
 2 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index fa1f216ed..ab8728f8c 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -1,4 +1,4 @@
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { createToast } from "../../Utils/toastUtils";
 import { useDispatch, useSelector } from "react-redux";
@@ -8,10 +8,8 @@ import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
 import Field from "../../Components/Inputs/Field";
 import ButtonSpinner from "../../Components/ButtonSpinner";
-import Button from "../../Components/Button";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Key from "../../assets/icons/key.svg?react";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import "./index.css";
 
@@ -26,10 +24,6 @@ const ForgotPassword = () => {
     email: "",
   });
 
-  const idMap = {
-    "forgot-password-email-input": "email",
-  };
-
   const handleSubmit = async (event) => {
     event.preventDefault();
 
@@ -41,11 +35,9 @@ const ForgotPassword = () => {
         error.details && error.details.length > 0
           ? error.details[0].message
           : "Error validating data.";
-      setErrors(err);
+      setErrors({ email: err });
       createToast({
-        variant: "info",
         body: err,
-        hasIcon: false,
       });
     } else {
       const action = await dispatch(forgotPassword(form));
@@ -72,24 +64,16 @@ const ForgotPassword = () => {
   };
 
   const handleChange = (event) => {
-    const { value, id } = event.target;
-    const name = idMap[id];
-    setForm((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
+    const { value } = event.target;
+    setForm({ email: value });
 
     const { error } = credentials.validate(
-      { [name]: value },
+      { email: value },
       { abortEarly: false }
     );
 
-    setErrors((prev) => {
-      const prevErrors = { ...prev };
-      if (error) prevErrors[name] = error.details[0].message;
-      else delete prevErrors[name];
-      return prevErrors;
-    });
+    if (error) setErrors({ email: error.details[0].message });
+    else delete errors.email;
   };
 
   return (
@@ -128,45 +112,56 @@ const ForgotPassword = () => {
             },
           },
         }}
-      ></Stack>
-      {/* <form className="forgot-password-form" onSubmit={handleSubmit}>
-        <Stack direction="column" alignItems="center" gap={theme.gap.small}>
-          <Logomark alt="Logomark" style={{ fill: "white" }} />
-          <Typography component="h1" sx={{ mt: theme.gap.ml }}>
-            Forgot password?
-          </Typography>
-          <Typography>
-            No worries, we'll send you reset instructions.
-          </Typography>
+      >
+        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+          <Box>
+            <Key />
+            <Typography component="h1">Forgot password?</Typography>
+            <Typography>
+              No worries, we'll send you reset instructions.
+            </Typography>
+          </Box>
+          <Box width="100%" maxWidth={400} textAlign="left">
+            <form noValidate spellCheck={false} onSubmit={handleSubmit}>
+              <Field
+                type="email"
+                id="forgot-password-email-input"
+                label="Email"
+                isRequired={true}
+                placeholder="Enter your email"
+                value={form.email}
+                onChange={handleChange}
+                error={errors.email}
+              />
+              <ButtonSpinner
+                disabled={errors.email !== undefined}
+                onClick={handleSubmit}
+                isLoading={isLoading}
+                level="primary"
+                label="Send instructions"
+                sx={{
+                  width: "100%",
+                  fontWeight: 400,
+                  mt: theme.gap.mlplus,
+                }}
+              />
+            </form>
+          </Box>
         </Stack>
-        <Stack gap={theme.gap.ml} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
-          <Field
-            type="email"
-            id="forgot-password-email-input"
-            label="Email"
-            isRequired={true}
-            placeholder="Enter your email"
-            value={form.email}
-            onChange={handleChange}
-            error={errors.email}
-          />
-          <ButtonSpinner
-            disabled={errors.email !== undefined}
-            onClick={handleSubmit}
-            isLoading={isLoading}
-            level="primary"
-            label="Reset password"
-            sx={{ mb: theme.gap.medium }}
-          />
-          <Button
-            level="tertiary"
-            label="Back to log in"
-            img={<ArrowBackRoundedIcon />}
-            sx={{ alignSelf: "center", width: "fit-content" }}
-            onClick={() => navigate("/login")}
-          />
-        </Stack>
-      </form> */}
+      </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>
     </Stack>
   );
 };
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index 45efc6ce3..23c77de8b 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -136,3 +136,7 @@
   width: 100%;
   max-width: 800px;
 }
+
+.forgot-password-page h1 {
+  font-size: var(--env-var-font-size-large-plus);
+}
\ No newline at end of file

From 7258a59e56a6a98ab06657127acfdcfec213fb2a Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 14:06:01 -0400
Subject: [PATCH 3/3] Added email autocomplete on navigate

---
 Client/src/Pages/Auth/ForgotPassword.jsx | 7 ++++++-
 Client/src/Pages/Auth/Login.jsx          | 9 ++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index ab8728f8c..c7aca10c9 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -3,7 +3,7 @@ import { useTheme } from "@emotion/react";
 import { createToast } from "../../Utils/toastUtils";
 import { useDispatch, useSelector } from "react-redux";
 import { forgotPassword } from "../../Features/Auth/authSlice";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
 import Field from "../../Components/Inputs/Field";
@@ -24,6 +24,11 @@ const ForgotPassword = () => {
     email: "",
   });
 
+  useEffect(() => {
+    const email = sessionStorage.getItem("email");
+    email && setForm({ email: sessionStorage.getItem("email") });
+  }, []);
+
   const handleSubmit = async (event) => {
     event.preventDefault();
 
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index eef972ec4..8f378286f 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -154,6 +154,13 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
     }
   }, []);
 
+  const handleNavigate = () => {
+    if (form.email !== "" && !errors.email) {
+      sessionStorage.setItem("email", form.email);
+    }
+    navigate("/forgot-password");
+  };
+
   return (
     <>
       <Stack gap={theme.gap.large} textAlign="center">
@@ -209,7 +216,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
             component="span"
             ml={theme.gap.xs}
             sx={{ userSelect: "none" }}
-            onClick={() => navigate("/forgot-password")}
+            onClick={handleNavigate}
           >
             Reset password
           </Typography>