feat: implement forgot password, added security updates

web/src/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,67 @@
+import { type FormEvent, useState } from "react";
+import { Link } from "react-router-dom";
+import { requestForgotPassword } from "../api/auth";
+
+const GENERIC_SUCCESS =
+  "If an account exists, reset instructions were sent.";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [pending, setPending] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const emailError = !email.trim() ? "Email is required." : "";
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setSubmitted(true);
+    if (emailError) return;
+
+    setPending(true);
+    try {
+      await requestForgotPassword({ email });
+      setMessage(GENERIC_SUCCESS);
+    } catch {
+      setMessage(GENERIC_SUCCESS);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="flex justify-center py-16 px-4">
+      <div className="card w-full max-w-md">
+        <h1 className="section-title mb-2">Forgot Password</h1>
+        <p className="muted mb-6">
+          Enter your email and we will send reset instructions if the account is eligible.
+        </p>
+
+        {message ? <div className="alert mb-4">{message}</div> : null}
+
+        <form className="stack gap-4" onSubmit={handleSubmit}>
+          <label className="stack gap-1">
+            <span className="text-sm font-medium">Email</span>
+            <input
+              className={`input ${submitted && emailError ? "border-red-500/60 ring-1 ring-red-500/40" : ""}`}
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoComplete="email"
+              required
+            />
+            {submitted && emailError ? <span className="text-xs text-red-400">{emailError}</span> : null}
+          </label>
+
+          <button className="btn primary" type="submit" disabled={pending}>
+            {pending ? "Sending..." : "Send reset instructions"}
+          </button>
+        </form>
+
+        <p className="muted text-sm mt-6 text-center">
+          Back to <Link className="link" to="/login">Sign in</Link>
+        </p>
+      </div>
+    </div>
+  );
+}

web/src/pages/LoginPage.tsx

@@ -125,6 +125,11 @@ export default function LoginPage() {
               <span className="text-xs text-red-400">{passwordError}</span>
             )}
           </label>
+          <div className="text-right">
+            <Link className="link text-sm" to="/forgot-password">
+              Forgot password?
+            </Link>
+          </div>
           <button className="btn primary" type="submit" disabled={pending}>
             {pending ? "Signing in..." : "Sign in"}
           </button>

web/src/pages/ResetPasswordPage.tsx

@@ -0,0 +1,115 @@
+import { type FormEvent, useMemo, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { confirmForgotPassword } from "../api/auth";
+
+function useQueryParams() {
+  const location = useLocation();
+  return useMemo(() => new URLSearchParams(location.search), [location.search]);
+}
+
+const GENERIC_RESET_ERROR = "Invalid or expired reset link.";
+
+export default function ResetPasswordPage() {
+  const navigate = useNavigate();
+  const params = useQueryParams();
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [pending, setPending] = useState(false);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const uid = params.get("uid") || "";
+  const token = params.get("token") || "";
+
+  const passwordError =
+    !newPassword
+      ? "New password is required."
+      : newPassword.length < 12
+      ? "Password must be at least 12 characters."
+      : "";
+  const confirmError =
+    !confirmPassword
+      ? "Please confirm your password."
+      : confirmPassword !== newPassword
+      ? "Passwords do not match."
+      : "";
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    if (!uid || !token) {
+      setError(GENERIC_RESET_ERROR);
+      return;
+    }
+    if (passwordError || confirmError) {
+      setError(passwordError || confirmError);
+      return;
+    }
+
+    setPending(true);
+    try {
+      await confirmForgotPassword({
+        uid,
+        token,
+        newPassword,
+      });
+      setSuccess("Password reset successful. You can sign in now.");
+      setTimeout(() => navigate("/login", { replace: true }), 1000);
+    } catch (err: any) {
+      if (err?.code === "INVALID_OR_EXPIRED_RESET_LINK" || err?.status === 400) {
+        setError(GENERIC_RESET_ERROR);
+      } else {
+        setError(err?.message || "Unable to reset password.");
+      }
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="flex justify-center py-16 px-4">
+      <div className="card w-full max-w-md">
+        <h1 className="section-title mb-2">Reset Password</h1>
+        <p className="muted mb-6">Set a new password for your account.</p>
+
+        {!uid || !token ? <div className="alert alert-error mb-4">{GENERIC_RESET_ERROR}</div> : null}
+        {error ? <div className="alert alert-error mb-4">{error}</div> : null}
+        {success ? <div className="alert mb-4">{success}</div> : null}
+
+        <form className="stack gap-4" onSubmit={handleSubmit}>
+          <label className="stack gap-1">
+            <span className="text-sm font-medium">New password</span>
+            <input
+              className="input"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              autoComplete="new-password"
+              required
+            />
+          </label>
+          <label className="stack gap-1">
+            <span className="text-sm font-medium">Confirm password</span>
+            <input
+              className="input"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              autoComplete="new-password"
+              required
+            />
+          </label>
+          <button className="btn primary" type="submit" disabled={pending || !uid || !token}>
+            {pending ? "Resetting..." : "Reset password"}
+          </button>
+        </form>
+
+        <p className="muted text-sm mt-6 text-center">
+          <Link className="link" to="/forgot-password">Request a new reset link</Link>
+        </p>
+      </div>
+    </div>
+  );
+}