check config number

packages/demobank-ui/src/components/Routing.tsx

@@ -14,24 +14,25 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+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 <BankFrame >
@@ -39,11 +40,17 @@ export function Routing(): VNode {
         <Route
           path="/login"
           component={() => (
+            <Fragment>
+              <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+                <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h2>
+              </div>
+
               <LoginForm
                 onRegister={() => {
                   route("/register");
                 }}
               />
+            </Fragment>
           )}
         />
         <Route

packages/demobank-ui/src/components/app.tsx

@@ -15,15 +15,20 @@
  */
 
 import {
+  LibtoolVersion,
   getGlobalLogLevel,
   setGlobalLogLevelFromString,
 } from "@gnu-taler/taler-util";
-import { TranslationProvider } from "@gnu-taler/web-util/browser";
-import { FunctionalComponent, h } from "preact";
+import { TranslationProvider, useApiContext } from "@gnu-taler/web-util/browser";
+import { ComponentChildren, Fragment, FunctionalComponent, VNode, h } from "preact";
 import { SWRConfig } from "swr";
-import { BackendStateProvider } from "../context/backend.js";
+import { BackendStateProvider, useBackendContext } from "../context/backend.js";
 import { strings } from "../i18n/strings.js";
 import { Routing } from "./Routing.js";
+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";
 const WITH_LOCAL_STORAGE_CACHE = false;
 
 /**
@@ -47,6 +52,7 @@ const App: FunctionalComponent = () => {
   return (
     <TranslationProvider source={strings}>
       <BackendStateProvider>
+        <VersionCheck>
           <SWRConfig
             value={{
               provider: WITH_LOCAL_STORAGE_CACHE
@@ -56,13 +62,28 @@ const App: FunctionalComponent = () => {
           >
             <Routing />
           </SWRConfig>
+        </VersionCheck>
       </BackendStateProvider>
-    </TranslationProvider>
+    </TranslationProvider >
   );
 };
 (window as any).setGlobalLogLevelFromString = setGlobalLogLevelFromString;
 (window as any).getGlobalLevel = getGlobalLogLevel;
 
+function VersionCheck({ children }: { children: ComponentChildren }): VNode {
+  const checked = useConfigState()
+
+  if (checked === undefined) {
+    return <Loading />
+  }
+  if (checked === false) {
+    return <div>
+      the bank backend is not supported. supported version "{BANK_INTEGRATION_PROTOCOL_VERSION}"
+    </div>
+  }
+  return <Fragment>{children}</Fragment>
+}
+
 function localStorageProvider(): Map<unknown, unknown> {
   const map = new Map(JSON.parse(localStorage.getItem("app-cache") || "[]"));
 

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<typeof useApiContext>["request"],
+): Promise<SandboxBackend.Config | undefined> {
+  try {
+    const url = getInitialBackendBaseURL();
+    const result = await request<SandboxBackend.Config>(
+      url,
+      `config`,
+    );
+    return result.data;
+  } catch (error) {
+    return undefined;
+  }
+}
+
+export function useConfigState(): boolean | undefined {
+  const [checked, setChecked] = useState<boolean>()
+  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;
+}
+
+

packages/demobank-ui/src/pages/LoginForm.tsx

@@ -128,16 +128,7 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
   const isSessionExpired = !onRegister
 
   return (
-    <Fragment>
-      <h1 class="nav"></h1>
-      {/* {error && (
-        <ErrorBannerFloat error={error} onClear={() => saveError(undefined)} />
-      )} */}
-
     <div class="flex min-h-full flex-col justify-center">
-        {/* <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-          <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h2>
-        </div> */}
 
       <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
         <form class="space-y-6" noValidate
@@ -252,8 +243,5 @@ export function LoginForm({ onRegister }: { onRegister?: () => void }): VNode {
         }
       </div>
     </div>
-
-
-    </Fragment>
   );
 }

packages/demobank-ui/src/utils.ts

@@ -88,28 +88,6 @@ export enum CashoutStatus {
   PENDING = "pending",
 }
 
-// export function partialWithObjects<T extends object>(obj: T | undefined, () => complete): WithIntermediate<T> {
-//   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;