From ac19919c51a72a64983180017348afab60d96c12 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Thu, 22 Feb 2024 06:17:53 +0000
Subject: [PATCH 1/6] Login: Invalid Username / Password Prompts User

---
 frontend-next/src/app/login/page.js | 44 +++++++++++++++--------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js
index c3026a3..1da6391 100644
--- a/frontend-next/src/app/login/page.js
+++ b/frontend-next/src/app/login/page.js
@@ -1,21 +1,12 @@
 "use client";
-import { useForm } from "react-hook-form";
+import { useForm, Form } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import "../globals.css"
 
 function Login() {
     var router = useRouter();
-    var { register, handleSubmit } = useForm();
-    async function Login(data) {
-        const res = await fetch("/api/login", {
-            method: "POST",
-            body: JSON.stringify(data ? data : {}),
-        });
-
-        if (res.ok) {
-            router.push("/app");
-        }
-    }
+    //var { register, handleSubmit } = useForm();
+    const { register, control, setError, formState: { errors } } = useForm()
 
     return (
         <div>
@@ -25,15 +16,26 @@ function Login() {
                     <span className="text-[36px]">
                         Chat with friends!
                     </span>
-                    <div className="m-5">
-                        <h3 className="text-[24px] mt-[50px]">Login</h3>
-                        <form action="#" onSubmit={handleSubmit(Login)}>
-                            <input type="email" {...register("email")} placeholder="Enter Email Address"/><br/>
-                            <input type="password" {...register("password")} placeholder="Enter Password"/><br/>
-                            <button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
-                                Login</button><br/>
-                            Don&apos;t have an account? <a href="/register">Sign Up</a>
-                        </form>
+                    <div className="m-5 ">
+                        <h3 className="text-[24px] mt-[50px] mb-5">Login</h3>
+                        {(errors.email && errors.password) && <div className="text-[red] mb-5 text-[18px] text-bold">Invalid Email or Password.</div>}
+                        <Form action="/api/login" encType={'application/json'}
+                        onSuccess={() => {
+                            router.push("/app");
+                        }}
+                        onError={() => {
+                            const formError = { type: "server", message: "Username or Password Incorrect" }
+                            // set same error in both:
+                            setError('password', formError)
+                            setError('email', formError)
+                        }}
+                        control={control}
+                        >
+                            <input type="email" id="email" {...register("email", { required: true })} placeholder="Enter Email Address"/><br/>
+                            <input type="password" id="password" name="password" {...register("password", { required: true })} placeholder="Enter Password"/><br/>
+                            <button className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Log In</button>
+                            <br/>Need an account? <a href="/register">Sign Up</a><br/>
+                        </Form>
                     </div>
                 </div>
             </div>
-- 
2.52.0


From 5e8a5c89b31e046d9152560bb6d5bdc3547db721 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Thu, 22 Feb 2024 18:18:59 +0000
Subject: [PATCH 2/6] Add red border on error to login

---
 frontend-next/src/app/globals.css   | 6 ++++++
 frontend-next/src/app/login/page.js | 7 +++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend-next/src/app/globals.css b/frontend-next/src/app/globals.css
index 1679e2d..308cb63 100644
--- a/frontend-next/src/app/globals.css
+++ b/frontend-next/src/app/globals.css
@@ -29,3 +29,9 @@ input {
   margin: 5px;
 }
 
+input.err {
+  border: 2px solid red;
+  border-radius: 4px;
+  padding: 10px 10px;
+  margin: 5px;
+}
diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js
index 1da6391..e46e67e 100644
--- a/frontend-next/src/app/login/page.js
+++ b/frontend-next/src/app/login/page.js
@@ -6,8 +6,7 @@ import "../globals.css"
 function Login() {
     var router = useRouter();
     //var { register, handleSubmit } = useForm();
-    const { register, control, setError, formState: { errors } } = useForm()
-
+    var { register, control, setError, formState: { errors } } = useForm()
     return (
         <div>
             <div className="grid h-screen place-items-center">
@@ -31,8 +30,8 @@ function Login() {
                         }}
                         control={control}
                         >
-                            <input type="email" id="email" {...register("email", { required: true })} placeholder="Enter Email Address"/><br/>
-                            <input type="password" id="password" name="password" {...register("password", { required: true })} placeholder="Enter Password"/><br/>
+                            <input type="email" id="email" className={(errors.email && errors.password) && "err"} {...register("email", { required: true })} placeholder="Enter Email Address"/><br/>
+                            <input type="password" id="password" name="password" className={(errors.email && errors.password) && "err"} {...register("password", { required: true })} placeholder="Enter Password"/><br/>
                             <button className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">Log In</button>
                             <br/>Need an account? <a href="/register">Sign Up</a><br/>
                         </Form>
-- 
2.52.0


From 5ca9c4222c3b77de4cf039282a9cb0c32ef7504d Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Thu, 22 Feb 2024 18:22:55 +0000
Subject: [PATCH 3/6] Slight CSS changes to keep login page from scrolling

---
 frontend-next/src/app/login/page.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js
index e46e67e..9323aca 100644
--- a/frontend-next/src/app/login/page.js
+++ b/frontend-next/src/app/login/page.js
@@ -15,9 +15,9 @@ function Login() {
                     <span className="text-[36px]">
                         Chat with friends!
                     </span>
-                    <div className="m-5 ">
-                        <h3 className="text-[24px] mt-[50px] mb-5">Login</h3>
-                        {(errors.email && errors.password) && <div className="text-[red] mb-5 text-[18px] text-bold">Invalid Email or Password.</div>}
+                    <div>
+                        <h3 className="text-[24px] mt-[25px] mb-2">Login</h3>
+                        {(errors.email && errors.password) && <div className="text-[red] mb-2 text-[18px] text-bold">Invalid Email or Password.</div>}
                         <Form action="/api/login" encType={'application/json'}
                         onSuccess={() => {
                             router.push("/app");
-- 
2.52.0


From 43e9045b0af11228d43d936f67b4ff767b508b74 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Thu, 22 Feb 2024 18:24:25 +0000
Subject: [PATCH 4/6] Final CSS Changes

---
 frontend-next/src/app/login/page.js    | 2 +-
 frontend-next/src/app/register/page.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js
index 9323aca..662b559 100644
--- a/frontend-next/src/app/login/page.js
+++ b/frontend-next/src/app/login/page.js
@@ -11,7 +11,7 @@ function Login() {
         <div>
             <div className="grid h-screen place-items-center">
                 <div>
-                    <img src="logos/logo_transparent_inverse.png"/>
+                    <a href="/"><img src="logos/logo_transparent_inverse.png"/></a>
                     <span className="text-[36px]">
                         Chat with friends!
                     </span>
diff --git a/frontend-next/src/app/register/page.js b/frontend-next/src/app/register/page.js
index a2aa40b..f70bce3 100644
--- a/frontend-next/src/app/register/page.js
+++ b/frontend-next/src/app/register/page.js
@@ -21,12 +21,12 @@ function Register() {
         <div>
             <div className="grid h-screen place-items-center">
                 <div>
-                    <img src="logos/logo_transparent_inverse.png"/>
+                    <a href="/"><img src="logos/logo_transparent_inverse.png"/></a>
                     <span className="text-[36px]">
                         Chat with friends!
                     </span>
-                    <div className="m-5">
-                        <h3 className="text-[24px] mt-[50px]">Register</h3>
+                    <div>
+                        <h3 className="text-[24px] mt-[25px]">Register</h3>
                         <form action="#" onSubmit={handleSubmit(RegisterWithEmail)}>
                             <input type="email" {...register("email")} placeholder="Enter Email Address"/><br/>
                             <input type="password" {...register("password")} placeholder="Enter Password"/><br/>
-- 
2.52.0


From 6dbc0a2e8eaed6e0eb55834a466900afb1a37830 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Thu, 22 Feb 2024 18:59:57 +0000
Subject: [PATCH 5/6] Register Page Validation

---
 frontend-next/src/app/register/page.js | 31 +++++++++++---------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/frontend-next/src/app/register/page.js b/frontend-next/src/app/register/page.js
index f70bce3..027eba0 100644
--- a/frontend-next/src/app/register/page.js
+++ b/frontend-next/src/app/register/page.js
@@ -1,22 +1,12 @@
 "use client";
 import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
+import { useForm, Form } from "react-hook-form";
 import "../globals.css"
 
 function Register() {
-    var {register, handleSubmit } = useForm()
+    var { register, control, setError, formState: { errors } } = useForm()
     var router = useRouter();
-    
-    async function RegisterWithEmail(data) {
-        const res = await fetch("/api/register", {
-            method: "POST",
-            body: JSON.stringify(data ? data : {}),
-        });
-        if (res.ok) {
-            router.push("/login");
-        }
-    }
-   
+    var emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/
     return (
         <div>
             <div className="grid h-screen place-items-center">
@@ -26,14 +16,19 @@ function Register() {
                         Chat with friends!
                     </span>
                     <div>
-                        <h3 className="text-[24px] mt-[25px]">Register</h3>
-                        <form action="#" onSubmit={handleSubmit(RegisterWithEmail)}>
-                            <input type="email" {...register("email")} placeholder="Enter Email Address"/><br/>
-                            <input type="password" {...register("password")} placeholder="Enter Password"/><br/>
+                        <h3 className="text-[24px] mt-[15px]">Register</h3>
+                        <Form action="/api/register" encType={'application/json'}
+                        onSuccess={() => {
+                            router.push("/app");
+                        }}
+                        control={control}
+                        >
+                            <input type="email" {...register("email", {required: true, pattern: emailRegex})} className={errors.email && "err"} placeholder="Enter Email Address"/><br/>
+                            <input type="password" {...register("password", {required: true})} className={errors.password && errors.password.type == 'required' && "err"} placeholder="Enter Password"/><br/>
                             <button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
                                 Register</button><br/>
                             Have an account? <a href="/login">Log In</a>
-                        </form>
+                        </Form>
                     </div>
                 </div>
             </div>
-- 
2.52.0


From 17d2ce436ac39e09b33ec849a89924fcfd2abd35 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Thu, 22 Feb 2024 19:00:47 +0000
Subject: [PATCH 6/6] Delete Download Button

---
 frontend-next/src/app/page.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend-next/src/app/page.js b/frontend-next/src/app/page.js
index 7acc6ba..5e1f126 100644
--- a/frontend-next/src/app/page.js
+++ b/frontend-next/src/app/page.js
@@ -2,9 +2,6 @@ function Home() {
     
     return (
         <div>
-            <div className="absolute right-[6%] top-[4%]">
-                <button>Download</button>
-            </div>
             <div className="grid h-screen place-items-center">
                 <div>
                     <img src="logos/logo_transparent_inverse.png"/>
-- 
2.52.0