ADD: Forgot PassWord Form

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import NotFoundPage from "./pages/NotFoundPage";
 import UserPage from "./pages/UserPage";
 import ResetPasswordPage from "./pages/ResetPasswordPage";
 import CategoryPage from "./pages/CategoryPage";
+import ForgotPasswordForm from "./components/Auth/ForgotPasswordForm";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -43,6 +44,7 @@ function App() {
             <Route path="/:streamerName" element={<StreamerRoute />} />
             <Route path="/user/:username" element={<UserPage />} />
             <Route path="/reset_password/:token" element={<ResetPasswordPage />}></Route>
+            <Route path="/forgot_password/" element={<ForgotPasswordForm />}></Route>
             <Route path="/category/:category_name" element={<CategoryPage />}></Route>
 
             <Route path="/404" element={<NotFoundPage />} />

frontend/src/components/Auth/ForgotPasswordForm.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import Input from "../Layout/Input";
+import Button from "../Layout/Button";
+
+interface ForgotPasswordProps {
+    email?: string;
+}
+
+const ForgotPasswordForm: React.FC = () => {
+    const [email, setEmail] = useState<string>("");
+    const [errors, setErrors] = useState<ForgotPasswordProps>({});
+
+    const confirmPasswordReset = () => {
+        alert(`Email has been sent`);
+
+    };
+
+    const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setEmail(e.target.value);
+        if (errors.email) {
+            setErrors((prev) => ({ ...prev, email: undefined }));
+        }
+    };
+
+
+    const validateEmail = (): boolean => {
+        const newErrors: ForgotPasswordProps = {};
+        if (!email) {
+            newErrors.email = "Email is required.";
+        } else if (!/\S+@\S+\.\S+/.test(email)) {
+            newErrors.email = "Please enter a valid email address.";
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (validateEmail()) {
+            try {
+                const response = await fetch(`/api/user/forgot_password/${email}`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    credentials: "include",
+                });
+
+                if (!response.ok) {
+                    const data = await response.json();
+                    throw new Error(data.message || "An error has occurred while resetting");
+                } else {
+                    confirmPasswordReset();
+                }
+            } catch (error: any) {
+                console.error("Password reset error:", error.message);
+                setErrors((prev) => ({
+                    ...prev,
+                    general: error.message || "An unexpected error occurred.",
+
+                }));
+            }
+        }
+    };
+
+    return (
+        <div className="h-screen flex items-center justify-center">
+            <div className="h-[25em] w-[20em] flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-6">
+                <h2 className="text-2xl font-bold text-center mb-4">Forgot Password</h2>
+                <form onSubmit={handleSubmit} className="flex flex-col items-center space-y-4 w-full m-6">
+                    <Input
+                        name="email"
+                        type="email"
+                        placeholder="Enter your email"
+                        value={email}
+                        onChange={handleEmailChange}
+                        extraClasses={`appearance-none bg-transparent text-black m-5 ${errors.email ? "border-red-500" : ""}`}
+                        />
+    
+                    {errors.email && <p className="text-red-500 mt-2 text-sm">{errors.email}</p>}
+    
+                    <Button type="submit" extraClasses="text-black">Send Reset Link</Button>
+                </form>
+            </div>
+        </div>
+    );
+    
+};
+
+export default ForgotPasswordForm;

frontend/src/components/Auth/PasswordResetForm.tsx

@@ -29,7 +29,7 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
 
     const confirmPasswordReset = () => {
         alert(`${resetData.newPassword} - ${token}`);
-        // You can replace this with navigation or API success handling logic
+ 
       };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {

frontend/src/pages/ResetPasswordPage.tsx

@@ -9,6 +9,9 @@ const ResetPasswordPage: React.FC = () => {
     const handlePasswordReset = () => {
 
     };
+    if (!token) {
+        return <p className="text-red-500 text-center mt-4">Invalid or missing token.</p>;
+    }
 
     return (
         <div className="flex flex-col items-center justify-center h-screen">