fix errors msg and import account letter

2 files changed, 119 insertions, 15 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
index a0c15c77c..3fc4fcbf1 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
@@ -18,13 +18,10 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import {
-  parsePaytoUri,
-  PaytoUriGeneric,
-  stringifyPaytoUri,
-} from "@gnu-taler/taler-util";
+import { parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
 import { COUNTRY_TABLE } from "../../utils/constants.js";
 import { undefinedIfEmpty } from "../../utils/table.js";
 import { FormErrors, FormProvider } from "./FormProvider.js";
@@ -32,7 +29,6 @@ import { Input } from "./Input.js";
 import { InputGroup } from "./InputGroup.js";
 import { InputSelector } from "./InputSelector.js";
 import { InputProps, useField } from "./useField.js";
-import { useEffect, useState } from "preact/hooks";
 
 export interface Props<T> extends InputProps<T> {
   isValid?: (e: any) => boolean;
@@ -108,13 +104,14 @@ function validateEthereum_path1(
  * bank.com/path
  * bank.com/path/subpath/
  */
-const DOMAIN_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+(\/[a-zA-Z0-9-.]+)*\/?$/
+const DOMAIN_REGEX =
+  /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+(:[0-9]+)?(\/[a-zA-Z0-9-.]+)*\/?$/;
 
 function validateTalerBank_path1(
   addr: string,
   i18n: ReturnType<typeof useTranslationContext>["i18n"],
 ): string | undefined {
-  console.log(addr, DOMAIN_REGEX.test(addr))
+  console.log(addr, DOMAIN_REGEX.test(addr));
   try {
     const valid = DOMAIN_REGEX.test(addr);
     if (valid) return undefined;
@@ -206,6 +203,7 @@ export function InputPaytoForm<T>({
   const { value: initialValueStr, onChange } = useField<T>(name);
 
   const initialPayto = parsePaytoUri(initialValueStr ?? "");
+
   const paths = !initialPayto ? [] : initialPayto.targetPath.split("/");
   const initialPath1 = paths.length >= 1 ? paths[0] : undefined;
   const initialPath2 = paths.length >= 2 ? paths[1] : undefined;
@@ -219,6 +217,18 @@ export function InputPaytoForm<T>({
           path2: initialPath2,
         };
   const [value, setValue] = useState<Partial<Entity>>(initial);
+  useEffect(() => {
+    const nv = parsePaytoUri(initialValueStr ?? "");
+    const paths = !initialPayto ? [] : initialPayto.targetPath.split("/");
+    if (nv !== undefined && nv.isKnown) {
+      setValue({
+        target: nv.targetType,
+        params: nv.params,
+        path1: paths.length >= 1 ? paths[0] : undefined,
+        path2: paths.length >= 2 ? paths[1] : undefined,
+    });
+    }
+  }, [initialValueStr]);
 
   const { i18n } = useTranslationContext();
 
@@ -252,7 +262,8 @@ export function InputPaytoForm<T>({
     (k) => (errors as any)[k] !== undefined,
   );
 
-  const path1WithSlash = value.path1 && !value.path1.endsWith("/") ? value.path1 + "/" : value.path1
+  const path1WithSlash =
+    value.path1 && !value.path1.endsWith("/") ? value.path1 + "/" : value.path1;
   const str =
     hasErrors || !value.target
       ? undefined
@@ -413,11 +424,17 @@ export function InputPaytoForm<T>({
                 return v;
               }}
               tooltip={i18n.str`Bank host.`}
-              help={<Fragment>
-                <div><i18n.Translate>Without scheme and may include subpath:</i18n.Translate></div>
-                <div>bank.com/</div>
-                <div>bank.com/path/subpath/</div>
-                </Fragment>}
+              help={
+                <Fragment>
+                  <div>
+                    <i18n.Translate>
+                      Without scheme and may include subpath:
+                    </i18n.Translate>
+                  </div>
+                  <div>bank.com/</div>
+                  <div>bank.com/path/subpath/</div>
+                </Fragment>
+              }
             />
             <Input<Entity>
               name="path2"
diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
index 1335d0f77..43062d13e 100644
--- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
@@ -24,9 +24,14 @@ import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js";
 import { Spinner } from "../exception/loading.js";
-import { FormProvider } from "../form/FormProvider.js";
+import { FormErrors, FormProvider } from "../form/FormProvider.js";
 import { Input } from "../form/Input.js";
 import { useSessionContext } from "../../context/session.js";
+import {
+  AccountLetter,
+  codecForAccountLetter,
+  PaytoString,
+} from "@gnu-taler/taler-util";
 
 interface Props {
   active?: boolean;
@@ -201,6 +206,88 @@ export function ClearConfirmModal({
   );
 }
 
+interface ImportingAccountModalProps {
+  onCancel: () => void;
+  onConfirm: (account: AccountLetter) => void;
+}
+
+export function ImportingAccountModal({
+  onCancel,
+  onConfirm,
+}: ImportingAccountModalProps): VNode {
+  const { i18n } = useTranslationContext();
+  const [letter, setLetter] = useState<string>();
+  let parsed = undefined;
+  try {
+    parsed = JSON.parse(letter ?? "");
+  } catch (e) {
+    parsed = undefined;
+  }
+  let account: AccountLetter | undefined = undefined;
+  let parsingError: string | undefined = undefined;
+  try {
+    account =
+      parsed !== undefined ? codecForAccountLetter().decode(parsed) : undefined;
+  } catch (e) {
+    account = undefined;
+    if (e instanceof Error) {
+      parsingError = e.message;
+    }
+  }
+  const errors: FormErrors<{ letter: string }> = {
+    letter: !letter
+      ? i18n.str`required`
+      : parsed === undefined
+        ? i18n.str`letter should be a JSON string`
+        : account === undefined
+          ? i18n.str`JSON string is invalid`
+          : undefined,
+  };
+  return (
+    <ConfirmModal
+      label={i18n.str`Import`}
+      description={i18n.str`Importing an account from the bank`}
+      active
+      onCancel={onCancel}
+      disabled={account === undefined}
+      onConfirm={() => onConfirm(account!)}
+    >
+      <p>
+        <i18n.Translate>
+          You can export your account settings from the Libeufin Bank's account
+          profile. Paste the content in the next field.
+        </i18n.Translate>
+      </p>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">
+            <i18n.Translate>Account information</i18n.Translate>
+          </label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input
+                class="input"
+                value={letter ?? ""}
+                onChange={(e) => {
+                  setLetter(e.currentTarget.value);
+                }}
+              />
+            </p>
+            {letter !== undefined && errors.letter && (
+              <p class="help is-danger">{errors.letter}</p>
+            )}
+            {parsingError !== undefined && (
+              <p class="help is-danger">{parsingError}</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </ConfirmModal>
+  );
+}
+
 interface DeleteModalProps {
   element: { id: string; name: string };
   onCancel: () => void;