Show error message when authentication fails

3 files changed, 26 insertions, 7 deletions

diff --git a/frontend/src/actions/auth.tsx b/frontend/src/actions/auth.tsx
index 80964fb8..31f767fb 100644
--- a/frontend/src/actions/auth.tsx
+++ b/frontend/src/actions/auth.tsx
@@ -35,7 +35,7 @@ export const login = (nexusURL: string, username: string, password: string) => {
           if (response.ok) {
             return response.json();
           }
-          throw new Error('Error connecting to server');
+          throw 'Cannot connect to server';
         })
         .then(async () => {
           await window.localStorage.setItem('authenticated', 'true');
@@ -46,7 +46,7 @@ export const login = (nexusURL: string, username: string, password: string) => {
           dispatch(authenticate());
         })
         .catch((err) => {
-          console.log(err);
+          throw new Error(err);
         });
     }
   };
diff --git a/frontend/src/components/login/Index.tsx b/frontend/src/components/login/Index.tsx
index 261eca39..e73e234a 100644
--- a/frontend/src/components/login/Index.tsx
+++ b/frontend/src/components/login/Index.tsx
@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
-import { Form, Input, Button } from 'antd';
+import { Alert, Form, Input, Button } from 'antd';
 import { LoginOutlined } from '@ant-design/icons';
 import { login } from '../../actions/auth';
 import largeLogo from './libeufin-logo-large.png';
 import './Login.less';
 
 interface Props {
-  loginConnect: (nexusURL: string, username: string, password: string) => void;
+  loginConnect: (nexusURL: string, username: string, password: string) => any;
 }
 
 const Login = ({ loginConnect }: Props) => {
   const [nexusURL, setNexusURL] = useState('localhost:5000');
-  const [username, setUsername] = useState('user1');
-  const [password, setPassword] = useState('user1');
+  const [username, setUsername] = useState('admin');
+  const [password, setPassword] = useState('x');
+  const [authenticationFailure, setAuthenticationFailure] = useState(false);
 
   const layout = {
     wrapperCol: { span: 32 },
@@ -21,6 +22,14 @@ const Login = ({ loginConnect }: Props) => {
 
   return (
     <div className="login">
+      {authenticationFailure ? (
+        <Alert
+          message="Error"
+          description="Invalid credentials"
+          type="error"
+          showIcon
+        />
+      ) : null}
       <img className="img" src={largeLogo} alt="LibEuFin large logo" />
       <Form {...layout} size="large">
         <Form.Item>
@@ -46,7 +55,13 @@ const Login = ({ loginConnect }: Props) => {
           <Button
             type="primary"
             icon={<LoginOutlined />}
-            onClick={() => loginConnect(nexusURL, username, password)}
+            onClick={() =>
+              loginConnect(nexusURL, username, password)
+                .then(() => {
+                  setAuthenticationFailure(false);
+                })
+                .catch((err) => setAuthenticationFailure(true))
+            }
           >
             Login
           </Button>
diff --git a/frontend/src/components/login/Login.less b/frontend/src/components/login/Login.less
index bd8cb220..742c2d66 100644
--- a/frontend/src/components/login/Login.less
+++ b/frontend/src/components/login/Login.less
@@ -13,3 +13,7 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.login .ant-alert-with-description {
+  margin-bottom: 20px;
+}