From aad89cf0c317eeb7c1fd20aa248ed0ddddbebdb0 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 16 Jul 2024 16:38:27 -0400
Subject: [PATCH] Restructured set new password page

---
 Client/src/Pages/SetNewPassword/index.css    |  83 +++++----------
 Client/src/Pages/SetNewPassword/index.jsx    | 103 +++++++++++--------
 Client/src/assets/Images/lock-icon.png       | Bin 1724 -> 0 bytes
 Client/src/assets/icons/lock-button-icon.svg |  18 ++++
 4 files changed, 108 insertions(+), 96 deletions(-)
 delete mode 100644 Client/src/assets/Images/lock-icon.png
 create mode 100644 Client/src/assets/icons/lock-button-icon.svg

diff --git a/Client/src/Pages/SetNewPassword/index.css b/Client/src/Pages/SetNewPassword/index.css
index 183e8d21f..db7160d85 100644
--- a/Client/src/Pages/SetNewPassword/index.css
+++ b/Client/src/Pages/SetNewPassword/index.css
@@ -1,63 +1,36 @@
 .set-new-password-page {
-  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
-  min-height: var(--env-var-height-1);
+  height: var(--env-var-height-1);
+}
+.set-new-password-page button:not(.MuiIconButton-root) {
+  height: 34px;
+  border-radius: var(--env-var-radius-2);
+  line-height: 0;
+}
+.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 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;
 }
 
 .set-new-password-form {
+  margin-top: 65px;
   width: var(--env-var-width-2);
-  margin: 90px auto;
-}
-
-.set-new-password-form-header {
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.set-new-password-form-gap-large {
-  height: var(--env-var-spacing-3);
-}
-
-.set-new-password-form-gap-medium {
-  height: var(--env-var-spacing-2);
-}
-
-.set-new-password-form-gap-small {
-  height: var(--env-var-spacing-1);
-}
-
-.set-new-password-form-heading {
-  font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-1);
-  font-weight: 700;
-}
-
-.set-new-password-form-subheading {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
-  font-weight: 600;
-}
-
-.set-new-password-back-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.set-new-password-back-button-img {
-  width: var(--env-var-img-width-1);
-  height: var(--env-var-img-width-1);
-  margin-right: 5px;
-  align-items: center;
-}
-
-.set-new-password-back-button-text {
-  height: var(--env-var-img-width-1);
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
-  font-weight: 600;
-  align-items: center;
 }
diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/SetNewPassword/index.jsx
index 56a18fcff..f224db365 100644
--- a/Client/src/Pages/SetNewPassword/index.jsx
+++ b/Client/src/Pages/SetNewPassword/index.jsx
@@ -1,9 +1,9 @@
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import "./index.css";
-import LockIcon from "../../assets/Images/lock-icon.png";
+import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
 import Check from "../../Components/Check/Check";
 import ButtonSpinner from "../../Components/ButtonSpinner";
-import LeftArrow from "../../assets/Images/arrow-left.png";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import { useParams } from "react-router-dom";
 import { useState } from "react";
 import { credentials } from "../../Validation/validation";
@@ -12,10 +12,14 @@ 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 Button from "../../Components/Button";
 
 const SetNewPassword = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
