taler-typescript-core

commit c20ed1ff554fbaa3ab0b6de0f9c965f5bd996b71
parent efb715f277164d3295806ec78570fcea34124222
Author: Sebastian <sebasjm@gmail.com>
Date:   Tue,  4 Feb 2025 13:45:48 -0300

use validator in uifield, add error in toogle

Diffstat:
M
packages/web-util/src/forms/fields/InputToggle.tsx
 | 
10
+++++++++-
M
packages/web-util/src/forms/gana/GLS_Onboarding.ts
 | 
7
++++++-
M
packages/web-util/src/hooks/useForm.ts
 | 
19
+++++++++++++------

3 files changed, 28 insertions(+), 8 deletions(-)
diff --git a/packages/web-util/src/forms/fields/InputToggle.tsx b/packages/web-util/src/forms/fields/InputToggle.tsx
@@ -2,6 +2,7 @@ import { VNode, h } from "preact";
 import { UIFormProps } from "../FormProvider.js";
 import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
+import { useState } from "preact/hooks";
 
 export function InputToggle<T extends object, K extends keyof T>(
   props: { threeState: boolean } & UIFormProps<T, K>,
@@ -18,8 +19,9 @@ export function InputToggle<T extends object, K extends keyof T>(
     converter,
     threeState,
   } = props;
-  const { value, onChange } =
+  const { value, onChange, error } =
     props.handler ?? noHandlerPropsAndNoContextForField(props.name);
+  const [dirty, setDirty] = useState<boolean>();
 
   const isOn = !!value;
   return (
@@ -38,6 +40,7 @@ export function InputToggle<T extends object, K extends keyof T>(
           aria-labelledby="availability-label"
           aria-describedby="availability-description"
           onClick={() => {
+            setDirty(true);
             if (value === false && threeState) {
               return onChange(undefined as any);
             } else {
@@ -56,6 +59,11 @@ export function InputToggle<T extends object, K extends keyof T>(
           {help}
         </p>
       )}
+      {dirty !== undefined && error && (
+        <p class="mt-2 text-sm text-red-600" id="email-error">
+          {error}
+        </p>
+      )}
     </div>
   );
 }
diff --git a/packages/web-util/src/forms/gana/GLS_Onboarding.ts b/packages/web-util/src/forms/gana/GLS_Onboarding.ts
@@ -53,8 +53,13 @@ export function GLS_Onboarding(
             type: "toggle",
             id: "ACCEPTED_TERMS_OF_SERVICE" as UIHandlerId,
             required: true,
-            threeState: true,
+            // threeState: true,
             label: i18n.str`Do you accept the terms of service?`,
+            validator(v) {
+              return !v
+                ? i18n.str`Can't continue without accepting term of service.`
+                : undefined;
+            },
           },
           // !context || !context.tos_url
           //   ? { type: "void" }
diff --git a/packages/web-util/src/hooks/useForm.ts b/packages/web-util/src/hooks/useForm.ts
@@ -217,14 +217,21 @@ export function validateRequiredFields<FormType>(
     if (!("id" in formElement)) {
       return;
     }
-    if (!formElement.required) return;
     const path = formElement.id.split(".");
     const v = getValueFromPath(form as any, path);
-    result = setValueIntoPath(
-      result,
-      path,
-      v === undefined ? "required" : undefined,
-    );
+    if (formElement.required) {
+      result = setValueIntoPath(
+        result,
+        path,
+        v === undefined ? "required" : undefined,
+      );
+    }
+    if (formElement.validator) {
+      const error = formElement.validator(v as any);
+      if (error !== undefined) {
+        result = setValueIntoPath(result, path, error);
+      }
+    }
   }
 
   switch (config.type) {