password reset

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