128 lines
3.4 KiB
TypeScript
128 lines
3.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
|
||
import {
|
||
AppFormDialog,
|
||
dialogPrimaryButtonClass,
|
||
dialogSecondaryButtonClass,
|
||
} from "~/components/common/AppFormDialog";
|
||
import { Button } from "~/components/ui/button";
|
||
import { Input } from "~/components/ui/input";
|
||
import {
|
||
formFieldClass,
|
||
formHintClass,
|
||
formInputClass,
|
||
modalFormClass,
|
||
} from "../platform/modalUi";
|
||
|
||
type ResetPasswordDialogProps = {
|
||
open: boolean;
|
||
displayName: string;
|
||
username: string;
|
||
saving: boolean;
|
||
onSubmit: (newPassword: string) => Promise<void>;
|
||
onClose: () => void;
|
||
};
|
||
|
||
export function ResetPasswordDialog({
|
||
open,
|
||
displayName,
|
||
username,
|
||
saving,
|
||
onSubmit,
|
||
onClose,
|
||
}: ResetPasswordDialogProps) {
|
||
const [password, setPassword] = useState("");
|
||
const [confirm, setConfirm] = useState("");
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
setPassword("");
|
||
setConfirm("");
|
||
setError(null);
|
||
}, [open]);
|
||
|
||
const handleSubmit = async (event: React.FormEvent) => {
|
||
event.preventDefault();
|
||
if (password.length < 8 || password.length > 72) {
|
||
setError("密码长度需为 8~72 字符");
|
||
return;
|
||
}
|
||
if (password !== confirm) {
|
||
setError("两次输入的密码不一致");
|
||
return;
|
||
}
|
||
setError(null);
|
||
await onSubmit(password);
|
||
};
|
||
|
||
return (
|
||
<AppFormDialog
|
||
open={open}
|
||
onOpenChange={(nextOpen) => {
|
||
if (!nextOpen) onClose();
|
||
}}
|
||
eyebrow="SECURITY"
|
||
title="重置密码"
|
||
>
|
||
<form
|
||
className={`${modalFormClass} pb-5`}
|
||
onSubmit={(event) => void handleSubmit(event)}
|
||
>
|
||
<p className="mb-4 text-[12px] text-[#587087]">
|
||
正在为 <strong className="text-[#23384e]">{displayName}</strong>
|
||
（{username}）设置新密码。对方需使用新密码重新登录。
|
||
</p>
|
||
<label className={formFieldClass}>
|
||
<span>
|
||
新密码<span className="text-danger">*</span>
|
||
</span>
|
||
<Input
|
||
className={formInputClass}
|
||
type="password"
|
||
autoFocus
|
||
value={password}
|
||
onChange={(event) => setPassword(event.target.value)}
|
||
autoComplete="new-password"
|
||
placeholder="8~72 字符"
|
||
/>
|
||
</label>
|
||
<label className={formFieldClass}>
|
||
<span>
|
||
确认新密码<span className="text-danger">*</span>
|
||
</span>
|
||
<Input
|
||
className={formInputClass}
|
||
type="password"
|
||
value={confirm}
|
||
onChange={(event) => setConfirm(event.target.value)}
|
||
autoComplete="new-password"
|
||
/>
|
||
<span className={formHintClass}>重置后不会强制踢下线已有会话</span>
|
||
</label>
|
||
{error ? (
|
||
<p className="mb-3 text-[11px] text-danger">{error}</p>
|
||
) : null}
|
||
<div className="flex justify-end gap-2">
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
className={dialogSecondaryButtonClass}
|
||
onClick={onClose}
|
||
disabled={saving}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
type="submit"
|
||
className={dialogPrimaryButtonClass}
|
||
disabled={saving}
|
||
>
|
||
{saving ? "重置中…" : "确认重置"}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</AppFormDialog>
|
||
);
|
||
}
|