diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx index bf9764b78..2116e1f89 100644 --- a/packages/demobank-ui/src/pages/home/index.tsx +++ b/packages/demobank-ui/src/pages/home/index.tsx @@ -1,21 +1,43 @@ +/* + 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 + */ + /* eslint-disable @typescript-eslint/no-explicit-any */ -import useSWR, { SWRConfig as _SWRConfig, useSWRConfig } from 'swr'; -import { h, Fragment, VNode, createContext } from 'preact'; -import { useRef, useState, useEffect, StateUpdater, useContext } from 'preact/hooks'; -import { Buffer } from 'buffer'; -import { useTranslator, Translate } from '../../i18n'; -import { QR } from '../../components/QR'; -import { useNotNullLocalStorage, useLocalStorage } from '../../hooks'; -import '../../scss/main.scss'; -import talerLogo from '../../assets/logo-white.svg'; -import { LangSelectorLikePy as LangSelector } from '../../components/menu/LangSelector'; +import useSWR, { SWRConfig as _SWRConfig, useSWRConfig } from "swr"; +import { h, Fragment, VNode, createContext } from "preact"; +import { + useRef, + useState, + useEffect, + StateUpdater, + useContext, +} from "preact/hooks"; +import { Buffer } from "buffer"; +import { useTranslator, Translate } from "../../i18n"; +import { QR } from "../../components/QR"; +import { useNotNullLocalStorage, useLocalStorage } from "../../hooks"; +import "../../scss/main.scss"; +import talerLogo from "../../assets/logo-white.svg"; +import { LangSelectorLikePy as LangSelector } from "../../components/menu/LangSelector"; // FIXME: Fix usages of SWRConfig, doing this isn't the best practice (but hey, it works for now) const SWRConfig = _SWRConfig as any; -const UI_ALLOW_REGISTRATIONS = ('__LIBEUFIN_UI_ALLOW_REGISTRATIONS__') ?? 1; -const UI_IS_DEMO = ('__LIBEUFIN_UI_IS_DEMO__') ?? 0; -const UI_BANK_NAME = ('__LIBEUFIN_UI_BANK_NAME__') ?? 'Taler Bank'; +const UI_ALLOW_REGISTRATIONS = "__LIBEUFIN_UI_ALLOW_REGISTRATIONS__" ?? 1; +const UI_IS_DEMO = "__LIBEUFIN_UI_IS_DEMO__" ?? 0; +const UI_BANK_NAME = "__LIBEUFIN_UI_BANK_NAME__" ?? "Taler Bank"; /** * FIXME: @@ -135,17 +157,23 @@ function maybeDemoContent(content: VNode) { } async function fetcher(url: string) { - return fetch(url).then((r) => (r.json())); + return fetch(url).then((r) => r.json()); } function genCaptchaNumbers(): string { - return `${Math.floor(Math.random() * 10)} + ${Math.floor(Math.random() * 10)}`; + return `${Math.floor(Math.random() * 10)} + ${Math.floor( + Math.random() * 10, + )}`; } /** * Bring the state to show the public accounts page. */ function goPublicAccounts(pageStateSetter: StateUpdater) { - return () => pageStateSetter((prevState) => ({ ...prevState, showPublicHistories: true })) + return () => + pageStateSetter((prevState) => ({ + ...prevState, + showPublicHistories: true, + })); } /** @@ -154,15 +182,15 @@ function goPublicAccounts(pageStateSetter: StateUpdater) { * the input is invalid, the valid amount otherwise. */ function validateAmount(maybeAmount: string): any { - const amountRegex = '^[0-9]+(\.[0-9]+)?$'; + const amountRegex = "^[0-9]+(.[0-9]+)?$"; if (!maybeAmount) { console.log(`Entered amount (${maybeAmount}) mismatched pattern.`); return; } - if (typeof maybeAmount !== 'undefined' || maybeAmount !== '') { + if (typeof maybeAmount !== "undefined" || maybeAmount !== "") { console.log(`Maybe valid amount: ${maybeAmount}`); // tolerating comma instead of point. - const re = RegExp(amountRegex) + const re = RegExp(amountRegex); if (!re.test(maybeAmount)) { console.log(`Not using invalid amount '${maybeAmount}'.`); return false; @@ -175,10 +203,10 @@ function validateAmount(maybeAmount: string): any { * Extract IBAN from a Payto URI. */ function getIbanFromPayto(url: string): string { - const pathSplit = new URL(url).pathname.split('/'); + const pathSplit = new URL(url).pathname.split("/"); let lastIndex = pathSplit.length - 1; // Happens if the path ends with "/". - if (pathSplit[lastIndex] === '') lastIndex--; + if (pathSplit[lastIndex] === "") lastIndex--; const iban = pathSplit[lastIndex]; return iban; } @@ -188,10 +216,9 @@ function getIbanFromPayto(url: string): string { */ function parseAmount(val: string): Amount { const format = /^[A-Z]+:[0-9]+(\.[0-9]+)?$/; - if (!format.test(val)) - throw Error(`Backend gave invalid amount: ${val}.`) - const amountSplit = val.split(':'); - return { value: amountSplit[1], currency: amountSplit[0] } + if (!format.test(val)) throw Error(`Backend gave invalid amount: ${val}.`); + const amountSplit = val.split(":"); + return { value: amountSplit[1], currency: amountSplit[0] }; } /** @@ -199,8 +226,8 @@ function parseAmount(val: string): Amount { * exception if not found. */ function getUsername(backendState: BackendStateTypeOpt): string { - if (typeof backendState === 'undefined') - throw Error('Username can\'t be found in a undefined backend state.') + if (typeof backendState === "undefined") + throw Error("Username can't be found in a undefined backend state."); return backendState.username; } @@ -213,30 +240,32 @@ function getUsername(backendState: BackendStateTypeOpt): string { async function postToBackend( uri: string, backendState: BackendStateTypeOpt, - body: string + body: string, ): Promise { - if (typeof backendState === 'undefined') - throw Error('Credentials can\'t be found in a undefined backend state.') + if (typeof backendState === "undefined") + throw Error("Credentials can't be found in a undefined backend state."); const { username, password } = backendState; const headers = prepareHeaders(username, password); // Backend URL must have been stored _with_ a final slash. - const url = new URL(uri, backendState.url) + const url = new URL(uri, backendState.url); return await fetch(url.href, { - method: 'POST', + method: "POST", headers, body, - } - ); + }); } function useTransactionPageNumber(): [number, StateUpdater] { - const ret = useNotNullLocalStorage('transaction-page', '0'); + const ret = useNotNullLocalStorage("transaction-page", "0"); const retObj = JSON.parse(ret[0]); const retSetter: StateUpdater = function (val) { - const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val) - ret[1](newVal) - } + const newVal = + val instanceof Function + ? JSON.stringify(val(retObj)) + : JSON.stringify(val); + ret[1](newVal); + }; return [retObj, retSetter]; } @@ -246,13 +275,10 @@ function useTransactionPageNumber(): [number, StateUpdater] { function prepareHeaders(username: string, password: string) { const headers = new Headers(); headers.append( - 'Authorization', - `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}` + "Authorization", + `Basic ${Buffer.from(`${username}:${password}`).toString("base64")}`, ); - headers.append( - 'Content-Type', - 'application/json' - ) + headers.append("Content-Type", "application/json"); return headers; } @@ -261,10 +287,11 @@ function prepareHeaders(username: string, password: string) { // That allows the app to be pointed to a arbitrary // euFin backend when launched via "pnpm dev". const getRootPath = () => { - const maybeRootPath = typeof window !== undefined - ? window.location.origin + window.location.pathname - : '/'; - if (!maybeRootPath.endsWith('/')) return `${maybeRootPath}/`; + const maybeRootPath = + typeof window !== undefined + ? window.location.origin + window.location.pathname + : "/"; + if (!maybeRootPath.endsWith("/")) return `${maybeRootPath}/`; return maybeRootPath; }; @@ -278,16 +305,18 @@ const getRootPath = () => { * handle of the data entered by the user in fields. */ function useShowPublicAccount( - state?: string + state?: string, ): [string | undefined, StateUpdater] { - - const ret = useLocalStorage('show-public-account', JSON.stringify(state)); + const ret = useLocalStorage("show-public-account", JSON.stringify(state)); const retObj: string | undefined = ret[0] ? JSON.parse(ret[0]) : ret[0]; const retSetter: StateUpdater = function (val) { - const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val) - ret[1](newVal) - } - return [retObj, retSetter] + const newVal = + val instanceof Function + ? JSON.stringify(val(retObj)) + : JSON.stringify(val); + ret[1](newVal); + }; + return [retObj, retSetter]; } /** @@ -296,16 +325,15 @@ function useShowPublicAccount( type RawPaytoInputType = string; type RawPaytoInputTypeOpt = RawPaytoInputType | undefined; function useRawPaytoInputType( - state?: RawPaytoInputType + state?: RawPaytoInputType, ): [RawPaytoInputTypeOpt, StateUpdater] { - - const ret = useLocalStorage('raw-payto-input-state', state); + const ret = useLocalStorage("raw-payto-input-state", state); const retObj: RawPaytoInputTypeOpt = ret[0]; const retSetter: StateUpdater = function (val) { - const newVal = val instanceof Function ? val(retObj) : val - ret[1](newVal) - } - return [retObj, retSetter] + const newVal = val instanceof Function ? val(retObj) : val; + ret[1](newVal); + }; + return [retObj, retSetter]; } /** @@ -317,16 +345,23 @@ function useRawPaytoInputType( */ type WireTransferRequestTypeOpt = WireTransferRequestType | undefined; function useWireTransferRequestType( - state?: WireTransferRequestType + state?: WireTransferRequestType, ): [WireTransferRequestTypeOpt, StateUpdater] { - - const ret = useLocalStorage('wire-transfer-request-state', JSON.stringify(state)); - const retObj: WireTransferRequestTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0]; + const ret = useLocalStorage( + "wire-transfer-request-state", + JSON.stringify(state), + ); + const retObj: WireTransferRequestTypeOpt = ret[0] + ? JSON.parse(ret[0]) + : ret[0]; const retSetter: StateUpdater = function (val) { - const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val) - ret[1](newVal) - } - return [retObj, retSetter] + const newVal = + val instanceof Function + ? JSON.stringify(val(retObj)) + : JSON.stringify(val); + ret[1](newVal); + }; + return [retObj, retSetter]; } /** @@ -336,16 +371,23 @@ function useWireTransferRequestType( */ type CredentialsRequestTypeOpt = CredentialsRequestType | undefined; function useCredentialsRequestType( - state?: CredentialsRequestType + state?: CredentialsRequestType, ): [CredentialsRequestTypeOpt, StateUpdater] { - - const ret = useLocalStorage('credentials-request-state', JSON.stringify(state)); - const retObj: CredentialsRequestTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0]; + const ret = useLocalStorage( + "credentials-request-state", + JSON.stringify(state), + ); + const retObj: CredentialsRequestTypeOpt = ret[0] + ? JSON.parse(ret[0]) + : ret[0]; const retSetter: StateUpdater = function (val) { - const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val) - ret[1](newVal) - } - return [retObj, retSetter] + const newVal = + val instanceof Function + ? JSON.stringify(val(retObj)) + : JSON.stringify(val); + ret[1](newVal); + }; + return [retObj, retSetter]; } /** @@ -355,16 +397,18 @@ function useCredentialsRequestType( */ type BackendStateTypeOpt = BackendStateType | undefined; function useBackendState( - state?: BackendStateType + state?: BackendStateType, ): [BackendStateTypeOpt, StateUpdater] { - - const ret = useLocalStorage('backend-state', JSON.stringify(state)); + const ret = useLocalStorage("backend-state", JSON.stringify(state)); const retObj: BackendStateTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0]; const retSetter: StateUpdater = function (val) { - const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val) - ret[1](newVal) - } - return [retObj, retSetter] + const newVal = + val instanceof Function + ? JSON.stringify(val(retObj)) + : JSON.stringify(val); + ret[1](newVal); + }; + return [retObj, retSetter]; } /** @@ -373,16 +417,18 @@ function useBackendState( */ type AccountStateTypeOpt = AccountStateType | undefined; function useAccountState( - state?: AccountStateType + state?: AccountStateType, ): [AccountStateTypeOpt, StateUpdater] { - - const ret = useLocalStorage('account-state', JSON.stringify(state)); + const ret = useLocalStorage("account-state", JSON.stringify(state)); const retObj: AccountStateTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0]; const retSetter: StateUpdater = function (val) { - const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val) - ret[1](newVal) - } - return [retObj, retSetter] + const newVal = + val instanceof Function + ? JSON.stringify(val(retObj)) + : JSON.stringify(val); + ret[1](newVal); + }; + return [retObj, retSetter]; } /** @@ -397,16 +443,19 @@ function usePageState( hasError: false, hasInfo: false, withdrawalInProgress: false, - } + }, ): [PageStateType, StateUpdater] { - const ret = useNotNullLocalStorage('page-state', JSON.stringify(state)); + const ret = useNotNullLocalStorage("page-state", JSON.stringify(state)); const retObj: PageStateType = JSON.parse(ret[0]); - console.log('Current page state', retObj); + console.log("Current page state", retObj); const retSetter: StateUpdater = function (val) { - const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val) - console.log('Setting new page state', newVal) - ret[1](newVal) - } + const newVal = + val instanceof Function + ? JSON.stringify(val(retObj)) + : JSON.stringify(val); + console.log("Setting new page state", newVal); + ret[1](newVal); + }; return [retObj, retSetter]; } @@ -432,19 +481,27 @@ function usePageState( async function abortWithdrawalCall( backendState: BackendStateTypeOpt, withdrawalId: string | undefined, - pageStateSetter: StateUpdater + pageStateSetter: StateUpdater, ) { - if (typeof backendState === 'undefined') { - console.log('No credentials found.'); - pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials found.' })) + if (typeof backendState === "undefined") { + console.log("No credentials found."); + pageStateSetter((prevState) => ({ + ...prevState, + hasError: true, + error: "No credentials found.", + })); return; } - if (typeof withdrawalId === 'undefined') { - console.log('No withdrawal ID found.'); - pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No withdrawal ID found.' })) + if (typeof withdrawalId === "undefined") { + console.log("No withdrawal ID found."); + pageStateSetter((prevState) => ({ + ...prevState, + hasError: true, + error: "No withdrawal ID found.", + })); return; } - let res:any; + let res: any; try { const { username, password } = backendState; const headers = prepareHeaders(username, password); @@ -462,36 +519,38 @@ async function abortWithdrawalCall( // Backend URL must have been stored _with_ a final slash. const url = new URL( `access-api/accounts/${backendState.username}/withdrawals/${withdrawalId}/abort`, - backendState.url - ) - res = await fetch(url.href, { method: 'POST', headers }) + backendState.url, + ); + res = await fetch(url.href, { method: "POST", headers }); } catch (error) { - console.log('Could not abort the withdrawal', error); + console.log("Could not abort the withdrawal", error); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: `Could not abort the withdrawal: ${error}` - })) + error: `Could not abort the withdrawal: ${error}`, + })); return; } if (!res.ok) { - console.log(`Withdrawal abort gave response error (${res.status})`, res.statusText); + console.log( + `Withdrawal abort gave response error (${res.status})`, + res.statusText, + ); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: `Withdrawal abortion gave response error (${res.status})` - })) + error: `Withdrawal abortion gave response error (${res.status})`, + })); return; } - console.log('Withdrawal operation aborted!'); + console.log("Withdrawal operation aborted!"); pageStateSetter((prevState) => { const { ...rest } = prevState; return { ...rest, - info: 'Withdrawal aborted!' - } - }) - + info: "Withdrawal aborted!", + }; + }); } /** @@ -507,17 +566,24 @@ async function abortWithdrawalCall( async function confirmWithdrawalCall( backendState: BackendStateTypeOpt, withdrawalId: string | undefined, - pageStateSetter: StateUpdater + pageStateSetter: StateUpdater, ) { - - if (typeof backendState === 'undefined') { - console.log('No credentials found.'); - pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials found.' })) + if (typeof backendState === "undefined") { + console.log("No credentials found."); + pageStateSetter((prevState) => ({ + ...prevState, + hasError: true, + error: "No credentials found.", + })); return; } - if (typeof withdrawalId === 'undefined') { - console.log('No withdrawal ID found.'); - pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No withdrawal ID found.' })) + if (typeof withdrawalId === "undefined") { + console.log("No withdrawal ID found."); + pageStateSetter((prevState) => ({ + ...prevState, + hasError: true, + error: "No withdrawal ID found.", + })); return; } let res: Response; @@ -538,39 +604,42 @@ async function confirmWithdrawalCall( // Backend URL must have been stored _with_ a final slash. const url = new URL( `access-api/accounts/${backendState.username}/withdrawals/${withdrawalId}/confirm`, - backendState.url - ) + backendState.url, + ); res = await fetch(url.href, { - method: 'POST', - headers - }) + method: "POST", + headers, + }); } catch (error) { - console.log('Could not POST withdrawal confirmation to the bank', error); + console.log("Could not POST withdrawal confirmation to the bank", error); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: `Could not confirm the withdrawal: ${error}` - })) + error: `Could not confirm the withdrawal: ${error}`, + })); return; } - if (res ? !res.ok : true) { // assume not ok if res is null - console.log(`Withdrawal confirmation gave response error (${res.status})`, res.statusText); + if (res ? !res.ok : true) { + // assume not ok if res is null + console.log( + `Withdrawal confirmation gave response error (${res.status})`, + res.statusText, + ); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: `Withdrawal confirmation gave response error (${res.status})` - })) + error: `Withdrawal confirmation gave response error (${res.status})`, + })); return; } - console.log('Withdrawal operation confirmed!'); + console.log("Withdrawal operation confirmed!"); pageStateSetter((prevState) => { const { talerWithdrawUri, ...rest } = prevState; return { ...rest, - info: 'Withdrawal confirmed!' - } - }) - + info: "Withdrawal confirmed!", + }; + }); } /** @@ -587,43 +656,44 @@ async function createTransactionCall( * Optional since the raw payto form doesn't have * a stateful management of the input data yet. */ - cleanUpForm: () => void + cleanUpForm: () => void, ) { - let res:any; + let res: any; try { res = await postToBackend( `access-api/accounts/${getUsername(backendState)}/transactions`, backendState, - JSON.stringify(req) - ) - } - catch (error) { - console.log('Could not POST transaction request to the bank', error); + JSON.stringify(req), + ); + } catch (error) { + console.log("Could not POST transaction request to the bank", error); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: `Could not create the wire transfer: ${error}` - })) + error: `Could not create the wire transfer: ${error}`, + })); return; } // POST happened, status not sure yet. if (!res.ok) { const responseText = JSON.stringify(await res.json()); - console.log(`Transfer creation gave response error: ${responseText} (${res.status})`); + console.log( + `Transfer creation gave response error: ${responseText} (${res.status})`, + ); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: `Transfer creation gave response error: ${responseText} (${res.status})` - })) + error: `Transfer creation gave response error: ${responseText} (${res.status})`, + })); return; } // status is 200 OK here, tell the user. - console.log('Wire transfer created!'); + console.log("Wire transfer created!"); pageStateSetter((prevState) => ({ ...prevState, hasInfo: true, - info: 'Wire transfer created!' - })) + info: "Wire transfer created!", + })); // Only at this point the input data can // be discarded. @@ -642,15 +712,19 @@ async function createTransactionCall( async function createWithdrawalCall( amount: string, backendState: BackendStateTypeOpt, - pageStateSetter: StateUpdater + pageStateSetter: StateUpdater, ) { - if (typeof backendState === 'undefined') { - console.log('Page has a problem: no credentials found in the state.'); - pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials given.' })) + if (typeof backendState === "undefined") { + console.log("Page has a problem: no credentials found in the state."); + pageStateSetter((prevState) => ({ + ...prevState, + hasError: true, + error: "No credentials given.", + })); return; } - let res:any; + let res: any; try { const { username, password } = backendState; const headers = prepareHeaders(username, password); @@ -658,42 +732,43 @@ async function createWithdrawalCall( // Let bank generate withdraw URI: const url = new URL( `access-api/accounts/${backendState.username}/withdrawals`, - backendState.url - ) + backendState.url, + ); res = await fetch(url.href, { - method: 'POST', + method: "POST", headers, body: JSON.stringify({ amount }), - } - ); + }); } catch (error) { - console.log('Could not POST withdrawal request to the bank', error); + console.log("Could not POST withdrawal request to the bank", error); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: `Could not create withdrawal operation: ${error}` - })) + error: `Could not create withdrawal operation: ${error}`, + })); return; } if (!res.ok) { const responseText = await res.text(); - console.log(`Withdrawal creation gave response error: ${responseText} (${res.status})`); + console.log( + `Withdrawal creation gave response error: ${responseText} (${res.status})`, + ); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: `Withdrawal creation gave response error: ${responseText} (${res.status})` - })) + error: `Withdrawal creation gave response error: ${responseText} (${res.status})`, + })); return; } - console.log('Withdrawal operation created!'); + console.log("Withdrawal operation created!"); const resp = await res.json(); pageStateSetter((prevState: PageStateType) => ({ ...prevState, withdrawalInProgress: true, talerWithdrawUri: resp.taler_withdraw_uri, - withdrawalId: resp.withdrawal_id - })) + withdrawalId: resp.withdrawal_id, + })); } async function loginCall( @@ -703,17 +778,15 @@ async function loginCall( * functions can be retrieved from the state. */ backendStateSetter: StateUpdater, - pageStateSetter: StateUpdater + pageStateSetter: StateUpdater, ) { - /** * Optimistically setting the state as 'logged in', and * let the Account component request the balance to check * whether the credentials are valid. */ pageStateSetter((prevState) => ({ ...prevState, isLoggedIn: true })); let baseUrl = getRootPath(); - if (!baseUrl.endsWith('/')) - baseUrl += '/'; + if (!baseUrl.endsWith("/")) baseUrl += "/"; backendStateSetter((prevState) => ({ ...prevState, @@ -723,7 +796,6 @@ async function loginCall( })); } - /** * This function requests /register. * @@ -739,51 +811,54 @@ async function registrationCall( * the state. */ backendStateSetter: StateUpdater, - pageStateSetter: StateUpdater + pageStateSetter: StateUpdater, ) { - let baseUrl = getRootPath(); /** * If the base URL doesn't end with slash and the path * is not empty, then the concatenation made by URL() * drops the last path element. */ - if (!baseUrl.endsWith('/')) - baseUrl += '/' + if (!baseUrl.endsWith("/")) baseUrl += "/"; const headers = new Headers(); - headers.append( - 'Content-Type', - 'application/json' - ) - const url = new URL('access-api/testing/register', baseUrl) - let res:any; + headers.append("Content-Type", "application/json"); + const url = new URL("access-api/testing/register", baseUrl); + let res: any; try { res = await fetch(url.href, { - method: 'POST', + method: "POST", body: JSON.stringify(req), - headers + headers, }); } catch (error) { - console.log(`Could not POST new registration to the bank (${url.href})`, error); + console.log( + `Could not POST new registration to the bank (${url.href})`, + error, + ); pageStateSetter((prevState) => ({ - ...prevState, hasError: true, error: 'Registration failed, please report.' + ...prevState, + hasError: true, + error: "Registration failed, please report.", })); return; } if (!res.ok) { const errorRaw = await res.text(); - console.log(`New registration gave response error (${res.status})`, errorRaw); + console.log( + `New registration gave response error (${res.status})`, + errorRaw, + ); pageStateSetter((prevState) => ({ ...prevState, hasError: true, - error: errorRaw + error: errorRaw, })); } else { pageStateSetter((prevState) => ({ ...prevState, isLoggedIn: true, - tryRegister: false + tryRegister: false, })); backendStateSetter((prevState) => ({ ...prevState, @@ -799,12 +874,15 @@ async function registrationCall( *************************/ function Currency(): VNode { - const { data, error } = useSWR(`${getRootPath()}integration-api/config`, fetcher); - if (typeof error !== 'undefined') + const { data, error } = useSWR( + `${getRootPath()}integration-api/config`, + fetcher, + ); + if (typeof error !== "undefined") return error: currency could not be retrieved; - if (typeof data === 'undefined') return "..."; - console.log('found bank config', data); + if (typeof data === "undefined") return "..."; + console.log("found bank config", data); return data.currency; } @@ -814,8 +892,8 @@ function ErrorBanner(Props: any): VNode | null { if (!pageState.hasError) return null; const rval = ( -

