Merge pull request #159 from amitroy-thedev/main

Setup the forgot password page

frontend/src/App.js

@@ -15,6 +15,7 @@ import Sef from "./components/Sef/Sef.js";
 import Act from "./components/Act/Act.js";
 import Login from "./components/Login/Login.js";
 import Signup from "./components/Signup/Signup.js";
+import ForgotPassword from "./components/ForgotPassword/ForgotPassword.js";
 import Footer from "./components/Footer/Footer.js";
 import About from "./pages/About/About.js";
 import Loan from "./pages/Loan/Loan.js";
@@ -40,13 +41,14 @@ function App() {
             <Route path="/act" element={<Act />} />
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<Signup />} /> {/* Use lowercase for consistency */}
+            <Route path="/forgot-password" element={<ForgotPassword />} />
             <Route path="/contact" element={<Contact />} />
             <Route
               path="*"
               element={<Error />}></Route>
           </Routes>
         </main>
-        {location.pathname !== "/login" && location.pathname.toLowerCase() !== "/signup" && <Footer />}      </div>
+        {location.pathname !== "/login" && location.pathname.toLowerCase() !== "/signup" && location.pathname.toLowerCase() !== "/forgot-password" && <Footer />}      </div>
     </>
   );
 }

frontend/src/components/ForgotPassword/ForgotPassword.js

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { auth } from "../Firebase/firebase";
+import { sendPasswordResetEmail } from "firebase/auth";
+
+function Login() {
+    const [email, setEmail] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState("");
+    const [error, setError] = useState(null);
+    const navigate = useNavigate();
+
+    const handleResetPassword = async (e) => {
+        e.preventDefault();
+        setError(null);
+        setLoading(true);
+        try {
+            await sendPasswordResetEmail(auth, email);
+            setLoading(false);
+            setMessage("Password reset email sent! Please check your inbox.");
+        } catch (error) {
+            setLoading(false);
+            setError(error.message);
+        }
+    };
+
+    return (
+        <div
+            className="container mt-5 justify-content-center"
+            style={{ height: "auto" }}
+        >
+            <div className="row justify-content-center" style={{ width: "100%" }}>
+                <div className="col-md-6">
+                    <div className="card shadow">
+                        <div className="card-body">
+                            <h2 className="text-center mb-4">Forgot Password</h2>
+                            {error && <div className="alert alert-danger">{error}</div>}
+                            {message && (
+                                <div className="alert alert-success">{message}</div>
+                            )}
+                            <form onSubmit={handleResetPassword}>
+                                <div className="mb-3">
+                                    <label htmlFor="email" className="form-label">
+                                        Email:
+                                    </label>
+                                    <input
+                                        type="email"
+                                        id="email"
+                                        className="form-control"
+                                        placeholder="Enter your email"
+                                        value={email}
+                                        onChange={(e) => setEmail(e.target.value)}
+                                        required
+                                    />
+                                </div>
+                                <button
+                                    type="submit"
+                                    className="btn btn-primary w-100"
+                                    disabled={loading}
+                                >
+                                    {loading ? "Requesting..." : "Request password link"}
+                                </button>
+                            </form>
+                            <p className="mt-3 text-center">
+                                Remember you password {" "}
+                                <span
+                                    className="text-primary"
+                                    style={{ cursor: "pointer" }}
+                                    onClick={() => navigate("/login")}
+                                >
+                                    Login
+                                </span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Login;