From 820f953b96b2b2852c32dc16a2fa920c6c717788 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 25 Sep 2023 12:18:59 -0300 Subject: check config number --- packages/demobank-ui/src/hooks/config.ts | 51 ++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 packages/demobank-ui/src/hooks/config.ts (limited to 'packages/demobank-ui/src/hooks/config.ts') diff --git a/packages/demobank-ui/src/hooks/config.ts b/packages/demobank-ui/src/hooks/config.ts new file mode 100644 index 000000000..4b22e8ad3 --- /dev/null +++ b/packages/demobank-ui/src/hooks/config.ts @@ -0,0 +1,51 @@ +import { LibtoolVersion } from "@gnu-taler/taler-util"; +import { useApiContext } from "@gnu-taler/web-util/browser"; +import { useEffect, useState } from "preact/hooks"; +import { getInitialBackendBaseURL } from "./backend.js"; + +/** + * Protocol version spoken with the bank. + * + * Uses libtool's current:revision:age versioning. + */ +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; + } +} + +export function useConfigState(): boolean | undefined { + const [checked, setChecked] = useState() + const { request } = useApiContext(); + + useEffect(() => { + + getConfigState(request) + .then((result) => { + if (!result) { + setChecked(false) + } else { + const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, result.version) + setChecked(r?.compatible); + } + }) + .catch((error) => { + setChecked(false); + }); + }); + + return checked; +} + + -- 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/hooks/config.ts') 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 1e4f21cc76345f3881ea8e5ea0e94d27d26da609 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 26 Sep 2023 15:18:43 -0300 Subject: lang selector and fix logout --- packages/demobank-ui/package.json | 2 +- .../demobank-ui/src/components/LangSelector.tsx | 78 ++++++------ packages/demobank-ui/src/components/app.tsx | 6 +- packages/demobank-ui/src/context/backend.ts | 4 + packages/demobank-ui/src/declaration.d.ts | 4 +- packages/demobank-ui/src/hooks/backend.ts | 44 +++++-- packages/demobank-ui/src/hooks/circuit.ts | 4 +- packages/demobank-ui/src/hooks/config.ts | 20 +-- .../demobank-ui/src/hooks/useCredentialsChecker.ts | 2 +- packages/demobank-ui/src/pages/BankFrame.tsx | 128 ++++++------------- packages/demobank-ui/src/pages/LoginForm.tsx | 27 ++-- .../demobank-ui/src/pages/OperationState/views.tsx | 17 +-- .../demobank-ui/src/pages/RegistrationPage.tsx | 138 +++++++++++++++------ packages/demobank-ui/src/pages/admin/Account.tsx | 2 +- packages/demobank-ui/src/pages/business/Home.tsx | 2 - packages/demobank-ui/src/settings.ts | 14 +-- 16 files changed, 272 insertions(+), 220 deletions(-) (limited to 'packages/demobank-ui/src/hooks/config.ts') diff --git a/packages/demobank-ui/package.json b/packages/demobank-ui/package.json index 744cb4180..b430ebc24 100644 --- a/packages/demobank-ui/package.json +++ b/packages/demobank-ui/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@gnu-taler/demobank-ui", - "version": "0.1.0", + "version": "0.9.3-dev.17", "license": "AGPL-3.0-OR-LATER", "type": "module", "scripts": { diff --git a/packages/demobank-ui/src/components/LangSelector.tsx b/packages/demobank-ui/src/components/LangSelector.tsx index ca4411682..c1d0f64ef 100644 --- a/packages/demobank-ui/src/components/LangSelector.tsx +++ b/packages/demobank-ui/src/components/LangSelector.tsx @@ -42,11 +42,11 @@ function getLangName(s: keyof LangsNames | string): string { return String(s); } -// FIXME: explain "like py". -export function LangSelectorLikePy(): VNode { +export function LangSelector(): VNode { const [updatingLang, setUpdatingLang] = useState(false); const { lang, changeLanguage } = useTranslationContext(); const [hidden, setHidden] = useState(true); + useEffect(() => { function bodyKeyPress(event: KeyboardEvent) { if (event.code === "Escape") setHidden(true); @@ -62,51 +62,49 @@ export function LangSelectorLikePy(): VNode { }; }, []); return ( - - { - ev.preventDefault(); - setHidden((h) => !h); - ev.stopPropagation(); - }} - > - {getLangName(lang)} - -
-
-
+
+
+ + + {!hidden && +
-
+ + + } +
- +
); } diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx index a587c6f1e..f15a9ee6a 100644 --- a/packages/demobank-ui/src/components/app.tsx +++ b/packages/demobank-ui/src/components/app.tsx @@ -78,17 +78,17 @@ function VersionCheck({ children }: { children: ComponentChildren }): VNode { if (checked === undefined) { return } - if (typeof checked === "string") { + if (checked.type === "wrong") { return the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}", server version "{checked}" } - if (checked === true) { + if (checked.type === "ok") { return {children} } return - + } diff --git a/packages/demobank-ui/src/context/backend.ts b/packages/demobank-ui/src/context/backend.ts index b311ddbb0..eae187c6d 100644 --- a/packages/demobank-ui/src/context/backend.ts +++ b/packages/demobank-ui/src/context/backend.ts @@ -34,6 +34,9 @@ const initial: Type = { logOut() { null; }, + expired() { + null; + }, logIn(info) { null; }, @@ -65,6 +68,7 @@ export const BackendStateProviderTesting = ({ const value: BackendStateHandler = { state, logIn: () => {}, + expired: () => {}, logOut: () => {}, }; diff --git a/packages/demobank-ui/src/declaration.d.ts b/packages/demobank-ui/src/declaration.d.ts index d3d9e02ef..bd7edf033 100644 --- a/packages/demobank-ui/src/declaration.d.ts +++ b/packages/demobank-ui/src/declaration.d.ts @@ -74,7 +74,9 @@ type HashCode = string; type EddsaPublicKey = string; type EddsaSignature = string; type WireTransferIdentifierRawP = string; -type RelativeTime = Duration; +type RelativeTime = { + d_us: number | "forever" +}; type ImageDataUrl = string; interface WithId { diff --git a/packages/demobank-ui/src/hooks/backend.ts b/packages/demobank-ui/src/hooks/backend.ts index 3d5bfa360..889618646 100644 --- a/packages/demobank-ui/src/hooks/backend.ts +++ b/packages/demobank-ui/src/hooks/backend.ts @@ -46,16 +46,18 @@ import { AccessToken } from "./useCredentialsChecker.js"; * Has the information to reach and * authenticate at the bank's backend. */ -export type BackendState = LoggedIn | LoggedOut; +export type BackendState = LoggedIn | LoggedOut | Expired; -export interface BackendCredentials { +interface LoggedIn { + status: "loggedIn"; + isUserAdministrator: boolean; username: string; token: AccessToken; } - -interface LoggedIn extends BackendCredentials { - status: "loggedIn"; +interface Expired { + status: "expired"; isUserAdministrator: boolean; + username: string; } interface LoggedOut { status: "loggedOut"; @@ -69,6 +71,13 @@ export const codecForBackendStateLoggedIn = (): Codec => .property("isUserAdministrator", codecForBoolean()) .build("BackendState.LoggedIn"); +export const codecForBackendStateExpired = (): Codec => + buildCodecForObject() + .property("status", codecForConstString("expired")) + .property("username", codecForString()) + .property("isUserAdministrator", codecForBoolean()) + .build("BackendState.Expired"); + export const codecForBackendStateLoggedOut = (): Codec => buildCodecForObject() .property("status", codecForConstString("loggedOut")) @@ -79,6 +88,7 @@ export const codecForBackendState = (): Codec => .discriminateOn("status") .alternative("loggedIn", codecForBackendStateLoggedIn()) .alternative("loggedOut", codecForBackendStateLoggedOut()) + .alternative("expired", codecForBackendStateExpired()) .build("BackendState"); export function getInitialBackendBaseURL(): string { @@ -94,8 +104,9 @@ export function getInitialBackendBaseURL(): string { "ERROR: backendBaseURL was overridden by a setting file and missing. Setting value to 'window.origin'", ); result = window.origin + } else { + result = bankUiSettings.backendBaseURL; } - result = bankUiSettings.backendBaseURL; } else { // testing/development path result = overrideUrl @@ -115,7 +126,8 @@ export const defaultState: BackendState = { export interface BackendStateHandler { state: BackendState; logOut(): void; - logIn(info: BackendCredentials): void; + expired(): void; + logIn(info: {username: string, token: AccessToken}): void; } const BACKEND_STATE_KEY = buildStorageKey( @@ -133,12 +145,22 @@ export function useBackendState(): BackendStateHandler { BACKEND_STATE_KEY, defaultState, ); + const mutateAll = useMatchMutate(); return { state, logOut() { update(defaultState); }, + expired() { + if (state.status === "loggedOut") return; + const nextState: BackendState = { + status: "expired", + username: state.username, + isUserAdministrator: state.username === "admin", + }; + update(nextState); + }, logIn(info) { //admin is defined by the username const nextState: BackendState = { @@ -147,6 +169,7 @@ export function useBackendState(): BackendStateHandler { isUserAdministrator: info.username === "admin", }; update(nextState); + mutateAll(/.*/) }, }; } @@ -194,7 +217,7 @@ export function usePublicBackend(): useBackendType { number, ]): Promise> { const delta = -1 * size //descending order - const params = start ? { delta, start } : {delta} + const params = start ? { delta, start } : { delta } return requestHandler(baseUrl, endpoint, { params, }); @@ -262,7 +285,8 @@ export function useAuthenticatedBackend(): useBackendType { const { state } = useBackendContext(); const { request: requestHandler } = useApiContext(); - const creds = state.status === "loggedIn" ? state.token : undefined; + // FIXME: libeufin returns 400 insteand of 401 if there is no auth token + const creds = state.status === "loggedIn" ? state.token : "secret-token:a"; const baseUrl = getInitialBackendBaseURL(); const request = useCallback( @@ -288,7 +312,7 @@ export function useAuthenticatedBackend(): useBackendType { number, ]): Promise> { const delta = -1 * size //descending order - const params = start ? { delta, start } : {delta} + const params = start ? { delta, start } : { delta } return requestHandler(baseUrl, endpoint, { token: creds, params, diff --git a/packages/demobank-ui/src/hooks/circuit.ts b/packages/demobank-ui/src/hooks/circuit.ts index 4ef80b055..82caafdf2 100644 --- a/packages/demobank-ui/src/hooks/circuit.ts +++ b/packages/demobank-ui/src/hooks/circuit.ts @@ -268,7 +268,7 @@ export function useEstimator(): CashoutEstimators { const { state } = useBackendContext(); const { request } = useApiContext(); const creds = - state.status === "loggedOut" + state.status !== "loggedIn" ? undefined : state.token; return { @@ -340,7 +340,7 @@ export function useBusinessAccountFlag(): boolean | undefined { const { state } = useBackendContext(); const { request } = useApiContext(); const creds = - state.status === "loggedOut" + state.status !== "loggedIn" ? undefined : {user: state.username, token: state.token}; diff --git a/packages/demobank-ui/src/hooks/config.ts b/packages/demobank-ui/src/hooks/config.ts index 4cf677d35..bb5134510 100644 --- a/packages/demobank-ui/src/hooks/config.ts +++ b/packages/demobank-ui/src/hooks/config.ts @@ -18,23 +18,29 @@ async function getConfigState( return result.data; } -export function useConfigState(): undefined | true | string | HttpError { - const [checked, setChecked] = useState>() +type Result = undefined + | { type: "ok", result: SandboxBackend.Config } + | { type: "wrong", result: SandboxBackend.Config } + | { type: "error", result: HttpError } + +export function useConfigState(): Result { + const [checked, setChecked] = useState() const { request } = useApiContext(); useEffect(() => { getConfigState(request) - .then((s) => { - const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, s.version) + .then((result) => { + const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, result.version) if (r?.compatible) { - setChecked(true); + setChecked({ type: "ok",result }); } else { - setChecked(s.version) + setChecked({ type: "wrong",result }) } }) .catch((error: unknown) => { if (error instanceof RequestError) { - setChecked(error.cause); + const result = error.cause + setChecked({ type:"error", result }); } }); }, []); diff --git a/packages/demobank-ui/src/hooks/useCredentialsChecker.ts b/packages/demobank-ui/src/hooks/useCredentialsChecker.ts index f66a4a7c6..02f4544db 100644 --- a/packages/demobank-ui/src/hooks/useCredentialsChecker.ts +++ b/packages/demobank-ui/src/hooks/useCredentialsChecker.ts @@ -15,7 +15,7 @@ export function useCredentialsChecker() { scope: "readwrite" as "write", //FIX: different than merchant duration: { // d_us: "forever" //FIX: should return shortest - d_us: 1000 * 60 * 60 * 23 + d_us: 1000 * 1000 * 5 //60 * 60 * 24 * 7 }, refreshable: true, } diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 5c43d2c3e..3d09fcec7 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -18,7 +18,7 @@ import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringi 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"; +import { LangSelector } from "../components/LangSelector.js"; import { useBackendContext } from "../context/backend.js"; import { useBusinessAccountDetails } from "../hooks/circuit.js"; import { bankUiSettings } from "../settings.js"; @@ -65,12 +65,14 @@ export function BankFrame({ }, [error]) const demo_sites = []; - for (const i in bankUiSettings.demoSites) - demo_sites.push( - - {bankUiSettings.demoSites[i][0]} - , - ); + if (bankUiSettings.demoSites) { + for (const i in bankUiSettings.demoSites) + demo_sites.push( + + {bankUiSettings.demoSites[i][0]} + , + ); + } return (
@@ -88,14 +90,16 @@ export function BankFrame({ />
-
@@ -166,26 +170,29 @@ export function BankFrame({ - Log out - {/* */} + Log out -
  • -
    - Sites -
    -
      - {bankUiSettings.demoSites.map(([name, url]) => { - return
    • - - > - {name} - -
      • - })} -
    +
  • +
    • - + {bankUiSettings.demoSites && +
  • +
    + Sites +
    +
      + {bankUiSettings.demoSites.map(([name, url]) => { + return
    • + + > + {name} + +
      • + })} +
    +
    • + }
    • @@ -291,63 +298,6 @@ export function BankFrame({
    • - // - //
    - // - //
    - // {maybeDemoContent( - //

    - // {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. - // - // )} - //

    , - // )} - //
    - //
    - //
    - // - //
    - //
    - // - // {children} - //
    - //     ); } @@ -393,7 +343,7 @@ function StatusBanner(): VNode { } {n.message.debug &&
    - {n.message.debug} + {n.message.debug}
    }
    diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index 786399d55..14d261622 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -30,14 +30,32 @@ import { undefinedIfEmpty } from "../utils.js"; */ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { const backend = useBackendContext(); - const currentUser = backend.state.status === "loggedIn" ? backend.state.username : undefined + const currentUser = backend.state.status !== "loggedOut" ? backend.state.username : undefined const [username, setUsername] = useState(currentUser); const [password, setPassword] = useState(); const { i18n } = useTranslationContext(); const { requestNewLoginToken, refreshLoginToken } = useCredentialsChecker(); + + /** + * Register form may be shown in the initialization step. + * If this is an error when usgin the app the registration + * callback is not set + */ + const isSessionExpired = !onRegister + + // useEffect(() => { + // if (backend.state.status === "loggedIn") { + // backend.expired() + // } + // },[]) const ref = useRef(null); useEffect(function focusInput() { + //FIXME: show invalidate session and allow relogin + if (isSessionExpired) { + localStorage.removeItem("backend-state"); + window.location.reload() + } ref.current?.focus(); }, []); const [busy, setBusy] = useState>() @@ -124,13 +142,6 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { setBusy(undefined) } - /** - * Register form may be shown in the initialization step. - * If this is an error when usgin the app the registration - * callback is not set - */ - const isSessionExpired = !onRegister - return (
    diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx index 681a3b94d..93b3694d7 100644 --- a/packages/demobank-ui/src/pages/OperationState/views.tsx +++ b/packages/demobank-ui/src/pages/OperationState/views.tsx @@ -14,20 +14,15 @@ GNU Taler; see the file COPYING. If not, see */ -import { Amounts, stringifyPaytoUri, stringifyWithdrawUri } from "@gnu-taler/taler-util"; +import { stringifyWithdrawUri } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; -import { Transactions } from "../../components/Transactions/index.js"; -import { PaymentOptions } from "../PaymentOptions.js"; -import { State } from "./index.js"; -import { CopyButton } from "../../components/CopyButton.js"; -import { bankUiSettings } from "../../settings.js"; -import { useBusinessAccountDetails } from "../../hooks/circuit.js"; -import { useSettings } from "../../hooks/settings.js"; +import { Fragment, VNode, h } from "preact"; import { useEffect, useMemo, useState } from "preact/hooks"; -import { undefinedIfEmpty } from "../../utils.js"; -import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js"; import { QR } from "../../components/QR.js"; +import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js"; +import { useSettings } from "../../hooks/settings.js"; +import { undefinedIfEmpty } from "../../utils.js"; +import { State } from "./index.js"; export function InvalidPaytoView({ payto, onClose }: State.InvalidPayto) { return ( diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx index a2543f977..2e931a144 100644 --- a/packages/demobank-ui/src/pages/RegistrationPage.tsx +++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx @@ -49,6 +49,8 @@ export function RegistrationPage({ } export const USERNAME_REGEX = /^[a-z][a-zA-Z0-9-]*$/; +export const PHONE_REGEX = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/; +export const EMAIL_REGEX = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/; /** * Collect and submit registration data. @@ -58,21 +60,33 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on const [username, setUsername] = useState(); const [name, setName] = useState(); const [password, setPassword] = useState(); + const [phone, setPhone] = useState(); + const [email, setEmail] = useState(); const [repeatPassword, setRepeatPassword] = useState(); - const {requestNewLoginToken} = useCredentialsChecker() + const { requestNewLoginToken } = useCredentialsChecker() const { register } = useTestingAPI(); const { i18n } = useTranslationContext(); const errors = undefinedIfEmpty({ - name: !name - ? i18n.str`Missing name` - : undefined, + // name: !name + // ? i18n.str`Missing name` + // : undefined, username: !username ? i18n.str`Missing username` : !USERNAME_REGEX.test(username) ? i18n.str`Use letters and numbers only, and start with a lowercase letter` : undefined, + phone: !phone + ? undefined + : !PHONE_REGEX.test(phone) + ? i18n.str`Use letters and numbers only, and start with a lowercase letter` + : undefined, + email: !email + ? undefined + : !EMAIL_REGEX.test(email) + ? i18n.str`Use letters and numbers only, and start with a lowercase letter` + : undefined, password: !password ? i18n.str`Missing password` : undefined, repeatPassword: !repeatPassword ? i18n.str`Missing password` @@ -82,9 +96,9 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on }); async function doRegistrationStep() { - if (!username || !password || !name) return; + if (!username || !password) return; try { - await register({ name, username, password }); + await register({ name: name ?? "", username, password }); const resp = await requestNewLoginToken(username, password) setUsername(undefined); if (resp.valid) { @@ -167,7 +181,7 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on
    -

    {i18n.str`Sign up!`}

    +

    {i18n.str`Registration form`}

    @@ -178,34 +192,6 @@ function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, on autoCapitalize="none" autoCorrect="off" > -
    - -
    - { - setName(e.currentTarget.value); - }} - /> - -
    -
    -
    } @@ -430,9 +431,8 @@ function AccountBalance({ account }: { account: string }): VNode { const result = useAccountDetails(account); if (!result.ok) return
    - return
    - {Amounts.currencyOf(result.data.balance.amount)} -  {result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} - {Amounts.stringifyValue(result.data.balance.amount)} -
    + return } diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index fef272831..f60ba3270 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>("wire-transfer"); + const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>(); return (
    @@ -47,7 +47,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ setTab("charge-wallet") }} /> -
    💵
    +
    💵
    a Taler wallet @@ -76,7 +76,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ setTab("wire-transfer") }} /> -
    ↔
    +
    ↔
    another bank account diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 785dc4264..b3fd51670 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -39,6 +39,8 @@ import { undefinedIfEmpty, validateIBAN, } from "../utils.js"; +import { useConfigState } from "../hooks/config.js"; +import { useConfigContext } from "../context/config.js"; const logger = new Logger("PaytoWireTransferForm"); @@ -55,7 +57,7 @@ export function PaytoWireTransferForm({ onCancel: (() => void) | undefined; limit: AmountJson; }): VNode { - const [isRawPayto, setIsRawPayto] = useState(true); + const [isRawPayto, setIsRawPayto] = useState(false); // FIXME: remove this const [iban, setIban] = useState("DE4745461198061"); const [subject, setSubject] = useState("ASD"); @@ -285,7 +287,7 @@ export function PaytoWireTransferForm({
    - , ): VNode { + const cfg = useConfigContext() return (
    @@ -409,10 +414,14 @@ export function Amount( autocomplete="off" value={value ?? ""} disabled={!onChange} - onInput={(e): void => { - if (onChange) { - onChange(e.currentTarget.value); + onInput={(e) => { + if (!onChange) return; + const l = e.currentTarget.value.length + const sep_pos = e.currentTarget.value.indexOf(FRAC_SEPARATOR) + if (sep_pos !== -1 && l - sep_pos - 1 > cfg.currency_fraction_limit) { + e.currentTarget.value = e.currentTarget.value.substring(0, sep_pos + cfg.currency_fraction_limit + 1) } + onChange(e.currentTarget.value); }} />
    @@ -421,3 +430,21 @@ export function Amount( ); } +export function RenderAmount({ value, negative }: { value: AmountJson, negative?: boolean }): VNode { + const cfg = useConfigContext() + const str = Amounts.stringifyValue(value) + const sep_pos = str.indexOf(FRAC_SEPARATOR) + if (sep_pos !== -1 && str.length - sep_pos - 1 > cfg.currency_fraction_digits) { + const limit = sep_pos + cfg.currency_fraction_digits + 1 + const normal = str.substring(0, limit) + const small = str.substring(limit) + return + {negative ? "-" : undefined} + {value.currency} {normal} {small} + + } + return + {negative ? "-" : undefined} + {value.currency} {str} + +} \ No newline at end of file diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 7357223b7..da299b1c8 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -34,13 +34,13 @@ import { forwardRef } from "preact/compat"; import { useEffect, useRef, useState } from "preact/hooks"; import { useAccessAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; -import { Amount, doAutoFocus } from "./PaytoWireTransferForm.js"; +import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js"; import { useSettings } from "../hooks/settings.js"; import { OperationState } from "./OperationState/index.js"; import { Attention } from "../components/Attention.js"; const logger = new Logger("WalletWithdrawForm"); -const RefAmount = forwardRef(Amount); +const RefAmount = forwardRef(InputAmount); function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: { diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx index 208d4b859..ddcd2492d 100644 --- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx @@ -38,6 +38,7 @@ import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js"; import { useAccessAnonAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; import { useSettings } from "../hooks/settings.js"; +import { RenderAmount } from "./PaytoWireTransferForm.js"; const logger = new Logger("WithdrawalConfirmationQuestion"); @@ -318,7 +319,7 @@ export function WithdrawalConfirmationQuestion({
    Amount
    - {Amounts.currencyOf(details.amount)} {Amounts.stringifyValue(details.amount)} +
    diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx index f99b320a4..a6899e679 100644 --- a/packages/demobank-ui/src/pages/admin/AccountList.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx @@ -4,6 +4,7 @@ import { handleNotOkResult } from "../HomePage.js"; import { AccountAction } from "./Home.js"; import { Amounts } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { RenderAmount } from "../PaytoWireTransferForm.js"; interface Props { onAction: (type: AccountAction, account: string) => void; @@ -88,12 +89,7 @@ export function AccountList({ account, onAction, onCreateAccount }: Props): VNod i18n.str`unknown` ) : ( - {balanceIsDebit ? - : null} - {`${Amounts.stringifyValue( - balance, - )}`} -   - {`${balance.currency}`} + )} diff --git a/packages/demobank-ui/src/pages/business/Home.tsx b/packages/demobank-ui/src/pages/business/Home.tsx index 2945cb65a..1a84effcd 100644 --- a/packages/demobank-ui/src/pages/business/Home.tsx +++ b/packages/demobank-ui/src/pages/business/Home.tsx @@ -45,7 +45,7 @@ import { undefinedIfEmpty, } from "../../utils.js"; import { handleNotOkResult } from "../HomePage.js"; -import { Amount } from "../PaytoWireTransferForm.js"; +import { InputAmount } from "../PaytoWireTransferForm.js"; import { ShowAccountDetails } from "../ShowAccountDetails.js"; import { UpdateAccountPassword } from "../UpdateAccountPassword.js"; @@ -342,7 +342,7 @@ function CreateCashout({
    -
    - {i18n.str`Total cost`} -
    -
    - - {i18n.str`Total cashout transfer`} - @@ -88,8 +88,8 @@ export function HistoryItem(props: { tx: Transaction }): VNode { ? i18n.str`Need approval in the Bank` : i18n.str`Exchange is waiting the wire transfer` : tx.withdrawalDetails.type === WithdrawalType.ManualTransfer - ? i18n.str`Exchange is waiting the wire transfer` - : "" //pending but no message + ? i18n.str`Exchange is waiting the wire transfer` + : "" //pending but no message : undefined } /> @@ -267,14 +267,14 @@ function Layout(props: LayoutProps): VNode { style={{ backgroundColor: props.currentState === TransactionMajorState.Pending || - props.currentState === TransactionMajorState.Dialog + props.currentState === TransactionMajorState.Dialog ? "lightcyan" : props.currentState === TransactionMajorState.Failed - ? "#ff000040" - : props.currentState === TransactionMajorState.Aborted || - props.currentState === TransactionMajorState.Aborting - ? "#00000010" - : "inherit", + ? "#ff000040" + : props.currentState === TransactionMajorState.Aborted || + props.currentState === TransactionMajorState.Aborting + ? "#00000010" + : "inherit", alignItems: "center", }} > @@ -353,10 +353,10 @@ function TransactionAmount(props: TransactionAmountProps): VNode { props.currentState !== TransactionMajorState.Done ? "gray" : sign === "+" - ? "darkgreen" - : sign === "-" - ? "darkred" - : undefined, + ? "darkgreen" + : sign === "-" + ? "darkred" + : undefined, }} > -- cgit v1.2.3