From 0b7bbed99d155ba030a1328e357ab6751bdbb835 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 21 Sep 2023 13:10:16 -0300 Subject: more ui: business and admin --- packages/demobank-ui/src/pages/admin/Account.tsx | 72 ++- .../demobank-ui/src/pages/admin/AccountForm.tsx | 494 +++++++++++++-------- .../demobank-ui/src/pages/admin/AccountList.tsx | 182 +++++--- .../src/pages/admin/CreateNewAccount.tsx | 174 ++++---- packages/demobank-ui/src/pages/admin/Home.tsx | 51 +-- .../demobank-ui/src/pages/admin/RemoveAccount.tsx | 302 +++++++++---- 6 files changed, 745 insertions(+), 530 deletions(-) (limited to 'packages/demobank-ui/src/pages/admin') diff --git a/packages/demobank-ui/src/pages/admin/Account.tsx b/packages/demobank-ui/src/pages/admin/Account.tsx index 8ab3e1323..90ddd611d 100644 --- a/packages/demobank-ui/src/pages/admin/Account.tsx +++ b/packages/demobank-ui/src/pages/admin/Account.tsx @@ -7,50 +7,30 @@ import { notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; export function AdminAccount({ onRegister }: { onRegister: () => void }): VNode { - const { i18n } = useTranslationContext(); - const r = useBackendContext(); - const account = r.state.status === "loggedIn" ? r.state.username : "admin"; - const result = useAccountDetails(account); - - if (!result.ok) { - return handleNotOkResult(i18n, onRegister)(result); - } - const { data } = result; - const balance = Amounts.parseOrThrow(data.balance.amount); - const debitThreshold = Amounts.parseOrThrow(result.data.debitThreshold); - const balanceIsDebit = result.data.balance.credit_debit_indicator == "debit"; - const limit = balanceIsDebit - ? Amounts.sub(debitThreshold, balance).amount - : Amounts.add(balance, debitThreshold).amount; - if (!balance) return ; - return ( - -
-
-

{i18n.str`Bank account balance`}

- {!balance ? ( -
- Waiting server response... -
- ) : ( -
- {balanceIsDebit ? - : null} - {`${Amounts.stringifyValue(balance)}`} -   - {`${balance.currency}`} -
- )} -
-
- { - notifyInfo(i18n.str`Wire transfer created!`); - }} - onCancel={undefined} - /> - - ); + const { i18n } = useTranslationContext(); + const r = useBackendContext(); + const account = r.state.status === "loggedIn" ? r.state.username : "admin"; + const result = useAccountDetails(account); + + if (!result.ok) { + return handleNotOkResult(i18n, onRegister)(result); } - \ No newline at end of file + const { data } = result; + const balance = Amounts.parseOrThrow(data.balance.amount); + const debitThreshold = Amounts.parseOrThrow(result.data.debitThreshold); + const balanceIsDebit = result.data.balance.credit_debit_indicator == "debit"; + const limit = balanceIsDebit + ? Amounts.sub(debitThreshold, balance).amount + : Amounts.add(balance, debitThreshold).amount; + if (!balance) return ; + return ( + { + notifyInfo(i18n.str`Wire transfer created!`); + }} + onCancel={undefined} + /> + ); +} diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx index 9ca0323a1..02df824a2 100644 --- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx @@ -1,9 +1,9 @@ -import { VNode,h } from "preact"; +import { ComponentChildren, VNode, h } from "preact"; import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js"; import { PartialButDefined, RecursivePartial, WithIntermediate, undefinedIfEmpty, validateIBAN } from "../../utils.js"; -import { useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { parsePaytoUri } from "@gnu-taler/taler-util"; +import { buildPayto, parsePaytoUri } from "@gnu-taler/taler-util"; const IBAN_REGEX = /^[A-Z][A-Z0-9]*$/; const EMAIL_REGEX = @@ -19,201 +19,301 @@ const REGEX_JUST_NUMBERS_REGEX = /^\+[0-9 ]*$/; * @returns */ export function AccountForm({ - template, - purpose, - onChange, - }: { - template: SandboxBackend.Circuit.CircuitAccountData | undefined; - onChange: (a: SandboxBackend.Circuit.CircuitAccountData | undefined) => void; - purpose: "create" | "update" | "show"; - }): VNode { - const initial = initializeFromTemplate(template); - const [form, setForm] = useState(initial); - const [errors, setErrors] = useState< - RecursivePartial | undefined - >(undefined); - const { i18n } = useTranslationContext(); - - function updateForm(newForm: typeof initial): void { - const parsed = !newForm.cashout_address - ? undefined - : parsePaytoUri(newForm.cashout_address); - - const errors = undefinedIfEmpty>({ - cashout_address: !newForm.cashout_address + template, + purpose, + onChange, + focus, + children, +}: { + focus?: boolean, + children: ComponentChildren, + template: SandboxBackend.Circuit.CircuitAccountData | undefined; + onChange: (a: SandboxBackend.Circuit.CircuitAccountData | undefined) => void; + purpose: "create" | "update" | "show"; +}): VNode { + const initial = initializeFromTemplate(template); + const [form, setForm] = useState(initial); + const [errors, setErrors] = useState< + RecursivePartial | undefined + >(undefined); + const { i18n } = useTranslationContext(); + const ref = useRef(null); + useEffect(() => { + if (focus) ref.current?.focus(); + }, [focus]); + + function updateForm(newForm: typeof initial): void { + + const parsed = !newForm.cashout_address + ? undefined + : buildPayto("iban", newForm.cashout_address, undefined);; + + const errors = undefinedIfEmpty>({ + cashout_address: !newForm.cashout_address + ? i18n.str`required` + : !parsed + ? i18n.str`does not follow the pattern` + : !parsed.isKnown || parsed.targetType !== "iban" + ? i18n.str`only "IBAN" target are supported` + : !IBAN_REGEX.test(parsed.iban) + ? i18n.str`IBAN should have just uppercased letters and numbers` + : validateIBAN(parsed.iban, i18n), + contact_data: undefinedIfEmpty({ + email: !newForm.contact_data?.email ? i18n.str`required` - : !parsed - ? i18n.str`does not follow the pattern` - : !parsed.isKnown || parsed.targetType !== "iban" - ? i18n.str`only "IBAN" target are supported` - : !IBAN_REGEX.test(parsed.iban) - ? i18n.str`IBAN should have just uppercased letters and numbers` - : validateIBAN(parsed.iban, i18n), - contact_data: undefinedIfEmpty({ - email: !newForm.contact_data?.email - ? i18n.str`required` - : !EMAIL_REGEX.test(newForm.contact_data.email) - ? i18n.str`it should be an email` + : !EMAIL_REGEX.test(newForm.contact_data.email) + ? i18n.str`it should be an email` + : undefined, + phone: !newForm.contact_data?.phone + ? i18n.str`required` + : !newForm.contact_data.phone.startsWith("+") + ? i18n.str`should start with +` + : !REGEX_JUST_NUMBERS_REGEX.test(newForm.contact_data.phone) + ? i18n.str`phone number can't have other than numbers` : undefined, - phone: !newForm.contact_data?.phone - ? i18n.str`required` - : !newForm.contact_data.phone.startsWith("+") - ? i18n.str`should start with +` - : !REGEX_JUST_NUMBERS_REGEX.test(newForm.contact_data.phone) - ? i18n.str`phone number can't have other than numbers` - : undefined, - }), - iban: !newForm.iban - ? undefined //optional field - : !IBAN_REGEX.test(newForm.iban) - ? i18n.str`IBAN should have just uppercased letters and numbers` - : validateIBAN(newForm.iban, i18n), - name: !newForm.name ? i18n.str`required` : undefined, - username: !newForm.username ? i18n.str`required` : undefined, - }); - setErrors(errors); - setForm(newForm); - onChange(errors === undefined ? (newForm as any) : undefined); - } - - return ( -
-
- - { - form.username = e.currentTarget.value; - updateForm(structuredClone(form)); - }} - />{" "} - -
-
- - { - form.name = e.currentTarget.value; - updateForm(structuredClone(form)); - }} - /> - -
- {purpose !== "create" && ( -
- - { - form.iban = e.currentTarget.value; - updateForm(structuredClone(form)); - }} - /> - -
- )} -
- - { - form.contact_data.email = e.currentTarget.value; - updateForm(structuredClone(form)); - }} - /> - -
-
- - { - form.contact_data.phone = e.currentTarget.value; - updateForm(structuredClone(form)); - }} - /> - -
-
- - { - form.cashout_address = "payto://iban/" + e.currentTarget.value; - updateForm(structuredClone(form)); - }} - /> - -
-
- ); + }), + // iban: !newForm.iban + // ? undefined //optional field + // : !IBAN_REGEX.test(newForm.iban) + // ? i18n.str`IBAN should have just uppercased letters and numbers` + // : validateIBAN(newForm.iban, i18n), + name: !newForm.name ? i18n.str`required` : undefined, + username: !newForm.username ? i18n.str`required` : undefined, + }); + setErrors(errors); + setForm(newForm); + onChange(errors === undefined ? (newForm as any) : undefined); } - - function initializeFromTemplate( - account: SandboxBackend.Circuit.CircuitAccountData | undefined, - ): WithIntermediate { - const emptyAccount = { - cashout_address: undefined, - iban: undefined, - name: undefined, - username: undefined, - contact_data: undefined, - }; - const emptyContact = { - email: undefined, - phone: undefined, - }; - - const initial: PartialButDefined = - structuredClone(account) ?? emptyAccount; - if (typeof initial.contact_data === "undefined") { - initial.contact_data = emptyContact; - } - initial.contact_data.email; - return initial as any; + + return ( +
{ + e.preventDefault() + }} + > +
+
+ + +
+ +
+ { + form.username = e.currentTarget.value; + updateForm(structuredClone(form)); + }} + // placeholder="" + autocomplete="off" + /> + +
+