{pageState.error} -

); +

{pageState.error}

+ ); delete pageState.error; pageState.hasError = false; return rval; @@ -826,9 +904,7 @@ function StatusBanner(Props: any): VNode | null { const i18n = useTranslator(); if (!pageState.hasInfo) return null; - const rval = ( -

{pageState.error} -

); + const rval =

{pageState.error}

; delete pageState.info_msg; pageState.hasInfo = false; return rval; @@ -837,7 +913,7 @@ function StatusBanner(Props: any): VNode | null { function BankFrame(Props: any): VNode { const i18n = useTranslator(); const [pageState, pageStateSetter] = useContext(PageContext); - console.log('BankFrame state', pageState); + console.log("BankFrame state", pageState); const logOut = (
{ pageStateSetter((prevState: PageStateType) => { - const { - talerWithdrawUri, - withdrawalId, ...rest } = prevState; + const { talerWithdrawUri, withdrawalId, ...rest } = prevState; return { ...rest, isLoggedIn: false, withdrawalInProgress: false, hasInfo: false, hasError: false, - isRawPayto: false + isRawPayto: false, }; }); - }}>{i18n`Logout`}
); + }} + >{i18n`Logout`} + + ); // Prepare demo sites links. const DEMO_SITES = [ - ['Landing', '__DEMO_SITE_LANDING_URL__'], - ['Bank', '__DEMO_SITE_BANK_URL__'], - ['Essay Shop', '__DEMO_SITE_BLOG_URL__'], - ['Donations', '__DEMO_SITE_DONATIONS_URL__'], - ['Survey', '__DEMO_SITE_SURVEY_URL__'], + ["Landing", "__DEMO_SITE_LANDING_URL__"], + ["Bank", "__DEMO_SITE_BANK_URL__"], + ["Essay Shop", "__DEMO_SITE_BLOG_URL__"], + ["Donations", "__DEMO_SITE_DONATIONS_URL__"], + ["Survey", "__DEMO_SITE_SURVEY_URL__"], ]; const demo_sites = []; for (const i in DEMO_SITES) - demo_sites.push({DEMO_SITES[i][0]}) + demo_sites.push({DEMO_SITES[i][0]}); return ( -
+

