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)}
+      />
     </>
   );
 };

frontend/src/components/BetaPasswordProtection.tsx

@@ -1,135 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-interface BetaPasswordProtectionProps {
-  children: React.ReactNode;
-}
-
-const BetaPasswordProtection: React.FC<BetaPasswordProtectionProps> = ({
-  children,
-}) => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    // Check if user already has valid beta access
-    const betaToken = localStorage.getItem("betaAccess");
-    if (betaToken) {
-      // Verify the stored token is still valid
-      verifyBetaAccess(betaToken);
-    } else {
-      setLoading(false);
-    }
-  }, []);
-
-  const verifyBetaAccess = async (token: string) => {
-    try {
-      const response = await fetch(
-        `${process.env.REACT_APP_API_URL}/beta/verify`,
-        {
-          headers: {
-            "X-Beta-Password": token,
-          },
-        }
-      );
-
-      if (response.ok) {
-        setIsAuthenticated(true);
-      } else {
-        localStorage.removeItem("betaAccess");
-      }
-    } catch (error) {
-      localStorage.removeItem("betaAccess");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-
-    if (!password) {
-      setError("Please enter a password");
-      return;
-    }
-
-    try {
-      const response = await fetch(
-        `${process.env.REACT_APP_API_URL}/beta/verify`,
-        {
-          headers: {
-            "X-Beta-Password": password,
-          },
-        }
-      );
-
-      if (response.ok) {
-        localStorage.setItem("betaAccess", password);
-        setIsAuthenticated(true);
-      } else {
-        setError("Invalid beta password");
-      }
-    } catch (error) {
-      setError("Failed to verify beta password");
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="min-vh-100 d-flex align-items-center justify-content-center">
-        <div className="spinner-border text-primary" role="status">
-          <span className="visually-hidden">Loading...</span>
-        </div>
-      </div>
-    );
-  }
-
-  if (!isAuthenticated) {
-    return (
-      <div className="min-vh-100 d-flex align-items-center justify-content-center bg-light">
-        <div
-          className="card shadow"
-          style={{ maxWidth: "400px", width: "100%" }}
-        >
-          <div className="card-body p-5">
-            <h2 className="text-center mb-4">Beta Access Required</h2>
-            <p className="text-muted text-center mb-4">
-              This site is currently in beta testing. Please enter the beta
-              password to continue.
-            </p>
-            <form onSubmit={handleSubmit}>
-              <div className="mb-3">
-                <label htmlFor="betaPassword" className="form-label">
-                  Beta Password
-                </label>
-                <input
-                  type="password"
-                  className="form-control"
-                  id="betaPassword"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Enter beta password"
-                  autoFocus
-                />
-              </div>
-              {error && (
-                <div className="alert alert-danger" role="alert">
-                  {error}
-                </div>
-              )}
-              <button type="submit" className="btn btn-primary w-100">
-                Access Beta
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return <>{children}</>;
-};
-
-export default BetaPasswordProtection;

frontend/src/components/ForgotPasswordModal.tsx

@@ -0,0 +1,175 @@
+import React, { useState } from "react";
+import { authAPI } from "../services/api";
+
+interface ForgotPasswordModalProps {
+  show: boolean;
+  onHide: () => void;
+  onBackToLogin?: () => void;
+}
+
+const ForgotPasswordModal: React.FC<ForgotPasswordModalProps> = ({
+  show,
+  onHide,
+  onBackToLogin,
+}) => {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const resetModal = () => {
+    setEmail("");
+    setError("");
+    setSuccess(false);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    try {
+      await authAPI.forgotPassword(email);
+      setSuccess(true);
+    } catch (err: any) {
+      console.error('Forgot password error:', err);
+      const errorData = err.response?.data;
+
+      // Check for rate limiting
+      if (err.response?.status === 429) {
+        const retryAfter = errorData?.retryAfter;
+        if (retryAfter) {
+          const minutes = Math.ceil(retryAfter / 60);
+          setError(`Too many password reset requests. Please try again in ${minutes} minute${minutes > 1 ? 's' : ''}.`);
+        } else {
+          setError('Too many password reset requests. Please try again later.');
+        }
+      } else if (errorData?.details) {
+        // Validation errors
+        const validationErrors = errorData.details.map((d: any) => d.message).join(', ');
+        setError(validationErrors);
+      } else {
+        setError(errorData?.error || "Failed to send reset email. Please try again.");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!show) 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">
+            <div className="modal-header border-0 pb-0">
+              <button
+                type="button"
+                className="btn-close"
+                onClick={() => {
+                  resetModal();
+                  onHide();
+                }}
+              ></button>
+            </div>
+            <div className="modal-body px-4 pb-4">
+              {success ? (
+                <>
+                  <div className="text-center">
+                    <i
+                      className="bi bi-envelope-check text-success"
+                      style={{ fontSize: "3rem" }}
+                    ></i>
+                    <h4 className="mt-3">Check Your Email</h4>
+                    <p className="text-muted">
+                      If an account exists with that email address, you will
+                      receive password reset instructions shortly.
+                    </p>
+                    <p className="text-muted small">
+                      Please check your spam folder if you don't see the email
+                      within a few minutes.
+                    </p>
+                    <button
+                      type="button"
+                      className="btn btn-primary mt-3"
+                      onClick={() => {
+                        resetModal();
+                        onHide();
+                      }}
+                    >
+                      Close
+                    </button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <h4 className="text-center mb-2">Forgot Password?</h4>
+                  <p className="text-center text-muted mb-4">
+                    Enter your email address and we'll send you instructions to
+                    reset your password.
+                  </p>
+
+                  {error && (
+                    <div className="alert alert-danger" role="alert">
+                      {error}
+                    </div>
+                  )}
+
+                  <form onSubmit={handleSubmit}>
+                    <div className="mb-3">
+                      <label className="form-label">Email Address</label>
+                      <input
+                        type="email"
+                        className="form-control"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        placeholder="your@email.com"
+                        required
+                      />
+                    </div>
+
+                    <button
+                      type="submit"
+                      className="btn btn-primary w-100 py-3"
+                      disabled={loading || !email}
+                    >
+                      {loading ? "Sending..." : "Send Reset Instructions"}
+                    </button>
+                  </form>
+
+                  <div className="text-center mt-3">
+                    <small className="text-muted">
+                      Remember your password?{" "}
+                      <a
+                        href="#"
+                        className="text-primary text-decoration-none"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          resetModal();
+                          if (onBackToLogin) {
+                            onBackToLogin();
+                          } else {
+                            onHide();
+                          }
+                        }}
+                      >
+                        Back to Login
+                      </a>
+                    </small>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ForgotPasswordModal;