fix martin feedback

5 files changed, 103 insertions, 25 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
index 0362310b9..32545c89a 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
@@ -276,6 +276,7 @@ export function InputPaytoForm<T>({
           label={i18n.str`Account type`}
           tooltip={i18n.str`Method to use for wire transfer`}
           values={targets}
+          readonly={readonly}
           toStr={(v) => (v === noTargetValue ? i18n.str`Choose one...` : v)}
         />
 
@@ -284,11 +285,13 @@ export function InputPaytoForm<T>({
             <Input<Entity>
               name="path1"
               label={i18n.str`Routing`}
+              readonly={readonly}
               tooltip={i18n.str`Routing number.`}
             />
             <Input<Entity>
               name="path2"
               label={i18n.str`Account`}
+              readonly={readonly}
               tooltip={i18n.str`Account number.`}
             />
           </Fragment>
@@ -298,6 +301,7 @@ export function InputPaytoForm<T>({
             <Input<Entity>
               name="path1"
               label={i18n.str`Code`}
+              readonly={readonly}
               tooltip={i18n.str`Business Identifier Code.`}
             />
           </Fragment>
@@ -308,6 +312,7 @@ export function InputPaytoForm<T>({
               name="path1"
               label={i18n.str`IBAN`}
               tooltip={i18n.str`International Bank Account Number.`}
+              readonly={readonly}
               placeholder="DE1231231231"
               inputExtra={{ style: { textTransform: "uppercase" } }}
             />
@@ -317,6 +322,7 @@ export function InputPaytoForm<T>({
           <Fragment>
             <Input<Entity>
               name="path1"
+              readonly={readonly}
               label={i18n.str`Account`}
               tooltip={i18n.str`Unified Payment Interface.`}
             />
@@ -326,6 +332,7 @@ export function InputPaytoForm<T>({
           <Fragment>
             <Input<Entity>
               name="path1"
+              readonly={readonly}
               label={i18n.str`Address`}
               tooltip={i18n.str`Bitcoin protocol.`}
             />
@@ -335,6 +342,7 @@ export function InputPaytoForm<T>({
           <Fragment>
             <Input<Entity>
               name="path1"
+              readonly={readonly}
               label={i18n.str`Address`}
               tooltip={i18n.str`Ethereum protocol.`}
             />
@@ -344,6 +352,7 @@ export function InputPaytoForm<T>({
           <Fragment>
             <Input<Entity>
               name="path1"
+              readonly={readonly}
               label={i18n.str`Address`}
               tooltip={i18n.str`Interledger protocol.`}
             />
@@ -354,11 +363,13 @@ export function InputPaytoForm<T>({
           <Fragment>
             <Input<Entity>
               name="path1"
+              readonly={readonly}
               label={i18n.str`Host`}
               tooltip={i18n.str`Bank host.`}
             />
             <Input<Entity>
               name="path2"
+              readonly={readonly}
               label={i18n.str`Account`}
               tooltip={i18n.str`Bank account.`}
             />
@@ -372,6 +383,7 @@ export function InputPaytoForm<T>({
           <Fragment>
             <Input
               name="params.receiver-name"
+              readonly={readonly}
               label={i18n.str`Owner's name`}
               tooltip={i18n.str`Legal name of the person holding the account.`}
             />
diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
index 8aac5f543..cfc00148e 100644
--- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
+++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx
@@ -218,14 +218,6 @@ export function Sidebar({
           <li>
             <div>
               <span style={{ width: "3rem" }} class="icon">
-                <i class="mdi mdi-currency-eur" />
-              </span>
-              <span class="menu-item-label">{config.currency}</span>
-            </div>
-          </li>
-          <li>
-            <div>
-              <span style={{ width: "3rem" }} class="icon">
                 <i class="mdi mdi-web" />
               </span>
               <span class="menu-item-label">
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;
+  }
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx
index 1164aed5a..b82807cc7 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx
@@ -89,7 +89,7 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode {
                 <Input<Entity>
                   name="otp_device_description"
                   label={i18n.str`Description`}
-                  tooltip={i18n.str`dddd`}
+                  tooltip={i18n.str`Useful to identify the device physically`}
                 />
                 <InputSelector<Entity>
                   name="otp_algorithm"
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx
index 3dc1f8d07..5b88b550f 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx
@@ -66,13 +66,6 @@ function convert(
   return { ...defaults, ...rest };
 }
 
-function getTokenValuePart(t?: string): string | undefined {
-  if (!t) return t;
-  const match = /secret-token:(.*)/.exec(t);
-  if (!match || !match[1]) return undefined;
-  return match[1];
-}
-
 export function UpdatePage({
   onUpdate,
   selected,