Attempt 1 for #47, needs testing before approval!

frontend/src/pages/forgot-password.tsx

@@ -1,17 +1,85 @@
 'use client'
-import React from 'react';
+import { useState } from 'react';
+import axios from 'axios';
 
+// [] hey, what's our email for the website?
+const ORG_EMAIL = "[email protected]"
+
+
+/**
+ * 
+ * *NEEDS TESTING.*
+ */
 const ForgotPassword: React.FC = () => {
 
+    interface Submit {
+        text: string
+    }
+
+    const [text, setEmail] = useState<Submit | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [sentReq, setReq] = useState<boolean>(false)
+
+    const handleSignin = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setEmail({ text: e.target.value })
+    }
+
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+
+        // check that email exists in input
+        if (!text?.text) {
+            setError("An email is needed!")
+            return
+        }
+
+        // in case... yes
+        // please remove if this isn't needed
+        try {
+            // store backend route
+            const apiURI = `${process.env.NEXT_PUBLIC_API_URL}/auth/signin`
+            await axios.post(apiURI, {
+                email: text?.text
+            }).then((res) => {
+
+                // res.data --> data from response
+                // something needs to be done with this data I think.
+                // []
+
+                // upon success, change the text
+                if (res.status == 200) {
+                    setReq(true)
+                }
+
+            }).catch((err) => {
+                // show error upon getting one
+                setError(err.message);
+            })
+        }
+        catch (err: any) {
+            setError(err);
+        }
     }
 
     return (
         <form className="flex flex-col items-start p-4 max-w-sm mx-auto" onSubmit={handleSubmit}>
-          <h2 className='mb-4 text-lg'>Forgot Password</h2>
-          <input type="email" placeholder="Email" className="mb-4 p-2 border border-gray-300 rounded w-full" />
-          <button type="submit" className="bg-blue-500 text-white p-2 rounded w-full">Submit</button>
+            <h2 className='mb-4 text-lg'>{!sentReq ? "Forgot Password" : "Forgot Password request sent!"}</h2>
+            {/* main piece changes! */}
+            {!sentReq ? (
+                <div>
+                    <input type="email" placeholder="Email"
+                        className="mb-4 p-2 border border-gray-300 rounded w-full"
+                        onChange={handleSignin}
+                    />
+                    <button type="submit" className="bg-blue-500 text-white p-2 rounded w-full">Submit</button>
+                    <div className="mt-2 text-red-500">
+                        {error && <p>{error}</p>}
+                    </div>
+                </div>) :
+                <div>
+                    <p className='mt-[-0.5rem] font-light'>Check your email from {ORG_EMAIL} to reset your password for further instructions.</p>
+                </div>
+            }
         </form>
     );
 }

frontend/src/pages/signin.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import Link from 'next/link';
 import { useRouter } from 'next/navigation'
 import { useState } from 'react';
 
@@ -25,6 +26,11 @@ const SignIn: React.FC = () => {
 
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+
+        // []
+        // No input validation!
+        // 
+
         const apiURI = `${process.env.NEXT_PUBLIC_API_URL}/auth/signin`
 
         try {
@@ -52,7 +58,16 @@ const SignIn: React.FC = () => {
                 setError("An unknown error has occurred");
             }
         }
-        router.push("/")
+
+        // Issue []
+        // For some reason when I clicked the sign in btn when I was
+        // testing code for rest-password, the error wouldn't show up
+        // as expected. When I commented route.push, the error did show
+        // up. There might be a potential error here?
+        // - D_C
+
+        // router.push("/")
+
     }
 
     return (
@@ -75,8 +90,16 @@ const SignIn: React.FC = () => {
             <button type="submit" className="w-full bg-blue-500 text-white p-2 rounded ">
                 Sign In
             </button>
-
-            <div className="mt-8 text-red-500">
+            <div className='pt-2'>
+            {"Forgot password? Click "}
+                <Link
+                    href={'../forgot-password'}
+                    className={'text-blue-500 hover:underline'}
+                >
+                    here
+                </Link>
+            </div>
+            <div className="mt-2 text-red-500">
                 {error && <p>{error}</p>}
             </div>
         </form>