- { - UI_BANK_NAME - } - + {UI_BANK_NAME} -

{ - maybeDemoContent(

- 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. -

- ) - } + + {maybeDemoContent( +

+ + 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 + + . + +

, + )}
{i18n`Taler logo`} + style="margin: 2em 2em" + />
@@ -920,29 +1003,32 @@ function BankFrame(Props: any): VNode {
-

You can learn more about GNU Taler on our main website.

+

+ You can learn more about GNU Taler on our{" "} + main website. +

Copyright © 2014—2022 Taler Systems SA

- ); + + ); } - function PaytoWireTransfer(Props: any): VNode { const currency = useContext(CurrencyContext); const [pageState, pageStateSetter] = useContext(PageContext); // NOTE: used for go-back button? const [submitData, submitDataSetter] = useWireTransferRequestType(); const [rawPaytoInput, rawPaytoInputSetter] = useRawPaytoInputType(); const i18n = useTranslator(); - const { focus, backendState } = Props - const amountRegex = '^[0-9]+(\.[0-9]+)?$'; - const ibanRegex = '^[A-Z][A-Z][0-9]+$'; - const receiverInput = ''; - const subjectInput = ''; + const { focus, backendState } = Props; + const amountRegex = "^[0-9]+(.[0-9]+)?$"; + const ibanRegex = "^[A-Z][A-Z][0-9]+$"; + const receiverInput = ""; + const subjectInput = ""; let transactionData: TransactionRequestType; - const ref = useRef(null) + const ref = useRef(null); useEffect(() => { if (focus) ref.current?.focus(); }, [focus, pageState.isRawPayto]); @@ -950,8 +1036,7 @@ function PaytoWireTransfer(Props: any): VNode { if (!pageState.isRawPayto) return (
-
+

  ({ ...submitData, iban: e.currentTarget.value, - })) - }} />

