1 files changed, 27 insertions, 15 deletions
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index e36629e2a..ed36daa21 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -19,7 +19,11 @@ import { ComponentChildren, Fragment, h, VNode } from "preact";
 import talerLogo from "../assets/logo-white.svg";
 import { LangSelectorLikePy as LangSelector } from "../components/LangSelector.js";
 import { useBackendContext } from "../context/backend.js";
-import { PageStateType, usePageContext } from "../context/pageState.js";
+import {
+  ErrorMessage,
+  PageStateType,
+  usePageContext,
+} from "../context/pageState.js";
 import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { bankUiSettings } from "../settings.js";
 
@@ -42,7 +46,7 @@ export function BankFrame({
         onClick={() => {
           pageStateSetter((prevState: PageStateType) => {
             const { talerWithdrawUri, withdrawalId, ...rest } = prevState;
-            backend.clear();
+            backend.logOut();
             return {
               ...rest,
               withdrawalInProgress: false,
@@ -107,7 +111,14 @@ export function BankFrame({
         </nav>
       </div>
       <section id="main" class="content">
-        <ErrorBanner />
+        {pageState.error && (
+          <ErrorBanner
+            error={pageState.error}
+            onClear={() => {
+              pageStateSetter((prev) => ({ ...prev, error: undefined }));
+            }}
+          />
+        )}
         <StatusBanner />
         {backend.state.status === "loggedIn" ? logOut : null}
         {children}
@@ -136,33 +147,34 @@ function maybeDemoContent(content: VNode): VNode {
   return <Fragment />;
 }
 
-function ErrorBanner(): VNode | null {
-  const { pageState, pageStateSetter } = usePageContext();
-
-  if (!pageState.error) return null;
-
-  const rval = (
+export function ErrorBanner({
+  error,
+  onClear,
+}: {
+  error: ErrorMessage;
+  onClear: () => void;
+}): VNode | null {
+  return (
     <div class="informational informational-fail" style={{ marginTop: 8 }}>
       <div style={{ display: "flex", justifyContent: "space-between" }}>
         <p>
-          <b>{pageState.error.title}</b>
+          <b>{error.title}</b>
         </p>
         <div>
           <input
             type="button"
             class="pure-button"
             value="Clear"
-            onClick={async () => {
-              pageStateSetter((prev) => ({ ...prev, error: undefined }));
+            onClick={(e) => {
+              e.preventDefault();
+              onClear();
             }}
           />
         </div>
       </div>
-      <p>{pageState.error.description}</p>
+      <p>{error.description}</p>
     </div>
   );
-  delete pageState.error;
-  return rval;
 }
 
 function StatusBanner(): VNode | null {