fix #8185

1 files changed, 16 insertions, 2 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/login/index.tsx b/packages/merchant-backoffice-ui/src/paths/login/index.tsx
index 1c98b7c9b..6c33dd06e 100644
--- a/packages/merchant-backoffice-ui/src/paths/login/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/login/index.tsx
@@ -20,12 +20,14 @@
  */
 
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { ComponentChildren, h, VNode } from "preact";
+import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useCallback, useEffect, useState } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
 import { useInstanceContext } from "../../context/instance.js";
 import { AccessToken, LoginToken } from "../../declaration.js";
 import { useCredentialsChecker } from "../../hooks/backend.js";
+import { NotificationCard } from "../../components/menu/index.js";
+import { Notification } from "../../utils/types.js";
 
 interface Props {
   onConfirm: (token: LoginToken | undefined) => void;
@@ -40,6 +42,8 @@ export function LoginPage({ onConfirm }: Props): VNode {
   const { admin, id } = useInstanceContext();
   const { requestNewLoginToken } = useCredentialsChecker();
   const [token, setToken] = useState("");
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+
 
   const { i18n } = useTranslationContext();
 
@@ -53,6 +57,10 @@ export function LoginPage({ onConfirm }: Props): VNode {
       onConfirm({ token, expiration });
     } else {
       onConfirm(undefined);
+      setNotif({
+        message: "Your password is incorrect",
+        type: "ERROR",
+      });
     }
   }, [id, token])
 
@@ -71,6 +79,7 @@ export function LoginPage({ onConfirm }: Props): VNode {
             class="modal-card-body"
             style={{ border: "1px solid", borderTop: 0, borderBottom: 0 }}
           >
+
             <p>
               <i18n.Translate>Need the access token for the instance.</i18n.Translate>
             </p>
@@ -120,7 +129,8 @@ export function LoginPage({ onConfirm }: Props): VNode {
     </div>)
   }
 
-  return (
+  return (<Fragment>
+    <NotificationCard notification={notif} />
     <div class="columns is-centered" style={{ margin: "auto" }}>
       <div class="column is-two-thirds ">
         <div class="modal-card" style={{ width: "100%", margin: 0 }}>
@@ -143,6 +153,7 @@ export function LoginPage({ onConfirm }: Props): VNode {
                 </label>
               </div>
               <div class="field-body">
+
                 <div class="field">
                   <p class="control is-expanded">
                     <input
@@ -178,10 +189,13 @@ export function LoginPage({ onConfirm }: Props): VNode {
             >
               <i18n.Translate>Confirm</i18n.Translate>
             </AsyncButton>
+
           </footer>
         </div>
       </div>
     </div>
+  </Fragment>
+
   );
 }