From 0388d31d364139d0a3999126b06d8ac850117ab9 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 19 Sep 2023 00:39:00 -0300 Subject: account page --- .../demobank-ui/src/components/ErrorLoading.tsx | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 packages/demobank-ui/src/components/ErrorLoading.tsx (limited to 'packages/demobank-ui/src/components/ErrorLoading.tsx') diff --git a/packages/demobank-ui/src/components/ErrorLoading.tsx b/packages/demobank-ui/src/components/ErrorLoading.tsx new file mode 100644 index 000000000..fbc4ffceb --- /dev/null +++ b/packages/demobank-ui/src/components/ErrorLoading.tsx @@ -0,0 +1,29 @@ +/* +/* + 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 + */ + +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { h, VNode } from "preact"; + +export function ErrorLoading(): VNode { + const { i18n } = useTranslationContext() + return ( +
+ Could not complete the request + +
+ ); +} -- cgit v1.2.3 From ae49194d4271f1108ec9b8318ea3b7977314cb85 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 25 Sep 2023 08:40:18 -0300 Subject: more ui --- .../demobank-ui/src/components/ErrorLoading.tsx | 19 +++++-- packages/demobank-ui/src/components/Routing.tsx | 4 +- .../src/components/Transactions/views.tsx | 1 + packages/demobank-ui/src/hooks/access.ts | 2 +- .../demobank-ui/src/pages/AccountPage/index.ts | 10 ++-- .../demobank-ui/src/pages/AccountPage/state.ts | 7 +++ packages/demobank-ui/src/pages/BankFrame.tsx | 5 +- packages/demobank-ui/src/pages/HomePage.tsx | 8 +-- packages/demobank-ui/src/pages/LoginForm.tsx | 4 +- .../demobank-ui/src/pages/OperationState/index.ts | 11 ++-- .../demobank-ui/src/pages/OperationState/state.ts | 36 ++++++++++---- .../demobank-ui/src/pages/OperationState/views.tsx | 44 ++++++---------- packages/demobank-ui/src/pages/PaymentOptions.tsx | 4 +- .../demobank-ui/src/pages/RegistrationPage.tsx | 58 +++++++++++++++++++--- packages/demobank-ui/src/pages/Test.tsx | 5 -- .../demobank-ui/src/pages/WalletWithdrawForm.tsx | 1 - packages/taler-util/src/errors.ts | 2 +- .../taler-wallet-core/src/operations/withdraw.ts | 17 +++---- packages/taler-wallet-core/src/versions.ts | 2 +- 19 files changed, 145 insertions(+), 95 deletions(-) delete mode 100644 packages/demobank-ui/src/pages/Test.tsx (limited to 'packages/demobank-ui/src/components/ErrorLoading.tsx') diff --git a/packages/demobank-ui/src/components/ErrorLoading.tsx b/packages/demobank-ui/src/components/ErrorLoading.tsx index fbc4ffceb..a4faa4d5d 100644 --- a/packages/demobank-ui/src/components/ErrorLoading.tsx +++ b/packages/demobank-ui/src/components/ErrorLoading.tsx @@ -15,15 +15,24 @@ GNU Taler; see the file COPYING. If not, see */ -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { HttpError, useTranslationContext } from "@gnu-taler/web-util/browser"; import { h, VNode } from "preact"; -export function ErrorLoading(): VNode { +export function ErrorLoading({ error }: { error: HttpError }): VNode { const { i18n } = useTranslationContext() return ( -
- Could not complete the request - +
+
+
+ +
+
+

{error.message}

+
+
+
); } diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/components/Routing.tsx index d51bd01eb..2710069c2 100644 --- a/packages/demobank-ui/src/components/Routing.tsx +++ b/packages/demobank-ui/src/components/Routing.tsx @@ -23,7 +23,6 @@ import { BusinessAccount } from "../pages/business/Home.js"; import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js"; import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js"; import { RegistrationPage } from "../pages/RegistrationPage.js"; -import { Test } from "../pages/Test.js"; import { useBackendContext } from "../context/backend.js"; import { LoginForm } from "../pages/LoginForm.js"; import { AdminHome } from "../pages/admin/Home.js"; @@ -69,6 +68,9 @@ export function Routing(): VNode { onComplete={() => { route("/account"); }} + onCancel={() => { + route("/account"); + }} /> )} /> diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index b11888320..e34120e34 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -32,6 +32,7 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { export function ReadyView({ transactions }: State.Ready): VNode { const { i18n } = useTranslationContext(); + if (!transactions.length) return
const txByDate = transactions.reduce((prev, cur) => { const d = cur.when.t_ms === "never" ? "" diff --git a/packages/demobank-ui/src/hooks/access.ts b/packages/demobank-ui/src/hooks/access.ts index 13fee71f0..2f6848af8 100644 --- a/packages/demobank-ui/src/hooks/access.ts +++ b/packages/demobank-ui/src/hooks/access.ts @@ -94,7 +94,7 @@ export function useAccessAnonAPI(): AccessAnonAPI { const { request } = useAuthenticatedBackend(); const abortWithdrawal = async (id: string): Promise> => { - const res = await request(`accounts/withdrawals/${id}/abort`, { + const res = await request(`withdrawals/${id}/abort`, { method: "POST", contentType: "json", }); diff --git a/packages/demobank-ui/src/pages/AccountPage/index.ts b/packages/demobank-ui/src/pages/AccountPage/index.ts index ba9b85710..9230fb6b1 100644 --- a/packages/demobank-ui/src/pages/AccountPage/index.ts +++ b/packages/demobank-ui/src/pages/AccountPage/index.ts @@ -18,7 +18,7 @@ import { HttpError, HttpResponseOk, HttpResponsePaginated, utils } from "@gnu-ta import { AbsoluteTime, AmountJson, PaytoUriIBAN, PaytoUriTalerBank } from "@gnu-taler/taler-util"; import { Loading } from "../../components/Loading.js"; import { useComponentState } from "./state.js"; -import { ReadyView, InvalidIbanView} from "./views.js"; +import { ReadyView, InvalidIbanView } from "./views.js"; import { VNode } from "preact"; import { LoginForm } from "../LoginForm.js"; import { ErrorLoading } from "../../components/ErrorLoading.js"; @@ -29,7 +29,7 @@ export interface Props { error: HttpResponsePaginated, ) => VNode; goToBusinessAccount: () => void; - goToConfirmOperation: (id:string) => void; + goToConfirmOperation: (id: string) => void; } export type State = State.Loading | State.LoadingError | State.Ready | State.InvalidIban | State.UserNotFound; @@ -48,14 +48,14 @@ export namespace State { export interface BaseInfo { error: undefined; } - + export interface Ready extends BaseInfo { status: "ready"; error: undefined; - account: string, + account: string, limit: AmountJson, goToBusinessAccount: () => void; - goToConfirmOperation: (id:string) => void; + goToConfirmOperation: (id: string) => void; } export interface InvalidIban { diff --git a/packages/demobank-ui/src/pages/AccountPage/state.ts b/packages/demobank-ui/src/pages/AccountPage/state.ts index b12afbf9e..3df463f4e 100644 --- a/packages/demobank-ui/src/pages/AccountPage/state.ts +++ b/packages/demobank-ui/src/pages/AccountPage/state.ts @@ -48,6 +48,13 @@ export function useComponentState({ account, goToBusinessAccount, goToConfirmOpe error: result, }; } + if (result.status === HttpStatusCode.Unauthorized) { + notifyError(i18n.str`Require login`, undefined); + return { + status: "error-user-not-found", + error: result, + }; + } return { status: "loading-error", error: result, diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index a1414544e..214aac063 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -344,8 +344,6 @@ function StatusBanner(): VNode { class="fixed top-10 z-20 ml-4 mr-4" > { notifs.map(n => { - const info = n.message.type === "info" ? n.message : undefined - const error = n.message.type === "error" ? n.message : undefined switch (n.message.type) { case "error": return
@@ -478,8 +476,7 @@ function AccountBalance({ account }: { account: string }): VNode { // FIXME: balance return
- {Amounts.currencyOf(result.data.balance)} - {Amounts.stringifyValue(result.data.balance)} + {Amounts.currencyOf(result.data.balance)} {Amounts.stringifyValue(result.data.balance)} {/* {Amounts.currencyOf(result.data.balance.amount)}  {result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} {Amounts.stringifyValue(result.data.balance.amount)} */} diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx index d80a57d21..fb30c1218 100644 --- a/packages/demobank-ui/src/pages/HomePage.tsx +++ b/packages/demobank-ui/src/pages/HomePage.tsx @@ -59,7 +59,7 @@ export function HomePage({ account: string, onRegister: () => void; goToBusinessAccount: () => void; - goToConfirmOperation: (id:string) => void; + goToConfirmOperation: (id: string) => void; }): VNode { const { i18n } = useTranslationContext(); @@ -84,7 +84,7 @@ export function WithdrawalOperationPage({ //or return withdrawal uri from response const baseUrl = getInitialBackendBaseURL() const uri = stringifyWithdrawUri({ - bankIntegrationApiBaseUrl: `${baseUrl}/integration-api`, + bankIntegrationApiBaseUrl: `${baseUrl}/taler-integration`, withdrawalOperationId: operationId, }); const parsedUri = parseWithdrawUri(uri); @@ -98,7 +98,7 @@ export function WithdrawalOperationPage({ ); return ; } - + return ( ( result: | HttpResponsePaginated - | HttpResponse, + | HttpResponse, ): VNode { if (result.loading) return ; if (!result.ok) { diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index 0d4bd1261..cfef71b9a 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -49,7 +49,7 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { ? i18n.str`Missing username` // : !USERNAME_REGEX.test(username) // ? i18n.str`Use letters and numbers only, and start with a lowercase letter` - : undefined, + : undefined, password: !password ? i18n.str`Missing password` : undefined, }) ?? busy; @@ -213,7 +213,7 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { {bankUiSettings.allowRegistrations && onRegister &&

+

@@ -360,39 +370,13 @@ export function ReadyView({ uri, onClose }: State.Ready): VNode<{}> { Scan the QR code with your mobile device.

-
- -
- {show && -
- -
- } +
+ +
-
- -
} diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 2830f5c1e..49419d0dc 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -56,11 +56,11 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ Withdraw digital money into your mobile wallet or browser extension {!!settings.currentWithdrawalOperationId && - + - Operation in progress + operation ready } diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx index 8221457bf..5325f43ab 100644 --- a/packages/demobank-ui/src/pages/RegistrationPage.tsx +++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx @@ -33,8 +33,10 @@ const logger = new Logger("RegistrationPage"); export function RegistrationPage({ onComplete, + onCancel }: { onComplete: () => void; + onCancel: () => void; }): VNode { const { i18n } = useTranslationContext(); if (!bankUiSettings.allowRegistrations) { @@ -42,7 +44,7 @@ export function RegistrationPage({

{i18n.str`Currently, the bank is not accepting new registrations!`}

); } - return ; + return ; } export const USERNAME_REGEX = /^[a-z][a-zA-Z0-9-]*$/; @@ -50,7 +52,7 @@ export const USERNAME_REGEX = /^[a-z][a-zA-Z0-9-]*$/; /** * Collect and submit registration data. */ -function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode { +function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, onCancel: () => void }): VNode { const backend = useBackendContext(); const [username, setUsername] = useState(); const [name, setName] = useState(); @@ -168,9 +170,38 @@ function RegistrationForm({ onComplete }: { onComplete: () => void }): VNode { autoCapitalize="none" autoCorrect="off" > +
+ +
+ { + setName(e.currentTarget.value); + }} + /> + +
+
+
void }): VNode {
- +
void }): VNode {
- +
void }): VNode {
-
+
+
diff --git a/packages/taler-util/src/errors.ts b/packages/taler-util/src/errors.ts index 4399dbcf2..07a402413 100644 --- a/packages/taler-util/src/errors.ts +++ b/packages/taler-util/src/errors.ts @@ -78,7 +78,7 @@ export interface DetailsMap { stack?: string; }; [TalerErrorCode.WALLET_BANK_INTEGRATION_PROTOCOL_VERSION_INCOMPATIBLE]: { - exchangeProtocolVersion: string; + bankProtocolVersion: string; walletProtocolVersion: string; }; [TalerErrorCode.WALLET_CORE_API_OPERATION_UNKNOWN]: { diff --git a/packages/taler-wallet-core/src/operations/withdraw.ts b/packages/taler-wallet-core/src/operations/withdraw.ts index fb503d75f..2c9c95d4c 100644 --- a/packages/taler-wallet-core/src/operations/withdraw.ts +++ b/packages/taler-wallet-core/src/operations/withdraw.ts @@ -570,7 +570,7 @@ export async function getBankWithdrawalInfo( throw TalerError.fromDetail( TalerErrorCode.WALLET_BANK_INTEGRATION_PROTOCOL_VERSION_INCOMPATIBLE, { - exchangeProtocolVersion: config.version, + bankProtocolVersion: config.version, walletProtocolVersion: WALLET_BANK_INTEGRATION_PROTOCOL_VERSION, }, "bank integration protocol version not compatible with wallet", @@ -813,10 +813,10 @@ async function handleKycRequired( amlStatus === AmlStatus.normal || amlStatus === undefined ? WithdrawalGroupStatus.PendingKyc : amlStatus === AmlStatus.pending - ? WithdrawalGroupStatus.PendingAml - : amlStatus === AmlStatus.fronzen - ? WithdrawalGroupStatus.SuspendedAml - : assertUnreachable(amlStatus); + ? WithdrawalGroupStatus.PendingAml + : amlStatus === AmlStatus.fronzen + ? WithdrawalGroupStatus.SuspendedAml + : assertUnreachable(amlStatus); await tx.withdrawalGroups.put(wg2); const newTxState = computeWithdrawalTransactionStatus(wg2); @@ -1145,8 +1145,7 @@ export async function updateWithdrawalDenoms( denom.verificationStatus === DenominationVerificationStatus.Unverified ) { logger.trace( - `Validating denomination (${current + 1}/${ - denominations.length + `Validating denomination (${current + 1}/${denominations.length }) signature of ${denom.denomPubHash}`, ); let valid = false; @@ -1240,7 +1239,7 @@ async function queryReserve( if ( resp.status === 404 && result.talerErrorResponse.code === - TalerErrorCode.EXCHANGE_RESERVES_STATUS_UNKNOWN + TalerErrorCode.EXCHANGE_RESERVES_STATUS_UNKNOWN ) { return { ready: false }; } else { @@ -1775,7 +1774,7 @@ export async function getExchangeWithdrawalInfo( ) { logger.warn( `wallet's support for exchange protocol version ${WALLET_EXCHANGE_PROTOCOL_VERSION} might be outdated ` + - `(exchange has ${exchangeDetails.protocolVersionRange}), checking for updates`, + `(exchange has ${exchangeDetails.protocolVersionRange}), checking for updates`, ); } } diff --git a/packages/taler-wallet-core/src/versions.ts b/packages/taler-wallet-core/src/versions.ts index 8b9177bc3..022f4900d 100644 --- a/packages/taler-wallet-core/src/versions.ts +++ b/packages/taler-wallet-core/src/versions.ts @@ -29,7 +29,7 @@ export const WALLET_EXCHANGE_PROTOCOL_VERSION = "17:0:0"; export const WALLET_MERCHANT_PROTOCOL_VERSION = "2:0:1"; /** - * Protocol version spoken with the merchant. + * Protocol version spoken with the bank. * * Uses libtool's current:revision:age versioning. */ -- cgit v1.2.3 From ea0738ccd585445d7e2080d9009025dde9cf22c5 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 25 Sep 2023 14:49:47 -0300 Subject: better /config error --- .../demobank-ui/src/components/ErrorLoading.tsx | 3 ++ .../src/components/Transactions/state.ts | 2 +- packages/demobank-ui/src/components/app.tsx | 18 +++++++--- packages/demobank-ui/src/declaration.d.ts | 3 +- packages/demobank-ui/src/hooks/config.ts | 40 +++++++++------------- .../demobank-ui/src/pages/AccountPage/state.ts | 4 +-- packages/demobank-ui/src/pages/BankFrame.tsx | 14 ++++++-- .../demobank-ui/src/pages/WithdrawalQRCode.tsx | 1 - packages/web-util/src/hooks/index.ts | 1 + packages/web-util/src/hooks/useNotifications.ts | 11 ++++++ 10 files changed, 60 insertions(+), 37 deletions(-) (limited to 'packages/demobank-ui/src/components/ErrorLoading.tsx') diff --git a/packages/demobank-ui/src/components/ErrorLoading.tsx b/packages/demobank-ui/src/components/ErrorLoading.tsx index a4faa4d5d..f83b61234 100644 --- a/packages/demobank-ui/src/components/ErrorLoading.tsx +++ b/packages/demobank-ui/src/components/ErrorLoading.tsx @@ -32,6 +32,9 @@ export function ErrorLoading({ error }: { error: HttpError{error.message}

+
+

Got status "{error.info.status}" on {error.info.url}

+
); diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts index 30c48aa45..4b62b005e 100644 --- a/packages/demobank-ui/src/components/Transactions/state.ts +++ b/packages/demobank-ui/src/components/Transactions/state.ts @@ -44,7 +44,7 @@ export function useComponentState({ account }: Props): State { cp.targetType === "bitcoin" ? `${cp.targetPath.substring(0, 6)}...` : undefined) ?? "unkown"; - const when = AbsoluteTime.fromMilliseconds(tx.date / 1000); + const when = AbsoluteTime.fromProtocolTimestamp(tx.date); const amount = Amounts.parse(tx.amount); const subject = tx.subject; return { diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx index ebda31035..a587c6f1e 100644 --- a/packages/demobank-ui/src/components/app.tsx +++ b/packages/demobank-ui/src/components/app.tsx @@ -29,6 +29,8 @@ import { useEffect, useState } from "preact/hooks"; import { Loading } from "./Loading.js"; import { getInitialBackendBaseURL } from "../hooks/backend.js"; import { BANK_INTEGRATION_PROTOCOL_VERSION, useConfigState } from "../hooks/config.js"; +import { ErrorLoading } from "./ErrorLoading.js"; +import { BankFrame } from "../pages/BankFrame.js"; const WITH_LOCAL_STORAGE_CACHE = false; /** @@ -76,12 +78,18 @@ function VersionCheck({ children }: { children: ComponentChildren }): VNode { if (checked === undefined) { return } - if (checked === false) { - return
- the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}" -
+ if (typeof checked === "string") { + return + the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}", server version "{checked}" + } - return {children} + if (checked === true) { + return {children} + } + + return + + } function localStorageProvider(): Map { diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts index 8d729c1f7..d3d9e02ef 100644 --- a/packages/demobank-ui/src/declaration.d.ts +++ b/packages/demobank-ui/src/declaration.d.ts @@ -205,8 +205,7 @@ namespace SandboxBackend { // Transaction unique ID. Matches // $transaction_id from the URI. row_id: number; - date: number; - // date: Timestamp; + date: Timestamp; } interface CreateBankAccountTransactionCreate { diff --git a/packages/demobank-ui/src/hooks/config.ts b/packages/demobank-ui/src/hooks/config.ts index 4b22e8ad3..4cf677d35 100644 --- a/packages/demobank-ui/src/hooks/config.ts +++ b/packages/demobank-ui/src/hooks/config.ts @@ -1,5 +1,5 @@ import { LibtoolVersion } from "@gnu-taler/taler-util"; -import { useApiContext } from "@gnu-taler/web-util/browser"; +import { ErrorType, HttpError, HttpResponseServerError, RequestError, useApiContext } from "@gnu-taler/web-util/browser"; import { useEffect, useState } from "preact/hooks"; import { getInitialBackendBaseURL } from "./backend.js"; @@ -12,38 +12,32 @@ export const BANK_INTEGRATION_PROTOCOL_VERSION = "0:0:0"; async function getConfigState( request: ReturnType["request"], -): Promise { - try { - const url = getInitialBackendBaseURL(); - const result = await request( - url, - `config`, - ); - return result.data; - } catch (error) { - return undefined; - } +): Promise { + const url = getInitialBackendBaseURL(); + const result = await request(url, `config`); + return result.data; } -export function useConfigState(): boolean | undefined { - const [checked, setChecked] = useState() +export function useConfigState(): undefined | true | string | HttpError { + const [checked, setChecked] = useState>() const { request } = useApiContext(); useEffect(() => { - getConfigState(request) - .then((result) => { - if (!result) { - setChecked(false) + .then((s) => { + const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, s.version) + if (r?.compatible) { + setChecked(true); } else { - const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, result.version) - setChecked(r?.compatible); + setChecked(s.version) } }) - .catch((error) => { - setChecked(false); + .catch((error: unknown) => { + if (error instanceof RequestError) { + setChecked(error.cause); + } }); - }); + }, []); return checked; } diff --git a/packages/demobank-ui/src/pages/AccountPage/state.ts b/packages/demobank-ui/src/pages/AccountPage/state.ts index c212e7484..ca7e1d447 100644 --- a/packages/demobank-ui/src/pages/AccountPage/state.ts +++ b/packages/demobank-ui/src/pages/AccountPage/state.ts @@ -75,9 +75,7 @@ export function useComponentState({ account, goToBusinessAccount, goToConfirmOpe }; } - // FIXME: balance - const balanceIsDebit = true; - // data.balance.credit_debit_indicator == "debit"; + const balanceIsDebit = data.balance.credit_debit_indicator == "debit"; const limit = balanceIsDebit ? Amounts.sub(debitThreshold, balance).amount : Amounts.add(balance, debitThreshold).amount; diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index c4f872679..5c43d2c3e 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -15,7 +15,7 @@ */ import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; -import { notifyError, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { StateUpdater, useEffect, useErrorBoundary, useState } from "preact/hooks"; import { LangSelectorLikePy as LangSelector } from "../components/LangSelector.js"; @@ -54,7 +54,12 @@ export function BankFrame({ useEffect(() => { if (error) { - notifyError(i18n.str`Internal error, please report.`, (error instanceof Error ? error.message : String(error)) as TranslatedString) + const desc = (error instanceof Error ? error.stack : String(error)) as TranslatedString + if (error instanceof Error) { + notifyException(i18n.str`Internal error, please report.`, error) + } else { + notifyError(i18n.str`Internal error, please report.`, String(error) as TranslatedString) + } resetError() } }, [error]) @@ -386,6 +391,11 @@ function StatusBanner(): VNode { {n.message.description}
} + {n.message.debug && +
+ {n.message.debug} +
+ }
case "info": return
diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx index 25c571e28..8f4e175f6 100644 --- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx @@ -45,7 +45,6 @@ export function WithdrawalQRCode({ withdrawUri, onClose, }: Props): VNode { - const [settings, updateSettings] = useSettings(); const { i18n } = useTranslationContext(); const result = useWithdrawalDetails(withdrawUri.withdrawalOperationId); diff --git a/packages/web-util/src/hooks/index.ts b/packages/web-util/src/hooks/index.ts index c29de9023..cc3267dbd 100644 --- a/packages/web-util/src/hooks/index.ts +++ b/packages/web-util/src/hooks/index.ts @@ -4,6 +4,7 @@ export { useMemoryStorage } from "./useMemoryStorage.js"; export { useNotifications, notifyError, + notifyException, notifyInfo, notify, ErrorNotification, diff --git a/packages/web-util/src/hooks/useNotifications.ts b/packages/web-util/src/hooks/useNotifications.ts index 2f9df24f9..792095b06 100644 --- a/packages/web-util/src/hooks/useNotifications.ts +++ b/packages/web-util/src/hooks/useNotifications.ts @@ -36,6 +36,17 @@ export function notifyError( debug, }); } +export function notifyException( + title: TranslatedString, + ex: Error, +) { + notify({ + type: "error" as const, + title, + description: ex.message as TranslatedString, + debug: ex.stack, + }); +} export function notifyInfo(title: TranslatedString) { notify({ type: "info" as const, -- cgit v1.2.3 From 1708d49a2d5da1f325173a030695223e5a24e75c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 29 Sep 2023 16:02:15 -0300 Subject: more ui --- packages/demobank-ui/dev.mjs | 2 +- packages/demobank-ui/src/components/Attention.tsx | 59 +++++ .../demobank-ui/src/components/ErrorLoading.tsx | 22 +- .../src/components/Transactions/views.tsx | 51 ++-- packages/demobank-ui/src/demobank-ui-settings.js | 21 ++ packages/demobank-ui/src/hooks/access.ts | 3 +- packages/demobank-ui/src/hooks/circuit.ts | 2 +- packages/demobank-ui/src/hooks/settings.ts | 3 + .../demobank-ui/src/pages/AccountPage/views.tsx | 62 ++--- packages/demobank-ui/src/pages/BankFrame.tsx | 104 ++++---- packages/demobank-ui/src/pages/HomePage.tsx | 6 +- packages/demobank-ui/src/pages/LoginForm.tsx | 8 +- .../demobank-ui/src/pages/OperationState/state.ts | 4 +- .../demobank-ui/src/pages/OperationState/views.tsx | 5 +- packages/demobank-ui/src/pages/PaymentOptions.tsx | 5 +- .../src/pages/PaytoWireTransferForm.tsx | 268 ++++++++++++--------- packages/demobank-ui/src/pages/QrCodeSection.tsx | 1 - .../src/pages/UpdateAccountPassword.tsx | 8 +- .../demobank-ui/src/pages/WalletWithdrawForm.tsx | 183 +++++--------- .../src/pages/WithdrawalConfirmationQuestion.tsx | 14 +- .../demobank-ui/src/pages/WithdrawalQRCode.tsx | 12 +- .../demobank-ui/src/pages/admin/AccountForm.tsx | 8 +- packages/demobank-ui/src/pages/admin/Home.tsx | 2 + .../demobank-ui/src/pages/admin/RemoveAccount.tsx | 65 +---- 24 files changed, 448 insertions(+), 470 deletions(-) create mode 100644 packages/demobank-ui/src/components/Attention.tsx create mode 100644 packages/demobank-ui/src/demobank-ui-settings.js (limited to 'packages/demobank-ui/src/components/ErrorLoading.tsx') diff --git a/packages/demobank-ui/dev.mjs b/packages/demobank-ui/dev.mjs index 9c09e5716..f29a05e49 100755 --- a/packages/demobank-ui/dev.mjs +++ b/packages/demobank-ui/dev.mjs @@ -18,7 +18,7 @@ import { serve } from "@gnu-taler/web-util/node"; import { initializeDev } from "@gnu-taler/web-util/build"; -const devEntryPoints = ["src/stories.tsx", "src/index.tsx"]; +const devEntryPoints = ["src/stories.tsx", "src/index.tsx", "src/demobank-ui-settings.js"]; const build = initializeDev({ type: "development", diff --git a/packages/demobank-ui/src/components/Attention.tsx b/packages/demobank-ui/src/components/Attention.tsx new file mode 100644 index 000000000..3313e5796 --- /dev/null +++ b/packages/demobank-ui/src/components/Attention.tsx @@ -0,0 +1,59 @@ +import { TranslatedString } from "@gnu-taler/taler-util"; +import { ComponentChildren, Fragment, VNode, h } from "preact"; +import { assertUnreachable } from "./Routing.js"; + +interface Props { + type?: "info" | "success" | "warning" | "danger", + onClose?: () => void, + title: TranslatedString, + children?: ComponentChildren , +} +export function Attention({ type = "info", title, children, onClose }: Props): VNode { + return
+
+
+
+ + {(() => { + switch (type) { + case "info": + return + case "warning": + return + case "danger": + return + case "success": + return + default: + assertUnreachable(type) + } + })()} + +
+
+

+ {title} +

+
+ {children} +
+
+ {onClose && +
+ +
+ } +
+
+ +
+} diff --git a/packages/demobank-ui/src/components/ErrorLoading.tsx b/packages/demobank-ui/src/components/ErrorLoading.tsx index f83b61234..ee62671ce 100644 --- a/packages/demobank-ui/src/components/ErrorLoading.tsx +++ b/packages/demobank-ui/src/components/ErrorLoading.tsx @@ -17,25 +17,13 @@ import { HttpError, useTranslationContext } from "@gnu-taler/web-util/browser"; import { h, VNode } from "preact"; +import { Attention } from "./Attention.js"; +import { TranslatedString } from "@gnu-taler/taler-util"; export function ErrorLoading({ error }: { error: HttpError }): VNode { const { i18n } = useTranslationContext() - return ( -
-
-
- -
-
-

{error.message}

-
-
-
-

Got status "{error.info.status}" on {error.info.url}

-
-
-
+ return ( +

Got status "{error.info.status}" on {error.info.url}

+ ); } diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index f8b2e3113..f92c874f3 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -19,6 +19,7 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { State } from "./index.js"; import { format, isToday } from "date-fns"; import { Amounts } from "@gnu-taler/taler-util"; +import { useEffect, useRef } from "preact/hooks"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { const { i18n } = useTranslationContext(); @@ -55,9 +56,9 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode {i18n.str`Date`} - {i18n.str`Amount`} - {i18n.str`Counterpart`} - {i18n.str`Subject`} + {i18n.str`Amount`} + {i18n.str`Counterpart`} + {i18n.str`Subject`} @@ -69,22 +70,38 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode {txs.map(item => { + const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss") + const amount = + {item.negative ? "-" : ""} + {item.amount ? ( + `${Amounts.stringifyValue(item.amount)} ${item.amount.currency + }` + ) : ( + <{i18n.str`invalid value`}> + )} + return ( -
{item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "HH:mm:ss")}
+
{time}
+
+
Amount
+
+ {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? ( + `${Amounts.stringifyValue(item.amount)}` + ) : ( + <{i18n.str`invalid value`}> + )}
+
Counterpart
+
+ {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart} +
+
- {item.negative ? "-" : ""} - {item.amount ? ( - `${Amounts.stringifyValue(item.amount)} ${item.amount.currency - }` - ) : ( - <{i18n.str`invalid value`}> - )} - {item.counterpart} + class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600"> + {amount} + + {item.counterpart} {item.subject} ) })} @@ -94,8 +111,8 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode - -
- - + return { + updateSettings("showDemoDescription", false); + }}> + {IS_PUBLIC_ACCOUNT_ENABLED ? ( + + This part of the demo shows how a bank that supports Taler + directly would work. In addition to using your own bank + account, you can also see the transaction history of some{" "} + Public Accounts. + + ) : ( + + This part of the demo shows how a bank that supports Taler + directly would work. + + )} + } export function ReadyView({ account, limit, goToBusinessAccount, goToConfirmOperation }: State.Ready): VNode<{}> { diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 15ef8a036..29334cae4 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -15,7 +15,7 @@ */ import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; -import { notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { NotificationMessage, notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { StateUpdater, useEffect, useErrorBoundary, useState } from "preact/hooks"; import { LangSelector } from "../components/LangSelector.js"; @@ -26,6 +26,7 @@ import { useSettings } from "../hooks/settings.js"; import { CopyButton, CopyIcon } from "../components/CopyButton.js"; import logo from "../assets/logo-2021.svg"; import { useAccountDetails } from "../hooks/access.js"; +import { Attention } from "../components/Attention.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; @@ -108,7 +109,7 @@ export function BankFrame({ setOpen(!open) }}> - Open main menu + Open settings @@ -227,6 +228,22 @@ export function BankFrame({ +
  • +
    + + + Show debug info + + + +
    +
  • @@ -286,10 +303,10 @@ export function BankFrame({ }
    +
    - {children}
    @@ -301,79 +318,46 @@ export function BankFrame({ ); } +function MaybeShowDebugInfo({ info }: { info: any }): VNode { + const [settings] = useSettings() + if (settings.showDebugInfo) { + return 
    +    {info}
+
    + } + return +} + function StatusBanner(): VNode { const notifs = useNotifications() - return
    { + if (notifs.length === 0) return + return
    { notifs.map(n => { switch (n.message.type) { case "error": - return
    -
    -
    - -
    -
    -

    {n.message.title}

    -
    -
    -

    - -

    -
    -
    + return { + n.remove() + }}> {n.message.description &&
    {n.message.description}
    } + + {/* + show debug info + {n.message.debug &&
    {n.message.debug}
    - } -
    + } */} + case "info": - return
    -
    -
    - -
    -
    -

    {n.message.title}

    - -

    - -

    -
    - -
    -
    + return { + n.remove(); + }} /> } })}
    diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx index d945d80d1..95144f086 100644 --- a/packages/demobank-ui/src/pages/HomePage.tsx +++ b/packages/demobank-ui/src/pages/HomePage.tsx @@ -137,8 +137,8 @@ export function handleNotOkResult( const errorData = result.payload; notify({ type: "error", - title: i18n.str`Could not load due to a client error`, - description: errorData?.error?.description as TranslatedString, + title: i18n.str`Could not load due to a request error`, + description: i18n.str`Request to url "${result.info.url}" returned ${result.info.status}`, debug: JSON.stringify(result), }); break; @@ -174,7 +174,7 @@ export function handleNotOkResult( assertUnreachable(result); } } - route("/") + // route("/") return
    error
    ; } return
    ; diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index 14d261622..3ea94b899 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -23,6 +23,7 @@ import { useBackendContext } from "../context/backend.js"; import { useCredentialsChecker } from "../hooks/useCredentialsChecker.js"; import { bankUiSettings } from "../settings.js"; import { undefinedIfEmpty } from "../utils.js"; +import { doAutoFocus } from "./PaytoWireTransferForm.js"; /** @@ -98,8 +99,8 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { }); } else { saveError({ - title: i18n.str`Could not load due to a client error`, - // description: cause.payload.error.description, + title: i18n.str`Could not load due to a request error`, + description: i18n.str`Request to url "${cause.info.url}" returned ${cause.info.status}`, debug: JSON.stringify(cause.payload), }); } @@ -159,8 +160,7 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {

    - Withdrawal OK + Withdrawal confirmed

    - The wire transfer to the Taler exchange bank's account is completed, now the - exchange will send the requested amount into your GNU Taler wallet. + The wire transfer to the Taler operator has been initiated. You will soon receive the requested amount in your Taler wallet.

    diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 49419d0dc..fef272831 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -30,7 +30,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ const { i18n } = useTranslationContext(); const [settings] = useSettings(); - const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); + const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>("wire-transfer"); return (
    @@ -82,7 +82,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ another bank account - Make a wire transfer to an account which you know the address. + Make a wire transfer to an account which you know the bank account number @@ -108,6 +108,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ limit={limit} onSuccess={() => { notifyInfo(i18n.str`Wire transfer created!`); + setTab(undefined) }} onCancel={() => { setTab(undefined) diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 5f5a6ce3b..785dc4264 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -55,10 +55,11 @@ export function PaytoWireTransferForm({ onCancel: (() => void) | undefined; limit: AmountJson; }): VNode { - const [isRawPayto, setIsRawPayto] = useState(false); - const [iban, setIban] = useState(undefined); - const [subject, setSubject] = useState(undefined); - const [amount, setAmount] = useState(undefined); + const [isRawPayto, setIsRawPayto] = useState(true); + // FIXME: remove this + const [iban, setIban] = useState("DE4745461198061"); + const [subject, setSubject] = useState("ASD"); + const [amount, setAmount] = useState("1.00001"); const [rawPaytoInput, rawPaytoInputSetter] = useState( undefined, @@ -76,17 +77,17 @@ export function PaytoWireTransferForm({ const errorsWire = undefinedIfEmpty({ iban: !iban - ? i18n.str`Missing IBAN` + ? i18n.str`required` : !IBAN_REGEX.test(iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(iban, i18n), - subject: !subject ? i18n.str`Missing subject` : undefined, + subject: !subject ? i18n.str`required` : undefined, amount: !trimmedAmountStr - ? i18n.str`Missing amount` + ? i18n.str`required` : !parsedAmount - ? i18n.str`Amount is not valid` + ? i18n.str`not valid` : Amounts.isZero(parsedAmount) - ? i18n.str`Should be greater than 0` + ? i18n.str`should be greater than 0` : Amounts.cmp(limit, parsedAmount) === -1 ? i18n.str`balance is not enough` : undefined, @@ -101,14 +102,14 @@ export function PaytoWireTransferForm({ ? i18n.str`required` : !parsed ? i18n.str`does not follow the pattern` - : !parsed.params.amount - ? i18n.str`use the "amount" parameter to specify the amount to be transferred` - : Amounts.parse(parsed.params.amount) === undefined - ? i18n.str`the amount is not valid` - : !parsed.params.message - ? i18n.str`use the "message" parameter to specify a reference text for the transfer` - : !parsed.isKnown || parsed.targetType !== "iban" - ? i18n.str`only "IBAN" target are supported` + : !parsed.isKnown || parsed.targetType !== "iban" + ? i18n.str`only "IBAN" target are supported` + : !parsed.params.amount + ? i18n.str`use the "amount" parameter to specify the amount to be transferred` + : Amounts.parse(parsed.params.amount) === undefined + ? i18n.str`the amount is not valid` + : !parsed.params.message + ? i18n.str`use the "message" parameter to specify a reference text for the transfer` : !IBAN_REGEX.test(parsed.iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(parsed.iban, i18n), @@ -159,6 +160,9 @@ export function PaytoWireTransferForm({ } return (
    + {/** + * FIXME: Scan a qr code + */}

    {title} @@ -167,6 +171,17 @@ export function PaytoWireTransferForm({
    { @@ -203,105 +228,106 @@ export function PaytoWireTransferForm({ }} >
    -
    - {!isRawPayto ? - - -
    - -
    - { - setIban(e.currentTarget.value); - }} - /> - -
    -

    the receiver of the money

    -
    + {!isRawPayto ? +
    -
    - -
    - { - setSubject(e.currentTarget.value); - }} - /> - -
    -

    some text to identify the transfer

    +
    + +
    + { + setIban(e.currentTarget.value.toUpperCase()); + }} + /> +
    +

    + IBAN of the recipient's account +

    +
    -
    - - { - setAmount(d) +
    + +
    + { + setSubject(e.currentTarget.value); }} /> -

    amount to transfer

    +

    some text to identify the transfer

    +
    - : - -
    - -
    - { - rawPaytoInputSetter(e.currentTarget.value); - }} - /> - -
    -
    +
    + + { + setAmount(d) + }} + /> + +

    amount to transfer

    +
    -     - } -
    +
    : +
    +
    + +
    +