validation

src/components/Form/DynamicForm.tsx

@@ -26,6 +26,7 @@ export interface BaseFormBuilderProps<T> {
   disabledBy?: DisabledBy<T>[];
   label: string;
   description?: string;
+  validationText?: string;
   properties?: Record<string, unknown>;
 }
 
@@ -44,6 +45,8 @@ export interface DynamicFormProps<T extends FieldValues> {
   fieldGroups: {
     label: string;
     description: string;
+    valid?: boolean;
+    validationText?: string;
     fields: FieldProps<T>[];
   }[];
 }
@@ -98,6 +101,8 @@ export function DynamicForm<T extends FieldValues>({
               key={field.label}
               label={field.label}
               description={field.description}
+              valid={field.validationText == undefined || field.validationText == ""}
+              validationText={field.validationText}
             >
               <DynamicFormField
                 field={field}

src/components/Form/FormPasswordGenerator.tsx

@@ -3,11 +3,15 @@ import type {
   GenericFormElementProps,
 } from "@components/Form/DynamicForm.js";
 import { Generator } from "@components/UI/Generator.js";
+import { ChangeEventHandler, MouseEventHandler } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
   type: "passwordGenerator";
   devicePSKBitCount: number;
+  inputChange: ChangeEventHandler;
+  selectChange: (event: string) => void;
+  buttonClick: MouseEventHandler;
 }
 
 export function PasswordGenerator<T extends FieldValues>({
@@ -18,12 +22,14 @@ export function PasswordGenerator<T extends FieldValues>({
     <Controller
       name={field.name}
       control={control}
-      render={({ field: { value, onChange, ...rest } }) => (
+      render={({ field: { value,...rest } }) => (
         <Generator
           devicePSKBitCount={field.devicePSKBitCount}
-          changeEvent={onChange}
+          inputChange={field.inputChange}
+          selectChange={field.selectChange}
+          buttonClick={field.buttonClick}
           value={value}
-          variant={"success"}
+          variant={field.validationText ? "invalid" : "default"}
           buttonText="Generate"
           {...field.properties}
           {...rest}

src/components/Form/FormWrapper.tsx

@@ -5,12 +5,16 @@ export interface FieldWrapperProps {
   description?: string;
   disabled?: boolean;
   children?: React.ReactNode;
+  valid?: boolean;
+  validationText?: string;
 }
 
 export const FieldWrapper = ({
   label,
   description,
   children,
+  valid,
+  validationText,
 }: FieldWrapperProps): JSX.Element => (
   <div className="pt-6 sm:pt-5">
     <div role="group" aria-labelledby="label-notifications">
@@ -19,6 +23,7 @@ export const FieldWrapper = ({
         <div className="sm:col-span-2">
           <div className="max-w-lg">
             <p className="text-sm text-gray-500">{description}</p>
+            <p hidden={valid ?? true} className="text-sm text-red-500">{validationText}</p>
             <div className="mt-4 space-y-4">
               <div className="flex items-center">{children}</div>
             </div>