better UX when resetting pw

frontend/src/components/AuthModal.tsx

@@ -8,7 +8,7 @@ import VerificationCodeModal from "./VerificationCodeModal";
 interface AuthModalProps {
   show: boolean;
   onHide: () => void;
-  initialMode?: "login" | "signup";
+  initialMode?: "login" | "signup" | "forgot-password";
 }
 
 const AuthModal: React.FC<AuthModalProps> = ({
@@ -16,14 +16,14 @@ const AuthModal: React.FC<AuthModalProps> = ({
   onHide,
   initialMode = "login",
 }) => {
-  const [mode, setMode] = useState<"login" | "signup">(initialMode);
+  const [mode, setMode] = useState<"login" | "signup">(initialMode === "forgot-password" ? "login" : initialMode);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
-  const [showForgotPassword, setShowForgotPassword] = useState(false);
+  const [showForgotPassword, setShowForgotPassword] = useState(initialMode === "forgot-password");
   const [showVerificationModal, setShowVerificationModal] = useState(false);
 
   const { login, register } = useAuth();
@@ -32,7 +32,13 @@ const AuthModal: React.FC<AuthModalProps> = ({
   // Update mode when modal is opened with different initialMode
   useEffect(() => {
     if (show && initialMode) {
+      if (initialMode === "forgot-password") {
+        setShowForgotPassword(true);
+        setMode("login"); // Default to login when returning from forgot password
+      } else {
         setMode(initialMode);
+        setShowForgotPassword(false);
+      }
     }
   }, [show, initialMode]);
 

frontend/src/contexts/AuthContext.tsx

@@ -27,8 +27,8 @@ interface AuthContextType {
   updateUser: (user: User) => void;
   checkAuth: () => Promise<void>;
   showAuthModal: boolean;
-  authModalMode: "login" | "signup";
-  openAuthModal: (mode: "login" | "signup") => void;
+  authModalMode: "login" | "signup" | "forgot-password";
+  openAuthModal: (mode: "login" | "signup" | "forgot-password") => void;
   closeAuthModal: () => void;
 }
 
@@ -50,7 +50,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
   const [showAuthModal, setShowAuthModal] = useState(false);
-  const [authModalMode, setAuthModalMode] = useState<"login" | "signup">("login");
+  const [authModalMode, setAuthModalMode] = useState<"login" | "signup" | "forgot-password">("login");
   const isAuthenticating = useRef(false);
 
   const checkAuth = async () => {
@@ -144,7 +144,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     setUser(user);
   };
 
-  const openAuthModal = (mode: "login" | "signup") => {
+  const openAuthModal = (mode: "login" | "signup" | "forgot-password") => {
     setAuthModalMode(mode);
     setShowAuthModal(true);
   };

frontend/src/pages/ResetPassword.tsx

@@ -140,6 +140,15 @@ const ResetPassword: React.FC = () => {
                   <h5 className="mt-3">Invalid Reset Link</h5>
                   <p className="text-danger">{error}</p>
                   <div className="mt-3">
+                    <button
+                      className="btn btn-primary me-2"
+                      onClick={() => {
+                        navigate('/', { replace: true });
+                        openAuthModal('forgot-password');
+                      }}
+                    >
+                      Request New Link
+                    </button>
                     <Link to="/" className="btn btn-outline-secondary">
                       Return to Home
                     </Link>