initial working version

src/components/Form/FormPasswordGenerator.tsx

@@ -3,11 +3,11 @@ import type {
   GenericFormElementProps,
 } from "@components/Form/DynamicForm.js";
 import { Generator } from "@components/UI/Generator.js";
-import { useState } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
   type: "passwordGenerator";
+  devicePSKBitCount: number;
 }
 
 export function PasswordGenerator<T extends FieldValues>({
@@ -20,11 +20,13 @@ export function PasswordGenerator<T extends FieldValues>({
       control={control}
       render={({ field: { value, onChange, ...rest } }) => (
         <Generator
+          devicePSKBitCount={field.devicePSKBitCount}
+          changeEvent={onChange} 
+          value={value}
           variant={"success"}
-          textValue="Generate"
+          buttonText="Generate"
           {...field.properties}
-          {...rest}
+          {...rest}        />
-        />
       )}
     />
   );

src/components/PageComponents/Channel.tsx

@@ -4,6 +4,8 @@ import { useToast } from "@core/hooks/useToast.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/js";
 import { fromByteArray, toByteArray } from "base64-js";
+import cryptoRandomString from "crypto-random-string";
+import { useState } from "react";
 
 export interface SettingsPanelProps {
   channel: Protobuf.Channel.Channel;
@@ -13,12 +15,15 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
   const { config, connection, addChannel } = useDevice();
   const { toast } = useToast();
 
+  const [pass, setPass] = useState<string>(fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)));
+  const [bitCount, setBits] = useState<number>(channel?.settings?.psk.length ?? 16);
+
   const onSubmit = (data: ChannelValidation) => {
     const channel = new Protobuf.Channel.Channel({
       ...data,
       settings: {
         ...data.settings,
-        psk: toByteArray(data.settings.psk ?? ""),
+        psk: toByteArray(pass),
         moduleSettings: {
           positionPrecision: data.settings.positionEnabled
             ? data.settings.preciseLocation
@@ -36,6 +41,18 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
     });
   };
 
+
+  const clickEventCb = (e) => {
+    setPass(
+      btoa(
+        cryptoRandomString({
+          length: bitCount ?? 0,
+          type: "alphanumeric",
+        }),
+      ),
+    );
+  }
+
   return (
     <DynamicForm<ChannelValidation>
       onSubmit={onSubmit}
@@ -46,7 +63,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
         ...{
           settings: {
             ...channel?.settings,
-            psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
+            psk: pass,
             positionEnabled:
               channel?.settings?.moduleSettings?.positionPrecision !==
                 undefined &&
@@ -80,11 +97,11 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               name: "settings.psk",
               label: "pre-Shared Key",
               description: "256, 128, or 8 bit PSKs allowed",
+              devicePSKBitCount: bitCount ?? 0,
               properties: {
-                passwordValue: fromByteArray(
+                value: pass,
-                  channel?.settings?.psk ?? new Uint8Array(0),
+                onClick: clickEventCb,
-                ),
+                changeEvent: (e: string) => setBits(parseInt(e)),
-                devicePSKBitCount: channel?.settings?.psk.length,
               },
             },
             {

src/components/UI/Generator.tsx

@@ -10,9 +10,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@components/UI/Select.js";
-import { cn } from "@core/utils/cn.js";
 import cryptoRandomString from "crypto-random-string";
 import { useState } from "react";
+import { fromByteArray, toByteArray } from "base64-js";
 
 const generatorVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2",
@@ -49,36 +49,41 @@ export interface GeneratorProps
   extends React.BaseHTMLAttributes<HTMLElement>,
     VariantProps<typeof generatorVariants> {
   devicePSKBitCount?: number;
-  passwordValue?: string;
+  value: string;
-  textValue?: string;
+  buttonText?: string;
+  changeEvent: Function;
+  
 }
 
-const Generator = React.forwardRef<HTMLButtonElement, GeneratorProps>(
+const getBitString = (bitcount?: number) => {
+  if (bitcount == 32) {
+    return "32"
+  }
+  if (bitcount == 1) {
+    return "1"
+  }
+  return "16"
+}
+
+const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
   (
     {
       devicePSKBitCount,
-      passwordValue,
+      value,
-      textValue,
+      buttonText,
-      className,
       variant,
-      size,
+      changeEvent,
       ...props
     },
     ref,
   ) => {
-    const [pass, setPass] = useState<string>(passwordValue ?? "");
-    const [bitCount, setBits] = useState<string>(
-      devicePSKBitCount?.toString() ?? "",
-    );
 
     return (
       <>
-        <Input type="text" id="pskInput" value={pass} />
+        <Input type="text" id="pskInput" value={value} />
         <Select
-          value={bitCount}
+          value={getBitString(devicePSKBitCount)}
-          onValueChange={(value) => {
+          onValueChange={(e) => changeEvent(e)}
-            setBits(value);
-          }}
         >
           <SelectTrigger>
             <SelectValue />
@@ -98,20 +103,9 @@ const Generator = React.forwardRef<HTMLButtonElement, GeneratorProps>(
         <Button
           type="button"
           variant="success"
-          ref={ref}
           {...props}
-          onClick={() => {
-            setPass(
-              btoa(
-                cryptoRandomString({
-                  length: Number.parseInt(bitCount),
-                  type: "alphanumeric",
-                }),
-              ),
-            );
-          }}
         >
-          {textValue}
+          {buttonText}
         </Button>
       </>
     );