feat: add copy button api key

web/src/components/APIKeyList.tsx

@@ -11,6 +11,7 @@ import {
   FormMessage,
   Form,
 } from "./ui/form";
+import { CopyButton } from "@/components/CopyButton";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -387,16 +388,19 @@ function AddMachinesDialog() {
               {apiKey && (
                 <FormItem>
                   <FormLabel>API Key (Copy the API key now)</FormLabel>
-                  <FormControl>
+                  <div className="flex gap-2">
-                    <Input readOnly value={apiKey.key} />
+                    <FormControl>
-                  </FormControl>
+                      <Input readOnly value={apiKey.key} />
-                  {/* <FormMessage></FormMessage> */}
+                    </FormControl>
+                    <CopyButton text={apiKey.key} />
+                  </div>
                 </FormItem>
               )}
             </div>
             <DialogFooter>
               {apiKey ? (
                 <Button
+                  className="flex gap-2"
                   type="button"
                   onClick={() => {
                     setOpen(false);
@@ -405,7 +409,11 @@ function AddMachinesDialog() {
                   Close {form.formState.isSubmitting && <LoadingIcon />}
                 </Button>
               ) : (
-                <Button type="submit" disabled={form.formState.isSubmitting}>
+                <Button
+                  className="flex gap-2"
+                  type="submit"
+                  disabled={form.formState.isSubmitting}
+                >
                   Create {form.formState.isSubmitting && <LoadingIcon />}
                 </Button>
               )}

web/src/components/CopyButton.tsx

@@ -3,6 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { Copy } from "lucide-react";
+import { toast } from "sonner";
 
 export function CopyButton({
   className,
@@ -13,7 +14,9 @@ export function CopyButton({
 }) {
   return (
     <Button
+      type="button"
       onClick={() => {
+        toast.success("Copied to clipboard");
         navigator.clipboard.writeText(props.text);
       }}
       className={cn(" p-2 min-h-0 aspect-square", className)}