1 files changed, 13 insertions, 17 deletions
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index b18f29d86..f21e98343 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -15,7 +15,7 @@
  */
 
 import { TranslatedString } from "@gnu-taler/taler-util";
-import { notify, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Notification, useLocalNotification, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
@@ -25,6 +25,8 @@ import { bankUiSettings } from "../settings.js";
 import { undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
 import { assertUnreachable } from "./WithdrawalOperationPage.js";
 import { doAutoFocus } from "./PaytoWireTransferForm.js";
+import { Attention } from "../components/Attention.js";
+import { ShowLocalNotification } from "../components/ShowLocalNotification.js";
 
 
 /**
@@ -37,25 +39,19 @@ export function LoginForm({ reason, onRegister }: { reason?: "not-found" | "forb
   const [password, setPassword] = useState<string | undefined>();
   const { i18n } = useTranslationContext();
   const { api } = useBankCoreApiContext();
-
+  const [notification, notify, handleError] = useLocalNotification()
 
   /**
    * Register form may be shown in the initialization step.
-   * If this is an error when usgin the app the registration
-   * callback is not set
+   * If no register handler then this is invoke
+   * to show a session expired or unauthorized
    */
-  const isSessionExpired = !onRegister
+  const isLogginAgain = !onRegister
 
-  // useEffect(() => {
-  //   if (backend.state.status === "loggedIn") {
-  //     backend.expired()
-  //   }
-  // },[])
   const ref = useRef<HTMLInputElement>(null);
   useEffect(function focusInput() {
-    //FIXME: show invalidate session and allow relogin
-    if (isSessionExpired) {
-      localStorage.removeItem("backend-state");
+    if (isLogginAgain && backend.state.status !== "expired") {
+      backend.expired()
       window.location.reload()
     }
     ref.current?.focus();
@@ -78,7 +74,7 @@ export function LoginForm({ reason, onRegister }: { reason?: "not-found" | "forb
   async function doLogin() {
     if (!username || !password) return;
     setBusy({})
-    await withRuntimeErrorHandling(i18n, async () => {
+    await handleError(async () => {
       const resp = await api.getAuthenticationAPI(username).createAccessToken(password, {
         // scope: "readwrite" as "write", //FIX: different than merchant
         scope: "readwrite",
@@ -114,7 +110,7 @@ export function LoginForm({ reason, onRegister }: { reason?: "not-found" | "forb
 
   return (
     <div class="flex min-h-full flex-col justify-center">
-
+      <ShowLocalNotification notification={notification} />
       <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
         <form class="space-y-6" noValidate
           onSubmit={(e) => {
@@ -135,7 +131,7 @@ export function LoginForm({ reason, onRegister }: { reason?: "not-found" | "forb
                 id="username"
                 class="block w-full disabled:bg-gray-200 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                 value={username ?? ""}
-                disabled={isSessionExpired}
+                disabled={isLogginAgain}
                 enterkeyhint="next"
                 placeholder="identification"
                 autocomplete="username"
@@ -177,7 +173,7 @@ export function LoginForm({ reason, onRegister }: { reason?: "not-found" | "forb
             </div>
           </div>
 
-          {isSessionExpired ? <div class="flex justify-between">
+          {isLogginAgain ? <div class="flex justify-between">
             <button type="submit"
               class="rounded-md bg-white-600 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
               onClick={(e) => {