1 files changed, 45 insertions, 3 deletions
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index 2452745a5..16d2373da 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -14,12 +14,18 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import {
+  ErrorType,
+  useTranslationContext,
+} from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
+import { ErrorMessage } from "../context/pageState.js";
+import { useCredentialsChecker } from "../hooks/backend.js";
 import { bankUiSettings } from "../settings.js";
 import { undefinedIfEmpty } from "../utils.js";
+import { ErrorBannerFloat } from "./BankFrame.js";
 import { USERNAME_REGEX } from "./RegistrationPage.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
@@ -31,6 +37,8 @@ export function LoginForm({ onRegister }: { onRegister: () => void }): VNode {
   const [username, setUsername] = useState<string | undefined>();
   const [password, setPassword] = useState<string | undefined>();
   const { i18n } = useTranslationContext();
+  const testLogin = useCredentialsChecker();
+  const [error, saveError] = useState<ErrorMessage | undefined>();
   const ref = useRef<HTMLInputElement>(null);
   useEffect(function focusInput() {
     ref.current?.focus();
@@ -48,6 +56,9 @@ export function LoginForm({ onRegister }: { onRegister: () => void }): VNode {
   return (
     <Fragment>
       <h1 class="nav">{i18n.str`Welcome to ${bankUiSettings.bankName}!`}</h1>
+      {error && (
+        <ErrorBannerFloat error={error} onClear={() => saveError(undefined)} />
+      )}
       <div class="login-div">
         <form
           class="login-form"
@@ -105,10 +116,41 @@ export function LoginForm({ onRegister }: { onRegister: () => void }): VNode {
               type="submit"
               class="pure-button pure-button-primary"
               disabled={!!errors}
-              onClick={(e) => {
+              onClick={async (e) => {
                 e.preventDefault();
                 if (!username || !password) return;
-                backend.logIn({ username, password });
+                const { valid, cause } = await testLogin(username, password);
+                if (valid) {
+                  backend.logIn({ username, password });
+                } else {
+                  switch (cause) {
+                    case ErrorType.CLIENT: {
+                      saveError({
+                        title: i18n.str`Wrong credentials or username`,
+                      });
+                      break;
+                    }
+                    case ErrorType.SERVER: {
+                      saveError({
+                        title: i18n.str`Server had a problem, try again later or report.`,
+                      });
+                      break;
+                    }
+                    case ErrorType.TIMEOUT: {
+                      saveError({
+                        title: i18n.str`Could not reach the server, please report.`,
+                      });
+                      break;
+                    }
+                    default: {
+                      saveError({
+                        title: i18n.str`Unexpected error, please report.`,
+                      });
+                      break;
+                    }
+                  }
+                  backend.logOut();
+                }
                 setUsername(undefined);
                 setPassword(undefined);
               }}