+  const theme = useTheme();
 
   const [errors, setErrors] = useState({});
   const [form, setForm] = useState({
@@ -112,21 +116,16 @@ const SetNewPassword = () => {
     <div className="set-new-password-page">
       <BackgroundPattern />
       <form className="set-new-password-form" onSubmit={handleSubmit}>
-        <div className="set-new-password-form-header">
-          <img
-            className="set-new-password-form-header-logo"
-            src={LockIcon}
-            alt="LockIcon"
-          />
-          <div className="set-new-password-form-gap-medium" />
-          <div className="set-new-password-form-heading">Set new password</div>
-          <div className="set-new-password-form-gap-small" />
-          <div className="set-new-password-form-subheading">
+        <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.
-          </div>
-        </div>
-        <div className="set-new-password-form-gap-large"></div>
-        <div className="set-new-password-form-content">
+          </Typography>
+        </Stack>
+        <Stack gap={theme.gap.large} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
           <Field
             type="password"
             id="register-password-input"
@@ -137,7 +136,6 @@ const SetNewPassword = () => {
             onChange={handleChange}
             error={errors.password}
           />
-          <div className="set-new-password-form-gap-medium"></div>
           <Field
             type="password"
             id="confirm-password-input"
@@ -148,38 +146,61 @@ const SetNewPassword = () => {
             onChange={handleChange}
             error={errors.confirm}
           />
-          <div className="set-new-password-form-gap-medium"></div>
-          <div className="set-new-password-form-checks">
-            <Check text="Must be at least 8 characters" />
-            <div className="set-new-password-form-gap-small"></div>
-            <Check text="Must contain one special character" />
-          </div>
-          <div className="set-new-password-form-gap-medium"></div>
+          <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"
-            sx={{
-              width: "100%",
-              fontSize: "13px",
-              fontWeight: "200",
-              height: "35px",
-            }}
           />
-        </div>
-        <div className="set-new-password-form-gap-medium"></div>
-        <div className="set-new-password-back-button">
-          <img
-            className="set-new-password-back-button-img"
-            src={LeftArrow}
-            alt="LeftArrow"
+          <Button
+            level="tertiary"
+            label="Back to log in"
+            img={<ArrowBackRoundedIcon />}
+            sx={{ alignSelf: "center", width: "fit-content" }}
+            onClick={() => navigate("/login")}
           />
-          <div className="set-new-password-back-button-text">
-            Back to log in
-          </div>
-        </div>
+        </Stack>
       </form>
     </div>
   );
diff --git a/Client/src/assets/Images/lock-icon.png b/Client/src/assets/Images/lock-icon.png
deleted file mode 100644
index 163adad87ac1ede49e4e12457bf227dd5fdb22f6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1724
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
ST6cW_0000<MNUMnLSTZ=gDxxp

diff --git a/Client/src/assets/icons/lock-button-icon.svg b/Client/src/assets/icons/lock-button-icon.svg
new file mode 100644
index 000000000..5048a6a80
--- /dev/null
+++ b/Client/src/assets/icons/lock-button-icon.svg
@@ -0,0 +1,18 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_137_19004)">
+<path d="M2.5 13C2.5 6.64873 7.64873 1.5 14 1.5H46C52.3513 1.5 57.5 6.64873 57.5 13V45C57.5 51.3513 52.3513 56.5 46 56.5H14C7.64873 56.5 2.5 51.3513 2.5 45V13Z" stroke="#EAECF0" shape-rendering="crispEdges"/>
+<path d="M35.8334 26.6667V24.3333C35.8334 21.1117 33.2217 18.5 30.0001 18.5C26.7784 18.5 24.1667 21.1117 24.1667 24.3333V26.6667M30.0001 31.9167V34.25M26.2667 39.5H33.7334C35.6936 39.5 36.6737 39.5 37.4224 39.1185C38.081 38.783 38.6164 38.2475 38.9519 37.589C39.3334 36.8403 39.3334 35.8602 39.3334 33.9V32.2667C39.3334 30.3065 39.3334 29.3264 38.9519 28.5777C38.6164 27.9191 38.081 27.3837 37.4224 27.0481C36.6737 26.6667 35.6936 26.6667 33.7334 26.6667H26.2667C24.3066 26.6667 23.3265 26.6667 22.5778 27.0481C21.9192 27.3837 21.3838 27.9191 21.0482 28.5777C20.6667 29.3264 20.6667 30.3065 20.6667 32.2667V33.9C20.6667 35.8602 20.6667 36.8403 21.0482 37.589C21.3838 38.2475 21.9192 38.783 22.5778 39.1185C23.3265 39.5 24.3066 39.5 26.2667 39.5Z" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_137_19004" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_137_19004"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_137_19004" result="shape"/>
+</filter>
+</defs>
+</svg>