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