+ })); + }} + /> +
+
  ({ ...submitData, subject: e.currentTarget.value, - })) - }} />

+ })); + }} + /> +
+
  { submitDataSetter((submitData: any) => ({ ...submitData, - amount: e.currentTarget.value.replace(',', '.'), - })) - }} /> + amount: e.currentTarget.value.replace(",", "."), + })); + }} + />   + tabIndex={-1} + value={currency} + />

{ if ( - typeof submitData === 'undefined' - || (typeof submitData.iban === 'undefined' - || submitData.iban === '') - || (typeof submitData.subject === 'undefined' - || submitData.subject === '') - || (typeof submitData.amount === 'undefined' - || submitData.amount === '') + typeof submitData === "undefined" || + typeof submitData.iban === "undefined" || + submitData.iban === "" || + typeof submitData.subject === "undefined" || + submitData.subject === "" || + typeof submitData.amount === "undefined" || + submitData.amount === "" ) { - console.log('Not all the fields were given.'); - pageStateSetter((prevState: PageStateType) => - ({ ...prevState, hasError: true, error: i18n`Field(s) missing.` })) + console.log("Not all the fields were given."); + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + error: i18n`Field(s) missing.`, + })); return; } transactionData = { - paytoUri: `payto://iban/${submitData.iban}?message=${encodeURIComponent(submitData.subject)}`, - amount: `${currency}:${submitData.amount}` + paytoUri: `payto://iban/${ + submitData.iban + }?message=${encodeURIComponent(submitData.subject)}`, + amount: `${currency}:${submitData.amount}`, }; return await createTransactionCall( transactionData, backendState, pageStateSetter, - () => submitDataSetter(p => ({ - amount: '', - iban: '', - subject: '' - })) + () => + submitDataSetter((p) => ({ + amount: "", + iban: "", + subject: "", + })), ); - }} /> + }} + />

