From b8a2755cda9162a58c8c66ed607cd818ef0b8330 Mon Sep 17 00:00:00 2001
From: Matthew Pereira <matthewdavidpereira@gmail.com>
Date: Sat, 14 Oct 2023 10:04:05 -0700
Subject: [PATCH] touch up styles and add basic email regex

---
 frontend/src/pages/Authentication/LoginForm.tsx  | 12 ++++++++----
 frontend/src/pages/Authentication/SignupForm.tsx | 13 ++++++++++++-
 frontend/src/pages/Authentication/page.tsx       |  1 -
 frontend/src/tw-components/TextField.tsx         | 13 ++++++-------
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/Authentication/LoginForm.tsx b/frontend/src/pages/Authentication/LoginForm.tsx
index 923eb87b..8f743c08 100644
--- a/frontend/src/pages/Authentication/LoginForm.tsx
+++ b/frontend/src/pages/Authentication/LoginForm.tsx
@@ -9,11 +9,9 @@ type Inputs = {
 };
 
 /** Login Form Component
- *
+ * @dev used on the Authentication page
  * @dev noValidate on form to disable browser vaildation so we can use react-hook-form validations instead
- *
  */
-
 export default function LoginForm() {
   const {
     register,
@@ -33,7 +31,13 @@ export default function LoginForm() {
           id="email"
           type="email"
           register={register}
-          validations={{ required: "Please enter your email address" }}
+          validations={{
+            required: "Please enter your email address",
+            pattern: {
+              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+              message: "Please enter a valid email address",
+            },
+          }}
           errors={errors.email}
         />
         <TextField
diff --git a/frontend/src/pages/Authentication/SignupForm.tsx b/frontend/src/pages/Authentication/SignupForm.tsx
index 33e5b8d5..3f7d6a0d 100644
--- a/frontend/src/pages/Authentication/SignupForm.tsx
+++ b/frontend/src/pages/Authentication/SignupForm.tsx
@@ -10,6 +10,10 @@ type Inputs = {
   password: string;
 };
 
+/** Signup Form Component
+ * @dev used on the Authentication page
+ * @dev noValidate on form to disable browser vaildation so we can use react-hook-form validations instead
+ */
 export default function SignupForm() {
   const {
     register,
@@ -19,6 +23,7 @@ export default function SignupForm() {
   const onSubmit: SubmitHandler<Inputs> = (data) => {
     console.log("Sending form data to server...", data);
   };
+
   return (
     <div>
       <h3 className="mb-10 text-4xl font-bold">Sign up</h3>
@@ -47,7 +52,13 @@ export default function SignupForm() {
           type="email"
           register={register}
           errors={errors.email}
-          validations={{ required: "Please enter your email address" }}
+          validations={{
+            required: "Please enter your email address",
+            pattern: {
+              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+              message: "Please enter a valid email address",
+            },
+          }}
         />
         <TextField
           label="Password"
diff --git a/frontend/src/pages/Authentication/page.tsx b/frontend/src/pages/Authentication/page.tsx
index 19659f2e..a56fae79 100644
--- a/frontend/src/pages/Authentication/page.tsx
+++ b/frontend/src/pages/Authentication/page.tsx
@@ -8,7 +8,6 @@ import SignupForm from "./SignupForm";
 /** AuthenticationPage
  * @dev handles both "/login" and "/signup" paths
  */
-
 export default function AuthenticationPage() {
   const { pathname } = useLocation();
 
diff --git a/frontend/src/tw-components/TextField.tsx b/frontend/src/tw-components/TextField.tsx
index c11f675a..99040b19 100644
--- a/frontend/src/tw-components/TextField.tsx
+++ b/frontend/src/tw-components/TextField.tsx
@@ -19,8 +19,6 @@ interface TextFieldProps extends React.PropsWithChildren {
  * @prop register -> React Hook Form's register function
  * @prop validations -> React Hook Form's validation object
  * @prop errors -> React Hook Form's errors object
- *
- * @TODO The password input's "Forgot password" and toggle visibility functionality
  */
 
 export default function TextField({
@@ -32,8 +30,8 @@ export default function TextField({
   errors,
 }: TextFieldProps) {
   return (
-    <div className="w-full mb-3">
-      <div className="mb-2 font-bold text-base">
+    <div className="w-full">
+      <div className="mb-1 font-bold text-base">
         <label htmlFor={id}>{label}</label>
         {type === "password" && (
           <span className="text-blue-dark font-bold underline float-right cursor-pointer">
@@ -58,9 +56,10 @@ export default function TextField({
           </div>
         )}
       </div>
-      {errors && (
-        <p className="mt-1 text-red font-gothic font-bold">{errors.message}</p>
-      )}
+
+      <div className="h-8 text-red font-gothic font-bold flex flex-col justify-center">
+        {errors && errors.message}
+      </div>
     </div>
   );
 }