From 3cc01db55f4db063c53a3900dece207d237ab33d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 13:49:38 -0700
Subject: [PATCH] Wrapped login and register in forms

---
 Client/src/Components/Button/index.jsx        |   7 +-
 .../TextFields/Email/EmailTextField.jsx       |   2 +
 .../TextFields/Password/PasswordTextField.jsx |   2 +
 .../Components/TextFields/Text/TextField.jsx  |   2 +
 Client/src/Pages/Login/index.jsx              |  11 +-
 Client/src/Pages/Register/index.jsx           | 149 +++++++++---------
 6 files changed, 92 insertions(+), 81 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 6f67f0c02..72c438514 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -36,6 +36,7 @@ const levelConfig = {
  * @component
  * @param {Object} props
  * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The level of the button
+ * @param {string} props.type - The type of the button
  * @param {string} props.label - The label of the button
  * @param {React.ReactNode} props.img - Image for button
  * @param {boolean} [props.disabled] - Whether the button is disabled
@@ -44,13 +45,14 @@ const levelConfig = {
  * @returns {JSX.Element}
  * @example
  * // Render an error button
- * <Button level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
+ * <Button type="submit" level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ level, label, disabled, img, onClick, sx }) => {
+const Button = ({ type, level, label, disabled, img, onClick, sx }) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton
+      type={type}
       variant={variant}
       color={color}
       disabled={disabled}
@@ -67,6 +69,7 @@ const Button = ({ level, label, disabled, img, onClick, sx }) => {
 };
 
 Button.propTypes = {
+  type: PropTypes.string,
   level: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   img: PropTypes.node,
diff --git a/Client/src/Components/TextFields/Email/EmailTextField.jsx b/Client/src/Components/TextFields/Email/EmailTextField.jsx
index 64189b395..e75f92689 100644
--- a/Client/src/Components/TextFields/Email/EmailTextField.jsx
+++ b/Client/src/Components/TextFields/Email/EmailTextField.jsx
@@ -32,6 +32,7 @@ const EmailTextField = ({
   label = "Email",
   variant,
   placeholder,
+  autoComplete,
   icon,
   helperText,
   error,
@@ -60,6 +61,7 @@ const EmailTextField = ({
           id={id}
           variant={variant}
           placeholder={placeholder}
+          autoComplete={autoComplete}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
diff --git a/Client/src/Components/TextFields/Password/PasswordTextField.jsx b/Client/src/Components/TextFields/Password/PasswordTextField.jsx
index e5aa07a96..b0c18de8d 100644
--- a/Client/src/Components/TextFields/Password/PasswordTextField.jsx
+++ b/Client/src/Components/TextFields/Password/PasswordTextField.jsx
@@ -22,6 +22,7 @@ const PasswordTextField = ({
   onChange,
   id,
   label = "Password",
+  autoComplete,
   variant,
   placeholder,
   icon,
@@ -48,6 +49,7 @@ const PasswordTextField = ({
         <TextField
           onChange={onChange}
           type="password"
+          autoComplete={autoComplete}
           error={error}
           className="password-text-field-input"
           id={id}
diff --git a/Client/src/Components/TextFields/Text/TextField.jsx b/Client/src/Components/TextFields/Text/TextField.jsx
index 40e9fcbee..8fa177844 100644
--- a/Client/src/Components/TextFields/Text/TextField.jsx
+++ b/Client/src/Components/TextFields/Text/TextField.jsx
@@ -19,6 +19,7 @@ import { useTheme } from "@mui/material";
  */
 const StringTextField = ({
   onChange,
+  autoComplete,
   id,
   label,
   variant,
@@ -51,6 +52,7 @@ const StringTextField = ({
           id={id}
           variant={variant}
           placeholder={placeholder}
+          autoComplete={autoComplete}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx
index 8bee2d1d4..1bf2ad9c9 100644
--- a/Client/src/Pages/Login/index.jsx
+++ b/Client/src/Pages/Login/index.jsx
@@ -46,7 +46,8 @@ const Login = () => {
     }
   }, [form]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
     try {
       await loginValidation.validateAsync(form, { abortEarly: false });
       const action = await dispatch(login(form));
@@ -84,7 +85,7 @@ const Login = () => {
   return (
     <div className="login-page">
       <BackgroundPattern></BackgroundPattern>
-      <div className="login-form">
+      <form className="login-form" onSubmit={handleSubmit}>
         <div className="login-form-header">
           <img
             className="login-form-header-logo"
@@ -101,6 +102,7 @@ const Login = () => {
             error={errors.email ? true : false}
             helperText={errors.email ? errors.email : ""}
             placeholder="Enter your email"
+            autoComplete="username"
             id="login-email-input"
           />
           <div className="login-form-v2-spacing" />
@@ -109,6 +111,7 @@ const Login = () => {
             error={errors.password ? true : false}
             helperText={errors.password ? errors.password : ""}
             placeholder="Password"
+            autoComplete="current-password"
             id="login-password-input"
           />
         </div>
@@ -120,10 +123,10 @@ const Login = () => {
         <div className="login-form-v3-spacing" />
         <div className="login-form-actions">
           <Button
+            type="submit"
             level="primary"
             label="Sign in"
             sx={{ width: "100%" }}
-            onClick={handleSubmit}
           />
           <div className="login-form-v-spacing" />
           <Button
@@ -138,7 +141,7 @@ const Login = () => {
           Don’t have an account?
           <span className="new-account-option-span">Sign up</span>
         </div>
-      </div>
+      </form>
     </div>
   );
 };
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index 70181e194..5f8622e8b 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -59,7 +59,8 @@ const Register = () => {
     setForm(newForm);
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
     try {
       await registerValidation.validateAsync(form, { abortEarly: false });
       const action = await dispatch(register(form));
@@ -94,82 +95,80 @@ const Register = () => {
   return (
     <div className="register-page">
       <BackgroundPattern></BackgroundPattern>
-      <form>
-        <div className="register-form">
-          <div className="register-form-header">
-            <img
-              className="register-form-header-logo"
-              src={Logomark}
-              alt="Logomark"
-            />
-            <div className="register-form-v-spacing-large" />
-            <div className="register-form-heading">Create an account</div>
-            <div className="register-form-v-spacing-large"></div>
-          </div>
-          <div className="register-form-v-spacing-40px" />
-          <div className="register-form-inputs">
-            <StringTextField
-              onChange={handleInput}
-              error={errors.firstname ? true : false}
-              helperText={errors.firstname ? errors.firstname : ""}
-              label="First name*"
-              placeholder="Enter your first name"
-              id="register-firstname-input"
-            />
-            <div className="login-form-v2-spacing" />
-            <StringTextField
-              onChange={handleInput}
-              error={errors.lastname ? true : false}
-              helperText={errors.lastname ? errors.lastname : ""}
-              label="Last name*"
-              placeholder="Enter your last name"
-              id="register-lastname-input"
-            />
-            <div className="login-form-v2-spacing" />
-            <EmailTextField
-              onChange={handleInput}
-              label="Email*"
-              error={errors.email ? true : false}
-              helperText={errors.email ? errors.email : ""}
-              placeholder="Enter your email"
-              id="register-email-input"
-            />
-            <div className="login-form-v2-spacing" />
-            <PasswordTextField
-              onChange={handleInput}
-              label="Password*"
-              error={errors.password ? true : false}
-              helperText={errors.password ? errors.password : ""}
-              placeholder="Create a password"
-              id="register-password-input"
-            />
-          </div>
-          <div className="login-form-v2-spacing" />
-          <div className="register-form-checks">
-            <Check text="Must be at least 8 characters" />
-            <div className="register-form-v-spacing-small"></div>
-            <Check text="Must contain one special character" />
-          </div>
-          <div className="login-form-v2-spacing" />
-          <div className="register-form-actions">
-            <Button
-              onClick={handleSubmit}
-              level="primary"
-              label="Get started"
-              sx={{ width: "100%" }}
-            />
-            <div className="login-form-v-spacing" />
-            <Button
-              disabled={true}
-              level="secondary"
-              label="Sign up with Google"
-              sx={{ width: "100%", color: "#344054", fontWeight: "700" }}
-              img={<img className="google-enter" src={Google} alt="Google" />}
-            />
-          </div>
+      <form className="register-form" onSubmit={handleSubmit}>
+        <div className="register-form-header">
+          <img
+            className="register-form-header-logo"
+            src={Logomark}
+            alt="Logomark"
+          />
+          <div className="register-form-v-spacing-large" />
+          <div className="register-form-heading">Create an account</div>
+          <div className="register-form-v-spacing-large"></div>
+        </div>
+        <div className="register-form-v-spacing-40px" />
+        <div className="register-form-inputs">
+          <StringTextField
+            onChange={handleInput}
+            error={errors.firstname ? true : false}
+            helperText={errors.firstname ? errors.firstname : ""}
+            label="First name*"
+            placeholder="Enter your first name"
+            id="register-firstname-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <StringTextField
+            onChange={handleInput}
+            error={errors.lastname ? true : false}
+            helperText={errors.lastname ? errors.lastname : ""}
+            label="Last name*"
+            placeholder="Enter your last name"
+            id="register-lastname-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <EmailTextField
+            onChange={handleInput}
+            label="Email*"
+            error={errors.email ? true : false}
+            helperText={errors.email ? errors.email : ""}
+            placeholder="Enter your email"
+            id="register-email-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <PasswordTextField
+            onChange={handleInput}
+            label="Password*"
+            error={errors.password ? true : false}
+            helperText={errors.password ? errors.password : ""}
+            placeholder="Create a password"
+            id="register-password-input"
+          />
+        </div>
+        <div className="login-form-v2-spacing" />
+        <div className="register-form-checks">
+          <Check text="Must be at least 8 characters" />
+          <div className="register-form-v-spacing-small"></div>
+          <Check text="Must contain one special character" />
+        </div>
+        <div className="login-form-v2-spacing" />
+        <div className="register-form-actions">
+          <Button
+            type="submit"
+            level="primary"
+            label="Get started"
+            sx={{ width: "100%" }}
+          />
+          <div className="login-form-v-spacing" />
+          <Button
+            disabled={true}
+            level="secondary"
+            label="Sign up with Google"
+            sx={{ width: "100%", color: "#344054", fontWeight: "700" }}
+            img={<img className="google-enter" src={Google} alt="Google" />}
+          />
         </div>
-        <div className="register-bottom-spacing"></div>
       </form>
+      <div className="register-bottom-spacing"></div>
     </div>
   );
 };