132 行
4.4 KiB
TypeScript
132 行
4.4 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { isApiError } from "../api/types";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { Button } from "../components/ui/button";
|
|
import { Input } from "../components/ui/input";
|
|
import { Label } from "../components/ui/label";
|
|
import { markOnboardingEntryReady } from "../lib/onboardingGuide";
|
|
|
|
const PASSWORD_REQUIREMENTS = [
|
|
"至少 12 位",
|
|
"包含大写字母、小写字母和数字",
|
|
"不要使用公司名、常见顺序或过于简单的组合",
|
|
];
|
|
|
|
export function ChangePasswordPage() {
|
|
const navigate = useNavigate();
|
|
const { changePassword } = useAuth();
|
|
|
|
const [oldPassword, setOldPassword] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setError("");
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
setError("两次输入的新密码不一致，请确认后再提交。");
|
|
return;
|
|
}
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
await changePassword(oldPassword, newPassword);
|
|
markOnboardingEntryReady();
|
|
navigate("/portal", { replace: true });
|
|
} catch (err) {
|
|
if (isApiError(err)) {
|
|
setError(mapApiErrorMessage(err.code, err.details, err.message));
|
|
} else {
|
|
setError("修改密码失败，请稍后重试");
|
|
}
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="card-std space-y-6 border-primary-100 p-6">
|
|
<div className="mb-6 space-y-2">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-primary">hyb-oa</p>
|
|
<h1 className="text-2xl font-bold text-zinc-900">修改密码</h1>
|
|
<p className="text-sm text-secondary">
|
|
为了账号安全，请先修改初始密码后再进入系统。
|
|
</p>
|
|
</div>
|
|
|
|
<form className="space-y-4" onSubmit={handleSubmit}>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="oldPassword">旧密码</Label>
|
|
<Input
|
|
autoComplete="current-password"
|
|
data-testid="change-password-old"
|
|
id="oldPassword"
|
|
onChange={(event) => setOldPassword(event.target.value)}
|
|
placeholder="请输入旧密码"
|
|
type="password"
|
|
value={oldPassword}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label htmlFor="newPassword">新密码</Label>
|
|
<Input
|
|
autoComplete="new-password"
|
|
data-testid="change-password-new"
|
|
id="newPassword"
|
|
onChange={(event) => setNewPassword(event.target.value)}
|
|
placeholder="至少 12 位，建议包含大小写/数字"
|
|
type="password"
|
|
value={newPassword}
|
|
/>
|
|
<p className="text-xs text-zinc-500">密码要求：{PASSWORD_REQUIREMENTS.join("；")}。</p>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
|
|
<p className="font-medium text-zinc-700">建议的新密码规则</p>
|
|
<ul className="mt-1 list-disc space-y-1 pl-4">
|
|
{PASSWORD_REQUIREMENTS.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<Label htmlFor="confirmPassword">确认新密码</Label>
|
|
<Input
|
|
autoComplete="new-password"
|
|
id="confirmPassword"
|
|
onChange={(event) => setConfirmPassword(event.target.value)}
|
|
placeholder="再次输入新密码"
|
|
type="password"
|
|
value={confirmPassword}
|
|
/>
|
|
</div>
|
|
|
|
{error ? (
|
|
<p
|
|
className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
|
|
data-testid="change-password-error"
|
|
>
|
|
{error}
|
|
</p>
|
|
) : null}
|
|
|
|
<Button
|
|
data-testid="change-password-submit"
|
|
className="w-full"
|
|
disabled={submitting || !oldPassword.trim() || !newPassword.trim() || !confirmPassword.trim()}
|
|
type="submit"
|
|
>
|
|
{submitting ? "提交中..." : "确认修改"}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|