feat: Add pki backup dialog, refactor Channels pre-shared key to support regenerate dialog

src/components/Form/FormPasswordGenerator.tsx

@@ -7,6 +7,7 @@ import { Eye, EyeOff } from "lucide-react";
 import type { ChangeEventHandler, MouseEventHandler } from "react";
 import { useState } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
+import type { ButtonVariant } from "@components/UI/Button";
 
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
   type: "passwordGenerator";
@@ -15,7 +16,12 @@ export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
   devicePSKBitCount: number;
   inputChange: ChangeEventHandler;
   selectChange: (event: string) => void;
-  buttonClick: MouseEventHandler;
+  actionButtons: {
+    text: string;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    variant: ButtonVariant;
+    className?: string;
+  }[];
 }
 
 export function PasswordGenerator<T extends FieldValues>({
@@ -38,19 +44,18 @@ export function PasswordGenerator<T extends FieldValues>({
           action={
             field.hide
               ? {
-                  icon: passwordShown ? EyeOff : Eye,
-                  onClick: togglePasswordVisiblity,
-                }
+                icon: passwordShown ? EyeOff : Eye,
+                onClick: togglePasswordVisiblity,
+              }
               : undefined
           }
           devicePSKBitCount={field.devicePSKBitCount}
           bits={field.bits}
           inputChange={field.inputChange}
           selectChange={field.selectChange}
-          buttonClick={field.buttonClick}
           value={value}
           variant={field.validationText ? "invalid" : "default"}
-          buttonText="Generate"
+          actionButtons={field.actionButtons}
           {...field.properties}
           {...rest}
           disabled={disabled}