feat(api): enhance API key display with code editor and clipboard copy

This commit is contained in:
Mauricio Siu
2025-03-08 19:26:18 -06:00
parent 55bab4bba4
commit 777aa3e4be

View File

@@ -31,6 +31,8 @@ import {
FormDescription, FormDescription,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import copy from "copy-to-clipboard";
import { CodeEditor } from "@/components/shared/code-editor";
const formSchema = z.object({ const formSchema = z.object({
name: z.string().min(1, "Name is required"), name: z.string().min(1, "Name is required"),
@@ -441,13 +443,16 @@ export const AddApiKey = () => {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
<div className="rounded-md bg-muted p-4 font-mono text-sm break-all"> <CodeEditor
{newApiKey} className="font-mono text-sm break-all"
</div> language="properties"
value={newApiKey}
readOnly
/>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<Button <Button
onClick={() => { onClick={() => {
navigator.clipboard.writeText(newApiKey); copy(newApiKey);
toast.success("API key copied to clipboard"); toast.success("API key copied to clipboard");
}} }}
> >