+ account identification in the bank +

+
+ +
+ +
+ { + form.name = e.currentTarget.value; + updateForm(structuredClone(form)); + }} + // placeholder="" + autocomplete="off" + /> + +
+

+ name of the person owner the account +

+
+ + + {purpose !== "create" && (
+ +
+ +
+

+ international bank account number +

+
)} + +
+ +
+ { + form.contact_data.email = e.currentTarget.value; + updateForm(structuredClone(form)); + }} + autocomplete="off" + /> + +
+
+ +
+ +
+ { + form.contact_data.phone = e.currentTarget.value; + updateForm(structuredClone(form)); + }} + // placeholder="" + autocomplete="off" + /> + +
+
+ + +
+ +
+ { + form.cashout_address = e.currentTarget.value; + updateForm(structuredClone(form)); + }} + autocomplete="off" + /> + +
+

+ account number where the money is going to be sent when doing cashouts +

+
+ +
+
+ {children} +
+ ); +} + +function initializeFromTemplate( + account: SandboxBackend.Circuit.CircuitAccountData | undefined, +): WithIntermediate { + const emptyAccount = { + cashout_address: undefined, + iban: undefined, + name: undefined, + username: undefined, + contact_data: undefined, + }; + const emptyContact = { + email: undefined, + phone: undefined, + }; + + const initial: PartialButDefined = + structuredClone(account) ?? emptyAccount; + if (typeof initial.contact_data === "undefined") { + initial.contact_data = emptyContact; } - - - \ No newline at end of file + initial.contact_data.email; + return initial as any; +} + + diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx index 56b15818b..56d9c45f9 100644 --- a/packages/demobank-ui/src/pages/admin/AccountList.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx @@ -9,10 +9,10 @@ interface Props { onAction: (type: AccountAction, account: string) => void; account: string | undefined; onRegister: () => void; - + onCreateAccount: () => void; } -export function AccountList({ account, onAction, onRegister }: Props): VNode { +export function AccountList({ account, onAction, onCreateAccount, onRegister }: Props): VNode { const result = useBusinessAccounts({ account }); const { i18n } = useTranslationContext(); @@ -22,48 +22,60 @@ export function AccountList({ account, onAction, onRegister }: Props): VNode { } const { customers } = result.data; - return
- {!customers.length ? ( -
- ) : ( -
-

{i18n.str`Accounts:`}

-
- - - - - - - - - - - {customers.map((item, idx) => { - const balance = !item.balance - ? undefined - : Amounts.parse(item.balance.amount); - const balanceIsDebit = - item.balance && - item.balance.credit_debit_indicator == "debit"; - return ( - - +
{i18n.str`Username`}{i18n.str`Name`}{i18n.str`Balance`}{i18n.str`Actions`}
- { - e.preventDefault(); - onAction("show-details", item.username) - }} - > - {item.username} - + return
+
+
+

+ Accounts +

+

+ A list of all business account in the bank. +

+
+
+ +
+
+
+
+
+ {!customers.length ? ( +
+ ) : ( + + + + + + + + + + + {customers.map((item, idx) => { + const balance = !item.balance + ? undefined + : Amounts.parse(item.balance.amount); + const balanceIsDebit = + item.balance && + item.balance.credit_debit_indicator == "debit"; + + return + - - + - - ); - })} - -
{i18n.str`Username`}{i18n.str`Name`}{i18n.str`Balance`} + {i18n.str`Actions`} +
+ {item.username} {item.name} + + {item.name} + {!balance ? ( i18n.str`unknown` ) : ( @@ -77,9 +89,8 @@ export function AccountList({ account, onAction, onRegister }: Props): VNode { )} - + { e.preventDefault(); onAction("update-password", item.username) @@ -87,34 +98,71 @@ export function AccountList({ account, onAction, onRegister }: Props): VNode { > change password -   - { - e.preventDefault(); - onAction("show-cashout", item.username) - }} +
+ { + e.preventDefault(); + onAction("show-cashout", item.username) + }} > cashouts -   - { - e.preventDefault(); - onAction("remove-account", item.username) - }} +
+ { + e.preventDefault(); + onAction("remove-account", item.username) + }} > remove
+ })} + + {/* */} +
+ )}
-
- )} -
+ + + + + // return
+ // + // )} + //
} \ No newline at end of file diff --git a/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx b/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx index 90835d52b..2146fc6f0 100644 --- a/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx +++ b/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx @@ -8,100 +8,94 @@ import { getRandomPassword } from "../rnd.js"; import { AccountForm } from "./AccountForm.js"; export function CreateNewAccount({ - onClose, - onCreateSuccess, + onCancel, + onCreateSuccess, }: { - onClose: () => void; - onCreateSuccess: (password: string) => void; + onCancel: () => void; + onCreateSuccess: (password: string) => void; }): VNode { - const { i18n } = useTranslationContext(); - const { createAccount } = useAdminAccountAPI(); - const [submitAccount, setSubmitAccount] = useState< - SandboxBackend.Circuit.CircuitAccountData | undefined - >(); - return ( -
-
-

- New account -

-
+ const { i18n } = useTranslationContext(); + const { createAccount } = useAdminAccountAPI(); + const [submitAccount, setSubmitAccount] = useState< + SandboxBackend.Circuit.CircuitAccountData | undefined + >(); -
- { - setSubmitAccount(a); - }} - /> + async function doCreate() { + if (!submitAccount) return; + try { + const account: SandboxBackend.Circuit.CircuitAccountRequest = + { + cashout_address: submitAccount.cashout_address, + contact_data: submitAccount.contact_data, + internal_iban: submitAccount.iban, + name: submitAccount.name, + username: submitAccount.username, + password: getRandomPassword(), + }; -

-

-
- { - e.preventDefault(); - onClose(); - }} - /> -
-
- { - e.preventDefault(); + await createAccount(account); + onCreateSuccess(account.password); + } catch (error) { + if (error instanceof RequestError) { + notify( + buildRequestErrorMessage(i18n, error.cause, { + onClientError: (status) => + status === HttpStatusCode.Forbidden + ? i18n.str`The rights to perform the operation are not sufficient` + : status === HttpStatusCode.BadRequest + ? i18n.str`Server replied that input data was invalid` + : status === HttpStatusCode.Conflict + ? i18n.str`At least one registration detail was not available` + : undefined, + }), + ); + } else { + notifyError( + i18n.str`Operation failed, please report`, + (error instanceof Error + ? error.message + : JSON.stringify(error)) as TranslatedString + ) + } + } + } - if (!submitAccount) return; - try { - const account: SandboxBackend.Circuit.CircuitAccountRequest = - { - cashout_address: submitAccount.cashout_address, - contact_data: submitAccount.contact_data, - internal_iban: submitAccount.iban, - name: submitAccount.name, - username: submitAccount.username, - password: getRandomPassword(), - }; - - await createAccount(account); - onCreateSuccess(account.password); - } catch (error) { - if (error instanceof RequestError) { - notify( - buildRequestErrorMessage(i18n, error.cause, { - onClientError: (status) => - status === HttpStatusCode.Forbidden - ? i18n.str`The rights to perform the operation are not sufficient` - : status === HttpStatusCode.BadRequest - ? i18n.str`Input data was invalid` - : status === HttpStatusCode.Conflict - ? i18n.str`At least one registration detail was not available` - : undefined, - }), - ); - } else { - notifyError( - i18n.str`Operation failed, please report`, - (error instanceof Error - ? error.message - : JSON.stringify(error)) as TranslatedString - ) - } - } - }} - /> -
-
-

