diff --git a/src/components/Form/DynamicFormField.tsx b/src/components/Form/DynamicFormField.tsx index 6f517e95..f66b24c1 100644 --- a/src/components/Form/DynamicFormField.tsx +++ b/src/components/Form/DynamicFormField.tsx @@ -2,6 +2,10 @@ import { GenericInput, type InputFieldProps, } from "@components/Form/FormInput.js"; +import { + PasswordGenerator, + type PasswordGeneratorProps, +} from "@components/Form/FormPasswordGenerator.js"; import { type SelectFieldProps, SelectInput, @@ -10,10 +14,6 @@ import { type ToggleFieldProps, ToggleInput, } from "@components/Form/FormToggle.js"; -import { - type PasswordGeneratorProps, - PasswordGenerator, -} from "@components/Form/FormPasswordGenerator.js"; import type { Control, FieldValues } from "react-hook-form"; export type FieldProps = @@ -51,8 +51,12 @@ export function DynamicFormField({ ); case "passwordGenerator": return ( - - ) + + ); case "multiSelect": return
tmp
; } diff --git a/src/components/Form/FormPasswordGenerator.tsx b/src/components/Form/FormPasswordGenerator.tsx index a53e7d96..762be7b0 100644 --- a/src/components/Form/FormPasswordGenerator.tsx +++ b/src/components/Form/FormPasswordGenerator.tsx @@ -1,32 +1,31 @@ import type { - BaseFormBuilderProps, - 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 extends BaseFormBuilderProps { - type: "passwordGenerator"; - } - - export function PasswordGenerator({ - control, - field, - }: GenericFormElementProps>) { - return ( - ( - - )} - /> - ); - } - \ No newline at end of file + BaseFormBuilderProps, + 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 extends BaseFormBuilderProps { + type: "passwordGenerator"; +} + +export function PasswordGenerator({ + control, + field, +}: GenericFormElementProps>) { + return ( + ( + + )} + /> + ); +} diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx index b1e4e3f7..b9c76612 100644 --- a/src/components/PageComponents/Channel.tsx +++ b/src/components/PageComponents/Channel.tsx @@ -81,8 +81,10 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { label: "pre-Shared Key", description: "256, 128, or 8 bit PSKs allowed", properties: { - passwordValue: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)), - devicePSKBitCount: channel?.settings?.psk.length + passwordValue: fromByteArray( + channel?.settings?.psk ?? new Uint8Array(0), + ), + devicePSKBitCount: channel?.settings?.psk.length, }, }, { diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx index ae42ed3f..bcc78c59 100644 --- a/src/components/UI/Generator.tsx +++ b/src/components/UI/Generator.tsx @@ -1,26 +1,25 @@ import { type VariantProps, cva } from "class-variance-authority"; import * as React from "react"; -import { cn } from "@core/utils/cn.js"; -import { Input } from "@components/UI/Input.js"; import { Button } from "@components/UI/Button.js"; -import { +import { Input } from "@components/UI/Input.js"; +import { Select, SelectContent, SelectItem, SelectTrigger, - SelectValue, + SelectValue, } from "@components/UI/Select.js"; +import { cn } from "@core/utils/cn.js"; +import cryptoRandomString from "crypto-random-string"; import { useState } from "react"; -import cryptoRandomString from 'crypto-random-string'; const generatorVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2", { variants: { variant: { - default: - "", + default: "", destructive: "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600", success: @@ -48,48 +47,72 @@ const generatorVariants = cva( export interface GeneratorProps extends React.BaseHTMLAttributes, - VariantProps - { - devicePSKBitCount?: number; - passwordValue?: string; - textValue?: string; - } + VariantProps { + devicePSKBitCount?: number; + passwordValue?: string; + textValue?: string; +} const Generator = React.forwardRef( - ({ devicePSKBitCount, passwordValue, textValue, className, variant, size, ...props }, ref) => { + ( + { + devicePSKBitCount, + passwordValue, + textValue, + className, + variant, + size, + ...props + }, + ref, + ) => { const [pass, setPass] = useState(passwordValue ?? ""); - const [bitCount, setBits] = useState(devicePSKBitCount?.toString() ?? ""); + const [bitCount, setBits] = useState( + devicePSKBitCount?.toString() ?? "", + ); return ( <> - - - + + + ); },