Added forgot password button

Client/src/Pages/Auth/Login.jsx

@@ -144,6 +144,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
  */
 const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
   const theme = useTheme();
+  const navigate = useNavigate();
   const inputRef = useRef(null);
 
   useEffect(() => {
@@ -194,10 +195,23 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
             level="primary"
             label="Continue"
             onClick={onSubmit}
-            disabled={errors.email && true}
+            disabled={errors.password && true}
             sx={{ width: "30%" }}
           />
         </Stack>
+        <Box textAlign="center">
+          <Typography className="forgot-p" display="inline-block">
+            Forgot password?
+          </Typography>
+          <Typography
+            component="span"
+            ml={theme.gap.xs}
+            sx={{ userSelect: "none" }}
+            onClick={() => navigate("/forgot-password")}
+          >
+            Reset password
+          </Typography>
+        </Box>
       </Stack>
     </>
   );
@@ -292,6 +306,9 @@ const Login = () => {
             body: "Welcome back! You're successfully logged in.",
           });
         } else {
+          setErrors({
+            password: "The password you provided does not match our records",
+          });
           if (action.payload) {
             // dispatch errors
             createToast({
@@ -368,7 +385,7 @@ const Login = () => {
         )}
       </Stack>
       <Box textAlign="center" p={theme.gap.large}>
-        <Typography display="inline-block">Don't have an account? -</Typography>
+        <Typography display="inline-block">Don't have an account? —</Typography>
         <Typography
           component="span"
           ml={theme.gap.xs}

Client/src/Pages/Auth/index.css

@@ -116,17 +116,22 @@
   font-weight: 600;
   color: var(--env-var-color-3);
 }
+.login-page button:not(.MuiIconButton-root),
+.login-page .field h3.MuiTypography-root,
+.login-page .field input,
+.login-page .field .input-error
+.login-page p,
+.login-page .forgot-p + span {
+  font-size: var(--env-var-font-size-medium-plus);
+}
 .login-page p {
-  font-size: var(--env-var-font-size-large);
   color: var(--env-var-color-2-light);
 }
 .login-page .field h3.MuiTypography-root,
 .login-page .field input {
   color: var(--env-var-color-5);
 }
-.login-page .tos-p {
-  font-size: var(--env-var-font-size-medium-plus);
-}
+
 .login-page span {
   font-size: inherit;
 }
@@ -149,25 +154,20 @@
 .login-page p + span:hover {
   opacity: 1;
 }
-.login-page button:not(.MuiIconButton-root),
-.login-page .field h3.MuiTypography-root,
-.login-page .field input,
-.login-page .field .input-error {
-  font-size: var(--env-var-font-size-medium-plus);
-}
 .login-page button:not(.MuiIconButton-root) {
+  user-select: none;
   border-radius: var(--env-var-radius-2);
   line-height: 1;
 }
 .login-page button:not(.MuiIconButton-root),
 .login-page .field .MuiInputBase-root:has(input) {
-  height: 40px;
+  height: 38px;
 }
 .login-page .field svg {
   width: 24px;
   height: 24px;
 }
-.login-page .field .MuiIconButton-root{
+.login-page .field .MuiIconButton-root {
   padding: 4px;
 }