-

{ - console.log('switch to raw payto form'); - pageStateSetter((prevState: any) => ({ ...prevState, isRawPayto: true })); - }}>{i18n`Want to try the raw payto://-format?`} -

+

+ { + console.log("switch to raw payto form"); + pageStateSetter((prevState: any) => ({ + ...prevState, + isRawPayto: true, + })); + }} + > + {i18n`Want to try the raw payto://-format?`} + +

); return (
-

- {i18n`Transfer money to account identified by payto:// URI:`} -

-
+

{i18n`Transfer money to account identified by payto:// URI:`}

+

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

Hint: - payto://iban/[receiver-iban]?message=[subject]&amount=[{currency}:X.Y] + payto://iban/[receiver-iban]?message=[subject]&amount=[{currency} + :X.Y]

- { // empty string evaluates to false. if (!rawPaytoInput) { - console.log('Didn\'t get any raw Payto string!'); + console.log("Didn't get any raw Payto string!"); return; } transactionData = { paytoUri: rawPaytoInput }; - if (typeof transactionData.paytoUri === 'undefined' || - transactionData.paytoUri.length === 0) return; + if ( + typeof transactionData.paytoUri === "undefined" || + transactionData.paytoUri.length === 0 + ) + return; return await createTransactionCall( transactionData, backendState, pageStateSetter, - () => rawPaytoInputSetter(p => '') + () => rawPaytoInputSetter((p) => ""), ); - }} /> + }} + /> +

+

+ { + console.log("switch to wire-transfer-form"); + pageStateSetter((prevState: any) => ({ + ...prevState, + isRawPayto: false, + })); + }} + > + {i18n`Use wire-transfer form?`} +

-

{ - console.log('switch to wire-transfer-form'); - pageStateSetter((prevState: any) => ({ ...prevState, isRawPayto: false })); - }}>{i18n`Use wire-transfer form?`} -

