diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx | 534 |
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> + ); +} |