94 lines
3.7 KiB
TypeScript
94 lines
3.7 KiB
TypeScript
import { KeyRound, Trash2 } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog';
|
|
import type { Passkey } from '@/types/auth';
|
|
|
|
type Props = {
|
|
passkey: Passkey;
|
|
onDelete: (id: number, onError: () => void) => void;
|
|
};
|
|
|
|
export default function PasskeyItem({ passkey, onDelete }: Props) {
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
const handleDelete = () => {
|
|
setIsDeleting(true);
|
|
onDelete(passkey.id, () => setIsDeleting(false));
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center justify-between border-b p-4 last:border-b-0">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-muted">
|
|
<KeyRound className="h-5 w-5 text-muted-foreground" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2.5">
|
|
<p className="font-medium tracking-tight">
|
|
{passkey.name}
|
|
</p>
|
|
{passkey.authenticator && (
|
|
<span className="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-[11px] font-medium tracking-wide text-muted-foreground uppercase ring-1 ring-border ring-inset">
|
|
{passkey.authenticator}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Added {passkey.created_at_diff}
|
|
{passkey.last_used_at_diff && (
|
|
<>
|
|
<span className="mx-1 text-muted-foreground/50">
|
|
/
|
|
</span>
|
|
Last used {passkey.last_used_at_diff}
|
|
</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
<span className="sr-only">Remove</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogTitle>Remove passkey</DialogTitle>
|
|
<DialogDescription>
|
|
Are you sure you want to remove the "{passkey.name}"
|
|
passkey? You will no longer be able to use it to sign
|
|
in.
|
|
</DialogDescription>
|
|
<DialogFooter className="gap-2">
|
|
<DialogClose asChild>
|
|
<Button variant="secondary">Cancel</Button>
|
|
</DialogClose>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDelete}
|
|
disabled={isDeleting}
|
|
>
|
|
{isDeleting ? 'Removing...' : 'Remove passkey'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|