56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { ActionButton } from "@/components/ui/action-button";
|
|
import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { toast } from "@/components/ui/use-toast";
|
|
import { api } from "@/lib/trpc";
|
|
import { Trash } from "lucide-react";
|
|
|
|
export default function DeleteApiKey({
|
|
name,
|
|
id,
|
|
}: {
|
|
name: string;
|
|
id: string;
|
|
}) {
|
|
const router = useRouter();
|
|
const mutator = api.apiKeys.revoke.useMutation({
|
|
onSuccess: () => {
|
|
toast({
|
|
description: "Key was successfully deleted",
|
|
});
|
|
router.refresh();
|
|
},
|
|
});
|
|
|
|
return (
|
|
<ActionConfirmingDialog
|
|
title={"Delete API Key"}
|
|
description={
|
|
<p>
|
|
Are you sure you want to delete the API key "{name}"? Any
|
|
service using this API key will lose access.
|
|
</p>
|
|
}
|
|
actionButton={(setDialogOpen) => (
|
|
<ActionButton
|
|
type="button"
|
|
variant="destructive"
|
|
loading={mutator.isPending}
|
|
onClick={() =>
|
|
mutator.mutate({ id }, { onSuccess: () => setDialogOpen(false) })
|
|
}
|
|
>
|
|
Delete
|
|
</ActionButton>
|
|
)}
|
|
>
|
|
<Button variant="outline">
|
|
<Trash size={18} color="red" />
|
|
</Button>
|
|
</ActionConfirmingDialog>
|
|
);
|
|
}
|