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

src/components/Dialog/DialogManager.tsx

@@ -5,6 +5,7 @@ import { QRDialog } from "@components/Dialog/QRDialog.tsx";
 import { RebootDialog } from "@components/Dialog/RebootDialog.tsx";
 import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
+import { PkiBackupDialog } from "./PKIBackupDialog";
 
 export const DialogManager = (): JSX.Element => {
   const { channels, config, dialog, setDialogOpen } = useDevice();
@@ -49,6 +50,12 @@ export const DialogManager = (): JSX.Element => {
           setDialogOpen("nodeRemoval", open);
         }}
       />
+      <PkiBackupDialog
+        open={dialog.pkiBackup}
+        onOpenChange={(open) => {
+          setDialogOpen("pkiBackup", open);
+        }}
+      />
     </>
   );
 };

src/components/Dialog/PKIBackupDialog.tsx

@@ -0,0 +1,104 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Button } from "@components/UI/Button";
+import { DownloadIcon, PrinterIcon } from "lucide-react";
+import React from "react";
+import { useDevice } from "@app/core/stores/deviceStore";
+import { fromByteArray } from "base64-js";
+
+export interface PkiBackupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const PkiBackupDialog = ({
+  open,
+  onOpenChange,
+}: PkiBackupDialogProps) => {
+  const { config } = useDevice();
+  const privateKeyData = config.security?.privateKey
+
+  // If the private data doesn't exist return null
+  if (!privateKeyData) {
+    return null
+  }
+
+  const getPrivateKey = React.useMemo(() => fromByteArray(config.security?.privateKey ?? new Uint8Array(0)), [config.security?.privateKey]);
+
+  const renderPrintWindow = React.useCallback(() => {
+    const printWindow = window.open("", "_blank");
+    if (printWindow) {
+      printWindow.document.write(`
+        <html>
+          <head>
+            <title>Your Private Key</title>
+            <style>
+              body { font-family: Arial, sans-serif; padding: 20px; }
+              h1 { font-size: 18px; }
+              p { font-size: 14px; word-break: break-all; }
+            </style>
+          </head>
+          <body>
+            <h1>Your Private Key</h1>
+            <p>${getPrivateKey}</p>
+          </body>
+        </html>
+      `);
+      printWindow.document.close();
+      printWindow.print();
+    }
+  }, [getPrivateKey]);
+
+  const createDownloadKeyFile = React.useCallback(() => {
+    const blob = new Blob([getPrivateKey], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "meshtastic_private_key.txt";
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [getPrivateKey]);
+
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Backup Key</DialogTitle>
+          <DialogDescription>
+            Its important to backup your private key and store your backup securely!
+          </DialogDescription>
+          <DialogDescription>
+            <span className="font-bold break-before-auto">If you lose your private key, you will need to reset your device.</span>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="mt-6">
+          <Button
+            variant={'default'}
+            onClick={() => createDownloadKeyFile()}
+            className=""
+          >
+            <DownloadIcon size={20} className="mr-2" />
+            Download
+          </Button>
+          <Button
+            variant={'default'}
+            onClick={() => renderPrintWindow()}
+          >
+            <PrinterIcon size={20} className="mr-2" />
+            Print
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </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,
+                icon: passwordShown ? EyeOff : Eye,
-                  onClick: togglePasswordVisiblity,
+                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}

src/components/PageComponents/Channel.tsx

@@ -6,6 +6,7 @@ import { Protobuf } from "@meshtastic/js";
 import { fromByteArray, toByteArray } from "base64-js";
 import cryptoRandomString from "crypto-random-string";
 import { useState } from "react";
+import { PkiRegenerateDialog } from "../Dialog/PkiRegenerateDialog";
 
 export interface SettingsPanelProps {
   channel: Protobuf.Channel.Channel;
@@ -22,6 +23,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
     channel?.settings?.psk.length ?? 16,
   );
   const [validationText, setValidationText] = useState<string>();
+  const [preSharedDialogOpen, setPreSharedDialogOpen] = useState<boolean>(false);
 
   const onSubmit = (data: ChannelValidation) => {
     const channel = new Protobuf.Channel.Channel({
@@ -46,7 +48,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
     });
   };
 
-  const clickEvent = () => {
+  const preSharedKeyRegenerate = () => {
     setPass(
       btoa(
         cryptoRandomString({
@@ -56,6 +58,11 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
       ),
     );
     setValidationText(undefined);
+    setPreSharedDialogOpen(false);
+  };
+
+  const preSharedClickEvent = () => {
+    setPreSharedDialogOpen(true);
   };
 
   const validatePass = (input: string, count: number) => {
@@ -79,104 +86,105 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
   };
 
   return (
-    <DynamicForm<ChannelValidation>
+    <>
-      onSubmit={onSubmit}
+      <DynamicForm<ChannelValidation>
-      submitType="onSubmit"
+        onSubmit={onSubmit}
-      hasSubmitButton={true}
+        submitType="onSubmit"
-      defaultValues={{
+        hasSubmitButton={true}
-        ...channel,
+        defaultValues={{
-        ...{
+          ...channel,
-          settings: {
+          ...{
-            ...channel?.settings,
+            settings: {
-            psk: pass,
+              ...channel?.settings,
-            positionEnabled:
+              psk: pass,
-              channel?.settings?.moduleSettings?.positionPrecision !==
+              positionEnabled:
+                channel?.settings?.moduleSettings?.positionPrecision !==
                 undefined &&
-              channel?.settings?.moduleSettings?.positionPrecision > 0,
+                channel?.settings?.moduleSettings?.positionPrecision > 0,
-            preciseLocation:
+              preciseLocation:
-              channel?.settings?.moduleSettings?.positionPrecision === 32,
+                channel?.settings?.moduleSettings?.positionPrecision === 32,
-            positionPrecision:
+              positionPrecision:
-              channel?.settings?.moduleSettings?.positionPrecision === undefined
+                channel?.settings?.moduleSettings?.positionPrecision === undefined
-                ? 10
+                  ? 10
-                : channel?.settings?.moduleSettings?.positionPrecision,
+                  : channel?.settings?.moduleSettings?.positionPrecision,
+            },
           },
-        },
+        }}
-      }}
+        fieldGroups={[
-      fieldGroups={[
+          {
-        {
+            label: "Channel Settings",
-          label: "Channel Settings",
+            description: "Crypto, MQTT & misc settings",
-          description: "Crypto, MQTT & misc settings",
+            fields: [
-          fields: [
+              {
-            {
+                type: "select",
-              type: "select",
+                name: "role",
-              name: "role",
+                label: "Role",
-              label: "Role",
+                disabled: channel.index === 0,
-              disabled: channel.index === 0,
+                description:
-              description:
+                  "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
-                "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
+                properties: {
-              properties: {
+                  enumValue:
-                enumValue:
+                    channel.index === 0
-                  channel.index === 0
+                      ? { PRIMARY: 1 }
-                    ? { PRIMARY: 1 }
+                      : { DISABLED: 0, SECONDARY: 2 },
-                    : { DISABLED: 0, SECONDARY: 2 },
+                },
               },
-            },
+              {
-            {
+                type: "passwordGenerator",
-              type: "passwordGenerator",
+                name: "settings.psk",
-              name: "settings.psk",
+                label: "Pre-Shared Key",
-              label: "pre-Shared Key",
+                description: "256, 128, or 8 bit PSKs allowed",
-              description: "256, 128, or 8 bit PSKs allowed",
+                validationText: validationText,
-              validationText: validationText,
+                devicePSKBitCount: bitCount ?? 0,
-              devicePSKBitCount: bitCount ?? 0,
+                inputChange: inputChangeEvent,
-              inputChange: inputChangeEvent,
+                selectChange: selectChangeEvent,
-              selectChange: selectChangeEvent,
+                actionButtons: [{ text: 'Generate', variant: 'success', onClick: preSharedClickEvent }],
-              buttonClick: clickEvent,
+                hide: true,
-              hide: true,
+                properties: {
-              properties: {
+                  value: pass,
-                value: pass,
+                },
               },
-            },
+              {
-            {
+                type: "text",
-              type: "text",
+                name: "settings.name",
-              name: "settings.name",
+                label: "Name",
-              label: "Name",
+                description:
-              description:
+                  "A unique name for the channel <12 bytes, leave blank for default",
-                "A unique name for the channel <12 bytes, leave blank for default",
+              },
-            },
+              {
-            {
+                type: "toggle",
-              type: "toggle",
+                name: "settings.uplinkEnabled",
-              name: "settings.uplinkEnabled",
+                label: "Uplink Enabled",
-              label: "Uplink Enabled",
+                description: "Send messages from the local mesh to MQTT",
-              description: "Send messages from the local mesh to MQTT",
+              },
-            },
+              {
-            {
+                type: "toggle",
-              type: "toggle",
+                name: "settings.downlinkEnabled",
-              name: "settings.downlinkEnabled",
+                label: "Downlink Enabled",
-              label: "Downlink Enabled",
+                description: "Send messages from MQTT to the local mesh",
-              description: "Send messages from MQTT to the local mesh",
+              },
-            },
+              {
-            {
+                type: "toggle",
-              type: "toggle",
+                name: "settings.positionEnabled",
-              name: "settings.positionEnabled",
+                label: "Allow Position Requests",
-              label: "Allow Position Requests",
+                description: "Send position to channel",
-              description: "Send position to channel",
+              },
-            },
+              {
-            {
+                type: "toggle",
-              type: "toggle",
+                name: "settings.preciseLocation",
-              name: "settings.preciseLocation",
+                label: "Precise Location",
-              label: "Precise Location",
+                description: "Send precise location to channel",
-              description: "Send precise location to channel",
+              },
-            },
+              {
-            {
+                type: "select",
-              type: "select",
+                name: "settings.positionPrecision",
-              name: "settings.positionPrecision",
+                label: "Approximate Location",
-              label: "Approximate Location",
+                description:
-              description:
+                  "If not sharing precise location, position shared on channel will be accurate within this distance",
-                "If not sharing precise location, position shared on channel will be accurate within this distance",
+                properties: {
-              properties: {
+                  enumValue:
-                enumValue:
+                    config.display?.units === 0
-                  config.display?.units === 0
+                      ? {
-                    ? {
                         "Within 23 km": 10,
                         "Within 12 km": 11,
                         "Within 5.8 km": 12,
@@ -188,7 +196,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                         "Within 90 m": 18,
                         "Within 50 m": 19,
                       }
-                    : {
+                      : {
                         "Within 15 miles": 10,
                         "Within 7.3 miles": 11,
                         "Within 3.6 miles": 12,
@@ -200,11 +208,17 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                         "Within 300 feet": 18,
                         "Within 150 feet": 19,
                       },
+                },
               },
-            },
+            ],
-          ],
+          },
-        },
+        ]}
-      ]}
+      />
-    />
+      <PkiRegenerateDialog
+        open={preSharedDialogOpen}
+        onOpenChange={() => setPreSharedDialogOpen(false)}
+        onSubmit={() => preSharedKeyRegenerate()}
+      />
+    </>
   );
 };

src/components/PageComponents/Config/Security.tsx

@@ -12,7 +12,7 @@ import { Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
 
 export const Security = (): JSX.Element => {
-  const { config, nodes, hardware, setWorkingConfig } = useDevice();
+  const { config, nodes, hardware, setWorkingConfig, setDialogOpen } = useDevice();
 
   const [privateKey, setPrivateKey] = useState<string>(
     fromByteArray(config.security?.privateKey ?? new Uint8Array(0)),
@@ -31,7 +31,7 @@ export const Security = (): JSX.Element => {
   );
   const [adminKeyValidationText, setAdminKeyValidationText] =
     useState<string>();
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [privateKeyDialogOpen, setPrivateKeyDialogOpen] = useState<boolean>(false);
 
   const onSubmit = (data: SecurityValidation) => {
     if (privateKeyValidationText || adminKeyValidationText) return;
@@ -71,9 +71,13 @@ export const Security = (): JSX.Element => {
   };
 
   const privateKeyClickEvent = () => {
-    setDialogOpen(true);
+    setPrivateKeyDialogOpen(true);
   };
 
+  const pkiBackupClickEvent = () => {
+    setDialogOpen("pkiBackup", true);
+  }
+
   const pkiRegenerate = () => {
     const privateKey = getX25519PrivateKey();
     const publicKey = getX25519PublicKey(privateKey);
@@ -86,7 +90,7 @@ export const Security = (): JSX.Element => {
       setPrivateKeyValidationText,
     );
 
-    setDialogOpen(false);
+    setPrivateKeyDialogOpen(false);
   };
 
   const privateKeyInputChangeEvent = (
@@ -149,7 +153,18 @@ export const Security = (): JSX.Element => {
                 inputChange: privateKeyInputChangeEvent,
                 selectChange: privateKeySelectChangeEvent,
                 hide: !privateKeyVisible,
-                buttonClick: privateKeyClickEvent,
+                actionButtons: [
+                  {
+                    text: "Generate",
+                    onClick: privateKeyClickEvent,
+                    variant: "success",
+                  },
+                  {
+                    text: "Backup Key",
+                    onClick: pkiBackupClickEvent,
+                    variant: "subtle",
+                  },
+                ],
                 properties: {
                   value: privateKey,
                   action: {
@@ -228,8 +243,8 @@ export const Security = (): JSX.Element => {
         ]}
       />
       <PkiRegenerateDialog
-        open={dialogOpen}
+        open={privateKeyDialogOpen}
-        onOpenChange={() => setDialogOpen(false)}
+        onOpenChange={() => setPrivateKeyDialogOpen(false)}
         onSubmit={() => pkiRegenerate()}
       />
     </>

src/components/UI/Button.tsx

@@ -35,9 +35,11 @@ const buttonVariants = cva(
   },
 );
 
+export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
+  VariantProps<typeof buttonVariants> { }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, ...props }, ref) => {

src/components/UI/Generator.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Button } from "@components/UI/Button.tsx";
+import { Button, type ButtonVariant } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import {
   Select,
@@ -16,11 +16,15 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   devicePSKBitCount?: number;
   value: string;
   variant: "default" | "invalid";
-  buttonText?: string;
+  actionButtons: {
+    text: string;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    variant: ButtonVariant;
+    className?: string;
+  }[];
   bits?: { text: string; value: string; key: string }[];
   selectChange: (event: string) => void;
   inputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  buttonClick: React.MouseEventHandler<HTMLButtonElement>;
   action?: {
     icon: LucideIcon;
     onClick: () => void;
@@ -35,7 +39,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
       devicePSKBitCount,
       variant,
       value,
-      buttonText,
+      actionButtons,
       bits = [
         { text: "256 bit", value: "32", key: "bit256" },
         { text: "128 bit", value: "16", key: "bit128" },
@@ -43,7 +47,6 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
       ],
       selectChange,
       inputChange,
-      buttonClick,
       action,
       disabled,
       ...props
@@ -93,15 +96,21 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
             ))}
           </SelectContent>
         </Select>
-        <Button
+        <div className="flex ml-4 space-x-4">
-          type="button"
+          {actionButtons?.map(({ text, onClick, variant, className }) => (
-          variant="success"
+            <Button
-          onClick={buttonClick}
+              key={text}
-          disabled={disabled}
+              type="button"
-          {...props}
+              onClick={onClick}
-        >
+              disabled={disabled}
-          {buttonText}
+              variant={variant}
-        </Button>
+              className={className}
+              {...props}
+            >
+              {text}
+            </Button>
+          ))}
+        </div>
       </>
     );
   },

src/core/stores/deviceStore.ts

@@ -25,7 +25,8 @@ export type DialogVariant =
   | "shutdown"
   | "reboot"
   | "deviceName"
-  | "nodeRemoval";
+  | "nodeRemoval"
+  | "pkiBackup";
 
 export interface Device {
   id: number;
@@ -60,6 +61,7 @@ export interface Device {
     reboot: boolean;
     deviceName: boolean;
     nodeRemoval: boolean;
+    pkiBackup: boolean;
   };
 
   setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -142,6 +144,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
             reboot: false,
             deviceName: false,
             nodeRemoval: false,
+            pkiBackup: false,
           },
           pendingSettingsChanges: false,
           messageDraft: "",