1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { ActionButton } from "@/components/ui/action-button";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { toast } from "@/components/ui/use-toast";
import { useTranslation } from "@/lib/i18n/client";
import { api } from "@/lib/trpc";
import { RefreshCcw } from "lucide-react";
import ApiKeySuccess from "./ApiKeySuccess";
export default function RegenerateApiKey({
id,
name,
}: {
id: string;
name: string;
}) {
const { t } = useTranslation();
const router = useRouter();
const [key, setKey] = useState<string | undefined>(undefined);
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
const mutator = api.apiKeys.regenerate.useMutation({
onSuccess: (resp) => {
setKey(resp.key);
router.refresh();
},
onError: () => {
toast({
description: t("common.something_went_wrong"),
variant: "destructive",
});
setDialogOpen(false);
},
});
const handleRegenerate = () => {
mutator.mutate({ id });
};
return (
<Dialog
open={dialogOpen}
onOpenChange={(o) => {
setDialogOpen(o);
setKey(undefined);
}}
>
<DialogTrigger asChild>
<Button variant="ghost" size="sm" title="Regenerate">
<RefreshCcw className="h-4 w-4" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>
{key
? t("settings.api_keys.key_regenerated")
: t("settings.api_keys.regenerate_api_key")}
</DialogTitle>
{!key && (
<DialogDescription>
{t("settings.api_keys.regenerate_warning", { name })}
</DialogDescription>
)}
</DialogHeader>
{key ? (
<ApiKeySuccess
apiKey={key}
message={t("settings.api_keys.key_regenerated_please_copy")}
/>
) : (
<p className="text-sm">
{t("settings.api_keys.regenerate_confirmation")}
</p>
)}
<DialogFooter className="sm:justify-end">
{!key ? (
<>
<DialogClose asChild>
<Button type="button" variant="outline">
{t("actions.cancel")}
</Button>
</DialogClose>
<ActionButton
variant="destructive"
onClick={handleRegenerate}
loading={mutator.isPending}
>
{t("actions.regenerate")}
</ActionButton>
</>
) : (
<DialogClose asChild>
<Button type="button" variant="outline">
{t("actions.close")}
</Button>
</DialogClose>
)}
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|
