--- a/client/src/components/Login.js	Mon Jun 26 15:45:50 2017 +0200
+++ b/client/src/components/Login.js	Mon Jun 26 16:43:22 2017 +0200
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert } from 'react-bootstrap';
+import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap';
 import '../App.css';
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
@@ -20,10 +20,25 @@
     this.props.history.push('/register');
   }
 
-  renderError() {
-    return (
-      <Alert bsStyle="danger">Bad credentials</Alert>
-    )
+  renderErrorMessage(errorMessages, fieldname) {
+    if (errorMessages && errorMessages.has(fieldname)) {
+      return errorMessages.get(fieldname).map((message, key) =>
+        <HelpBlock key={ key }>{ message }</HelpBlock>
+      );
+    }
+  }
+
+  renderNonFieldErrors(errorMessages) {
+    if (errorMessages && errorMessages.has('non_field_errors')) {
+      const errors = errorMessages.get('non_field_errors');
+      return (
+        <Alert bsStyle="danger">
+        { errors.map((message, key) =>
+          <p key={ key }>{ message }</p>
+        ) }
+        </Alert>
+      )
+    }
   }
 
   render() {
@@ -32,6 +47,8 @@
       <h4 className="text-uppercase text-center">Login</h4>
     )
 
+    const errorMessages = this.props.login.get('errorMessages');
+
     return (
       <div>
         <Navbar history={this.props.history} />
@@ -40,15 +57,17 @@
             <Col md={6} mdOffset={3}>
               <Panel header={ panelHeader } className="panel-login">
                 <form>
-                  <FormGroup>
+                  <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
                     <ControlLabel>Username</ControlLabel>
                     <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} />
+                    { this.renderErrorMessage(errorMessages, 'username') }
                   </FormGroup>
-                  <FormGroup>
+                  <FormGroup validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
                     <ControlLabel>Password</ControlLabel>
                     <FormControl componentClass="input" type="password" inputRef={ref => { this.password = ref; }} />
+                    { this.renderErrorMessage(errorMessages, 'password') }
                   </FormGroup>
-                  { this.props.login.error && this.renderError() }
+                  { this.renderNonFieldErrors(errorMessages) }
                   <Button block bsStyle="primary" onClick={this.login}>Login</Button>
                 </form>
               </Panel>
@@ -65,7 +84,6 @@
 
 function mapStateToProps(state, props) {
   return {
-    currentUser: state['currentUser'],
     login: state['login']
   };
 }