#47 Issue: Forgot-password flow

backend/src/auth/auth.controller.ts

@@ -107,7 +107,7 @@ export class AuthController {
     const { email } = req.body;
     const user = await User.findOne({ email });
 
-    if (!user) return res.status(400).json({ message: 'User not found' });
+    if (!user) return res.status(400).json({ message: 'User not found. Check your email!' });
 
     const resetToken = await this.generateToken(user)
     const resetLink = `${process.env.CLIENT_URL}/reset-password?token=${resetToken.token}`;

frontend/src/pages/forgot-password.tsx

@@ -1,17 +1,65 @@
 'use client'
-import React from 'react';
+import { useState } from 'react';
+import axios from 'axios';
 
 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
+        }
+
+        const apiURI = `${process.env.NEXT_PUBLIC_API_URL}/auth/signin`;
+        await axios.post(apiURI,
+            //send email as JSON
+            {
+                email: text?.text
+            }
+        ).then((res) => {
+            // upon success, change the text
+            if (res.status == 200) {
+                setReq(true)
+            }
+        }).catch((err) => {
+            // show error upon getting one
+            setError(err.response.data.message);
+        });
     }
 
     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 className='w-[-webkit-fill-available]'>
+                    <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 w-[-webkit-fill-available]">
+                        {error && <p className='break-words'>{error}</p>}
+                    </div>
+                </div>) :
+                <div>
+                    <p className='mt-[-0.5rem] font-light'>Check your 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,7 @@ const SignIn: React.FC = () => {
 
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+
         const apiURI = `${process.env.NEXT_PUBLIC_API_URL}/auth/signin`
 
         try {
@@ -53,6 +55,7 @@ const SignIn: React.FC = () => {
             }
         }
         router.push("/")
+
     }
 
     return (
@@ -75,8 +78,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>