From e2522d22970af9d978f9676384ae24c0c7683725 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 16:05:30 -0400
Subject: [PATCH 1/2] Added bluewave icon, initial design and removed redundant
 css code

---
 Client/src/Pages/Auth/SetNewPassword.jsx | 71 +++++++++++++++++++-----
 Client/src/Pages/Auth/index.css          | 46 +--------------
 2 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index ce95fb7a5..fd2c68fc3 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -1,20 +1,20 @@
-import "./index.css";
-import background from "../../assets/Images/background_pattern_decorative.png";
-import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
-import Check from "../../Components/Check/Check";
-import ButtonSpinner from "../../Components/ButtonSpinner";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import { useDispatch, useSelector } from "react-redux";
+import { setNewPassword } from "../../Features/Auth/authSlice";
+import { createToast } from "../../Utils/toastUtils";
+import { Box, Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
 import { useParams } from "react-router-dom";
 import { useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
+import Check from "../../Components/Check/Check";
+import ButtonSpinner from "../../Components/ButtonSpinner";
 import Field from "../../Components/Inputs/Field";
-import { useDispatch, useSelector } from "react-redux";
-import { setNewPassword } from "../../Features/Auth/authSlice";
-import { createToast } from "../../Utils/toastUtils";
-import { Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
+import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
 import Button from "../../Components/Button";
+import background from "../../assets/Images/background_pattern_decorative.png";
+import Logo from "../../assets/icons/bwu-icon.svg?react";
+import "./index.css";
 
 const SetNewPassword = () => {
   const navigate = useNavigate();
@@ -105,13 +105,54 @@ const SetNewPassword = () => {
   };
 
   return (
-    <div className="set-new-password-page">
+    <Stack className="set-new-password-page auth" overflow="hidden">
       <img
         className="background-pattern-svg"
         src={background}
         alt="background pattern"
       />
-      <form className="set-new-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>
+      <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="set-new-password-form" onSubmit={handleSubmit}>
         <Stack direction="column" alignItems="center" gap={theme.gap.small}>
           <LockIcon alt="lock icon" style={{ fill: "white" }} />
           <Typography component="h1" sx={{ mt: theme.gap.ml }}>
@@ -197,8 +238,8 @@ const SetNewPassword = () => {
             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 feb48bfb7..f7f2c211e 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -1,46 +1,3 @@
-/* ////// */
-/* SHARED */
-/* ////// */
-.set-new-password-page {
-  display: flex;
-  justify-content: center;
-  height: var(--env-var-height-1);
-}
-.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 {
-  font-size: var(--env-var-font-size-medium);
-}
-.set-new-password-page button:not(.MuiIconButton-root) {
-  height: 34px;
-  border-radius: var(--env-var-radius-2);
-  line-height: 0;
-}
-
-.set-new-password-form,
-.password-confirmed-form {
-  margin-top: 65px;
-  width: var(--env-var-width-2);
-}
-.set-new-password-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-}
-
-.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 {
-  display: none;
-  visibility: hidden;
-}
-
 /* AUTH */
 .auth {
   height: 100vh;
@@ -120,6 +77,7 @@
 
 .forgot-password-page h1,
 .check-email-page h1,
-.password-confirmed-page h1 {
+.password-confirmed-page h1,
+.set-new-password-page h1 {
   font-size: var(--env-var-font-size-large-plus);
 }

From 16c19930c4a19c2a1a6315a0b33fbf5e9590bb13 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 16:26:42 -0400
Subject: [PATCH 2/2] Final auth design

---
 Client/src/Pages/Auth/SetNewPassword.jsx | 174 +++++++++++------------
 1 file changed, 85 insertions(+), 89 deletions(-)

diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index fd2c68fc3..0124f035e 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -11,7 +11,6 @@ import Check from "../../Components/Check/Check";
 import ButtonSpinner from "../../Components/ButtonSpinner";
 import Field from "../../Components/Inputs/Field";
 import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
-import Button from "../../Components/Button";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import "./index.css";
@@ -140,7 +139,91 @@ const SetNewPassword = () => {
             },
           },
         }}
-      ></Stack>
+      >
+        <Stack gap={theme.gap.large} textAlign="center">
+          <Box>
+            <LockIcon alt="lock icon" />
+            <Typography component="h1">Set new password</Typography>
+            <Typography>
+              Your new password must be different to previously used passwords.
+            </Typography>
+          </Box>
+          <Box width="100%" textAlign="left">
+            <form noValidate spellCheck={false} onSubmit={handleSubmit}>
+              <Field
+                type="password"
+                id="register-password-input"
+                label="Password"
+                isRequired={true}
+                placeholder="••••••••"
+                value={form.password}
+                onChange={handleChange}
+                error={errors.password}
+              />
+            </form>
+            <form noValidate spellCheck={false} onSubmit={handleSubmit}>
+              <Field
+                type="password"
+                id="confirm-password-input"
+                label="Confirm password"
+                isRequired={true}
+                placeholder="••••••••"
+                value={form.confirm}
+                onChange={handleChange}
+                error={errors.confirm}
+              />
+            </form>
+            <Stack gap={theme.gap.small} mb={theme.gap.large}>
+              <Check
+                text="Must be at least 8 characters long"
+                variant={
+                  errors?.password === "Password is required"
+                    ? "error"
+                    : form.password === ""
+                    ? "info"
+                    : form.password.length < 8
+                    ? "error"
+                    : "success"
+                }
+              />
+              <Check
+                text="Must contain one special character and a number"
+                variant={
+                  errors?.password === "Password is required"
+                    ? "error"
+                    : form.password === ""
+                    ? "info"
+                    : !/^(?=.*[!@#$%^&*(),.?":{}|])(?=.*\d).+$/.test(
+                        form.password
+                      )
+                    ? "error"
+                    : "success"
+                }
+              />
+              <Check
+                text="Must contain at least one upper and lower character"
+                variant={
+                  errors?.password === "Password is required"
+                    ? "error"
+                    : form.password === ""
+                    ? "info"
+                    : !/^(?=.*[A-Z])(?=.*[a-z]).+$/.test(form.password)
+                    ? "error"
+                    : "success"
+                }
+              />
+            </Stack>
+          </Box>
+          <ButtonSpinner
+            disabled={Object.keys(errors).length !== 0}
+            isLoading={isLoading}
+            onClick={handleSubmit}
+            level="primary"
+            label="Reset password"
+            sx={{ width: "100%" }}
+          />
+        </Stack>
+      </Stack>
       <Box textAlign="center" p={theme.gap.large}>
         <Typography display="inline-block">Go back to —</Typography>
         <Typography
@@ -152,93 +235,6 @@ const SetNewPassword = () => {
           Log In
         </Typography>
       </Box>
-      {/* <form className="set-new-password-form" onSubmit={handleSubmit}>
-        <Stack direction="column" alignItems="center" gap={theme.gap.small}>
-          <LockIcon alt="lock icon" style={{ fill: "white" }} />
-          <Typography component="h1" sx={{ mt: theme.gap.ml }}>
-            Set new password
-          </Typography>
-          <Typography sx={{ textAlign: "center" }}>
-            Your new password must be different to previously used passwords.
-          </Typography>
-        </Stack>
-        <Stack gap={theme.gap.large} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
-          <Field
-            type="password"
-            id="register-password-input"
-            label="Password"
-            isRequired={true}
-            placeholder="••••••••"
-            value={form.password}
-            onChange={handleChange}
-            error={errors.password}
-          />
-          <Field
-            type="password"
-            id="confirm-password-input"
-            label="Confirm password"
-            isRequired={true}
-            placeholder="••••••••"
-            value={form.confirm}
-            onChange={handleChange}
-            error={errors.confirm}
-          />
-          <Stack gap={theme.gap.small}>
-            <Check
-              text="Must be at least 8 characters long"
-              variant={
-                errors?.password === "Password is required"
-                  ? "error"
-                  : form.password === ""
-                  ? "info"
-                  : form.password.length < 8
-                  ? "error"
-                  : "success"
-              }
-            />
-            <Check
-              text="Must contain one special character and a number"
-              variant={
-                errors?.password === "Password is required"
-                  ? "error"
-                  : form.password === ""
-                  ? "info"
-                  : !/^(?=.*[!@#$%^&*(),.?":{}|])(?=.*\d).+$/.test(
-                      form.password
-                    )
-                  ? "error"
-                  : "success"
-              }
-            />
-            <Check
-              text="Must contain at least one upper and lower character"
-              variant={
-                errors?.password === "Password is required"
-                  ? "error"
-                  : form.password === ""
-                  ? "info"
-                  : !/^(?=.*[A-Z])(?=.*[a-z]).+$/.test(form.password)
-                  ? "error"
-                  : "success"
-              }
-            />
-          </Stack>
-          <ButtonSpinner
-            disabled={Object.keys(errors).length !== 0}
-            isLoading={isLoading}
-            onClick={handleSubmit}
-            level="primary"
-            label="Reset password"
-          />
-          <Button
-            level="tertiary"
-            label="Back to log in"
-            img={<ArrowBackRoundedIcon />}
-            sx={{ alignSelf: "center", width: "fit-content" }}
-            onClick={() => navigate("/login")}
-          />
-        </Stack>
-      </form> */}
     </Stack>
   );
 };