-
+ return ( +
+
+

+ New business account +

+
+ { + setSubmitAccount(a); + }} + > +
+ {onCancel ? + + :
+ } +
- ); + + +
+ ); } diff --git a/packages/demobank-ui/src/pages/admin/Home.tsx b/packages/demobank-ui/src/pages/admin/Home.tsx index e1ec6cfe0..f7d4e426e 100644 --- a/packages/demobank-ui/src/pages/admin/Home.tsx +++ b/packages/demobank-ui/src/pages/admin/Home.tsx @@ -17,17 +17,20 @@ import { RemoveAccount } from "./RemoveAccount.js"; interface Props { onRegister: () => void; } -export type AccountAction = "show-details" | - "show-cashout" | - "update-password" | - "remove-account" | +export type AccountAction = "show-details" | + "show-cashout" | + "update-password" | + "remove-account" | "show-cashouts-details"; export function AdminHome({ onRegister }: Props): VNode { const [action, setAction] = useState<{ type: AccountAction, account: string - }>() + } | undefined>({ + type:"remove-account", + account:"gnunet-at-sandbox" + }) const [createAccount, setCreateAccount] = useState(false); @@ -78,7 +81,7 @@ export function AdminHome({ onRegister }: Props): VNode { notifyInfo(i18n.str`Password changed`); setAction(undefined); }} - onClear={() => { + onCancel={() => { setAction(undefined); }} /> @@ -89,7 +92,7 @@ export function AdminHome({ onRegister }: Props): VNode { notifyInfo(i18n.str`Account removed`); setAction(undefined); }} - onClear={() => { + onCancel={() => { setAction(undefined); }} /> @@ -116,7 +119,7 @@ export function AdminHome({ onRegister }: Props): VNode { if (createAccount) { return ( setCreateAccount(false)} + onCancel={() => setCreateAccount(false)} onCreateSuccess={(password) => { notifyInfo( i18n.str`Account created with password "${password}". The user must change the password on the next login.`, @@ -129,34 +132,18 @@ export function AdminHome({ onRegister }: Props): VNode { return ( -
-

- Admin panel -

-
-

-

-
-
- { - e.preventDefault(); - - setCreateAccount(true); - }} - /> -
-
-

+ { + setCreateAccount(true); + }} + account={undefined} + onAction={(type, account) => setAction({ account, type })} + onRegister={onRegister} + /> - setAction({account, type})} onRegister={onRegister}/> - ); } \ No newline at end of file diff --git a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx index 2900db9d2..050f1fb8a 100644 --- a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx +++ b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx @@ -1,112 +1,218 @@ import { ErrorType, HttpResponsePaginated, RequestError, notify, notifyError, useTranslationContext } from "@gnu-taler/web-util/browser"; -import { VNode,h,Fragment } from "preact"; +import { VNode, h, Fragment } from "preact"; import { useAccountDetails } from "../../hooks/access.js"; import { useAdminAccountAPI } from "../../hooks/circuit.js"; import { Amounts, HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util"; -import { buildRequestErrorMessage } from "../../utils.js"; +import { buildRequestErrorMessage, undefinedIfEmpty } from "../../utils.js"; +import { useEffect, useRef, useState } from "preact/hooks"; +import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js"; export function RemoveAccount({ - account, - onClear, - onUpdateSuccess, - onLoadNotOk, - }: { - onLoadNotOk: ( - error: HttpResponsePaginated, - ) => VNode; - onClear: () => void; - onUpdateSuccess: () => void; - account: string; - }): VNode { - const { i18n } = useTranslationContext(); - const result = useAccountDetails(account); - const { deleteAccount } = useAdminAccountAPI(); - - if (!result.ok) { - if (result.loading || result.type === ErrorType.TIMEOUT) { - return onLoadNotOk(result); - } - if (result.status === HttpStatusCode.NotFound) { - return
account not found
; - } + account, + onCancel, + onUpdateSuccess, + onLoadNotOk, + focus, +}: { + onLoadNotOk: ( + error: HttpResponsePaginated, + ) => VNode; + focus?: boolean; + onCancel: () => void; + onUpdateSuccess: () => void; + account: string; +}): VNode { + const { i18n } = useTranslationContext(); + const result = useAccountDetails(account); + const [accountName, setAccountName] = useState() + const { deleteAccount } = useAdminAccountAPI(); + + if (!result.ok) { + if (result.loading || result.type === ErrorType.TIMEOUT) { return onLoadNotOk(result); } - - const balance = Amounts.parse(result.data.balance.amount); - if (!balance) { - return
there was an error reading the balance
; + if (result.status === HttpStatusCode.NotFound) { + return
account not found
; } - const isBalanceEmpty = Amounts.isZero(balance); - return ( -
-
-

- Remove account: {account} -

+ return onLoadNotOk(result); + } + const ref = useRef(null); + useEffect(() => { + if (focus) ref.current?.focus(); + }, [focus]); + + const balance = Amounts.parse(result.data.balance.amount); + if (!balance) { + return
there was an error reading the balance
; + } + const isBalanceEmpty = Amounts.isZero(balance); + if (!isBalanceEmpty) { + return
+
+
+
+ +
+
+

+ Can't delete the account +

+
+

+ The account can be delete while still holding some balance. First make sure that the owner make a complete cashout. +

+
+
+
- {/* {FXME: SHOW WARNING} */} - {/* {!isBalanceEmpty && ( - saveError(undefined)} - /> - )} */} - -

-

-
- { - e.preventDefault(); - onClear(); - }} - /> +
+
+ +
+
+ } + + async function doRemove() { + try { + const r = await deleteAccount(account); + onUpdateSuccess(); + } catch (error) { + if (error instanceof RequestError) { + notify( + buildRequestErrorMessage(i18n, error.cause, { + onClientError: (status) => + status === HttpStatusCode.Forbidden + ? i18n.str`The administrator specified a institutional username` + : status === HttpStatusCode.NotFound + ? i18n.str`The username was not found` + : status === HttpStatusCode.PreconditionFailed + ? i18n.str`Balance was not zero` + : undefined, + }), + ); + } else { + notifyError(i18n.str`Operation failed, please report`, + (error instanceof Error + ? error.message + : JSON.stringify(error)) as TranslatedString); + } + } + } + + const errors = undefinedIfEmpty({ + accountName: !accountName + ? i18n.str`required` + : account !== accountName + ? i18n.str`name doesn't match` + : undefined, + }); + + + return ( +
+
+
+
+ +
+
+

+ You are going to remove the account +

+
+

+ This step can't be undone. +

-
- { - e.preventDefault(); - try { - const r = await deleteAccount(account); - onUpdateSuccess(); - } catch (error) { - if (error instanceof RequestError) { - notify( - buildRequestErrorMessage(i18n, error.cause, { - onClientError: (status) => - status === HttpStatusCode.Forbidden - ? i18n.str`The administrator specified a institutional username` - : status === HttpStatusCode.NotFound - ? i18n.str`The username was not found` - : status === HttpStatusCode.PreconditionFailed - ? i18n.str`Balance was not zero` - : undefined, - }), - ); - } else { - notifyError(i18n.str`Operation failed, please report`, - (error instanceof Error - ? error.message - : JSON.stringify(error)) as TranslatedString); - } - } - }} - /> +
+ +
+
+ +
+
+

+ Deleting account "{account}" +

+
+
{ + e.preventDefault() + }} + > +
+
+ +
+ +
+ { + setAccountName(e.currentTarget.value) + }} + placeholder={account} + autocomplete="off" + /> + +
+

+ enter the account name that is going to be deleted +

+
+ + +
-

+
+ {onCancel ? + + :
+ } + +
+
- ); - } - \ No newline at end of file +
+ ); +} -- cgit v1.2.3