manage account instead of add account

1 files changed, 534 insertions, 0 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
new file mode 100644
index 000000000..9bb9e5814
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
@@ -0,0 +1,534 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {
+  KnownBankAccountsInfo,
+  PaytoUriBitcoin,
+  PaytoUriIBAN,
+  PaytoUriTalerBank,
+} from "@gnu-taler/taler-util";
+import { styled } from "@linaria/react";
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { ErrorMessage } from "../../components/ErrorMessage.js";
+import { LoadingError } from "../../components/LoadingError.js";
+import { SelectList } from "../../components/SelectList.js";
+import {
+  Input,
+  LightText,
+  SubTitle,
+  SvgIcon,
+  WarningText,
+} from "../../components/styled/index.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { Button } from "../../mui/Button.js";
+import { TextFieldHandler } from "../../mui/handlers.js";
+import { TextField } from "../../mui/TextField.js";
+import checkIcon from "../../svg/check_24px.svg";
+import warningIcon from "../../svg/warning_24px.svg";
+import deleteIcon from "../../svg/delete_24px.svg";
+import { State } from "./index.js";
+
+type AccountType = "bitcoin" | "x-taler-bank" | "iban";
+type ComponentFormByAccountType = {
+  [type in AccountType]: (props: { field: TextFieldHandler }) => VNode;
+};
+
+type ComponentListByAccountType = {
+  [type in AccountType]: (props: {
+    list: KnownBankAccountsInfo[];
+    onDelete: (a: KnownBankAccountsInfo) => Promise<void>;
+  }) => VNode;
+};
+
+const formComponentByAccountType: ComponentFormByAccountType = {
+  iban: IbanAddressAccount,
+  bitcoin: BitcoinAddressAccount,
+  "x-taler-bank": TalerBankAddressAccount,
+};
+const tableComponentByAccountType: ComponentListByAccountType = {
+  iban: IbanTable,
+  bitcoin: BitcoinTable,
+  "x-taler-bank": TalerBankTable,
+};
+
+const AccountTable = styled.table`
+  width: 100%;
+
+  border-collapse: separate;
+  border-spacing: 0px 10px;
+  tbody tr:nth-child(odd) > td:not(.actions, .kyc) {
+    background-color: lightgrey;
+  }
+  .actions,
+  .kyc {
+    width: 10px;
+    background-color: inherit;
+  }
+`;
+
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <LoadingError
+      title={<i18n.Translate>Could not load</i18n.Translate>}
+      error={error}
+    />
+  );
+}
+
+export function ReadyView({
+  currency,
+  error,
+  accountType,
+  accountByType,
+  alias,
+  onAccountAdded,
+  deleteAccount,
+  onCancel,
+  uri,
+}: State.Ready): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <Fragment>
+      <section>
+        <SubTitle>
+          <i18n.Translate>Known accounts for {currency}</i18n.Translate>
+        </SubTitle>
+        <p>
+          <i18n.Translate>
+            To add a new account first select the account type.
+          </i18n.Translate>
+        </p>
+
+        {error && (
+          <ErrorMessage
+            title={<i18n.Translate>Unable add this account</i18n.Translate>}
+            description={error}
+          />
+        )}
+        <p>
+          <Input>
+            <SelectList
+              label={<i18n.Translate>Select account type</i18n.Translate>}
+              list={accountType.list}
+              name="accountType"
+              value={accountType.value}
+              onChange={accountType.onChange}
+            />
+          </Input>
+        </p>
+        {accountType.value === "" ? undefined : (
+          <Fragment>
+            <p>
+              <CustomFieldByAccountType
+                type={accountType.value as AccountType}
+                field={uri}
+              />
+            </p>
+            <p>
+              <TextField
+                label="Account alias"
+                variant="standard"
+                required
+                fullWidth
+                disabled={accountType.value === ""}
+                value={alias.value}
+                onChange={alias.onInput}
+              />
+            </p>
+          </Fragment>
+        )}
+      </section>
+      <section>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={onCancel.onClick}
+        >
+          <i18n.Translate>Cancel</i18n.Translate>
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onAccountAdded.onClick}
+          disabled={!onAccountAdded.onClick}
+        >
+          <i18n.Translate>Add</i18n.Translate>
+        </Button>
+      </section>
+      <section>
+        {Object.entries(accountByType).map(([type, list]) => {
+          const Table = tableComponentByAccountType[type as AccountType];
+          return <Table key={type} list={list} onDelete={deleteAccount} />;
+        })}
+      </section>
+    </Fragment>
+  );
+}
+
+function IbanTable({
+  list,
+  onDelete,
+}: {
+  list: KnownBankAccountsInfo[];
+  onDelete: (ac: KnownBankAccountsInfo) => void;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  if (list.length === 0) return <Fragment />;
+  return (
+    <div>
+      <h1>
+        <i18n.Translate>IBAN accounts</i18n.Translate>
+      </h1>
+      <AccountTable>
+        <thead>
+          <tr>
+            <th>
+              <i18n.Translate>Alias</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Int. Account Number</i18n.Translate>
+            </th>
+            <th class="kyc">
+              <i18n.Translate>KYC</i18n.Translate>
+            </th>
+            <th class="actions"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((account) => {
+            const p = account.uri as PaytoUriIBAN;
+            return (
+              <tr key={account.alias}>
+                <td>{account.alias}</td>
+                <td>{p.targetPath}</td>
+                <td class="kyc">
+                  {account.kyc_completed ? (
+                    <SvgIcon
+                      title={i18n.str`KYC done`}
+                      dangerouslySetInnerHTML={{ __html: checkIcon }}
+                      color="green"
+                    />
+                  ) : (
+                    <SvgIcon
+                      title={i18n.str`KYC missing`}
+                      dangerouslySetInnerHTML={{ __html: warningIcon }}
+                      color="orange"
+                    />
+                  )}
+                </td>
+                <td class="actions">
+                  <Button
+                    variant="outlined"
+                    startIcon={deleteIcon}
+                    size="small"
+                    onClick={async () => onDelete(account)}
+                    color="error"
+                  >
+                    Forget
+                  </Button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </AccountTable>
+    </div>
+  );
+}
+
+function TalerBankTable({
+  list,
+  onDelete,
+}: {
+  list: KnownBankAccountsInfo[];
+  onDelete: (ac: KnownBankAccountsInfo) => void;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  if (list.length === 0) return <Fragment />;
+  return (
+    <div>
+      <h1>
+        <i18n.Translate>Taler accounts</i18n.Translate>
+      </h1>
+      <AccountTable>
+        <thead>
+          <tr>
+            <th>
+              <i18n.Translate>Alias</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Host</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Account</i18n.Translate>
+            </th>
+            <th class="kyc">
+              <i18n.Translate>KYC</i18n.Translate>
+            </th>
+            <th class="actions"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((account) => {
+            const p = account.uri as PaytoUriTalerBank;
+            return (
+              <tr key={account.alias}>
+                <td>{account.alias}</td>
+                <td>{p.host}</td>
+                <td>{p.account}</td>
+                <td class="kyc">
+                  {account.kyc_completed ? (
+                    <SvgIcon
+                      title={i18n.str`KYC done`}
+                      dangerouslySetInnerHTML={{ __html: checkIcon }}
+                      color="green"
+                    />
+                  ) : (
+                    <SvgIcon
+                      title={i18n.str`KYC missing`}
+                      dangerouslySetInnerHTML={{ __html: warningIcon }}
+                      color="orange"
+                    />
+                  )}
+                </td>
+                <td class="actions">
+                  <Button
+                    variant="outlined"
+                    startIcon={deleteIcon}
+                    size="small"
+                    onClick={async () => onDelete(account)}
+                    color="error"
+                  >
+                    Forget
+                  </Button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </AccountTable>
+    </div>
+  );
+}
+
+function BitcoinTable({
+  list,
+  onDelete,
+}: {
+  list: KnownBankAccountsInfo[];
+  onDelete: (ac: KnownBankAccountsInfo) => void;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  if (list.length === 0) return <Fragment />;
+  return (
+    <div>
+      <h2>
+        <i18n.Translate>Bitcoin accounts</i18n.Translate>
+      </h2>
+      <AccountTable>
+        <thead>
+          <tr>
+            <th>
+              <i18n.Translate>Alias</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Address</i18n.Translate>
+            </th>
+            <th class="kyc">
+              <i18n.Translate>KYC</i18n.Translate>
+            </th>
+            <th class="actions"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((account) => {
+            const p = account.uri as PaytoUriBitcoin;
+            return (
+              <tr key={account.alias}>
+                <td>{account.alias}</td>
+                <td>{p.targetPath}</td>
+                <td class="kyc">
+                  {account.kyc_completed ? (
+                    <SvgIcon
+                      title={i18n.str`KYC done`}
+                      dangerouslySetInnerHTML={{ __html: checkIcon }}
+                      color="green"
+                    />
+                  ) : (
+                    <SvgIcon
+                      title={i18n.str`KYC missing`}
+                      dangerouslySetInnerHTML={{ __html: warningIcon }}
+                      color="orange"
+                    />
+                  )}
+                </td>
+                <td class="actions">
+                  <Button
+                    variant="outlined"
+                    startIcon={deleteIcon}
+                    size="small"
+                    onClick={async () => onDelete(account)}
+                    color="error"
+                  >
+                    Forget
+                  </Button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </AccountTable>
+    </div>
+  );
+}
+
+function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
+  const { i18n } = useTranslationContext();
+  const [value, setValue] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    value: !value ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="Bitcoin address"
+        variant="standard"
+        fullWidth
+        value={value}
+        error={value !== undefined && !!errors?.value}
+        onChange={(v) => {
+          setValue(v);
+          if (!errors) {
+            field.onInput(`payto://bitcoin/${v}`);
+          }
+        }}
+      />
+      {value !== undefined && errors?.value && (
+        <ErrorMessage title={<span>{errors?.value}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
+function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
+  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+    ? obj
+    : undefined;
+}
+
+function TalerBankAddressAccount({
+  field,
+}: {
+  field: TextFieldHandler;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  const [host, setHost] = useState<string | undefined>(undefined);
+  const [account, setAccount] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    host: !host ? i18n.str`Can't be empty` : undefined,
+    account: !account ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="Bank host"
+        variant="standard"
+        fullWidth
+        value={host}
+        error={host !== undefined && !!errors?.host}
+        onChange={(v) => {
+          setHost(v);
+          if (!errors) {
+            field.onInput(`payto://x-taler-bank/${v}/${account}`);
+          }
+        }}
+      />{" "}
+      {host !== undefined && errors?.host && (
+        <ErrorMessage title={<span>{errors?.host}</span>} />
+      )}
+      <TextField
+        label="Bank account"
+        variant="standard"
+        fullWidth
+        value={account}
+        error={account !== undefined && !!errors?.account}
+        onChange={(v) => {
+          setAccount(v || "");
+          if (!errors) {
+            field.onInput(`payto://x-taler-bank/${host}/${v}`);
+          }
+        }}
+      />{" "}
+      {account !== undefined && errors?.account && (
+        <ErrorMessage title={<span>{errors?.account}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
+function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
+  const { i18n } = useTranslationContext();
+  const [value, setValue] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    value: !value ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="IBAN number"
+        variant="standard"
+        fullWidth
+        value={value}
+        error={value !== undefined && !!errors?.value}
+        onChange={(v) => {
+          setValue(v);
+          if (!errors) {
+            field.onInput(`payto://iban/${v}`);
+          }
+        }}
+      />
+      {value !== undefined && errors?.value && (
+        <ErrorMessage title={<span>{errors?.value}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
+function CustomFieldByAccountType({
+  type,
+  field,
+}: {
+  type: AccountType;
+  field: TextFieldHandler;
+}): VNode {
+  const { i18n } = useTranslationContext();
+
+  const AccountForm = formComponentByAccountType[type];
+
+  return (
+    <div>
+      <WarningText>
+        <i18n.Translate>
+          We can not validate the account so make sure the value is correct.
+        </i18n.Translate>
+      </WarningText>
+      <AccountForm field={field} />
+    </div>
+  );
+}