password reset

frontend/src/components/AuthModal.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useAuth } from "../contexts/AuthContext";
 import PasswordStrengthMeter from "./PasswordStrengthMeter";
 import PasswordInput from "./PasswordInput";
+import ForgotPasswordModal from "./ForgotPasswordModal";
 
 interface AuthModalProps {
   show: boolean;
@@ -21,6 +22,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
   const [lastName, setLastName] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [showForgotPassword, setShowForgotPassword] = useState(false);
 
   const { login, register } = useAuth();
 
@@ -83,17 +85,18 @@ const AuthModal: React.FC<AuthModalProps> = ({
   };
 
 
-  if (!show) return null;
+  if (!show && !showForgotPassword) return null;
 
   return (
     <>
-      <div
-        className="modal show d-block"
-        tabIndex={-1}
-        style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-      >
-        <div className="modal-dialog modal-dialog-centered">
-          <div className="modal-content">
+      {!showForgotPassword && (
+        <div
+          className="modal show d-block"
+          tabIndex={-1}
+          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+        >
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
             <div className="modal-header border-0 pb-0">
               <button
                 type="button"
@@ -168,6 +171,21 @@ const AuthModal: React.FC<AuthModalProps> = ({
                   </div>
                 )}
 
+                {mode === "login" && (
+                  <div className="text-end mb-3" style={{ marginTop: '-0.5rem' }}>
+                    <a
+                      href="#"
+                      className="text-primary text-decoration-none small"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setShowForgotPassword(true);
+                      }}
+                    >
+                      Forgot password?
+                    </a>
+                  </div>
+                )}
+
                 <button
                   type="submit"
                   className="btn btn-primary w-100 py-3 mb-1"
@@ -230,7 +248,15 @@ const AuthModal: React.FC<AuthModalProps> = ({
             </div>
           </div>
         </div>
-      </div>
+        </div>
+      )}
+
+      {/* Forgot Password Modal */}
+      <ForgotPasswordModal
+        show={showForgotPassword}
+        onHide={() => setShowForgotPassword(false)}
+        onBackToLogin={() => setShowForgotPassword(false)}
+      />
     </>
   );
 };