Updated pki regenerate dialog

src/components/Dialog/PkiRegenerateDialog.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@components/UI/Button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.js";
+
+export interface PkiRegenerateDialogProps {
+  open: boolean;
+  onOpenChange: () => void;
+  onSubmit: () => void;
+}
+
+export const PkiRegenerateDialog = ({
+  open,
+  onOpenChange,
+  onSubmit,
+}: PkiRegenerateDialogProps): JSX.Element => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Regenerate Key pair?</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to regenerate key pair?
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="destructive" onClick={() => onSubmit()}>
+            Regenerate
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/PageComponents/Config/Security.tsx

@@ -1,3 +1,4 @@
+import { PkiRegenerateDialog } from "@app/components/Dialog/PkiRegenerateDialog";
 import { DynamicForm } from "@app/components/Form/DynamicForm.js";
 import {
   getX25519PrivateKey,
@@ -30,6 +31,7 @@ export const Security = (): JSX.Element => {
   );
   const [adminKeyValidationText, setAdminKeyValidationText] =
     useState<string>();
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
   const onSubmit = (data: SecurityValidation) => {
     if (privateKeyValidationText || adminKeyValidationText) return;
@@ -69,11 +71,10 @@ export const Security = (): JSX.Element => {
   };
 
   const privateKeyClickEvent = () => {
-    const generate = confirm(
-      "Are you sure you want to generate a new key pair?",
-    );
-    if (!generate) return;
+    setDialogOpen(true);
+  };
 
+  const pkiRegenerate = () => {
     const privateKey = getX25519PrivateKey();
     const publicKey = getX25519PublicKey(privateKey);
 
@@ -84,6 +85,8 @@ export const Security = (): JSX.Element => {
       privateKeyBitCount,
       setPrivateKeyValidationText,
     );
+
+    setDialogOpen(false);
   };
 
   const privateKeyInputChangeEvent = (
@@ -114,6 +117,7 @@ export const Security = (): JSX.Element => {
   };
 
   return (
+    <>
       <DynamicForm<SecurityValidation>
         onSubmit={onSubmit}
         submitType="onSubmit"
@@ -217,7 +221,8 @@ export const Security = (): JSX.Element => {
                 type: "toggle",
                 name: "bluetoothLoggingEnabled",
                 label: "Allow Bluetooth Logging",
-              description: "Enables device (serial style logs) over Bluetooth",
+                description:
+                  "Enables device (serial style logs) over Bluetooth",
               },
               {
                 type: "toggle",
@@ -235,5 +240,11 @@ export const Security = (): JSX.Element => {
           },
         ]}
       />
+      <PkiRegenerateDialog
+        open={dialogOpen}
+        onOpenChange={() => setDialogOpen(false)}
+        onSubmit={() => pkiRegenerate()}
+      />
+    </>
   );
 };