1 files changed, 30 insertions, 69 deletions

diff --git a/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx b/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
index 094e78531..a8a853bc1 100644
--- a/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CreateAccount.tsx
@@ -15,9 +15,9 @@
  */
 import {
   Button,
+  InputLine,
   InternationalizationAPI,
   LocalNotificationBanner,
-  ShowInputErrorLabel,
   useLocalNotificationHandler,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
@@ -66,15 +66,23 @@ function createFormValidator(
     });
 
     if (errors === undefined) {
+      const result: FormType = {
+        password: state.password!,
+        repeat: state.repeat!,
+      };
       return {
         status: "ok",
-        result: state as FormType,
+        result,
         errors,
       };
     }
+    const result: RecursivePartial<FormType> = {
+      password: state.password,
+      repeat: state.repeat,
+    };
     return {
       status: "fail",
-      result: state,
+      result,
       errors,
     };
   };
@@ -88,13 +96,8 @@ export function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
     : undefined;
 }
 
-export function CreateAccount({
-  onNewAccount,
-}: {
-  onNewAccount: () => void;
-}): VNode {
+export function CreateAccount(): VNode {
   const { i18n } = useTranslationContext();
-  // const Form = createNewForm<FormType>();
   const [settings] = usePreferences();
   const officer = useOfficer();
 
@@ -113,9 +116,9 @@ export function CreateAccount({
       ? undefined
       : withErrorHandler(
           async () => officer.create(form.password!.value!),
-          onNewAccount,
+          () => {},
         );
-
+  form.password;
   return (
     <div class="flex min-h-full flex-col ">
       <LocalNotificationBanner notification={notification} />
@@ -137,66 +140,24 @@ export function CreateAccount({
             autoCapitalize="none"
             autoCorrect="off"
           >
-            <div>
-              <label
-                for="password"
-                class="block text-sm font-medium leading-6 text-gray-900"
-              >
-                <i18n.Translate>Password</i18n.Translate>
-              </label>
-              <div class="mt-2">
-                <input
-                  ref={doAutoFocus}
-                  type="text"
-                  name="password"
-                  id="password"
-                  class="block w-full disabled:bg-gray-200 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                  value={form.password?.value ?? ""}
-                  enterkeyhint="next"
-                  placeholder="strong password"
-                  autocomplete="password"
-                  title={i18n.str`Password`}
-                  required
-                  onChange={(e) => {
-                    console.log("ASDASD", form.password?.onUpdate);
-                    form.password?.onUpdate(e.currentTarget.value);
-                  }}
-                />
-                <ShowInputErrorLabel
-                  message={form.password?.error}
-                  isDirty={form.password?.value !== undefined}
-                />
-              </div>
+            <div class="mt-2">
+              <InputLine<FormType, "password">
+                label={i18n.str`Password`}
+                name="password"
+                type="password"
+                required
+                handler={form.password}
+              />
             </div>
 
-            <div>
-              <label
-                for="repeat"
-                class="block text-sm font-medium leading-6 text-gray-900"
-              >
-                <i18n.Translate>Repeat password</i18n.Translate>
-              </label>
-              <div class="mt-2">
-                <input
-                  type="text"
-                  name="repeat"
-                  id="repeat"
-                  class="block w-full disabled:bg-gray-200 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                  value={form.repeat?.value ?? ""}
-                  enterkeyhint="next"
-                  placeholder="identification"
-                  autocomplete="repeat"
-                  title={i18n.str`Repeat password`}
-                  required
-                  onChange={(e): void => {
-                    form.repeat?.onUpdate(e.currentTarget.value);
-                  }}
-                />
-                <ShowInputErrorLabel
-                  message={form.repeat?.error}
-                  isDirty={form.repeat?.value !== undefined}
-                />
-              </div>
+            <div class="mt-2">
+              <InputLine<FormType, "repeat">
+                label={i18n.str`Repeat password`}
+                name="repeat"
+                type="password"
+                required
+                handler={form.repeat}
+              />
             </div>
 
             <div class="mt-8">