diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths')
3 files changed, 91 insertions, 17 deletions
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, |