From ca9db41205714d0d0ba3b6d72f538324b86edbe0 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 19:25:07 -0400
Subject: [PATCH] Added responsive design to authentication pages

---
 Client/src/Components/Check/Check.jsx         |  2 +-
 Client/src/Components/Check/check.css         |  2 +-
 Client/src/Pages/Auth/CheckEmail.jsx          | 17 +++---
 Client/src/Pages/Auth/ForgotPassword.jsx      | 17 +++---
 Client/src/Pages/Auth/Login.jsx               | 19 +++---
 .../src/Pages/Auth/NewPasswordConfirmed.jsx   | 15 +++--
 Client/src/Pages/Auth/Register/Register.jsx   | 52 +++++++++++-----
 Client/src/Pages/Auth/SetNewPassword.jsx      | 40 +++++++++---
 Client/src/Pages/Auth/index.css               | 61 +++++++++++++++++--
 Client/src/index.css                          |  8 ---
 10 files changed, 163 insertions(+), 70 deletions(-)

diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx
index 1b246566f..645e0b5e2 100644
--- a/Client/src/Components/Check/Check.jsx
+++ b/Client/src/Components/Check/Check.jsx
@@ -46,7 +46,7 @@ const Check = ({ text, variant = "info", outlined = false }) => {
 };
 
 Check.propTypes = {
-  text: PropTypes.string.isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   variant: PropTypes.oneOf(["info", "error", "success"]),
   outlined: PropTypes.bool,
 };
