diff options
Diffstat (limited to 'packages/demobank-ui/src/pages')
| -rw-r--r-- | packages/demobank-ui/src/pages/AccountPage.tsx | 37 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/AdminPage.tsx | 150 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/BankFrame.tsx | 24 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/BusinessAccount.tsx | 677 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/HomePage.tsx | 2 | ||||
| -rw-r--r-- | packages/demobank-ui/src/pages/Routing.tsx | 2 |
6 files changed, 836 insertions, 56 deletions
diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx index 370605871..ae0c2b1f8 100644 --- a/packages/demobank-ui/src/pages/AccountPage.tsx +++ b/packages/demobank-ui/src/pages/AccountPage.tsx @@ -112,40 +112,3 @@ export function AccountPage({ account, onLoadNotOk }: Props): VNode { </Fragment> ); } - -// function Moves({ account }: { account: string }): VNode { -// const [tab, setTab] = useState<"transactions" | "cashouts">("transactions"); -// const { i18n } = useTranslationContext(); -// return ( -// <article> -// <div class="payments"> -// <div class="tab"> -// <button -// class={tab === "transactions" ? "tablinks active" : "tablinks"} -// onClick={(): void => { -// setTab("transactions"); -// }} -// > -// {i18n.str`Transactions`} -// </button> -// <button -// class={tab === "cashouts" ? "tablinks active" : "tablinks"} -// onClick={(): void => { -// setTab("cashouts"); -// }} -// > -// {i18n.str`Cashouts`} -// </button> -// </div> -// {tab === "transactions" && ( -// )} -// {tab === "cashouts" && ( -// <div class="active"> -// <h3>{i18n.str`Latest cashouts`}</h3> -// <Cashouts account={account} /> -// </div> -// )} -// </div> -// </article> -// ); -// } diff --git a/packages/demobank-ui/src/pages/AdminPage.tsx b/packages/demobank-ui/src/pages/AdminPage.tsx index f8efddd80..d15ac02c4 100644 --- a/packages/demobank-ui/src/pages/AdminPage.tsx +++ b/packages/demobank-ui/src/pages/AdminPage.tsx @@ -14,7 +14,11 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { parsePaytoUri, TranslatedString } from "@gnu-taler/taler-util"; +import { + Amounts, + parsePaytoUri, + TranslatedString, +} from "@gnu-taler/taler-util"; import { HttpResponsePaginated, RequestError, @@ -22,7 +26,9 @@ import { } from "@gnu-taler/web-util/lib/index.browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; +import { Cashouts } from "../components/Cashouts/index.js"; import { ErrorMessage, usePageContext } from "../context/pageState.js"; +import { useAccountDetails } from "../hooks/access.js"; import { useBusinessAccountDetails, useBusinessAccounts, @@ -60,7 +66,10 @@ interface Props { export function AdminPage({ onLoadNotOk }: Props): VNode { const [account, setAccount] = useState<string | undefined>(); const [showDetails, setShowDetails] = useState<string | undefined>(); + const [showCashouts, setShowCashouts] = useState<string | undefined>(); const [updatePassword, setUpdatePassword] = useState<string | undefined>(); + const [removeAccount, setRemoveAccount] = useState<string | undefined>(); + const [createAccount, setCreateAccount] = useState(false); const { pageStateSetter } = usePageContext(); @@ -81,6 +90,23 @@ export function AdminPage({ onLoadNotOk }: Props): VNode { const { customers } = result.data; + if (showCashouts) { + return ( + <div> + <Cashouts account={showCashouts} /> + <input + class="pure-button" + type="submit" + value={i18n.str`Close`} + onClick={async (e) => { + e.preventDefault(); + setShowCashouts(undefined); + }} + /> + </div> + ); + } + if (showDetails) { return ( <ShowAccountDetails @@ -100,6 +126,21 @@ export function AdminPage({ onLoadNotOk }: Props): VNode { /> ); } + if (removeAccount) { + return ( + <RemoveAccount + account={removeAccount} + onLoadNotOk={onLoadNotOk} + onUpdateSuccess={() => { + showInfoMessage(i18n.str`Account removed`); + setRemoveAccount(undefined); + }} + onClear={() => { + setRemoveAccount(undefined); + }} + /> + ); + } if (updatePassword) { return ( <UpdateAccountPassword @@ -164,6 +205,7 @@ export function AdminPage({ onLoadNotOk }: Props): VNode { <th>{i18n.str`Username`}</th> <th>{i18n.str`Name`}</th> <th></th> + <th></th> </tr> </thead> <tbody> @@ -193,6 +235,28 @@ export function AdminPage({ onLoadNotOk }: Props): VNode { change password </a> </td> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + setShowCashouts(item.username); + }} + > + cashouts + </a> + </td> + <td> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + setRemoveAccount(item.username); + }} + > + remove + </a> + </td> </tr> ); })} @@ -536,6 +600,90 @@ export function ShowAccountDetails({ ); } +function RemoveAccount({ + account, + onClear, + onUpdateSuccess, + onLoadNotOk, +}: { + onLoadNotOk: <T, E>(error: HttpResponsePaginated<T, E>) => VNode; + onClear: () => void; + onUpdateSuccess: () => void; + account: string; +}): VNode { + const { i18n } = useTranslationContext(); + const result = useAccountDetails(account); + const { deleteAccount } = useAdminAccountAPI(); + const [error, saveError] = useState<ErrorMessage | undefined>(); + + if (result.clientError) { + if (result.isNotfound) return <div>account not found</div>; + } + if (!result.ok) { + return onLoadNotOk(result); + } + + const balance = Amounts.parse(result.data.balance.amount); + if (!balance) { + return <div>there was an error reading the balance</div>; + } + const isBalanceEmpty = Amounts.isZero(balance); + return ( + <div> + <div> + <h1 class="nav welcome-text"> + <i18n.Translate>Remove account: {account}</i18n.Translate> + </h1> + </div> + {!isBalanceEmpty && ( + <ErrorBanner + error={{ + title: i18n.str`Can't delete the account`, + description: i18n.str`Balance is not empty`, + }} + /> + )} + {error && ( + <ErrorBanner error={error} onClear={() => saveError(undefined)} /> + )} + + <p> + <div style={{ display: "flex", justifyContent: "space-between" }}> + <div> + <input + class="pure-button" + type="submit" + value={i18n.str`Cancel`} + onClick={async (e) => { + e.preventDefault(); + onClear(); + }} + /> + </div> + <div> + <input + id="select-exchange" + class="pure-button pure-button-primary content" + disabled={!isBalanceEmpty} + type="submit" + value={i18n.str`Confirm`} + onClick={async (e) => { + e.preventDefault(); + try { + const r = await deleteAccount(account); + onUpdateSuccess(); + } catch (error) { + handleError(error, saveError, i18n); + } + }} + /> + </div> + </div> + </p> + </div> + ); +} + /** * Create valid account object to update or create * Take template as initial values for the form diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 0fb75b87b..fe7571c38 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -128,7 +128,7 @@ export function BankFrame({ <StatusBanner /> {backend.state.status === "loggedIn" ? ( <div class="top-right"> - {goToBusinessAccount ? ( + {goToBusinessAccount && !backend.state.isUserAdministrator ? ( <MaybeBusinessButton account={backend.state.username} onClick={goToBusinessAccount} @@ -187,7 +187,7 @@ export function ErrorBanner({ onClear, }: { error: ErrorMessage; - onClear: () => void; + onClear?: () => void; }): VNode | null { return ( <div class="informational informational-fail" style={{ marginTop: 8 }}> @@ -196,15 +196,17 @@ export function ErrorBanner({ <b>{error.title}</b> </p> <div> - <input - type="button" - class="pure-button" - value="Clear" - onClick={(e) => { - e.preventDefault(); - onClear(); - }} - /> + {onClear && ( + <input + type="button" + class="pure-button" + value="Clear" + onClick={(e) => { + e.preventDefault(); + onClear(); + }} + /> + )} </div> </div> <p>{error.description}</p> diff --git a/packages/demobank-ui/src/pages/BusinessAccount.tsx b/packages/demobank-ui/src/pages/BusinessAccount.tsx index d845c2fa0..6651ef0f7 100644 --- a/packages/demobank-ui/src/pages/BusinessAccount.tsx +++ b/packages/demobank-ui/src/pages/BusinessAccount.tsx @@ -13,18 +13,34 @@ 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 { TranslatedString } from "@gnu-taler/taler-util"; +import { + AmountJson, + Amounts, + HttpStatusCode, + TranslatedString, +} from "@gnu-taler/taler-util"; import { HttpResponsePaginated, + RequestError, useTranslationContext, } from "@gnu-taler/web-util/lib/index.browser"; -import { h, VNode } from "preact"; +import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Cashouts } from "../components/Cashouts/index.js"; import { useBackendContext } from "../context/backend.js"; -import { usePageContext } from "../context/pageState.js"; +import { ErrorMessage, usePageContext } from "../context/pageState.js"; +import { useAccountDetails } from "../hooks/access.js"; +import { + useCashoutDetails, + useCashouts, + useCircuitAccountAPI, + useRatiosAndFeeConfig, +} from "../hooks/circuit.js"; +import { CashoutStatus, TanChannel, undefinedIfEmpty } from "../utils.js"; import { ShowAccountDetails, UpdateAccountPassword } from "./AdminPage.js"; +import { ErrorBanner } from "./BankFrame.js"; import { LoginForm } from "./LoginForm.js"; +import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js"; interface Props { onClose: () => void; @@ -40,6 +56,8 @@ export function BusinessAccount({ const { pageStateSetter } = usePageContext(); const backend = useBackendContext(); const [updatePassword, setUpdatePassword] = useState(false); + const [newCashout, setNewcashout] = useState(false); + const [showCashout, setShowCashout] = useState<string | undefined>(); function showInfoMessage(info: TranslatedString): void { pageStateSetter((prev) => ({ ...prev, @@ -51,6 +69,32 @@ export function BusinessAccount({ return <LoginForm onRegister={onRegister} />; } + if (newCashout) { + return ( + <CreateCashout + account={backend.state.username} + onLoadNotOk={onLoadNotOk} + onCancel={() => { + setNewcashout(false); + }} + onComplete={(id) => { + setNewcashout(false); + setShowCashout(id); + }} + /> + ); + } + if (showCashout) { + return ( + <ShowCashout + id={showCashout} + onLoadNotOk={onLoadNotOk} + onCancel={() => { + setShowCashout(undefined); + }} + /> + ); + } if (updatePassword) { return ( <UpdateAccountPassword @@ -82,9 +126,634 @@ export function BusinessAccount({ <section style={{ marginTop: "2em" }}> <div class="active"> <h3>{i18n.str`Latest cashouts`}</h3> - <Cashouts /> + <Cashouts + account={backend.state.username} + onSelected={(id) => { + setShowCashout(id); + }} + /> + </div> + <br /> + <div style={{ display: "flex", justifyContent: "space-between" }}> + <div /> + <input + class="pure-button pure-button-primary content" + type="submit" + value={i18n.str`New cashout`} + onClick={async (e) => { + e.preventDefault(); + setNewcashout(true); + }} + /> </div> </section> </div> ); } + +interface PropsCashout { + account: string; + onComplete: (id: string) => void; + onCancel: () => void; + onLoadNotOk: <T, E>(error: HttpResponsePaginated<T, E>) => VNode; +} + +type FormType = { + isDebit: boolean; + amount: string; + subject: string; + channel: TanChannel; +}; +type ErrorFrom<T> = { + [P in keyof T]+?: string; +}; + +function CreateCashout({ + account, + onComplete, + onCancel, + onLoadNotOk, +}: PropsCashout): VNode { + const { i18n } = useTranslationContext(); + const ratiosResult = useRatiosAndFeeConfig(); + const result = useAccountDetails(account); + const [error, saveError] = useState<ErrorMessage | undefined>(); + + const [form, setForm] = useState<Partial<FormType>>({}); + + const { createCashout } = useCircuitAccountAPI(); + if (!result.ok) return onLoadNotOk(result); + if (!ratiosResult.ok) return onLoadNotOk(ratiosResult); + const config = ratiosResult.data; + const maybeBalance = Amounts.parse(result.data.balance.amount); + if (!maybeBalance) return <div>error</div>; + const balance = maybeBalance; + const zero = Amounts.zeroOfCurrency(balance.currency); + + const sellRate = config.ratios_and_fees.sell_at_ratio; + const sellFee = !config.ratios_and_fees.sell_out_fee + ? zero + : Amounts.fromFloat(config.ratios_and_fees.sell_out_fee, balance.currency); + + if (!sellRate || sellRate < 0) return <div>error rate</div>; + + function truncate(a: AmountJson): AmountJson { + const str = Amounts.stringify(a); + const idx = str.indexOf("."); + if (idx === -1) return a; + const truncated = str.substring(0, idx + 3); + console.log(str, truncated); + return Amounts.parseOrThrow(truncated); + } + + const amount = Amounts.parse(`${balance.currency}:${form.amount}`); + const amount_debit = !amount + ? zero + : form.isDebit + ? amount + : truncate(Amounts.divide(Amounts.add(amount, sellFee).amount, sellRate)); + const credit_before_fee = !amount + ? zero + : form.isDebit + ? truncate(Amounts.divide(amount, 1 / sellRate)) + : Amounts.add(amount, sellFee).amount; + + const __amount_credit = Amounts.sub(credit_before_fee, sellFee).amount; + const amount_credit = Amounts.parseOrThrow( + `${config.currency}:${Amounts.stringifyValue(__amount_credit)}`, + ); + + const balanceAfter = Amounts.sub(balance, amount_debit).amount; + + function updateForm(newForm: typeof form): void { + setForm(newForm); + } + const errors = undefinedIfEmpty<ErrorFrom<typeof form>>({ + amount: !form.amount + ? i18n.str`required` + : !amount + ? i18n.str`could not be parsed` + : Amounts.cmp(balance, amount_debit) === -1 + ? i18n.str`balance is not enough` + : Amounts.cmp(credit_before_fee, sellFee) === -1 + ? i18n.str`amount is not enough` + : Amounts.isZero(amount_credit) + ? i18n.str`amount is not enough` + : undefined, + channel: !form.channel ? i18n.str`required` : undefined, + }); + + // setErrors(validationResult); + + return ( + <div> + {error && ( + <ErrorBanner error={error} onClear={() => saveError(undefined)} /> + )} + <h1>New cashout</h1> + <form class="pure-form"> + <fieldset> + <label>{i18n.str`Subject`}</label> + <input + value={form.subject ?? ""} + onChange={(e) => { + form.subject = e.currentTarget.value; + updateForm(structuredClone(form)); + }} + /> + <ShowInputErrorLabel + message={errors?.subject} + isDirty={form.subject !== undefined} + /> + </fieldset> + <fieldset> + <label> + {form.isDebit + ? i18n.str`Amount to send` + : i18n.str`Amount to receive`} + </label> + <div style={{ width: "max-content" }}> + <input + type="text" + readonly + class="currency-indicator" + size={balance.currency.length} + maxLength={balance.currency.length} + tabIndex={-1} + value={balance.currency} + /> + + <input + type="number" + // ref={ref} + id="withdraw-amount" + name="withdraw-amount" + value={form.amount ?? ""} + onChange={(e): void => { + form.amount = e.currentTarget.value; + updateForm(structuredClone(form)); + }} + /> + + <label class="toggle"> + <input + class="toggle-checkbox" + type="checkbox" + onChange={(e): void => { + form.isDebit = !form.isDebit; + updateForm(structuredClone(form)); + }} + /> + <div class="toggle-switch"></div> + </label> + </div> + <ShowInputErrorLabel + message={errors?.amount} + isDirty={form.amount !== undefined} + /> + </fieldset> + <fieldset> + <label>{i18n.str`Conversion rate`}</label> + <input value={sellRate} disabled /> + </fieldset> + <fieldset> + <label>{i18n.str`Balance now`}</label> + <div style={{ width: "max-content" }}> + <input + type="text" + readonly + class="currency-indicator" + size={balance.currency.length} + maxLength={balance.currency.length} + tabIndex={-1} + value={balance.currency} + /> + + <input + type="number" + id="withdraw-amount" + disabled + name="withdraw-amount" + value={Amounts.stringifyValue(balance)} + /> + </div> + </fieldset> + <fieldset> + <label + style={{ fontWeight: "bold", color: "red" }} + >{i18n.str`Total cost`}</label> + <div style={{ width: "max-content" }}> + <input + type="text" + readonly + class="currency-indicator" + size={balance.currency.length} + maxLength={balance.currency.length} + tabIndex={-1} + value={balance.currency} + /> + + <input + type="number" + // ref={ref} + id="withdraw-amount" + disabled + name="withdraw-amount" + value={amount_debit ? Amounts.stringifyValue(amount_debit) : ""} + /> + </div> + </fieldset> + <fieldset> + <label>{i18n.str`Balance after`}</label> + <div style={{ width: "max-content" }}> + <input + type="text" + readonly + class="currency-indicator" + size={balance.currency.length} + maxLength={balance.currency.length} + tabIndex={-1} + value={balance.currency} + /> + + <input + type="number" + // ref={ref} + id="withdraw-amount" + disabled + name="withdraw-amount" + value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""} + /> + </div> + </fieldset>{" "} + {Amounts.isZero(sellFee) ? undefined : ( + <Fragment> + <fieldset> + <label>{i18n.str`Transfer before fee`}</label> + <div style={{ width: "max-content" }}> + <input + type="text" + readonly + class="currency-indicator" + size={balance.currency.length} + maxLength={balance.currency.length} + tabIndex={-1} + value={balance.currency} + /> + + <input + // type="number" + style={{ color: "black" }} + disabled + value={Amounts.stringifyValue(credit_before_fee)} + /> + </div> + </fieldset> + + <fieldset> + <label>{i18n.str`Cashout fee`}</label> + <div style={{ width: "max-content" }}> + <input + type="text" + readonly + class="currency-indicator" + size={balance.currency.length} + maxLength={balance.currency.length} + tabIndex={-1} + value={balance.currency} + /> + + <input + // type="number" + style={{ color: "black" }} + disabled + value={Amounts.stringifyValue(sellFee)} + /> + </div> + </fieldset> + </Fragment> + )} + <fieldset> + <label + style={{ fontWeight: "bold", color: "green" }} + >{i18n.str`Total cashout transfer`}</label> + <div style={{ width: "max-content" }}> + <input + type="text" + readonly + class="currency-indicator" + size={balance.currency.length} + maxLength={balance.currency.length} + tabIndex={-1} + value={balance.currency} + /> + + <input + type="number" + // ref={ref} + id="withdraw-amount" + disabled + name="withdraw-amount" + value={amount_credit ? Amounts.stringifyValue(amount_credit) : ""} + /> + </div> + </fieldset> + <fieldset> + <label>{i18n.str`Confirmation channel`}</label> + + <div class="channel"> + <input + class={ + "pure-button content " + + (form.channel === TanChannel.EMAIL + ? "pure-button-primary" + : "pure-button-secondary") + } + type="submit" + value={i18n.str`Email`} + onClick={async (e) => { + e.preventDefault(); + form.channel = TanChannel.EMAIL; + updateForm(structuredClone(form)); + }} + /> + <input + class={ + "pure-button content " + + (form.channel === TanChannel.SMS + ? "pure-button-primary" + : "pure-button-secondary") + } + type="submit" + value={i18n.str`SMS`} + onClick={async (e) => { + e.preventDefault(); + form.channel = TanChannel.SMS; + updateForm(structuredClone(form)); + }} + /> + <input + class={ + "pure-button content " + + (form.channel === TanChannel.FILE + ? "pure-button-primary" + : "pure-button-secondary") + } + type="submit" + value={i18n.str`FILE`} + onClick={async (e) => { + e.preventDefault(); + form.channel = TanChannel.FILE; + updateForm(structuredClone(form)); + }} + /> + </div> + <ShowInputErrorLabel + message={errors?.channel} + isDirty={form.channel !== undefined} + /> + </fieldset> + <br /> + <div style={{ display: "flex", justifyContent: "space-between" }}> + <button + class="pure-button pure-button-secondary btn-cancel" + onClick={(e) => { + e.preventDefault(); + onCancel(); + }} + > + {i18n.str`Cancel`} + </button> + + <button + class="pure-button pure-button-primary btn-register" + type="submit" + disabled={!!errors} + onClick={async (e) => { + e.preventDefault(); + + if (errors) return; + try { + const res = await createCashout({ + amount_credit: Amounts.stringify(amount_credit), + amount_debit: Amounts.stringify(amount_debit), + subject: form.subject, + tan_channel: form.channel, + }); + onComplete(res.data.uuid); + } catch (error) { + if (error instanceof RequestError) { + const errorData: SandboxBackend.SandboxError = + error.info.error; + if (error.info.status === HttpStatusCode.PreconditionFailed) { + saveError({ + title: i18n.str`The account does not have sufficient funds`, + description: errorData.error.description, + debug: JSON.stringify(error.info), + }); + } else if ( + error.info.status === HttpStatusCode.ServiceUnavailable + ) { + saveError({ + title: i18n.str`The bank does not support the TAN channel for this operation`, + description: errorData.error.description, + debug: JSON.stringify(error.info), + }); + } else if (error.info.status === HttpStatusCode.Conflict) { + saveError({ + title: i18n.str`No contact information for this channel`, + description: errorData.error.description, + debug: JSON.stringify(error.info), + }); + } else { + saveError({ + title: i18n.str`New cashout gave response error`, + description: errorData.error.description, + debug: JSON.stringify(error.info), + }); + } + } else if (error instanceof Error) { + saveError({ + title: i18n.str`Cashout failed, please report`, + description: error.message, + }); + } + } + }} + > + {i18n.str`Create`} + </button> + </div> + </form> + </div> + ); +} + +interface ShowCashoutProps { + id: string; + onCancel: () => void; + onLoadNotOk: <T, E>(error: HttpResponsePaginated<T, E>) => VNode; +} +function ShowCashout({ id, onCancel, onLoadNotOk }: ShowCashoutProps): VNode { + const { i18n } = useTranslationContext(); + const result = useCashoutDetails(id); + const { abortCashout, confirmCashout } = useCircuitAccountAPI(); + const [code, setCode] = useState<string | undefined>(undefined); + const [error, saveError] = useState<ErrorMessage | undefined>(); + if (!result.ok) return onLoadNotOk(result); + const errors = undefinedIfEmpty({ + code: !code ? i18n.str`required` : undefined, + }); + const isPending = String(result.data.status).toUpperCase() === "PENDING"; + return ( + <div> + <h1>Cashout details {id}</h1> + {error && ( + <ErrorBanner error={error} onClear={() => saveError(undefined)} /> + )} + <form class="pure-form"> + <fieldset> + <label> + <i18n.Translate>Subject</i18n.Translate> + </label> + <input readOnly value={result.data.subject} /> + </fieldset> + <fieldset> + <label> + <i18n.Translate>Created</i18n.Translate> + </label> + <input readOnly value={result.data.creation_time ?? ""} /> + </fieldset> + <fieldset> + <label> + <i18n.Translate>Confirmed</i18n.Translate> + </label> + <input readOnly value={result.data.confirmation_time ?? ""} /> + </fieldset> + <fieldset> + <label> + <i18n.Translate>Debited</i18n.Translate> + </label> + <input readOnly value={result.data.amount_debit} /> + </fieldset> + <fieldset> + <label> + <i18n.Translate>Credit</i18n.Translate> + </label> + <input readOnly value={result.data.amount_credit} /> + </fieldset> + <fieldset> + <label> + <i18n.Translate>Status</i18n.Translate> + </label> + <input readOnly value={result.data.status} /> + </fieldset> + {isPending ? ( + <fieldset> + <label> + <i18n.Translate>Code</i18n.Translate> + </label> + <input + value={code ?? ""} + onChange={(e) => { + setCode(e.currentTarget.value); + }} + /> + <ShowInputErrorLabel + message={errors?.code} + isDirty={code !== undefined} + /> + </fieldset> + ) : undefined} + </form> + <br /> + <div style={{ display: "flex", justifyContent: "space-between" }}> + <button + class="pure-button pure-button-secondary btn-cancel" + onClick={(e) => { + e.preventDefault(); + onCancel(); + }} + > + {i18n.str`Back`} + </button> + {isPending ? ( + <div> + <button + type="submit" + class="pure-button pure-button-primary button-error" + onClick={async (e) => { + e.preventDefault(); + try { + const rest = await abortCashout(id); + onCancel(); + } catch (error) { + if (error instanceof RequestError) { + const errorData: SandboxBackend.SandboxError = + error.info.error; + if ( + error.info.status === HttpStatusCode.PreconditionFailed + ) { + saveError({ + title: i18n.str`Cashout was already aborted`, + description: errorData.error.description, + debug: JSON.stringify(error.info), + }); + } else { + saveError({ + title: i18n.str`Aborting cashout gave response error`, + description: errorData.error.description, + debug: JSON.stringify(error.info), + }); + } + } else if (error instanceof Error) { + saveError({ + title: i18n.str`Aborting failed, please report`, + description: error.message, + }); + } + } + }} + > + {i18n.str`Abort`} + </button> + + <button + type="submit" + disabled={!code} + class="pure-button pure-button-primary " + onClick={async (e) => { + e.preventDefault(); + try { + if (!code) return; + const rest = await confirmCashout(id, { + tan: code, + }); + } catch (error) { + if (error instanceof RequestError) { + const errorData: SandboxBackend.SandboxError = + error.info.error; + saveError({ + title: i18n.str`Confirmation of cashout gave response error`, + description: errorData.error.description, + debug: JSON.stringify(error.info), + }); + } else if (error instanceof Error) { + saveError({ + title: i18n.str`Confirmation failed, please report`, + description: error.message, + }); + } + } + }} + > + {i18n.str`Confirm`} + </button> + </div> + ) : ( + <div /> + )} + </div> + </div> + ); +} diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx index 76eb8d515..5af195f48 100644 --- a/packages/demobank-ui/src/pages/HomePage.tsx +++ b/packages/demobank-ui/src/pages/HomePage.tsx @@ -50,7 +50,6 @@ export function HomePage({ onRegister }: { onRegister: () => void }): VNode { } function saveErrorAndLogout(error: PageStateType["error"]): void { - console.log("rrot", error); saveError(error); backend.logOut(); } @@ -124,7 +123,6 @@ function handleNotOkResult( return function handleNotOkResult2<T, E>( result: HttpResponsePaginated<T, E>, ): VNode { - console.log("qweqwe", JSON.stringify(result, undefined, 2)); if (result.clientError && result.isUnauthorized) { onErrorHandler({ title: i18n.str`Wrong credentials for "${account}"`, diff --git a/packages/demobank-ui/src/pages/Routing.tsx b/packages/demobank-ui/src/pages/Routing.tsx index 55317f4ed..48f226574 100644 --- a/packages/demobank-ui/src/pages/Routing.tsx +++ b/packages/demobank-ui/src/pages/Routing.tsx @@ -19,7 +19,7 @@ import { useTranslationContext, } from "@gnu-taler/web-util/lib/index.browser"; import { createHashHistory } from "history"; -import { h, VNode, } from "preact"; +import { h, VNode } from "preact"; import { Router, route, Route } from "preact-router"; import { useEffect } from "preact/hooks"; import { Loading } from "../components/Loading.js"; |