Restructured set new password page

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;
 }

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>
   );

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>