-
Notifications
You must be signed in to change notification settings - Fork 285
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Confirmation Dialog and New Key Dialog
- Loading branch information
Showing
4 changed files
with
204 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
...d/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/reroll-confirmation-dialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogFooter, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| } from "@/components/ui/dialog"; | ||
|
|
||
| type Props = { | ||
| open: boolean; | ||
| setOpen: (open: boolean) => void; | ||
| onClick: () => void; | ||
| }; | ||
|
|
||
| export function RerollConfirmationDialog({ open, setOpen, onClick }: Props) { | ||
| return ( | ||
| <Dialog open={open} onOpenChange={(o: boolean) => setOpen(o)}> | ||
| <DialogContent className="border-alert"> | ||
| <DialogHeader> | ||
| <DialogTitle>Reroll Key</DialogTitle> | ||
| <DialogDescription> | ||
| Make sure to replace it in your system before it expires. This action cannot be undone. | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
|
|
||
| <Alert variant="alert"> | ||
| <AlertTitle>Warning</AlertTitle> | ||
| <AlertDescription>This action is not reversible. Please be certain.</AlertDescription> | ||
| </Alert> | ||
|
|
||
| <DialogFooter className="justify-end"> | ||
| <Button type="button" onClick={() => setOpen(!open)} variant="secondary"> | ||
| Cancel | ||
| </Button> | ||
| <Button type="submit" variant="alert" onClick={onClick}> | ||
| Reroll Key | ||
| </Button> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
...hboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/reroll-new-key-dialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { CopyButton } from "@/components/dashboard/copy-button"; | ||
| import { VisibleButton } from "@/components/dashboard/visible-button"; | ||
| import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { Code } from "@/components/ui/code"; | ||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogFooter, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| } from "@/components/ui/dialog"; | ||
| import { AlertCircle } from "lucide-react"; | ||
| import Link from "next/link"; | ||
| import { useState } from "react"; | ||
|
|
||
| type Props = { | ||
| newKey: | ||
| | { | ||
| keyId: `key_${string}`; | ||
| key: string; | ||
| } | ||
| | undefined; | ||
| apiId: string; | ||
| keyAuthId: string; | ||
| }; | ||
|
|
||
| export function RerollNewKeyDialog({ newKey, apiId, keyAuthId }: Props) { | ||
| if (!newKey) { | ||
| return null; | ||
| } | ||
|
|
||
| const split = newKey.key.split("_") ?? []; | ||
| const maskedKey = | ||
| split.length >= 2 | ||
| ? `${split.at(0)}_${"*".repeat(split.at(1)?.length ?? 0)}` | ||
| : "*".repeat(split.at(0)?.length ?? 0); | ||
| const [showKey, setShowKey] = useState(false); | ||
|
|
||
| const [open, setOpen] = useState(Boolean(newKey)); | ||
|
|
||
| return ( | ||
| <Dialog open={open} onOpenChange={(o: boolean) => setOpen(o)}> | ||
| <DialogContent> | ||
| <DialogHeader> | ||
| <DialogTitle>Your New API Key</DialogTitle> | ||
| </DialogHeader> | ||
| <Alert> | ||
| <AlertCircle className="w-4 h-4" /> | ||
| <AlertTitle>This key is only shown once and can not be recovered </AlertTitle> | ||
| <AlertDescription> | ||
| Please pass it on to your user or store it somewhere safe. | ||
| </AlertDescription> | ||
| </Alert> | ||
| <Code className="flex items-center justify-between w-full gap-4 my-8 ph-no-capture max-sm:text-xs sm:overflow-hidden"> | ||
| <pre>{showKey ? newKey.key : maskedKey}</pre> | ||
| <div className="flex items-start justify-between gap-4 max-sm:absolute max-sm:right-11"> | ||
| <VisibleButton isVisible={showKey} setIsVisible={setShowKey} /> | ||
| <CopyButton value={newKey.key} /> | ||
| </div> | ||
| </Code> | ||
| <DialogFooter className="justify-end"> | ||
| <Link href={`/keys/${keyAuthId}`}> | ||
| <Button variant="secondary">Back</Button> | ||
| </Link> | ||
| <Link href={`/apis/${apiId}/keys/${keyAuthId}/${newKey.keyId}`}> | ||
| <Button variant="secondary">View key details</Button> | ||
| </Link> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } |