完善站点运营设置:分路由管理、登录可见评论、邮件模板内联与关闭注册 SSR。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
169
frontend/app/reset-password/page.tsx
Normal file
169
frontend/app/reset-password/page.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user