gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add delete API key (#25)

Browse Source
This commit is contained in:
KM Koushik
2024-05-31 08:21:51 +10:00
committed by GitHub
parent 8b61223153
commit f183905c9f
5 changed files with 161 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/web/src/app/(dashboard)/api-keys/add-api-key.tsx
View File

@@ -14,7 +14,7 @@ import {
import { api } from "~/trpc/react";
import { useState } from "react";
import { CheckIcon, ClipboardCopy, Plus } from "lucide-react";
import { CheckIcon, ClipboardCopy, Eye, EyeOff, Plus } from "lucide-react";
import { toast } from "@unsend/ui/src/toaster";
export default function AddApiKey() {
@@ -23,6 +23,7 @@ export default function AddApiKey() {
const [apiKey, setApiKey] = useState("");
const addDomainMutation = api.apiKey.createToken.useMutation();
const [isCopied, setIsCopied] = useState(false);
const [showApiKey, setShowApiKey] = useState(false);
const utils = api.useUtils();
@@ -73,20 +74,48 @@ export default function AddApiKey() {
<DialogHeader>
<DialogTitle>Copy API key</DialogTitle>
</DialogHeader>
<div className="py-2 bg-muted rounded-lg px-2 flex items-center justify-between">
<p>{apiKey}</p>
<Button
variant="ghost"
className="hover:bg-transparent p-0 cursor-pointer group-hover:opacity-100"
onClick={handleCopy}
>
{isCopied ? (
<CheckIcon className="h-4 w-4 text-green-500" />
<div className="py-1 bg-secondary rounded-lg px-4 flex items-center justify-between mt-2">
<div>
{showApiKey ? (
<p className="text-sm">{apiKey}</p>
) : (
<ClipboardCopy className="h-4 w-4" />
<div className="flex gap-1">
{Array.from({ length: 30 }).map((_, index) => (
<div
key={index}
className="w-1 h-1 bg-muted-foreground rounded-lg"
/>
))}
</div>
)}
</Button>
</div>
<div className="flex gap-4">
<Button
variant="ghost"
className="hover:bg-transparent p-0 cursor-pointer group-hover:opacity-100"
onClick={() => setShowApiKey(!showApiKey)}
>
{showApiKey ? (
<Eye className="h-4 w-4" />
) : (
<EyeOff className="h-4 w-4" />
)}
</Button>
<Button
variant="ghost"
className="hover:bg-transparent p-0 cursor-pointer group-hover:opacity-100"
onClick={handleCopy}
>
{isCopied ? (
<CheckIcon className="h-4 w-4 text-green-500" />
) : (
<ClipboardCopy className="h-4 w-4" />
)}
</Button>
</div>
</div>
<div></div>
<DialogFooter>
<Button
type="submit"
@@ -110,7 +139,7 @@ export default function AddApiKey() {
id="name"
placeholder="prod key"
defaultValue=""
className="col-span-3"
className="col-span-3 mt-1"
onChange={(e) => setName(e.target.value)}
value={name}
/>

7
apps/web/src/app/(dashboard)/api-keys/api-list.tsx
View File

@@ -10,6 +10,7 @@ import {
} from "@unsend/ui/src/table";
import { formatDistanceToNow } from "date-fns";
import { api } from "~/trpc/react";
import DeleteApiKey from "./delete-api-key";
export default function ApiList() {
const apiKeysQuery = api.apiKey.getApiKeys.useQuery();
@@ -24,7 +25,8 @@ export default function ApiList() {
<TableHead>Token</TableHead>
<TableHead>Permission</TableHead>
<TableHead>Last used</TableHead>
<TableHead className="rounded-tr-xl">Created at</TableHead>
<TableHead>Created at</TableHead>
<TableHead className="rounded-tr-xl">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -41,6 +43,9 @@ export default function ApiList() {
<TableCell>
{formatDistanceToNow(apiKey.createdAt, { addSuffix: true })}
</TableCell>
<TableCell>
<DeleteApiKey apiKey={apiKey} />
</TableCell>
</TableRow>
))}
</TableBody>

93
apps/web/src/app/(dashboard)/api-keys/delete-api-key.tsx Normal file
View File

@@ -0,0 +1,93 @@
"use client";
import { Button } from "@unsend/ui/src/button";
import { Input } from "@unsend/ui/src/input";
import { Label } from "@unsend/ui/src/label";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@unsend/ui/src/dialog";
import { api } from "~/trpc/react";
import React, { useState } from "react";
import { ApiKey, Domain } from "@prisma/client";
import { toast } from "@unsend/ui/src/toaster";
import { Trash2 } from "lucide-react";
export const DeleteApiKey: React.FC<{
apiKey: Partial<ApiKey> & { id: number };
}> = ({ apiKey }) => {
const [open, setOpen] = useState(false);
const [domainName, setDomainName] = useState("");
const deleteApiKeyMutation = api.apiKey.deleteApiKey.useMutation();
const utils = api.useUtils();
function handleSave() {
deleteApiKeyMutation.mutate(
{
id: apiKey.id,
},
{
onSuccess: () => {
utils.apiKey.invalidate();
setOpen(false);
toast.success(`API key deleted`);
},
}
);
}
return (
<Dialog
open={open}
onOpenChange={(_open) => (_open !== open ? setOpen(_open) : null)}
>
<DialogTrigger asChild>
<Button variant="ghost" size="sm">
<Trash2 className="h-4 w-4 text-red-600/80" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete API key</DialogTitle>
<DialogDescription>
Are you sure you want to delete{" "}
<span className="font-semibold text-primary">{apiKey.name}</span>?
You can't reverse this.
</DialogDescription>
</DialogHeader>
<div className="py-2">
<Label htmlFor="name" className="text-right">
Type <span className="text-primary">{apiKey.name}</span> to confirm
</Label>
<Input
id="name"
defaultValue=""
className="mt-2"
onChange={(e) => setDomainName(e.target.value)}
value={domainName}
/>
</div>
<DialogFooter>
<Button
type="submit"
variant="destructive"
onClick={handleSave}
disabled={
deleteApiKeyMutation.isPending || apiKey.name !== domainName
}
>
{deleteApiKeyMutation.isPending ? "Deleting..." : "Delete"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};
export default DeleteApiKey;