Updated login to redirect to OTP forgot password page

Author: Uttam Singh

frontend/src/pages/App.jsx

@@ -2,21 +2,19 @@ import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Login from "./Login.jsx";
 import Dashboard from "./Dashboard.jsx";
-import AdminDashboard from "./AdminDashboard.jsx"; // ✅ Import added
+import AdminDashboard from "./AdminDashboard.jsx";
+import ForgotPassword from "./ForgotPassword.jsx"; // ✅ added
 
 export default function App() {
   return (
     <BrowserRouter>
       <Routes>
-        {/* Default login page */}
         <Route path="/" element={<Login />} />
-
-        {/* Regular user dashboard */}
         <Route path="/dashboard" element={<Dashboard />} />
-
-        {/* ✅ Admin dashboard route */}
         <Route path="/admin-dashboard" element={<AdminDashboard />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} /> {/* ✅ added */}
       </Routes>
     </BrowserRouter>
   );
 }
+

frontend/src/pages/ForgotPassword.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await fetch("https://fat-eibl-backend-x1sp.onrender.com/users/forgot-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+      const data = await res.json();
+      setMessage(data.message || "If the email exists, OTP has been sent.");
+    } catch (error) {
+      setMessage("Something went wrong. Please try again.");
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
+      <h1 className="text-2xl font-semibold mb-4">Forgot Password</h1>
+      <form onSubmit={handleSubmit} className="bg-white p-6 rounded shadow w-80">
+        <input
+          type="email"
+          placeholder="Enter registered email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          className="border w-full p-2 mb-4 rounded"
+        />
+        <button
+          type="submit"
+          className="bg-blue-600 text-white px-4 py-2 rounded w-full hover:bg-blue-700"
+        >
+          Send OTP
+        </button>
+      </form>
+      {message && <p className="mt-4 text-green-600">{message}</p>}
+    </div>
+  );
+}

frontend/src/pages/Login.jsx

@@ -8,6 +8,7 @@ export default function Login() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
+  // ✅ Login function
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -18,9 +19,7 @@ export default function Login() {
         "https://fat-eibl-backend-x1sp.onrender.com/users/login",
         {
           method: "POST",
-          headers: {
-            Accept: "application/json",
-          },
+          headers: { Accept: "application/json" },
           body: new URLSearchParams({
             email: email,
             password: password,
@@ -34,10 +33,10 @@ export default function Login() {
         setError(data.detail || "Invalid credentials");
       } else {
         alert(`Welcome ${data.user.name}!`);
-        // Save user info to localStorage (for future dashboard use)
+        // ✅ Save user info for session
         localStorage.setItem("user", JSON.stringify(data.user));
 
-        // Redirect based on role
+        // ✅ Redirect based on role
         if (data.user.role === "admin") {
           window.location.href = "/admin-dashboard";
         } else {
@@ -51,9 +50,9 @@ export default function Login() {
     }
   };
 
+  // ✅ Forgot password redirect (no Outlook)
   const handleForgotPassword = () => {
-    const mailtoLink = `mailto:[email protected]?subject=Forgot Password - FAT-EIBL&body=Dear Support,%0D%0A%0D%0AI forgot my password. Please help me reset it.%0D%0A%0D%0ARegistered Email: ${email}%0D%0A%0D%0AThank you.`;
-    window.location.href = mailtoLink;
+    window.location.href = "/forgot-password";
   };
 
   return (
@@ -67,16 +66,22 @@ export default function Login() {
         backgroundColor: "#f5f9ff",
       }}
     >
+      {/* ✅ Logo */}
       <img
         src={logo}
         alt="Company Logo"
         style={{ width: "120px", marginBottom: "20px" }}
       />
-      <h1 style={{ color: "#004aad" }}>Welcome to FAT-EIBL</h1>
-      <p style={{ color: "#003b80", marginBottom: "30px" }}>
+
+      {/* ✅ Title */}
+      <h1 style={{ color: "#004aad", marginBottom: "10px" }}>
+        Welcome to FAT-EIBL
+      </h1>
+      <p style={{ color: "#003b80", marginBottom: "30px", textAlign: "center" }}>
         Finance Audit Tracker – Edme Insurance Brokers Limited
       </p>
 
+      {/* ✅ Login form */}
       <form
         onSubmit={handleSubmit}
         style={{
@@ -88,6 +93,7 @@ export default function Login() {
           textAlign: "center",
         }}
       >
+        {/* Email field */}
         <input
           type="email"
           placeholder="Email"
@@ -102,6 +108,8 @@ export default function Login() {
           }}
           required
         />
+
+        {/* Password field */}
         <input
           type="password"
           placeholder="Password"
@@ -117,12 +125,20 @@ export default function Login() {
           required
         />
 
+        {/* Error message */}
         {error && (
-          <p style={{ color: "red", fontSize: "0.9rem", marginBottom: "10px" }}>
+          <p
+            style={{
+              color: "red",
+              fontSize: "0.9rem",
+              marginBottom: "10px",
+            }}
+          >
             {error}
           </p>
         )}
 
+        {/* Submit button */}
         <button
           type="submit"
           disabled={loading}
@@ -139,6 +155,7 @@ export default function Login() {
           {loading ? "Logging in..." : "Login"}
         </button>
 
+        {/* ✅ Forgot password redirect */}
         <p
           onClick={handleForgotPassword}
           style={{