-
); +
+ ); } /** @@ -1127,89 +1247,120 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode { const i18n = useTranslator(); const captchaNumbers = { a: Math.floor(Math.random() * 10), - b: Math.floor(Math.random() * 10) - } - let captchaAnswer = ''; + b: Math.floor(Math.random() * 10), + }; + let captchaAnswer = ""; - return ( -

{i18n`Confirm Withdrawal`}

-
-
-
-
-

{i18n`Authorize withdrawal by solving challenge`}

-

-   - { - captchaAnswer = e.currentTarget.value; - }} /> -

-

- +   + -   - + > + {i18n`Cancel`} + +

+
+
+
+

+ + A this point, a real bank would ask for an additional + authentication proof (PIN/TAN, one time password, ..), instead + of a simple calculation. +

- -
-

- A this point, a real bank would ask for an additional - authentication proof (PIN/TAN, one time password, ..), instead - of a simple calculation. -

-
-
- ); + + + ); } -function QrCodeSection({ talerWithdrawUri, abortButton }: { talerWithdrawUri: string, abortButton: h.JSX.Element }) { +function QrCodeSection({ + talerWithdrawUri, + abortButton, +}: { + talerWithdrawUri: string; + abortButton: h.JSX.Element; +}) { const i18n = useTranslator(); useEffect(() => { //Taler Wallet WebExtension is listening to headers response and tab updates. //In the SPA there is no header response with the Taler URI so //this hack manually triggers the tab update after the QR is in the DOM. - window.location.href = `${window.location.href.split('#')[0]}#` - }, []) + window.location.href = `${window.location.href.split("#")[0]}#`; + }, []); - return
-

{i18n`Charge Taler Wallet`}

-

{i18n`You can use this QR code to withdraw to your mobile wallet:`}

- {QR({ text: talerWithdrawUri })} -

Click {i18n`this link`} to open your Taler wallet!

-
- {abortButton} -
+ return ( +
+

{i18n`Charge Taler Wallet`}

+

{i18n`You can use this QR code to withdraw to your mobile wallet:`}

+ {QR({ text: talerWithdrawUri })} +

+ Click {i18n`this link`} to + open your Taler wallet! +

+
+ {abortButton} +
+ ); } /** @@ -1220,86 +1371,94 @@ function QrCodeSection({ talerWithdrawUri, abortButton }: { talerWithdrawUri: st function TalerWithdrawalQRCode(Props: any): VNode { // turns true when the wallet POSTed the reserve details: const [pageState, pageStateSetter] = useContext(PageContext); - const { - withdrawalId, - talerWithdrawUri, - accountLabel, - backendState } = Props; + const { withdrawalId, talerWithdrawUri, accountLabel, backendState } = Props; const i18n = useTranslator(); - const abortButton = { - pageStateSetter((prevState: PageStateType) => { - const { withdrawalId, talerWithdrawUri, ...rest } = prevState; - return { ...rest, withdrawalInProgress: false }; - }) - }}>{i18n`Abort`} + const abortButton = ( + { + pageStateSetter((prevState: PageStateType) => { + const { withdrawalId, talerWithdrawUri, ...rest } = prevState; + return { ...rest, withdrawalInProgress: false }; + }); + }} + >{i18n`Abort`} + ); console.log(`Showing withdraw URI: ${talerWithdrawUri}`); // waiting for the wallet: - const { data, error, mutate } = useSWR(`integration-api/withdrawal-operation/${withdrawalId}`); + const { data, error, mutate } = useSWR( + `integration-api/withdrawal-operation/${withdrawalId}`, + ); - if (typeof error !== 'undefined') { - console.log(`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, error); + if (typeof error !== "undefined") { + console.log( + `withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, + error, + ); pageStateSetter((prevState: PageStateType) => ({ ...prevState, hasError: true, - error: i18n`withdrawal (${withdrawalId}) was never (correctly) created at the bank...` - })) - return (

{abortButton}); + error: i18n`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, + })); + return ( + +
+
+ {abortButton} + + ); } // data didn't arrive yet and wallet didn't communicate: - if (typeof data === 'undefined') - return

{i18n`Waiting the bank to create the operaion...`}

- + if (typeof data === "undefined") + return

{i18n`Waiting the bank to create the operaion...`}

; /** * Wallet didn't communicate withdrawal details yet: */ - console.log('withdrawal status', data); + console.log("withdrawal status", data); if (data.aborted) pageStateSetter((prevState: PageStateType) => { - const { - withdrawalId, - talerWithdrawUri, - ...rest } = prevState; + const { withdrawalId, talerWithdrawUri, ...rest } = prevState; return { ...rest, withdrawalInProgress: false, hasError: true, - error: i18n`This withdrawal was aborted!` + error: i18n`This withdrawal was aborted!`, }; - }) - + }); if (!data.selection_done) { setTimeout(() => mutate(), 1000); // check again after 1 second. - return (); + return ( + + ); } /** * Wallet POSTed the withdrawal details! Ask the * user to authorize the operation (here CAPTCHA). */ - return (); + return ; } - - function WalletWithdraw(Props: any): VNode { const { backendState, pageStateSetter, focus } = Props; const currency = useContext(CurrencyContext); const i18n = useTranslator(); - let submitAmount = '5.00'; - const amountRegex = '^[0-9]+(\.[0-9]+)?$'; + let submitAmount = "5.00"; + const amountRegex = "^[0-9]+(.[0-9]+)?$"; - const ref = useRef(null) + const ref = useRef(null); useEffect(() => { if (focus) ref.current?.focus(); }, [focus]); return ( -
+

  + }} + />   + tabIndex={-1} + value={currency} + />

@@ -1343,16 +1505,16 @@ function WalletWithdraw(Props: any): VNode { createWithdrawalCall( `${currency}:${submitAmount}`, backendState, - pageStateSetter - ) - }} /> + pageStateSetter, + ); + }} + />

