Files
booschat/web/app/dashboard/users/_components/reset-password.tsx
T
2026-04-24 12:01:30 +08:00

105 lines
3.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client"
import { useState } from "react"
import { CopyIcon } from "lucide-react"
import { toast } from "sonner"
import { type AdminUser } from "@/lib/api/admin"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
type ResetPasswordDialogsProps = {
open: boolean
saving: boolean
item: AdminUser | null
password: string
onOpenChange: (open: boolean) => void
onConfirm: () => Promise<void>
}
export function ResetPasswordDialogs({
open,
saving,
item,
password,
onOpenChange,
onConfirm,
}: ResetPasswordDialogsProps) {
const [copying, setCopying] = useState(false)
const showingResult = password.trim().length > 0
async function handleCopy() {
if (!password || copying) {
return
}
setCopying(true)
try {
await navigator.clipboard.writeText(password)
toast.success("密码已复制")
} catch {
toast.error("复制失败,请手动复制")
} finally {
setCopying(false)
}
}
return (
<>
<Dialog open={open && !showingResult} onOpenChange={onOpenChange}>
<DialogContent showCloseButton={!saving}>
<DialogHeader>
<DialogTitle>确认重置密码</DialogTitle>
<DialogDescription>
确认后将为 {item?.username || "-"} 生成新的随机密码,并使该用户当前登录会话失效。
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button onClick={() => void onConfirm()} disabled={saving}>
{saving ? "重置中..." : "确认重置"}
</Button>
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
disabled={saving}
>
取消
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog open={open && showingResult} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>重置密码成功</DialogTitle>
<DialogDescription>
{item?.username || "-"} 的新密码已生成,请及时复制并安全传达。
</DialogDescription>
</DialogHeader>
<div className="rounded-xl border bg-muted/40 p-4">
<div className="text-xs text-muted-foreground">新密码</div>
<div className="mt-2 break-all font-mono text-base">{password}</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => void handleCopy()} disabled={copying}>
<CopyIcon />
{copying ? "复制中..." : "复制密码"}
</Button>
<Button type="button" onClick={() => onOpenChange(false)}>
关闭
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}