diff options
author | Sebastian <sebasjm@gmail.com> | 2023-04-07 17:31:01 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-04-07 17:31:01 -0300 |
commit | 958747bd08172ce00bc84ea3c543eac414a1d39b (patch) | |
tree | 7bfc58c4b5bbae866e3eacacb4317da6b3b5f7f6 /packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx | |
parent | a3aa7d95d09c83794067c47df4a455c0e3f21806 (diff) | |
download | wallet-core-958747bd08172ce00bc84ea3c543eac414a1d39b.tar.xz |
validate iban
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx | 99 |
1 files changed, 54 insertions, 45 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx index 75e1feca4..fb32e5a59 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx @@ -21,18 +21,14 @@ import { PaytoUriIBAN, PaytoUriTalerBank, stringifyPaytoUri, + validateIban, } 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 { SelectList } from "../../components/SelectList.js"; -import { - Input, - SubTitle, - SvgIcon, - WarningText, -} from "../../components/styled/index.js"; +import { Input, SubTitle, SvgIcon } from "../../components/styled/index.js"; import { useTranslationContext } from "../../context/translation.js"; import { Button } from "../../mui/Button.js"; import { TextFieldHandler } from "../../mui/handlers.js"; @@ -111,38 +107,47 @@ export function ReadyView({ description={error} /> )} - <p> - <Input> - <SelectList - label={i18n.str`Select account type`} - list={accountType.list} - name="accountType" - value={accountType.value} - onChange={accountType.onChange} + <div style={{ width: "100%", display: "flex" }}> + {Object.entries(accountType.list).map(([key, name], idx) => ( + <div + style={{ + marginLeft: 8, + padding: 8, + borderTopLeftRadius: 5, + borderTopRightRadius: 5, + backgroundColor: + accountType.value === key ? "#0042b2" : "unset", + color: accountType.value === key ? "white" : "unset", + }} + onClick={(e) => { + if (accountType.onChange) { + accountType.onChange(key); + } + }} + > + {name} + </div> + ))} + </div> + <div style={{ border: "1px solid gray", padding: 8, borderRadius: 5 }}> + <p> + <CustomFieldByAccountType + type={accountType.value as AccountType} + field={uri} /> - </Input> + </p> + </div> + <p> + <TextField + label="Alias" + variant="filled" + placeholder="Easy to remember description" + fullWidth + disabled={accountType.value === ""} + value={alias.value} + onChange={alias.onInput} + /> </p> - {accountType.value === "" ? undefined : ( - <Fragment> - <p> - <CustomFieldByAccountType - type={accountType.value as AccountType} - field={uri} - /> - </p> - <p> - <TextField - label="Alias" - variant="filled" - placeholder="Easy to remember description" - fullWidth - disabled={accountType.value === ""} - value={alias.value} - onChange={alias.onInput} - /> - </p> - </Fragment> - )} </section> <section> <Button @@ -403,6 +408,9 @@ function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode { }); return ( <Fragment> + <h3> + <i18n.Translate>Bitcoin Account</i18n.Translate> + </h3> <TextField label="Bitcoin address" variant="standard" @@ -442,6 +450,9 @@ function TalerBankAddressAccount({ }); return ( <Fragment> + <h3> + <i18n.Translate>Taler Bank</i18n.Translate> + </h3> <TextField label="Bank host" variant="standard" @@ -493,7 +504,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode { : undefined, iban: !iban ? i18n.str`Can't be empty` - : !ibanRegex.test(iban) + : validateIban(iban).type === "invalid" ? i18n.str`Invalid iban` : undefined, name: !name ? i18n.str`Can't be empty` : undefined, @@ -512,7 +523,10 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode { } return ( <Fragment> - <p> + <h3> + <i18n.Translate>International Bank Account Number</i18n.Translate> + </h3> + {/* <p> <TextField label="BIC" variant="filled" @@ -526,7 +540,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode { sendUpdateIfNoErrors(v, iban || "", name || ""); }} /> - </p> + </p> */} <p> <TextField label="IBAN" @@ -545,7 +559,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode { </p> <p> <TextField - label="Receiver name" + label="Account name" variant="filled" placeholder="Name of the target bank account owner" fullWidth @@ -576,11 +590,6 @@ function CustomFieldByAccountType({ 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> ); |