jiang13-bbs/frontend/app/reset-password/page.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { KeyRound } from "lucide-react";
import { apiOperations } from "@/lib/api";

export default function ResetPasswordPage() {
  const [enabled, setEnabled] = useState(false);
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [password, setPassword] = useState("");
  const [busy, setBusy] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");

  useEffect(() => {
    apiOperations<{ password_reset: boolean }>("/api/site-state")
      .then((s) => setEnabled(s.password_reset))
      .catch(() => setError("暂时无法读取站点状态"));
  }, []);

  async function sendCode() {
    if (sending || !email) return;
    setSending(true);
    setError("");
    setMessage("");
    try {
      const r = await apiOperations<{ message: string }>("/api/auth/code", "POST", {
        email,
        purpose: "reset",
      });
      setMessage(r.message);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setSending(false);
    }
  }

  async function resetPassword(e: React.FormEvent) {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    setError("");
    setMessage("");
    try {
      const r = await apiOperations<{ message: string }>("/api/auth/reset-password", "POST", {
        email,
        code,
        password,
      });
      setMessage(r.message);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="max-w-md mx-auto pt-8 sm:pt-14">
      <div className="mb-7 text-center">
        <span
          className="inline-flex w-14 h-14 rounded-2xl items-center justify-center mb-4"
          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
        >
          <KeyRound size={26} />
        </span>
        <h1 className="text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
          找回密码
        </h1>
        <p className="text-sm mt-2" style={{ color: "var(--ink-2)" }}>
          通过邮箱验证码重置登录密码
        </p>
      </div>

      <form onSubmit={resetPassword} className="panel p-6 sm:p-7 space-y-4">
        {error && (
          <div className="alert-error" role="alert">
            {error}
          </div>
        )}
        {!enabled ? (
          <p className="meta text-[13px]">站点暂未开放邮件找回密码。</p>
        ) : (
          <>
            <div>
              <label className="field-label" htmlFor="reset-email">
                邮箱
              </label>
              <input
                id="reset-email"
                type="email"
                required
                className="field"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                autoComplete="email"
                placeholder="you@example.com"
              />
            </div>
            <div>
              <label className="field-label" htmlFor="reset-code">
                邮箱验证码
              </label>
              <div className="flex gap-2 items-stretch">
                <input
                  id="reset-code"
                  className="field min-w-0 flex-1"
                  value={code}
                  onChange={(e) => setCode(e.target.value)}
                  required
                  autoComplete="one-time-code"
                  inputMode="numeric"
                  placeholder="6 位验证码"
                />
                <button
                  type="button"
                  className="btn btn-line shrink-0"
                  disabled={sending || busy || !email}
                  onClick={() => void sendCode()}
                >
                  {sending ? "正在排队…" : "发送验证码"}
                </button>
              </div>
            </div>
            <div>
              <label className="field-label" htmlFor="reset-password">
                新密码
              </label>
              <input
                id="reset-password"
                type="password"
                required
                minLength={6}
                maxLength={64}
                autoComplete="new-password"
                className="field"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="至少 6 位"
              />
            </div>
            <button
              type="submit"
              className="btn btn-primary w-full justify-center mt-2"
              disabled={busy || !code || password.length < 6}
            >
              {busy ? "处理中…" : "更新密码"}
            </button>
          </>
        )}
        {message && (
          <p className="meta" role="status">
            {message}
          </p>
        )}
      </form>

      <p className="meta text-center mt-5">
        <Link href="/login" className="font-semibold" style={{ color: "var(--accent)" }}>
          返回登录
        </Link>
      </p>
    </div>
  );
}