- ) + ); } - /** * Let the user choose a payment option, * then specify the details trigger the action. @@ -1362,58 +1524,75 @@ function PaymentOptions(Props: any): VNode { const currency = useContext(CurrencyContext); const i18n = useTranslator(); - const [tab, setTab] = useState<'charge-wallet' | 'wire-transfer'>('charge-wallet') + const [tab, setTab] = useState<"charge-wallet" | "wire-transfer">( + "charge-wallet", + ); - - return (
-
-
- - + return ( +
+
+
+ + +
+ {tab === "charge-wallet" && ( +
+

{i18n`Charge Taler wallet`}

+ +
+ )} + {tab === "wire-transfer" && ( +
+

{i18n`Wire to bank account`}

+ +
+ )}
- {tab === 'charge-wallet' && -
-

{i18n`Charge Taler wallet`}

- -
- } - {tab === 'wire-transfer' && -
-

{i18n`Wire to bank account`}

- -
- } -
-
); + + ); } function RegistrationButton(Props: any): VNode { const { backendStateSetter, pageStateSetter } = Props; const i18n = useTranslator(); - if (UI_ALLOW_REGISTRATIONS) - return (); - - - return (); - + if (UI_ALLOW_REGISTRATIONS) + return ( + + ); + + return ; } /** @@ -1423,72 +1602,87 @@ function LoginForm(Props: any): VNode { const { backendStateSetter, pageStateSetter } = Props; const [submitData, submitDataSetter] = useCredentialsRequestType(); const i18n = useTranslator(); - const ref = useRef(null) + const ref = useRef(null); useEffect(() => { ref.current?.focus(); }, []); - return (); + return ( + + ); } /** @@ -1502,17 +1696,15 @@ function RegistrationForm(Props: any): VNode { // https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs return ( -

- { - i18n`Welcome to ${UI_BANK_NAME}!` - } -

+

{i18n`Welcome to ${UI_BANK_NAME}!`}

{i18n`Please register!`}

-

+

+ +

({ ...submitData, username: e.currentTarget.value, - })) - }} /> + })); + }} + />
-

+

+ +

({ ...submitData, password: e.currentTarget.value, - })) - }} /> + })); + }} + />
{/* @@ -1562,46 +1758,55 @@ function RegistrationForm(Props: any): VNode { {/* FIXME: should use a different color */}
@@ -1609,7 +1814,7 @@ function RegistrationForm(Props: any): VNode {
- ) + ); } /** @@ -1619,20 +1824,20 @@ function Transactions(Props: any): VNode { const { pageNumber, accountLabel } = Props; const i18n = useTranslator(); const { data, error } = useSWR( - `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}` + `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`, ); - if (typeof error !== 'undefined') { - console.log('transactions not found error', error); + if (typeof error !== "undefined") { + console.log("transactions not found error", error); switch (error.status) { - case 404: { - return

Transactions page {pageNumber} was not found.

- } - case 401: { - return

Wrong credentials given.

- } - default: { - return

Transaction page {pageNumber} could not be retrieved.

- } + case 404: { + return

Transactions page {pageNumber} was not found.

; + } + case 401: { + return

Wrong credentials given.

; + } + default: { + return

Transaction page {pageNumber} could not be retrieved.

; + } } } if (!data) { @@ -1640,37 +1845,48 @@ function Transactions(Props: any): VNode { return

"Transactions page loading..."

; } console.log(`History data of ${accountLabel}`, data); - return (
- - - - - - - - - - - {data.transactions.map((item: any, idx: number) => { - const sign = item.direction == 'DBIT' ? '-' : ''; - const counterpart = item.direction == 'DBIT' ? item.creditorIban : item.debtorIban; - // Pattern: - // - // DD/MM YYYY subject -5 EUR - // DD/MM YYYY subject 5 EUR - const dateRegex = /^([0-9]{4})-([0-9]{2})-([0-9]{1,2})/ - const dateParse = dateRegex.exec(item.date) - const date = dateParse !== null ? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}` : 'date not found' - return ( - - - - - ); - })} - -
{i18n`Date`}{i18n`Amount`}{i18n`Counterpart`}{i18n`Subject`}
{date}{sign}{item.amount} {item.currency}{counterpart}{item.subject}
-
); + return ( +
+ + + + + + + + + + + {data.transactions.map((item: any, idx: number) => { + const sign = item.direction == "DBIT" ? "-" : ""; + const counterpart = + item.direction == "DBIT" ? item.creditorIban : item.debtorIban; + // Pattern: + // + // DD/MM YYYY subject -5 EUR + // DD/MM YYYY subject 5 EUR + const dateRegex = /^([0-9]{4})-([0-9]{2})-([0-9]{1,2})/; + const dateParse = dateRegex.exec(item.date); + const date = + dateParse !== null + ? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}` + : "date not found"; + return ( + + + + + + + ); + })} + +
{i18n`Date`}{i18n`Amount`}{i18n`Counterpart`}{i18n`Subject`}
{date} + {sign} + {item.amount} {item.currency} + {counterpart}{item.subject}
+
+ ); } /** @@ -1685,38 +1901,35 @@ function Account(Props: any): VNode { const endpoint = `access-api/accounts/${accountLabel}`; const { data, error } = useSWR(endpoint); const [pageState, pageStateSetter] = useContext(PageContext); - const { - withdrawalInProgress, - withdrawalId, - isLoggedIn, - talerWithdrawUri } = pageState; + const { withdrawalInProgress, withdrawalId, isLoggedIn, talerWithdrawUri } = + pageState; const i18n = useTranslator(); /** * This part shows a list of transactions: with 5 elements by * default and offers a "load more" button. */ - const [txPageNumber, setTxPageNumber] = useTransactionPageNumber() - const txsPages = [] + const [txPageNumber, setTxPageNumber] = useTransactionPageNumber(); + const txsPages = []; for (let i = 0; i <= txPageNumber; i++) - txsPages.push() + txsPages.push(); - if (typeof error !== 'undefined') { - console.log('account error', error); + if (typeof error !== "undefined") { + console.log("account error", error); /** * FIXME: to minimize the code, try only one invocation * of pageStateSetter, after having decided the error * message in the case-branch. */ switch (error.status) { - case 404: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Username or account label '${accountLabel}' not found. Won't login.` - })); + case 404: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Username or account label '${accountLabel}' not found. Won't login.`, + })); - /** + /** * 404 should never stick to the cache, because they * taint successful future registrations. How? After * registering, the user gets navigated to this page, @@ -1729,27 +1942,27 @@ function Account(Props: any): VNode { * in the legitimate request after the registration to still * be flagged as 404. Clearing the cache should prevent * this. */ - (cache as any).clear(); - return

Profile not found...

; - } - case 401: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Wrong credentials given.` - })); - return

Wrong credentials...

; - } - default: { - pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - isLoggedIn: false, - error: i18n`Account information could not be retrieved.` - })); - return

Unknown problem...

; - } + (cache as any).clear(); + return

Profile not found...

