Files
ai-agent/web/app/dashboard/users/_components/reset-password.tsx
T

107 lines
3.1 KiB
TypeScript

"use client"
import { useState } from "react"
import { CopyIcon } from "lucide-react"
import { toast } from "sonner"
import { type AdminUser } from "@/lib/api/admin"
import { useI18n } from "@/i18n/provider"
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 t = useI18n()
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(t("user.copied"))
} catch {
toast.error(t("user.copyFailed"))
} finally {
setCopying(false)
}
}
return (
<>
<Dialog open={open && !showingResult} onOpenChange={onOpenChange}>
<DialogContent showCloseButton={!saving}>
<DialogHeader>
<DialogTitle>{t("user.confirmResetTitle")}</DialogTitle>
<DialogDescription>
{t("user.confirmResetDescription", { username: item?.username || "-" })}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button onClick={() => void onConfirm()} disabled={saving}>
{saving ? t("user.resetting") : t("user.confirmReset")}
</Button>
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
disabled={saving}
>
{t("user.cancel")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog open={open && showingResult} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>{t("user.resetSuccessTitle")}</DialogTitle>
<DialogDescription>
{t("user.resetSuccessDescription", { username: item?.username || "-" })}
</DialogDescription>
</DialogHeader>
<div className="rounded-md border bg-muted/35 p-4">
<div className="text-xs text-muted-foreground">{t("user.newPassword")}</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 ? t("user.copying") : t("user.copyPassword")}
</Button>
<Button type="button" onClick={() => onOpenChange(false)}>
{t("user.close")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}