password reset

web/app/forgot-password/page.js

@@ -0,0 +1,92 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import { useState } from "react";
+
+function ForgotPasswordPage() {
+  const [usernameOrEmail, setUsernameOrEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError("");
+    setMessage("");
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/v1/auth/forgot-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ usernameOrEmail }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.message || "Something went wrong. Please try again.");
+      }
+
+      setMessage(data.message || "If an account matches, a reset link has been sent to your email.");
+      setSubmitted(true);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="auth-page">
+      <div className="auth-card">
+        <h1 className="auth-title">Forgot Password</h1>
+
+        {!submitted ? (
+          <>
+            <p style={{ color: "#6b7280", marginBottom: "1.25rem", fontSize: "0.95rem" }}>
+              Enter your username or email address and we&apos;ll send you a link to reset your password.
+            </p>
+
+            {error && <p className="auth-error">{error}</p>}
+
+            <form className="auth-form" onSubmit={handleSubmit}>
+              <label className="auth-label">
+                Username or Email
+                <input
+                  className="auth-input"
+                  type="text"
+                  value={usernameOrEmail}
+                  onChange={(e) => setUsernameOrEmail(e.target.value)}
+                  required
+                  autoComplete="username"
+                />
+              </label>
+
+              <button className="auth-submit-btn" type="submit" disabled={loading}>
+                {loading ? "Sending…" : "Send Reset Link"}
+              </button>
+            </form>
+          </>
+        ) : (
+          <p style={{ color: "#16a34a", margin: "1rem 0", lineHeight: 1.6 }}>{message}</p>
+        )}
+
+        <p className="auth-switch">
+          Remember your password?{" "}
+          <Link href="/login" className="auth-switch-link">Log in here</Link>
+        </p>
+        <p className="auth-switch">
+          Don&apos;t have an account?{" "}
+          <Link href="/register" className="auth-switch-link">Register here</Link>
+        </p>
+      </div>
+    </main>
+  );
+}
+
+export default dynamic(() => Promise.resolve(ForgotPasswordPage), {
+  ssr: false,
+});

web/app/login/page.js

@@ -82,6 +82,11 @@ function LoginPage() {
           Don't have an account?{" "}
           <Link href={searchParams.get("next") ? `/register?next=${encodeURIComponent(searchParams.get("next"))}` : "/register"} className="auth-switch-link">Register here</Link>
         </p>
+
+        <p className="auth-switch">
+          Forgot your password?{" "}
+          <Link href="/forgot-password" className="auth-switch-link">Reset it here</Link>
+        </p>
       </div>
     </main>
   );

web/app/register/page.js

@@ -174,6 +174,11 @@ function RegisterPage() {
           Already have an account?{" "}
           <Link href={searchParams.get("next") ? `/login?next=${encodeURIComponent(searchParams.get("next"))}` : "/login"} className="auth-switch-link">Log in here</Link>
         </p>
+
+        <p className="auth-switch">
+          Forgot your password?{" "}
+          <Link href="/forgot-password" className="auth-switch-link">Reset it here</Link>
+        </p>
       </div>
     </main>
   );

web/app/reset-password/page.js

@@ -0,0 +1,132 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+function ResetPasswordPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") || "";
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  if (!token) {
+    return (
+      <main className="auth-page">
+        <div className="auth-card">
+          <h1 className="auth-title">Invalid Link</h1>
+          <p className="auth-error">
+            This password reset link is missing or invalid. Please request a new one.
+          </p>
+          <p className="auth-switch">
+            <Link href="/forgot-password" className="auth-switch-link">Request a new reset link</Link>
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError("");
+
+    if (newPassword !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await fetch("/api/v1/auth/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, newPassword }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.message || "Failed to reset password. The link may have expired.");
+      }
+
+      setSuccess(true);
+      setTimeout(() => router.push("/login"), 3000);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <main className="auth-page">
+        <div className="auth-card">
+          <h1 className="auth-title">Password Reset</h1>
+          <p style={{ color: "#16a34a", margin: "1rem 0", lineHeight: 1.6 }}>
+            Your password has been reset successfully. Redirecting you to login…
+          </p>
+          <p className="auth-switch">
+            <Link href="/login" className="auth-switch-link">Go to login</Link>
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="auth-page">
+      <div className="auth-card">
+        <h1 className="auth-title">Reset Password</h1>
+
+        {error && <p className="auth-error">{error}</p>}
+
+        <form className="auth-form" onSubmit={handleSubmit}>
+          <label className="auth-label">
+            New Password
+            <input
+              className="auth-input"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              required
+              minLength={6}
+              autoComplete="new-password"
+            />
+          </label>
+
+          <label className="auth-label">
+            Confirm New Password
+            <input
+              className="auth-input"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              autoComplete="new-password"
+            />
+          </label>
+
+          <button className="auth-submit-btn" type="submit" disabled={loading}>
+            {loading ? "Resetting…" : "Reset Password"}
+          </button>
+        </form>
+
+        <p className="auth-switch">
+          Remember your password?{" "}
+          <Link href="/login" className="auth-switch-link">Log in here</Link>
+        </p>
+      </div>
+    </main>
+  );
+}
+
+export default dynamic(() => Promise.resolve(ResetPasswordPage), {
+  ssr: false,
+});