diff --git a/Client/src/Components/Check/check.css b/Client/src/Components/Check/check.css
index cb24be466..f1432d2bc 100644
--- a/Client/src/Components/Check/check.css
+++ b/Client/src/Components/Check/check.css
@@ -1,4 +1,4 @@
-.check span.MuiTypography-root {
+.check > span.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
   color: var(--env-var-color-2);
   opacity: 0.8;
diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index 88a4afa1f..0ede66831 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -86,10 +86,9 @@ const CheckEmail = () => {
 
   return (
     <Stack className="check-email-page auth" overflow="hidden">
-      <img
+      <Box
         className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
       />
       <Stack
         direction="row"
@@ -105,8 +104,8 @@ const CheckEmail = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
@@ -121,11 +120,15 @@ const CheckEmail = () => {
           },
         }}
       >
-        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+        <Stack
+          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          alignItems="center"
+          textAlign="center"
+        >
           <Box>
             <EmailIcon alt="email icon" />
             <Typography component="h1">Check your email</Typography>
-            <Typography mt={theme.gap.xs} sx={{ width: "max-content" }}>
+            <Typography mt={theme.gap.xs}>
               We sent a password reset link to{" "}
               <Typography className="email-sent-to" component="span">
                 {email || "username@email.com"}
diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index e1f6ae56e..c51417c91 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -88,10 +88,9 @@ const ForgotPassword = () => {
 
   return (
     <Stack className="forgot-password-page auth" overflow="hidden">
-      <img
+      <Box
         className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
       />
       <Stack
         direction="row"
@@ -107,8 +106,8 @@ const ForgotPassword = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
@@ -123,7 +122,11 @@ const ForgotPassword = () => {
           },
         }}
       >
-        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+        <Stack
+          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          alignItems="center"
+          textAlign="center"
+        >
           <Box>
             <Key alt="password key icon" />
             <Typography component="h1">Forgot password?</Typography>
@@ -131,7 +134,7 @@ const ForgotPassword = () => {
               No worries, we'll send you reset instructions.
             </Typography>
           </Box>
-          <Box width="100%" maxWidth={400} textAlign="left">
+          <Box width="100%" textAlign="left">
             <form noValidate spellCheck={false} onSubmit={handleSubmit}>
               <Field
                 type="email"
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 8f378286f..ad5fcdbce 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -28,7 +28,11 @@ const LandingPage = ({ onContinue }) => {
 
   return (
     <>
-      <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+      <Stack
+        gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+        alignItems="center"
+        textAlign="center"
+      >
         <Box>
           <Typography component="h1">Log In</Typography>
           <Typography>We are pleased to see you again!</Typography>
@@ -82,7 +86,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
         <Box>
           <Typography component="h1">Log In</Typography>
           <Typography>Enter your email address</Typography>
@@ -163,7 +167,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
         <Box>
           <Typography component="h1">Log In</Typography>
           <Typography>Enter your password</Typography>
@@ -336,10 +340,9 @@ const Login = () => {
 
   return (
     <Stack className="login-page auth" overflow="hidden">
-      <img
+      <Box
         className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
       />
       <Stack
         direction="row"
@@ -355,8 +358,8 @@ const Login = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
index 12a6995f9..be6aeb9b5 100644
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -23,10 +23,9 @@ const NewPasswordConfirmed = () => {
 
   return (
     <Stack className="password-confirmed-page auth" overflow="hidden">
-      <img
+      <Box
         className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
       />
       <Stack
         direction="row"
@@ -42,8 +41,8 @@ const NewPasswordConfirmed = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
@@ -58,7 +57,11 @@ const NewPasswordConfirmed = () => {
           },
         }}
       >
-        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+        <Stack
+          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          alignItems="center"
+          textAlign="center"
+        >
           <Box>
             <ConfirmIcon alt="password confirm icon" />
             <Typography component="h1">Password reset</Typography>
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 855cc3c54..30b439f16 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -31,7 +31,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
 
   return (
     <>
-      <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+      <Stack
+        gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+        alignItems="center"
+        textAlign="center"
+      >
         <Box>
           <Typography component="h1">Sign Up</Typography>
           <Typography>
@@ -87,7 +91,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
         <Box>
           <Typography component="h1">Sign Up</Typography>
           <Typography>Enter your personal details</Typography>
@@ -127,7 +131,6 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
             img={<ArrowBackRoundedIcon />}
             onClick={onBack}
             sx={{
-              mb: theme.gap.medium,
               px: theme.gap.ml,
               "& svg.MuiSvgIcon-root": {
                 mr: theme.gap.xs,
@@ -171,7 +174,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
         <Box>
           <Typography component="h1">Sign Up</Typography>
           <Typography>Enter your email address</Typography>
@@ -200,7 +203,6 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
             img={<ArrowBackRoundedIcon />}
             onClick={onBack}
             sx={{
-              mb: theme.gap.medium,
               px: theme.gap.ml,
               "& svg.MuiSvgIcon-root": {
                 mr: theme.gap.xs,
@@ -244,7 +246,7 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
 
   return (
     <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
         <Box>
           <Typography component="h1">Sign Up</Typography>
           <Typography>Create your password</Typography>
@@ -277,9 +279,17 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
               error={errors.confirm}
             />
           </form>
-          <Stack gap={theme.gap.small} mb={theme.gap.large}>
+          <Stack
+            gap={theme.gap.small}
+            mb={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          >
             <Check
-              text="Must be at least 8 characters long"
+              text={
+                <>
+                  <Typography component="span">Must be at least</Typography> 8
+                  characters long
+                </>
+              }
               variant={
                 errors?.password === "Password is required"
                   ? "error"
@@ -291,7 +301,12 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
               }
             />
             <Check
-              text="Must contain one special character and a number"
+              text={
+                <>
+                  <Typography component="span">Must contain</Typography> one
+                  special character and a number
+                </>
+              }
               variant={
                 errors?.password === "Password is required"
                   ? "error"
@@ -305,7 +320,14 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
               }
             />
             <Check
-              text="Must contain at least one upper and lower character"
+              text={
+                <>
+                  <Typography component="span">
+                    Must contain at least
+                  </Typography>{" "}
+                  one upper and lower character
+                </>
+              }
               variant={
                 errors?.password === "Password is required"
                   ? "error"
@@ -326,7 +348,6 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
             img={<ArrowBackRoundedIcon />}
             onClick={onBack}
             sx={{
-              mb: theme.gap.medium,
               px: theme.gap.ml,
               "& svg.MuiSvgIcon-root": {
                 mr: theme.gap.xs,
@@ -509,10 +530,9 @@ const Register = ({ isAdmin }) => {
 
   return (
     <Stack className="register-page auth" overflow="hidden">
-      <img
+      <Box
         className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
       />
       <Stack
         direction="row"
@@ -528,8 +548,8 @@ const Register = ({ isAdmin }) => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index 0124f035e..fab448ffa 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -105,10 +105,9 @@ const SetNewPassword = () => {
 
   return (
     <Stack className="set-new-password-page auth" overflow="hidden">
-      <img
+      <Box
         className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
       />
       <Stack
         direction="row"
@@ -124,8 +123,8 @@ const SetNewPassword = () => {
         maxWidth={600}
         flex={1}
         justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.large}
         mx="auto"
         sx={{
           "& > .MuiStack-root": {
@@ -140,7 +139,11 @@ const SetNewPassword = () => {
           },
         }}
       >
-        <Stack gap={theme.gap.large} textAlign="center">
+        <Stack
+          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          alignItems="center"
+          textAlign="center"
+        >
           <Box>
             <LockIcon alt="lock icon" />
             <Typography component="h1">Set new password</Typography>
@@ -175,7 +178,12 @@ const SetNewPassword = () => {
             </form>
             <Stack gap={theme.gap.small} mb={theme.gap.large}>
               <Check
-                text="Must be at least 8 characters long"
+                text={
+                  <>
+                    <Typography component="span">Must be at least</Typography> 8
+                    characters long
+                  </>
+                }
                 variant={
                   errors?.password === "Password is required"
                     ? "error"
@@ -187,7 +195,12 @@ const SetNewPassword = () => {
                 }
               />
               <Check
-                text="Must contain one special character and a number"
+                text={
+                  <>
+                    <Typography component="span">Must contain</Typography> one
+                    special character and a number
+                  </>
+                }
                 variant={
                   errors?.password === "Password is required"
                     ? "error"
@@ -201,7 +214,14 @@ const SetNewPassword = () => {
                 }
               />
               <Check
-                text="Must contain at least one upper and lower character"
+                text={
+                  <>
+                    <Typography component="span">
+                      Must contain at least
+                    </Typography>{" "}
+                    one upper and lower character
+                  </>
+                }
                 variant={
                   errors?.password === "Password is required"
                     ? "error"
@@ -220,7 +240,7 @@ const SetNewPassword = () => {
             onClick={handleSubmit}
             level="primary"
             label="Reset password"
-            sx={{ width: "100%" }}
+            sx={{ width: "100%", maxWidth: 400 }}
           />
         </Stack>
       </Stack>
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index f7f2c211e..979ae191c 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -8,10 +8,8 @@
   color: var(--env-var-color-3);
 }
 .auth button:not(.MuiIconButton-root),
-.auth .field h3.MuiTypography-root,
-.auth .field input,
-.auth .field .input-error,
 .auth p,
+.auth .field input,
 .auth span {
   font-size: var(--env-var-font-size-medium-plus);
 }
@@ -55,6 +53,8 @@
   width: 24px;
   height: 24px;
 }
+.auth .field h3.MuiTypography-root,
+.auth .field .input-error,
 .auth .check span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
 }
@@ -66,18 +66,67 @@
   cursor: default;
 }
 
-.auth > .MuiStack-root:nth-of-type(1) {
+.auth > .MuiStack-root:nth-of-type(2) {
   height: var(--env-var-nav-bar-height);
 }
 .auth .background-pattern-svg {
-  top: 14%;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -30%);
+  z-index: -1;
+
   width: 100%;
   max-width: 800px;
+  height: 100%;
+  max-height: 800px;
+
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 .forgot-password-page h1,
 .check-email-page h1,
 .password-confirmed-page h1,
 .set-new-password-page h1 {
-  font-size: var(--env-var-font-size-large-plus);
+  font-size: 22px;
+}
+
+@media (max-width: 800px) {
+  .auth h1 {
+    font-size: var(--env-var-font-size-large-plus);
+  }
+  .auth button:not(.MuiIconButton-root),
+  .auth .field input,
+  .auth p,
+  .auth span {
+    font-size: var(--env-var-font-size-medium);
+  }
+  .auth button:not(.MuiIconButton-root),
+  .auth .field .MuiInputBase-root:has(input) {
+    height: 36px;
+  }
+  .auth .check span.MuiTypography-root,
+  .auth .field .input-error,
+  .auth .field h3.MuiTypography-root {
+    font-size: var(--env-var-font-size-small-plus);
+  }
+  .auth .check span > span {
+    display: none;
+  }
+  .auth form + form {
+    margin: var(--env-var-spacing-1-plus) 0;
+  }
+  .auth .background-pattern-svg {
+    max-width: 750px;
+    max-height: 750px;
+  }
+
+  .forgot-password-page h1,
+  .check-email-page h1,
+  .password-confirmed-page h1,
+  .set-new-password-page h1 {
+    font-size: 18px;
+  }
 }
diff --git a/Client/src/index.css b/Client/src/index.css
index 5693ddaa5..9e404d61c 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -155,14 +155,6 @@ button:focus-visible {
   border-radius: 4px;
 }
 
-.background-pattern-svg {
-  position: absolute;
-  top: -5%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: -1;
-}
-
 .MuiTouchRipple-root {
   display: none;
 }