1 files changed, 90 insertions, 9 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/UpdatePage.tsx
index 802f593cf..e0e0ba7ed 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/UpdatePage.tsx
@@ -20,7 +20,7 @@
  */
 
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { h, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
 import {
@@ -29,20 +29,41 @@ import {
 } from "../../../../components/form/FormProvider.js";
 import { Input } from "../../../../components/form/Input.js";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
+import { InputSelector } from "../../../../components/form/InputSelector.js";
+import { InputPaytoForm } from "../../../../components/form/InputPaytoForm.js";
+import { undefinedIfEmpty } from "../../../../utils/table.js";
 
-type Entity = MerchantBackend.BankAccounts.AccountPatchDetails & WithId;
+type Entity = MerchantBackend.BankAccounts.BankAccountEntry
+  & WithId;
 
+const accountAuthType = ["unedit", "none", "basic"];
 interface Props {
-  onUpdate: (d: Entity) => Promise<void>;
+  onUpdate: (d: MerchantBackend.BankAccounts.AccountPatchDetails) => Promise<void>;
   onBack?: () => void;
   account: Entity;
 }
+
+
 export function UpdatePage({ account, onUpdate, onBack }: Props): VNode {
   const { i18n } = useTranslationContext();
 
-  const [state, setState] = useState<Partial<Entity>>(account);
+  const [state, setState] = useState<Partial<MerchantBackend.BankAccounts.AccountPatchDetails>>(account);
+
+  const errors: FormErrors<MerchantBackend.BankAccounts.AccountPatchDetails> = {
+    credit_facade_url: !state.credit_facade_url ? i18n.str`required` : !isValidURL(state.credit_facade_url) ? i18n.str`invalid url` : undefined,
+    credit_facade_credentials: undefinedIfEmpty({
 
-  const errors: FormErrors<Entity> = {
+      username: state.credit_facade_credentials?.type !== "basic" ? undefined
+        : !state.credit_facade_credentials.username ? i18n.str`required` : undefined,
+
+      password: state.credit_facade_credentials?.type !== "basic" ? undefined
+        : !state.credit_facade_credentials.password ? i18n.str`required` : undefined,
+
+      repeatPassword: state.credit_facade_credentials?.type !== "basic" ? undefined
+        : !(state.credit_facade_credentials as any).repeatPassword ? i18n.str`required` :
+          (state.credit_facade_credentials as any).repeatPassword !== state.credit_facade_credentials.password ? i18n.str`doesnt match`
+            : undefined,
+    }),
   };
 
   const hasErrors = Object.keys(errors).some(
@@ -51,7 +72,20 @@ export function UpdatePage({ account, onUpdate, onBack }: Props): VNode {
 
   const submitForm = () => {
     if (hasErrors) return Promise.reject();
-    return onUpdate(state as any);
+
+    const creds: typeof state.credit_facade_credentials =
+      state.credit_facade_credentials?.type === "basic" ? {
+        type: "basic",
+        password: state.credit_facade_credentials.password,
+        username: state.credit_facade_credentials.username,
+      } : state.credit_facade_credentials?.type === "none" ? {
+        type: "none"
+      } : undefined;
+
+    return onUpdate({
+      credit_facade_credentials: creds,
+      credit_facade_url: state.credit_facade_url,
+    });
   };
 
   return (
@@ -63,7 +97,7 @@ export function UpdatePage({ account, onUpdate, onBack }: Props): VNode {
               <div class="level-left">
                 <div class="level-item">
                   <span class="is-size-4">
-                    Account: <b>{account.id}</b>
+                    Account: <b>{account.id.substring(0, 8)}...</b>
                   </span>
                 </div>
               </div>
@@ -80,11 +114,49 @@ export function UpdatePage({ account, onUpdate, onBack }: Props): VNode {
                 valueHandler={setState}
                 errors={errors}
               >
+                <InputPaytoForm<Entity>
+                  name="payto_uri"
+                  label={i18n.str`Account`}
+                  readonly
+                />
                 <Input<Entity>
                   name="credit_facade_url"
-                  label={i18n.str`Description`}
-                  tooltip={i18n.str`dddd`}
+                  label={i18n.str`Account info URL`}
+                  help="https://bank.com"
+                  expand
+                  tooltip={i18n.str`From where the merchant can download information about incoming wire transfers to this account`}
+                />
+                <InputSelector
+                  name="credit_facade_credentials.type"
+                  label={i18n.str`Auth type`}
+                  tooltip={i18n.str`Choose the authentication type for the account info URL`}
+                  values={accountAuthType}
+                  toStr={(str) => {
+                    if (str === "none") return "Without authentication";
+                    if (str === "basic") return "With authentication";
+                    return "Do not change"
+                  }}
                 />
+                {state.credit_facade_credentials?.type === "basic" ? (
+                  <Fragment>
+                    <Input
+                      name="credit_facade_credentials.username"
+                      label={i18n.str`Username`}
+                      tooltip={i18n.str`Username to access the account information.`}
+                    />
+                    <Input
+                      name="credit_facade_credentials.password"
+                      inputType="password"
+                      label={i18n.str`Password`}
+                      tooltip={i18n.str`Password to access the account information.`}
+                    />
+                    <Input
+                      name="credit_facade_credentials.repeatPassword"
+                      inputType="password"
+                      label={i18n.str`Repeat password`}
+                    />
+                  </Fragment>
+                ) : undefined}
               </FormProvider>
 
               <div class="buttons is-right mt-5">
@@ -112,3 +184,12 @@ export function UpdatePage({ account, onUpdate, onBack }: Props): VNode {
     </div>
   );
 }
+
+function isValidURL(s: string): boolean {
+  try {
+    const u = new URL(s)
+    return true;
+  } catch (e) {
+    return false;
+  }
+}