libeufin

commit d54d7f131377f6e5ca6e00272ecdbd1b6a12a454
parent 2f78552dd02a794ba80b789bb07a8aec4b18becf
Author: tanhengyeow <E0032242@u.nus.edu>
Date:   Fri, 12 Jun 2020 02:44:47 +0800

Show error message when authentication fails

Diffstat:
M
frontend/src/actions/auth.tsx
 | 
4
++--
M
frontend/src/components/login/Index.tsx
 | 
25
++++++++++++++++++++-----
M
frontend/src/components/login/Login.less
 | 
4
++++

3 files changed, 26 insertions(+), 7 deletions(-)
diff --git 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
@@ -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
@@ -13,3 +13,7 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.login .ant-alert-with-description {
+  margin-bottom: 20px;
+}