Add login failed message

ui/src/Layout.js

@@ -51,6 +51,7 @@ class Layout extends Component {
         loggedIn: CurrentUserStore.isLoggedIn(),
         admin: CurrentUserStore.isAdmin(),
         name: CurrentUserStore.getName(),
+        loginFailed: CurrentUserStore.isLoginFailed(),
         version: Layout.defaultVersion,
     };
 
@@ -77,6 +78,7 @@ class Layout extends Component {
             ...this.state,
             loggedIn: CurrentUserStore.isLoggedIn(),
             admin: CurrentUserStore.isAdmin(),
+            loginFailed: CurrentUserStore.isLoginFailed(),
             name: CurrentUserStore.getName(),
         });
     };
@@ -85,7 +87,7 @@ class Layout extends Component {
     showSettings = () => this.setState({...this.state, showSettings: true});
 
     render() {
-        const {name, admin, version, loggedIn, showSettings} = this.state;
+        const {name, admin, version, loggedIn, showSettings, loginFailed} = this.state;
         const {classes} = this.props;
         const theme = this.state.darkTheme ? darkTheme : lightTheme;
         return (
@@ -102,7 +104,7 @@ class Layout extends Component {
                         <main className={classes.content}>
                             <Switch>
                                 <Route exact path="/login" render={() =>
-                                    (loggedIn ? (<Redirect to="/"/>) : (<Login/>))}/>
+                                    (loggedIn ? (<Redirect to="/"/>) : (<Login loginFailed={loginFailed}/>))}/>
                                 {(loggedIn || getToken() != null) ? null : <Redirect to="/login"/>}
                                 <Route exact path="/" component={Messages}/>
                                 <Route exact path="/messages/:id" component={Messages}/>

ui/src/actions/UserAction.js

@@ -21,6 +21,8 @@ export function login(username, password) {
     }).then(function(resp) {
         setAuthorizationToken(resp.data.token);
         GlobalAction.initialLoad();
+    }).catch(() => {
+        dispatcher.dispatch({type: 'LOGIN_FAILED'});
     });
 }
 
@@ -61,7 +63,7 @@ export function fetchUsers() {
  * @param {int} id the user id
  */
 export function deleteUser(id) {
-    axios.delete(config.get('url') + 'user/' + id).then(function(resp) {
+    axios.delete(config.get('url') + 'user/' + id).then(function() {
         fetchUsers();
     });
 }
@@ -73,7 +75,7 @@ export function deleteUser(id) {
  * @param {bool} admin if true, the user is an administrator
  */
 export function createUser(name, pass, admin) {
-    axios.post(config.get('url') + 'user', {name, pass, admin}).then(function(resp) {
+    axios.post(config.get('url') + 'user', {name, pass, admin}).then(function() {
         fetchUsers();
     });
 }
@@ -86,7 +88,7 @@ export function createUser(name, pass, admin) {
  * @param {bool} admin if true, the user is an administrator
  */
 export function updateUser(id, name, pass, admin) {
-    axios.post(config.get('url') + 'user/' + id, {name, pass, admin}).then(function(resp) {
+    axios.post(config.get('url') + 'user/' + id, {name, pass, admin}).then(function() {
         fetchUsers();
         fetchCurrentUser(); // just in case update current user
     });

ui/src/actions/defaultAxios.js

@@ -26,7 +26,6 @@ axios.interceptors.response.use(null, (error) => {
         dispatcher.dispatch({type: 'REMOVE_CURRENT_USER'});
     }
 
-    console.warn('Error status', error.response.status);
     return Promise.reject(error);
 });
 

ui/src/pages/Login.js

@@ -2,11 +2,17 @@ import React, {Component} from 'react';
 import Button from 'material-ui/Button';
 import Grid from 'material-ui/Grid';
 import TextField from 'material-ui/TextField';
+import Typography from 'material-ui/Typography';
 import Container from '../component/Container';
 import * as UserAction from '../actions/UserAction';
 import DefaultPage from '../component/DefaultPage';
+import PropTypes from 'prop-types';
 
 class Login extends Component {
+    static propTypes = {
+        loginFailed: PropTypes.bool.isRequired,
+    };
+
     constructor() {
         super();
         this.state = {username: '', password: ''};
@@ -22,7 +28,7 @@ class Login extends Component {
 
     render() {
         const {username, password} = this.state;
-
+        const {loginFailed} = this.props;
         return (
             <DefaultPage title="Login" maxWidth={250} hideButton={true}>
                 <Grid item xs={12} style={{textAlign: 'center'}}>
@@ -36,6 +42,7 @@ class Login extends Component {
                                     style={{marginTop: 15, marginBottom: 5}} onClick={this.login}>
                                 Login
                             </Button>
+                            {loginFailed && <Typography>Login Failed</Typography>}
                         </form>
                     </Container>
                 </Grid>

ui/src/stores/CurrentUserStore.js

@@ -5,6 +5,11 @@ class CurrentUserStore extends EventEmitter {
     constructor() {
         super();
         this.currentUser = null;
+        this.loginFailed = false;
+    }
+
+    isLoginFailed() {
+        return this.loginFailed;
     }
 
     get() {
@@ -30,9 +35,14 @@ class CurrentUserStore extends EventEmitter {
 
     handle(data) {
         if (data.type === 'REMOVE_CURRENT_USER') {
+            this.loginFailed = false;
             this.set(null);
         } else if (data.type === 'SET_CURRENT_USER') {
+            this.loginFailed = false;
             this.set(data.payload);
+        } else if (data.type === 'LOGIN_FAILED') {
+            this.loginFailed = true;
+            this.emit('change');
         }
     }
 }