From 236d4347f5884bb1d9ca1d3bb4ad0ba776577fd2 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 23 Jan 2024 18:00:42 -0300 Subject: many changes activate eslint update file headers removed history and preact-router remove eslint errors and more applied prettier --- .../demobank-ui/src/pages/AccountPage/index.ts | 42 +- .../demobank-ui/src/pages/AccountPage/state.ts | 58 +- packages/demobank-ui/src/pages/AccountPage/test.ts | 15 +- .../demobank-ui/src/pages/AccountPage/views.tsx | 127 ++-- packages/demobank-ui/src/pages/BankFrame.tsx | 244 ++++--- packages/demobank-ui/src/pages/DownloadStats.tsx | 494 +++++++++---- packages/demobank-ui/src/pages/LoginForm.tsx | 213 +++--- .../demobank-ui/src/pages/OperationState/index.ts | 99 ++- .../demobank-ui/src/pages/OperationState/state.ts | 143 ++-- .../demobank-ui/src/pages/OperationState/test.ts | 15 +- .../demobank-ui/src/pages/OperationState/views.tsx | 497 +++++++------ packages/demobank-ui/src/pages/PaymentOptions.tsx | 184 +++-- .../src/pages/PaytoWireTransferForm.tsx | 635 +++++++++------- .../demobank-ui/src/pages/ProfileNavigation.tsx | 214 ++++-- .../demobank-ui/src/pages/PublicHistoriesPage.tsx | 32 +- packages/demobank-ui/src/pages/QrCodeSection.tsx | 121 +-- .../demobank-ui/src/pages/RegistrationPage.tsx | 257 +++---- .../demobank-ui/src/pages/SolveChallengePage.tsx | 806 +++++++++++--------- .../demobank-ui/src/pages/WalletWithdrawForm.tsx | 367 +++++----- packages/demobank-ui/src/pages/WireTransfer.tsx | 60 +- .../src/pages/WithdrawalConfirmationQuestion.tsx | 325 +++++---- .../src/pages/WithdrawalOperationPage.tsx | 47 +- .../demobank-ui/src/pages/WithdrawalQRCode.tsx | 298 +++++--- .../src/pages/account/CashoutListForAccount.tsx | 76 +- .../src/pages/account/ShowAccountDetails.tsx | 220 +++--- .../src/pages/account/UpdateAccountPassword.tsx | 173 +++-- .../demobank-ui/src/pages/admin/AccountForm.tsx | 807 +++++++++++++-------- .../demobank-ui/src/pages/admin/AccountList.tsx | 288 +++++--- packages/demobank-ui/src/pages/admin/AdminHome.tsx | 650 ++++++++++++----- .../src/pages/admin/CreateNewAccount.tsx | 230 +++--- .../demobank-ui/src/pages/admin/RemoveAccount.tsx | 194 +++-- .../src/pages/business/CreateCashout.tsx | 544 +++++++++----- .../src/pages/business/ShowCashoutDetails.tsx | 136 ++-- packages/demobank-ui/src/pages/rnd.ts | 36 +- 34 files changed, 5306 insertions(+), 3341 deletions(-) (limited to 'packages/demobank-ui/src/pages') diff --git a/packages/demobank-ui/src/pages/AccountPage/index.ts b/packages/demobank-ui/src/pages/AccountPage/index.ts index 115da807d..31a8a9e34 100644 --- a/packages/demobank-ui/src/pages/AccountPage/index.ts +++ b/packages/demobank-ui/src/pages/AccountPage/index.ts @@ -14,21 +14,36 @@ GNU Taler; see the file COPYING. If not, see */ -import { AbsoluteTime, AmountJson, TalerCorebankApi, TalerError } from "@gnu-taler/taler-util"; +import { + AbsoluteTime, + AmountJson, + TalerCorebankApi, + TalerError, +} from "@gnu-taler/taler-util"; import { Loading, utils } from "@gnu-taler/web-util/browser"; import { ErrorLoadingWithDebug } from "../../components/ErrorLoadingWithDebug.js"; import { LoginForm } from "../LoginForm.js"; import { useComponentState } from "./state.js"; import { InvalidIbanView, ReadyView } from "./views.js"; +import { RouteDefinition } from "../../route.js"; export interface Props { account: string; onAuthorizationRequired: () => void; - goToConfirmOperation: (id: string) => void; + onOperationCreated: (wopid: string) => void; + onClose: () => void; + tab: "charge-wallet" | "wire-transfer" | undefined; + routeClose: RouteDefinition>; + routeChargeWallet: RouteDefinition>; + routeWireTransfer: RouteDefinition>; } -export type State = State.Loading | - State.LoadingError | State.Ready | State.InvalidIban | State.UserNotFound; +export type State = + | State.Loading + | State.LoadingError + | State.Ready + | State.InvalidIban + | State.UserNotFound; export namespace State { export interface Loading { @@ -48,21 +63,26 @@ export namespace State { export interface Ready extends BaseInfo { status: "ready"; error: undefined; - account: string, - limit: AmountJson, + account: string; + tab: "charge-wallet" | "wire-transfer" | undefined; + limit: AmountJson; onAuthorizationRequired: () => void; - goToConfirmOperation: (id: string) => void; + onOperationCreated: (wopid: string) => void; + onClose: () => void; + routeClose: RouteDefinition>; + routeChargeWallet: RouteDefinition>; + routeWireTransfer: RouteDefinition>; } export interface InvalidIban { - status: "invalid-iban", + status: "invalid-iban"; error: TalerCorebankApi.AccountData; } export interface UserNotFound { - status: "login", + status: "login"; reason: "not-found" | "forbidden"; - onRegister?: () => void; + routeRegister?: RouteDefinition>; } } @@ -76,7 +96,7 @@ export interface Transaction { const viewMapping: utils.StateViewMap = { loading: Loading, - "login": LoginForm, + login: LoginForm, "invalid-iban": InvalidIbanView, "loading-error": ErrorLoadingWithDebug, ready: ReadyView, diff --git a/packages/demobank-ui/src/pages/AccountPage/state.ts b/packages/demobank-ui/src/pages/AccountPage/state.ts index 56c041a4a..a07ea37d3 100644 --- a/packages/demobank-ui/src/pages/AccountPage/state.ts +++ b/packages/demobank-ui/src/pages/AccountPage/state.ts @@ -14,15 +14,27 @@ GNU Taler; see the file COPYING. If not, see */ -import { Amounts, HttpStatusCode, TalerError, parsePaytoUri } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + Amounts, + HttpStatusCode, + TalerError, + assertUnreachable, + parsePaytoUri, +} from "@gnu-taler/taler-util"; import { useAccountDetails } from "../../hooks/access.js"; -import { assertUnreachable } from "../WithdrawalOperationPage.js"; import { Props, State } from "./index.js"; -export function useComponentState({ account, goToConfirmOperation, onAuthorizationRequired }: Props): State { +export function useComponentState({ + account, + tab, + routeChargeWallet, + routeWireTransfer, + onOperationCreated, + onClose, + routeClose, + onAuthorizationRequired, +}: Props): State { const result = useAccountDetails(account); - const { i18n } = useTranslationContext(); if (!result) { return { @@ -40,16 +52,18 @@ export function useComponentState({ account, goToConfirmOperation, onAuthorizati if (result.type === "fail") { switch (result.case) { - case HttpStatusCode.Unauthorized: return { - status: "login", - reason: "forbidden" - } - case HttpStatusCode.NotFound: return { - status: "login", - reason: "not-found", - } + case HttpStatusCode.Unauthorized: + return { + status: "login", + reason: "forbidden", + }; + case HttpStatusCode.NotFound: + return { + status: "login", + reason: "not-found", + }; default: { - assertUnreachable(result) + assertUnreachable(result); } } } @@ -61,10 +75,14 @@ export function useComponentState({ account, goToConfirmOperation, onAuthorizati const debitThreshold = Amounts.parseOrThrow(data.debit_threshold); const payto = parsePaytoUri(data.payto_uri); - if (!payto || !payto.isKnown || (payto.targetType !== "iban" && payto.targetType !== "x-taler-bank")) { + if ( + !payto || + !payto.isKnown || + (payto.targetType !== "iban" && payto.targetType !== "x-taler-bank") + ) { return { status: "invalid-iban", - error: data + error: data, }; } @@ -73,12 +91,16 @@ export function useComponentState({ account, goToConfirmOperation, onAuthorizati ? Amounts.sub(debitThreshold, balance).amount : Amounts.add(balance, debitThreshold).amount; - return { status: "ready", - goToConfirmOperation, + onOperationCreated, error: undefined, + tab, onAuthorizationRequired, + onClose, + routeClose, + routeChargeWallet, + routeWireTransfer, account, limit, }; diff --git a/packages/demobank-ui/src/pages/AccountPage/test.ts b/packages/demobank-ui/src/pages/AccountPage/test.ts index 538decb29..14c8be948 100644 --- a/packages/demobank-ui/src/pages/AccountPage/test.ts +++ b/packages/demobank-ui/src/pages/AccountPage/test.ts @@ -19,14 +19,13 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import * as tests from "@gnu-taler/web-util/testing"; -import { SwrMockEnvironment } from "@gnu-taler/web-util/testing"; -import { expect } from "chai"; -import { CASHOUT_API_EXAMPLE } from "../../endpoints.js"; -import { Props } from "./index.js"; -import { useComponentState } from "./state.js"; +// import * as tests from "@gnu-taler/web-util/testing"; +// import { SwrMockEnvironment } from "@gnu-taler/web-util/testing"; +// import { expect } from "chai"; +// import { CASHOUT_API_EXAMPLE } from "../../endpoints.js"; +// import { Props } from "./index.js"; +// import { useComponentState } from "./state.js"; describe("Account states", () => { - it("should do some tests", async () => { - }); + it("should do some tests", async () => {}); }); diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx index c9a7a6c13..9baefe96c 100644 --- a/packages/demobank-ui/src/pages/AccountPage/views.tsx +++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx @@ -22,6 +22,7 @@ import { useBankState } from "../../hooks/bank-state.js"; import { usePreferences } from "../../hooks/preferences.js"; import { PaymentOptions } from "../PaymentOptions.js"; import { State } from "./index.js"; +import { privatePages } from "../../Routing.js"; export function InvalidIbanView({ error }: State.InvalidIban) { return ( @@ -29,29 +30,34 @@ export function InvalidIbanView({ error }: State.InvalidIban) { ); } -const IS_PUBLIC_ACCOUNT_ENABLED = false +const IS_PUBLIC_ACCOUNT_ENABLED = false; function ShowDemoInfo(): VNode { const { i18n } = useTranslationContext(); const [settings, updateSettings] = usePreferences(); - if (!settings.showDemoDescription) return - return { - updateSettings("showDemoDescription", false); - }}> - {IS_PUBLIC_ACCOUNT_ENABLED ? ( - - This part of the demo shows how a bank that supports Taler - directly would work. In addition to using your own bank - account, you can also see the transaction history of some{" "} - Public Accounts. - - ) : ( - - This part of the demo shows how a bank that supports Taler - directly would work. - - )} - + if (!settings.showDemoDescription) return ; + return ( + { + updateSettings("showDemoDescription", false); + }} + > + {IS_PUBLIC_ACCOUNT_ENABLED ? ( + + This part of the demo shows how a bank that supports Taler directly + would work. In addition to using your own bank account, you can also + see the transaction history of some{" "} + Public Accounts. + + ) : ( + + This part of the demo shows how a bank that supports Taler directly + would work. + + )} + + ); } function ShowPedingOperation(): VNode { @@ -60,30 +66,67 @@ function ShowPedingOperation(): VNode { if (!bankState.currentChallenge) return ; const title = ((op): TranslatedString => { switch (op) { - case "delete-account": return i18n.str`Pending account delete operation` - case "update-account": return i18n.str`Pending account update operation` - case "update-password": return i18n.str`Pending password update operation` - case "create-transaction": return i18n.str`Pending transaction operation` - case "confirm-withdrawal": return i18n.str`Pending withdrawal operation` - case "create-cashout": return i18n.str`Pending cashout operation` + case "delete-account": + return i18n.str`Pending account delete operation`; + case "update-account": + return i18n.str`Pending account update operation`; + case "update-password": + return i18n.str`Pending password update operation`; + case "create-transaction": + return i18n.str`Pending transaction operation`; + case "confirm-withdrawal": + return i18n.str`Pending withdrawal operation`; + case "create-cashout": + return i18n.str`Pending cashout operation`; } - })(bankState.currentChallenge.operation) - return { updateBankState("currentChallenge", undefined); }}> - - You can complete or cancel the operation in - this page - - + })(bankState.currentChallenge.operation); + return ( + { + updateBankState("currentChallenge", undefined); + }} + > + + You can complete or cancel the operation in + {" "} + + this page + + + ); } -export function ReadyView({ account, limit, goToConfirmOperation, onAuthorizationRequired }: State.Ready): VNode<{}> { - - return - - - - - ; +export function ReadyView({ + tab, + account, + routeChargeWallet, + routeWireTransfer, + limit, + onClose, + routeClose, + onOperationCreated, + onAuthorizationRequired, +}: State.Ready): VNode { + return ( + + + + + + + ); } - - diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 73e87d9d2..a106f370d 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -15,143 +15,195 @@ */ import { Amounts, TalerError, TranslatedString } from "@gnu-taler/taler-util"; -import { Footer, GlobalNotificationsBanner, Header, Loading, notifyError, notifyException, useTranslationContext } from "@gnu-taler/web-util/browser"; -import { ComponentChildren, Fragment, VNode, h } from "preact"; -import { useEffect, useErrorBoundary, useState } from "preact/hooks"; +import { + Footer, + GlobalNotificationsBanner, + Header, + Loading, + notifyError, + notifyException, + useTranslationContext, +} from "@gnu-taler/web-util/browser"; +import { ComponentChildren, VNode, h } from "preact"; +import { useEffect, useErrorBoundary } from "preact/hooks"; +import { privatePages } from "../Routing.js"; +import { useBankCoreApiContext } from "../context/config.js"; +import { useSettingsContext } from "../context/settings.js"; import { useAccountDetails } from "../hooks/access.js"; import { useBackendState } from "../hooks/backend.js"; -import { getAllBooleanPreferences, getLabelForPreferences, usePreferences } from "../hooks/preferences.js"; -import { RenderAmount } from "./PaytoWireTransferForm.js"; -import { useSettingsContext } from "../context/settings.js"; -import { useBankCoreApiContext } from "../context/config.js"; import { useBankState } from "../hooks/bank-state.js"; +import { + getAllBooleanPreferences, + getLabelForPreferences, + usePreferences, +} from "../hooks/preferences.js"; +import { RenderAmount } from "./PaytoWireTransferForm.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; - export function BankFrame({ children, account, }: { - account?: string, + account?: string; children: ComponentChildren; }): VNode { const { i18n } = useTranslationContext(); const backend = useBackendState(); const settings = useSettingsContext(); const [preferences, updatePreferences] = usePreferences(); - const [, , resetBankState] = useBankState() + const [, , resetBankState] = useBankState(); const [error, resetError] = useErrorBoundary(); useEffect(() => { if (error) { - const desc = (error instanceof Error ? error.stack : String(error)) as TranslatedString if (error instanceof Error) { - console.log("Internal error, please report", error) - notifyException(i18n.str`Internal error, please report.`, error) + console.log("Internal error, please report", error); + notifyException(i18n.str`Internal error, please report.`, error); } else { - console.log("Internal error, please report", error) - notifyError(i18n.str`Internal error, please report.`, String(error) as TranslatedString) + console.log("Internal error, please report", error); + notifyError( + i18n.str`Internal error, please report.`, + String(error) as TranslatedString, + ); } - resetError() + resetError(); } - }, [error]) - - return (
- -
-
{ - backend.logOut() - resetBankState(); - }} - sites={!settings.topNavSites ? [] : Object.entries(settings.topNavSites)} - supportedLangs={["en", "es", "de"]} - > -
  • -
    - Preferences -
    -
      - {getAllBooleanPreferences().map(set => { - const isOn: boolean = !!preferences[set] - return
    • -
      - - - {getLabelForPreferences(set, i18n)} - - - -
      -
      • - })} -
    -
    • -
    -
    - - - -
    - {account && -
    -
    -

    - - -

    -
    -
    - } - -
    -
    - {children} -
    + }, [error]); + + return ( +
    +
    +
    { + backend.logOut(); + resetBankState(); + } + } + sites={ + !settings.topNavSites ? [] : Object.entries(settings.topNavSites) + } + supportedLangs={["en", "es", "de"]} + > +
  • +
    + Preferences +
    +
      + {getAllBooleanPreferences().map((set) => { + const isOn: boolean = !!preferences[set]; + return ( +
    • +
      + + + {getLabelForPreferences(set, i18n)} + + + +
      +
      • + ); + })} +
    +
    • +
    -
    - -
    - -
    + + +
    + {account && ( +
    +
    +

    + + + + + + +

    +
    +
    + )} + +
    +
    + {children} +
    +
    +
    + +