From 999379e5ca8d470692f6b2f1e839f24744060dfd Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 27 Aug 2024 20:47:35 -0400
Subject: [PATCH] Set input errors to be absolute and not shift the height of
 the component

---
 Client/src/Pages/Auth/ForgotPassword.jsx    | 55 ++++++++++---------
 Client/src/Pages/Auth/Login.jsx             | 10 ++--
 Client/src/Pages/Auth/Register/Register.jsx | 59 ++++++++++++++++-----
 Client/src/Pages/Auth/SetNewPassword.jsx    | 28 ++++++++--
 Client/src/Pages/Auth/index.css             | 11 ++--
 5 files changed, 113 insertions(+), 50 deletions(-)

diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index 892b0d40c..485cc12f3 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -148,31 +148,36 @@ const ForgotPassword = () => {
               No worries, we&apos;ll send you reset instructions.
             </Typography>
           </Box>
-          <Box width="100%" textAlign="left">
-            <form noValidate spellCheck={false} onSubmit={handleSubmit}>
-              <Field
-                type="email"
-                id="forgot-password-email-input"
-                label="Email"
-                isRequired={true}
-                placeholder="Enter your email"
-                value={form.email}
-                onChange={handleChange}
-                error={errors.email}
-              />
-              <ButtonSpinner
-                disabled={errors.email !== undefined}
-                onClick={handleSubmit}
-                isLoading={isLoading}
-                level="primary"
-                label="Send instructions"
-                sx={{
-                  width: "100%",
-                  fontWeight: 400,
-                  mt: theme.spacing(10),
-                }}
-              />
-            </form>
+          <Box
+            component="form"
+            width="100%"
+            textAlign="left"
+            noValidate
+            spellCheck={false}
+            onSubmit={handleSubmit}
+          >
+            <Field
+              type="email"
+              id="forgot-password-email-input"
+              label="Email"
+              isRequired={true}
+              placeholder="Enter your email"
+              value={form.email}
+              onChange={handleChange}
+              error={errors.email}
+            />
+            <ButtonSpinner
+              disabled={errors.email !== undefined}
+              onClick={handleSubmit}
+              isLoading={isLoading}
+              level="primary"
+              label="Send instructions"
+              sx={{
+                width: "100%",
+                fontWeight: 400,
+                mt: theme.spacing(15),
+              }}
+            />
           </Box>
         </Stack>
       </Stack>
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index f67b63f6b..4d93795a6 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -132,7 +132,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
           <Typography component="h1">Log In</Typography>
           <Typography>Enter your email address</Typography>
         </Box>
-        <Box textAlign="left">
+        <Box textAlign="left" mb={theme.spacing(5)}>
           <form noValidate spellCheck={false} onSubmit={onSubmit}>
             <Field
               type="email"
@@ -225,7 +225,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
           <Typography component="h1">Log In</Typography>
           <Typography>Enter your password</Typography>
         </Box>
-        <Box textAlign="left">
+        <Box textAlign="left" mb={theme.spacing(5)}>
           <form noValidate spellCheck={false} onSubmit={onSubmit}>
             <Field
               type="password"
@@ -266,7 +266,11 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
           />
         </Stack>
         <Box textAlign="center">
-          <Typography className="forgot-p" display="inline-block">
+          <Typography
+            className="forgot-p"
+            display="inline-block"
+            color={theme.palette.common.main}
+          >
             Forgot password?
           </Typography>
           <Typography
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index e364b8162..3252767a2 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -139,7 +139,13 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
           <Typography>Enter your personal details</Typography>
         </Box>
         <Box textAlign="left">
-          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+          <Box
+            component="form"
+            noValidate
+            spellCheck={false}
+            onSubmit={onSubmit}
+            mb={theme.spacing(10)}
+          >
             <Field
               id="register-firstname-input"
               label="Name"
@@ -151,8 +157,14 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
               error={errors.firstName}
               ref={inputRef}
             />
-          </form>
-          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+          </Box>
+          <Box
+            component="form"
+            noValidate
+            spellCheck={false}
+            onSubmit={onSubmit}
+            mb={theme.spacing(5)}
+          >
             <Field
               id="register-lastname-input"
               label="Surname"
@@ -163,7 +175,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
               onChange={onChange}
               error={errors.lastName}
             />
-          </form>
+          </Box>
         </Box>
         <Stack direction="row" justifyContent="space-between">
           <Button
@@ -233,7 +245,13 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
           <Typography>Enter your email address</Typography>
         </Box>
         <Box textAlign="left">
-          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+          <Box
+            component="form"
+            noValidate
+            spellCheck={false}
+            onSubmit={onSubmit}
+            mb={theme.spacing(5)}
+          >
             <Field
               type="email"
               id="register-email-input"
@@ -247,7 +265,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
               error={errors.email}
               ref={inputRef}
             />
-          </form>
+          </Box>
         </Box>
         <Stack direction="row" justifyContent="space-between">
           <Button
@@ -316,8 +334,20 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
           <Typography component="h1">Sign Up</Typography>
           <Typography>Create your password</Typography>
         </Box>
-        <Box textAlign="left">
-          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+        <Box
+          textAlign="left"
+          sx={{
+            "& .input-error": {
+              display: "none",
+            },
+          }}
+        >
+          <Box
+            component="form"
+            noValidate
+            spellCheck={false}
+            onSubmit={onSubmit}
+          >
             <Field
               type="password"
               id="register-password-input"
@@ -330,8 +360,13 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
               error={errors.password}
               ref={inputRef}
             />
-          </form>
-          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+          </Box>
+          <Box
+            component="form"
+            noValidate
+            spellCheck={false}
+            onSubmit={onSubmit}
+          >
             <Field
               type="password"
               id="register-confirm-input"
@@ -343,10 +378,10 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
               onChange={onChange}
               error={errors.confirm}
             />
-          </form>
+          </Box>
           <Stack
             gap={theme.gap.small}
-            mb={{ xs: theme.spacing(8), sm: theme.spacing(12) }}
+            mb={{ xs: theme.spacing(6), sm: theme.spacing(8) }}
           >
             <Check
               text={
diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx
index 136940826..ca54e6fc8 100644
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -165,8 +165,21 @@ const SetNewPassword = () => {
               Your new password must be different to previously used passwords.
             </Typography>
           </Box>
-          <Box width="100%" textAlign="left">
-            <form noValidate spellCheck={false} onSubmit={handleSubmit}>
+          <Box
+            width="100%"
+            textAlign="left"
+            sx={{
+              "& .input-error": {
+                display: "none",
+              },
+            }}
+          >
+            <Box
+              component="form"
+              noValidate
+              spellCheck={false}
+              onSubmit={handleSubmit}
+            >
               <Field
                 type="password"
                 id="register-password-input"
@@ -177,8 +190,13 @@ const SetNewPassword = () => {
                 onChange={handleChange}
                 error={errors.password}
               />
-            </form>
-            <form noValidate spellCheck={false} onSubmit={handleSubmit}>
+            </Box>
+            <Box
+              component="form"
+              noValidate
+              spellCheck={false}
+              onSubmit={handleSubmit}
+            >
               <Field
                 type="password"
                 id="confirm-password-input"
@@ -189,7 +207,7 @@ const SetNewPassword = () => {
                 onChange={handleChange}
                 error={errors.confirm}
               />
-            </form>
+            </Box>
             <Stack gap={theme.spacing(4)} mb={theme.spacing(12)}>
               <Check
                 text={
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index 782f1c1b0..58987366d 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -76,11 +76,12 @@
   background-repeat: no-repeat;
 }
 
-.forgot-password-page h1,
-.check-email-page h1,
-.password-confirmed-page h1,
-.set-new-password-page h1 {
-  font-size: 22px;
+.auth .field {
+  position: relative;
+}
+.auth .input-error {
+  position: absolute;
+  top: calc(100% - 2px);
 }
 
 @media (max-width: 800px) {