From 49eaf81c4050751110d63662f96350adbe2a758b Mon Sep 17 00:00:00 2001
From: JamesNg <njames15@gmail.com>
Date: Mon, 17 Mar 2025 23:55:37 -0400
Subject: [PATCH 1/3] updated HTML to MUI components

---
 .../presentational/returnUserForm.jsx         | 69 ++++++++++---------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/client/src/components/presentational/returnUserForm.jsx b/client/src/components/presentational/returnUserForm.jsx
index bde529317..797e06128 100644
--- a/client/src/components/presentational/returnUserForm.jsx
+++ b/client/src/components/presentational/returnUserForm.jsx
@@ -1,23 +1,26 @@
 import React from 'react';
+import { Box, Button, FormControl, Input, Typography } from '@mui/material';
 
 const ReturnUserForm = (props) => {
   return (
-    <div className="check-in-container">
-      <div className="check-in-headers">
-        <h3>Welcome back!</h3>
-      </div>
-      <div className="check-in-form">
-        <form
+    <Box className="check-in-container">
+      <Box className="check-in-headers">
+        {/* This styling serves as a temporary default for UI/UX team. */}
+        <Typography variant='h3' component='h3' style={{ fontSize: 40, fontWeight: 'bold' }}>WELCOME BACK!</Typography>
+      </Box>
+      <Box className="check-in-form">
+        <FormControl
+          autoComplete
           className="form-check-in"
-          autoComplete="on"
           onSubmit={(e) => e.preventDefault()}
         >
-          <div className="form-row">
-            <div className="form-input-text">
-              <label htmlFor="email">
+          <Box className="form-row">
+            <Box className="form-input-text">
+              {/* Typography seems to work better than MUI InputLabel in this instance; again, just a placeholder for UI/UX team. */}
+              <Typography>
                 Which email address did you use to check-in last time?
-              </label>
-              <input
+              </Typography>
+              <Input
                 type="email"
                 name="email"
                 placeholder="Email Address"
@@ -27,23 +30,23 @@ const ReturnUserForm = (props) => {
                 required
                 autoComplete="email"
               />
-            </div>
-            <p>
+            </Box>
+            <Typography>
               {"(This allows easy use of the app. We'll never sell your data!)"}
-            </p>
-          </div>
+            </Typography>
+          </Box>
 
           {props.isError && props.errorMessage.length > 1 &&
-            <div className="error">{props.errorMessage}</div>
+            <Box className="error">{props.errorMessage}</Box>
           }
           {props.user === false && (
-            <div className="error">Try entering your email again.</div>
+            <Box className="error">Try entering your email again.</Box>
           )}
 
           {!props.user && !props.isLoading ? (
-            <div className="form-row">
-              <div className="form-input-button">
-                <button
+            <Box className="form-row">
+              <Box className="form-input-button">
+                <Button
                   type="submit"
                   className="form-check-in-submit"
                   onClick={(e) => props.checkEmail(e)}
@@ -52,25 +55,25 @@ const ReturnUserForm = (props) => {
                   }
                 >
                   CHECK IN
-                </button>
-              </div>
-            </div>
+                </Button>
+              </Box>
+            </Box>
           ) : (
-            <div className="form-row">
-              <div className="form-input-button">
-                <button
+            <Box className="form-row">
+              <Box className="form-input-button">
+                <Button
                   type="submit"
                   className="form-check-in-submit block"
                   onClick={(e) => e.preventDefault()}
                 >
                   CHECKING IN...
-                </button>
-              </div>
-            </div>
+                </Button>
+              </Box>
+            </Box>
           )}
-        </form>
-      </div>
-    </div>
+        </FormControl>
+      </Box>
+    </Box>
   );
 };
 export default ReturnUserForm;

From 11251725d401fc17725d9ac671a8cbc6ade0acd3 Mon Sep 17 00:00:00 2001
From: James Ng <njames15@gmail.com>
Date: Fri, 21 Mar 2025 10:33:50 -0400
Subject: [PATCH 2/3] updated CSS for components

---
 .../presentational/returnUserForm.jsx         | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/client/src/components/presentational/returnUserForm.jsx b/client/src/components/presentational/returnUserForm.jsx
index 797e06128..fe177a241 100644
--- a/client/src/components/presentational/returnUserForm.jsx
+++ b/client/src/components/presentational/returnUserForm.jsx
@@ -1,12 +1,17 @@
 import React from 'react';
-import { Box, Button, FormControl, Input, Typography } from '@mui/material';
+import { Box, Button, FormControl, TextField, Typography } from '@mui/material';
 
 const ReturnUserForm = (props) => {
   return (
     <Box className="check-in-container">
       <Box className="check-in-headers">
-        {/* This styling serves as a temporary default for UI/UX team. */}
-        <Typography variant='h3' component='h3' style={{ fontSize: 40, fontWeight: 'bold' }}>WELCOME BACK!</Typography>
+        <Typography
+          variant="h3"
+          component="h3"
+          style={{ fontSize: 40, fontWeight: 'bold', marginBottom: 18 }}
+        >
+          WELCOME BACK!
+        </Typography>
       </Box>
       <Box className="check-in-form">
         <FormControl
@@ -16,29 +21,38 @@ const ReturnUserForm = (props) => {
         >
           <Box className="form-row">
             <Box className="form-input-text">
-              {/* Typography seems to work better than MUI InputLabel in this instance; again, just a placeholder for UI/UX team. */}
-              <Typography>
+              <Typography style={{ marginBottom: 30 }}>
                 Which email address did you use to check-in last time?
               </Typography>
-              <Input
+              <TextField
+                label="Enter your email address:"
                 type="email"
                 name="email"
                 placeholder="Email Address"
+                required="required"
                 value={props.formInput.email.toString()}
                 onChange={props.handleInputChange}
                 aria-label="Email Address"
-                required
+                data-test="input-email"
                 autoComplete="email"
               />
             </Box>
-            <Typography>
+            <Typography
+              style={{
+                fontStyle: 'italic',
+                fontSize: 10,
+                fontWeight: 'normal',
+                marginTop: 5,
+              }}
+            >
               {"(This allows easy use of the app. We'll never sell your data!)"}
             </Typography>
           </Box>
 
-          {props.isError && props.errorMessage.length > 1 &&
+          {props.isError && props.errorMessage.length > 1 && (
             <Box className="error">{props.errorMessage}</Box>
-          }
+          )}
+
           {props.user === false && (
             <Box className="error">Try entering your email again.</Box>
           )}

From a255f593c2df2fb1e3475e0fa76b3d22b81dc982 Mon Sep 17 00:00:00 2001
From: James Ng <njames15@gmail.com>
Date: Sat, 22 Mar 2025 10:52:42 -0400
Subject: [PATCH 3/3] fixed error handling & messages

---
 client/src/pages/CheckInForm.jsx | 6 ++++++
 client/src/sass/CheckIn.scss     | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/client/src/pages/CheckInForm.jsx b/client/src/pages/CheckInForm.jsx
index 6b143a4b6..4c8ba4f72 100644
--- a/client/src/pages/CheckInForm.jsx
+++ b/client/src/pages/CheckInForm.jsx
@@ -427,6 +427,12 @@ const CheckInForm = (props) => {
         .catch((err) => {
           console.log(err);
           setIsLoading(false);
+          
+          // Fixes for error messages
+          setUser(false);
+          setIsError(true);
+          setErrorMessage('Invalid email.');
+          // end
         });
     } catch (error) {
       console.log(error);
diff --git a/client/src/sass/CheckIn.scss b/client/src/sass/CheckIn.scss
index 9317b3e86..ccd012f65 100644
--- a/client/src/sass/CheckIn.scss
+++ b/client/src/sass/CheckIn.scss
@@ -23,6 +23,12 @@
   min-height: 30vh;
 }
 
+.error {
+  width: 300px;
+  color: red;
+  height: 20px;
+}
+
 .form-check-in {
   width: 300px;
   max-width: 300px;