; + } + case 401: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Wrong credentials given.`, + })); + return

Wrong credentials...

; + } + default: { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + isLoggedIn: false, + error: i18n`Account information could not be retrieved.`, + })); + return

Unknown problem...

; + } } } if (!data) return

Retrieving the profile page...

; @@ -1768,51 +1981,60 @@ function Account(Props: any): VNode { */ console.log(`maybe new withdrawal ${talerWithdrawUri}`); if (talerWithdrawUri) { - console.log('Bank created a new Taler withdrawal'); + console.log("Bank created a new Taler withdrawal"); return ( + talerWithdrawUri={talerWithdrawUri} + /> ); } - const balance = parseAmount(data.balance.amount) + const balance = parseAmount(data.balance.amount); - return ( -
-

- Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})! -

-
-
-
-

{i18n`Bank account balance`}

- {data.balance.credit_debit_indicator == 'debit' ? (-) : null} -
{`${balance.value}`} {`${balance.currency}`}
+ return ( + +
+

+ + Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})! + +

-
-
-
-

{i18n`Payments`}

- {/* FIXME: turn into button! */} - - {Props.children} - - -
-
-
-
-

{i18n`Latest transactions:`}

- -
-
- ); +
+
+

{i18n`Bank account balance`}

+ {data.balance.credit_debit_indicator == "debit" ? - : null} +
+ {`${balance.value}`}  + {`${balance.currency}`} +
+
+
+
+
+

{i18n`Payments`}

+ {/* FIXME: turn into button! */} + + {Props.children} + + +
+
+
+
+

{i18n`Latest transactions:`}

+ +
+
+ + ); } /** @@ -1822,42 +2044,42 @@ function SWRWithCredentials(props: any): VNode { const { username, password, backendUrl } = props; const headers = new Headers(); headers.append( - 'Authorization', - `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}` + "Authorization", + `Basic ${Buffer.from(`${username}:${password}`).toString("base64")}`, ); - console.log('Likely backend base URL', backendUrl); + console.log("Likely backend base URL", backendUrl); return ( - fetch(backendUrl + url || '', { headers }).then( - (r) => { - if (!r.ok) - throw { status: r.status, json: r.json() }; + fetch(backendUrl + url || "", { headers }).then((r) => { + if (!r.ok) throw { status: r.status, json: r.json() }; - return r.json() - } - ), - }}>{props.children} + return r.json(); + }), + }} + > + {props.children} + ); } function SWRWithoutCredentials(Props: any): VNode { const { baseUrl } = Props; - console.log('Base URL', baseUrl); + console.log("Base URL", baseUrl); return ( - fetch(baseUrl + url || '').then( - (r) => { - if (!r.ok) - throw { status: r.status, json: r.json() }; + fetch(baseUrl + url || "").then((r) => { + if (!r.ok) throw { status: r.status, json: r.json() }; - return r.json() - } - ), - }}>{Props.children} + return r.json(); + }), + }} + > + {Props.children} + ); } @@ -1866,34 +2088,33 @@ function SWRWithoutCredentials(Props: any): VNode { */ function PublicHistories(Props: any): VNode { const [showAccount, setShowAccount] = useShowPublicAccount(); - const { data, error } = useSWR('access-api/public-accounts'); + const { data, error } = useSWR("access-api/public-accounts"); const i18n = useTranslator(); - if (typeof error !== 'undefined') { - console.log('account error', error); + if (typeof error !== "undefined") { + console.log("account error", error); switch (error.status) { - case 404: - console.log('public accounts: 404', error); - Props.pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - showPublicHistories: false, - error: i18n`List of public accounts was not found.` - })); - break; - default: - console.log('public accounts: non-404 error', error); - Props.pageStateSetter((prevState: PageStateType) => ({ - ...prevState, - hasError: true, - showPublicHistories: false, - error: i18n`List of public accounts could not be retrieved.` - })); - break; + case 404: + console.log("public accounts: 404", error); + Props.pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + showPublicHistories: false, + error: i18n`List of public accounts was not found.`, + })); + break; + default: + console.log("public accounts: non-404 error", error); + Props.pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + hasError: true, + showPublicHistories: false, + error: i18n`List of public accounts could not be retrieved.`, + })); + break; } } - if (!data) - return (

Waiting public accounts list...

) + if (!data) return

Waiting public accounts list...

; const txs: any = {}; const accountsBar = []; @@ -1901,36 +2122,54 @@ function PublicHistories(Props: any): VNode { * Show the account specified in the props, or just one * from the list if that's not given. */ - if (typeof showAccount === 'undefined' && data.publicAccounts.length > 0) + if (typeof showAccount === "undefined" && data.publicAccounts.length > 0) setShowAccount(data.publicAccounts[1].accountLabel); console.log(`Public history tab: ${showAccount}`); // Ask story of all the public accounts. for (const account of data.publicAccounts) { - console.log('Asking transactions for', account.accountLabel) + console.log("Asking transactions for", account.accountLabel); const isSelected = account.accountLabel == showAccount; accountsBar.push( -
  • - + setShowAccount(account.accountLabel)}>{account.accountLabel} -
    • + onClick={() => setShowAccount(account.accountLabel)} + > + {account.accountLabel} + + , + ); + txs[account.accountLabel] = ( + ); - txs[account.accountLabel] = } - return ( -

    {i18n`History of public accounts`}

    -
    -
    -
    -
      {accountsBar}
    - {typeof showAccount !== 'undefined' ? txs[showAccount] :

    No public transactions found.

    } - {Props.children} -
    -
    -
    -     ); + return ( + +

    {i18n`History of public accounts`}

    +
    +
    +
    +
      {accountsBar}
    + {typeof showAccount !== "undefined" ? ( + txs[showAccount] + ) : ( +

    No public transactions found.

    + )} + {Props.children} +
    +
    +
    +     + ); } /** @@ -1945,22 +2184,31 @@ export function BankHome(): VNode { const i18n = useTranslator(); if (pageState.showPublicHistories) - return ( - - - -
    - { - pageStateSetter((prevState: PageStateType) => - ({ ...prevState, showPublicHistories: false })) - }}>Go back -     -     -     -     ); + return ( + + + + +
    + { + pageStateSetter((prevState: PageStateType) => ({ + ...prevState, + showPublicHistories: false, + })); + }} + > + Go back + +     +     +     +     + ); if (pageState.tryRegister) { - console.log('allow registrations?', UI_ALLOW_REGISTRATIONS); + console.log("allow registrations?", UI_ALLOW_REGISTRATIONS); if (UI_ALLOW_REGISTRATIONS) return ( @@ -1979,23 +2227,27 @@ export function BankHome(): VNode { ); } if (pageState.isLoggedIn) { - if (typeof backendState === 'undefined') { + if (typeof backendState === "undefined") { pageStateSetter((prevState) => ({ ...prevState, hasError: true, isLoggedIn: false, - error: i18n`Page has a problem: logged in but backend state is lost.` + error: i18n`Page has a problem: logged in but backend state is lost.`, })); - return (

    Error: waiting for details...

    ); + return

    Error: waiting for details...

    ; } - console.log('Showing the profile page..'); + console.log("Showing the profile page.."); return ( + backendUrl={backendState.url} + > - + ); @@ -2004,14 +2256,11 @@ export function BankHome(): VNode { return ( -

    - { - i18n`Welcome to ${UI_BANK_NAME}!` - } -

    +

    {i18n`Welcome to ${UI_BANK_NAME}!`}

    + backendStateSetter={backendStateSetter} + />     ); diff --git a/packages/demobank-ui/src/pages/notfound/index.tsx b/packages/demobank-ui/src/pages/notfound/index.tsx index fd99259a1..474451cc6 100644 --- a/packages/demobank-ui/src/pages/notfound/index.tsx +++ b/packages/demobank-ui/src/pages/notfound/index.tsx @@ -1,5 +1,21 @@ -import { FunctionalComponent, h } from 'preact'; -import { Link } from 'preact-router/match'; +/* + 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 { FunctionalComponent, h } from "preact"; +import { Link } from "preact-router/match"; const Notfound: FunctionalComponent = () => { return ( diff --git a/packages/demobank-ui/src/pages/profile/index.tsx b/packages/demobank-ui/src/pages/profile/index.tsx index 3b9824488..bcd26370e 100644 --- a/packages/demobank-ui/src/pages/profile/index.tsx +++ b/packages/demobank-ui/src/pages/profile/index.tsx @@ -1,5 +1,5 @@ -import { FunctionalComponent, h } from 'preact'; -import { useEffect, useState } from 'preact/hooks'; +import { FunctionalComponent, h } from "preact"; +import { useEffect, useState } from "preact/hooks"; interface Props { user: string;