diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/components/Routing.tsx index 05af1719b..aafc95687 100644 --- a/packages/demobank-ui/src/components/Routing.tsx +++ b/packages/demobank-ui/src/components/Routing.tsx @@ -14,36 +14,43 @@ GNU Taler; see the file COPYING. If not, see */ +import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { createHashHistory } from "history"; -import { VNode, h } from "preact"; +import { Fragment, VNode, h } from "preact"; import { Route, Router, route } from "preact-router"; -import { useEffect, useErrorBoundary } from "preact/hooks"; +import { useEffect } from "preact/hooks"; +import { useBackendContext } from "../context/backend.js"; import { BankFrame } from "../pages/BankFrame.js"; -import { BusinessAccount } from "../pages/business/Home.js"; import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js"; +import { LoginForm } from "../pages/LoginForm.js"; import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js"; import { RegistrationPage } from "../pages/RegistrationPage.js"; -import { useBackendContext } from "../context/backend.js"; -import { LoginForm } from "../pages/LoginForm.js"; import { AdminHome } from "../pages/admin/Home.js"; +import { BusinessAccount } from "../pages/business/Home.js"; import { bankUiSettings } from "../settings.js"; -import { notifyError } from "@gnu-taler/web-util/browser"; export function Routing(): VNode { const history = createHashHistory(); const backend = useBackendContext(); - + const {i18n} = useTranslationContext(); + if (backend.state.status === "loggedOut") { return ( - { - route("/register"); - }} - /> + +
+

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

+
+ + { + route("/register"); + }} + /> + )} /> { return ( - - - + + + + + - + ); }; (window as any).setGlobalLogLevelFromString = setGlobalLogLevelFromString; (window as any).getGlobalLevel = getGlobalLogLevel; +function VersionCheck({ children }: { children: ComponentChildren }): VNode { + const checked = useConfigState() + + if (checked === undefined) { + return + } + if (checked === false) { + return
+ the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}" +
+ } + return {children} +} + function localStorageProvider(): Map { const map = new Map(JSON.parse(localStorage.getItem("app-cache") || "[]")); 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; +} + + diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index f579678f2..0fbbef7c3 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -128,132 +128,120 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode { const isSessionExpired = !onRegister return ( - -

- {/* {error && ( - saveError(undefined)} /> - )} */} +
-
- {/*
-

{i18n.str`Welcome to ${bankUiSettings.bankName}!`}

-
*/} - -
-
{ - e.preventDefault(); - }} - autoCapitalize="none" - autoCorrect="off" - > -
- -
- { - setUsername(e.currentTarget.value); - }} - /> - -
+
+ { + e.preventDefault(); + }} + autoCapitalize="none" + autoCorrect="off" + > +
+ +
+ { + setUsername(e.currentTarget.value); + }} + /> +
+
-
-
- -
-
- { - setPassword(e.currentTarget.value); - }} - /> - -
+
+
+
+
+ { + setPassword(e.currentTarget.value); + }} + /> + +
+
- {isSessionExpired ?
- - - -
:
- -
} - + {isSessionExpired ?
+ - {bankUiSettings.allowRegistrations && onRegister && -

- -

- } -
+ +
:
+ +
} + + + {bankUiSettings.allowRegistrations && onRegister && +

+ +

+ }
- - - +
); } diff --git a/packages/demobank-ui/src/utils.ts b/packages/demobank-ui/src/utils.ts index c13b9a3cb..e7673f078 100644 --- a/packages/demobank-ui/src/utils.ts +++ b/packages/demobank-ui/src/utils.ts @@ -88,28 +88,6 @@ export enum CashoutStatus { PENDING = "pending", } -// export function partialWithObjects(obj: T | undefined, () => complete): WithIntermediate { -// const root = obj === undefined ? {} : obj; -// return Object.entries(root).([key, value]) => { - -// }) -// return undefined as any -// } - -/** - * Craft headers with Authorization and Content-Type. - */ -// export function prepareHeaders(username?: string, password?: string): Headers { -// const headers = new Headers(); -// if (username && password) { -// headers.append( -// "Authorization", -// `Basic ${window.btoa(`${username}:${password}`)}`, -// ); -// } -// headers.append("Content-Type", "application/json"); -// return headers; -// } export const PAGE_SIZE = 20; export const MAX_RESULT_SIZE = PAGE_SIZE * 2 - 1;