Add hide toggle to password generator

src/components/Form/FormPasswordGenerator.tsx

@@ -8,6 +8,7 @@ import { Controller, type FieldValues } from "react-hook-form";
 
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
   type: "passwordGenerator";
+  hide?: boolean;
   devicePSKBitCount: number;
   inputChange: ChangeEventHandler;
   selectChange: (event: string) => void;
@@ -17,6 +18,7 @@ export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
 export function PasswordGenerator<T extends FieldValues>({
   control,
   field,
+  disabled,
 }: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
   return (
     <Controller
@@ -24,6 +26,7 @@ export function PasswordGenerator<T extends FieldValues>({
       control={control}
       render={({ field: { value, ...rest } }) => (
         <Generator
+          hide={field.hide}
           devicePSKBitCount={field.devicePSKBitCount}
           inputChange={field.inputChange}
           selectChange={field.selectChange}
@@ -33,6 +36,7 @@ export function PasswordGenerator<T extends FieldValues>({
           buttonText="Generate"
           {...field.properties}
           {...rest}
+          disabled={disabled}
         />
       )}
     />

src/components/PageComponents/Config/Security.tsx

@@ -133,6 +133,7 @@ export const Security = (): JSX.Element => {
               devicePSKBitCount: privateKeyBitCount,
               inputChange: privateKeyInputChangeEvent,
               selectChange: privateKeySelectChangeEvent,
+              hide: !privateKeyVisible,
               buttonClick: () =>
                 clickEvent(
                   setPrivateKey,
@@ -191,6 +192,7 @@ export const Security = (): JSX.Element => {
               devicePSKBitCount: adminKeyBitCount,
               inputChange: adminKeyInputChangeEvent,
               selectChange: adminKeySelectChangeEvent,
+              hide: !adminKeyVisible,
               buttonClick: () =>
                 clickEvent(
                   setAdminKey,

src/components/UI/Generator.tsx

@@ -9,8 +9,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@components/UI/Select.js";
+import type { LucideIcon } from "lucide-react";
 
 export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
+  hide?: boolean;
   devicePSKBitCount?: number;
   value: string;
   variant: "default" | "invalid";
@@ -18,11 +20,17 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   selectChange: (event: string) => void;
   inputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   buttonClick: React.MouseEventHandler<HTMLButtonElement>;
+  action?: {
+    icon: LucideIcon;
+    onClick: () => void;
+  };
+  disabled?: boolean;
 }
 
 const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
   (
     {
+      hide = true,
       devicePSKBitCount,
       variant,
       value,
@@ -30,6 +38,8 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
       selectChange,
       inputChange,
       buttonClick,
+      action,
+      disabled,
       ...props
     },
     ref,
@@ -37,17 +47,19 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
     return (
       <>
         <Input
-          type="text"
+          type={hide ? "password" : "text"}
           id="pskInput"
           variant={variant}
           value={value}
           onChange={inputChange}
+          action={action}
+          disabled={disabled}
         />
         <Select
           value={devicePSKBitCount?.toString()}
           onValueChange={(e) => selectChange(e)}
         >
-          <SelectTrigger>
+          <SelectTrigger className="!max-w-max">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>