--- a/client/src/components/Login.js	Thu Oct 11 11:05:04 2018 +0200
+++ b/client/src/components/Login.js	Tue Nov 06 16:19:26 2018 +0100
@@ -5,6 +5,8 @@
 import './Login.css';
 // import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
+import { getLoginErrorMessages } from '../selectors/authSelectors';
+import * as R from 'ramda';
 
 class Login extends Component {
 
@@ -49,10 +51,11 @@
   }
 
   renderNonFieldErrors(errorMessages) {
-    if (errorMessages && errorMessages.has('non_field_errors')) {
-      const errors = errorMessages.non_field_errors;
+    console.log(errorMessages);
+    const errors = R.path(['data','non_field_errors'], errorMessages);
+    if (errors) {
       return (
-        <div class="alert alert-danger" role="alert">
+        <div className="alert alert-danger" role="alert">
         { errors.map((message, key) =>
           <p key={ key }>{ message }</p>
         ) }
@@ -63,7 +66,7 @@
 
   render() {
 
-    // const errorMessages = this.props.login.errorMessages;
+    const errorMessages = this.props.errorMessages;
 
     return (
       <div>
@@ -75,17 +78,17 @@
                 <div className="card-header bg-secondary border-0 mt-5 pt-5">
                   <h4 className="text-center card-title font-weight-bold text-lg">IRI Notes</h4>
                   <form className="pt-3 ml-5 pl-5" onSubmit={this.submit}>
-                    <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }*/>
+                    <div className="form-group mb-2 ml-3 w-75" >
                       <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
-                      <input className="form-control bg-danger border-0 text-muted" type="text" onChange={this.handleInputChange} name="username" />
+                      <input className="form-control bg-irinotes-form border-0 text-muted" type="text" onChange={this.handleInputChange} name="username" />
                       {/* { this.renderErrorMessage(errorMessages, 'username') } */}
                     </div>
-                    <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password') ? 'error' : null*/ >
+                    <div className="form-group mb-2 ml-3 w-75">
                       <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
-                      <input className="form-control bg-danger border-0 text-muted" type="password" onChange={this.handleInputChange} name="password" />
+                      <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleInputChange} name="password" />
                       {/* { this.renderErrorMessage(errorMessages, 'password') } */}
                     </div>
-                    {/* { this.renderNonFieldErrors(errorMessages) } */}
+                    { this.renderNonFieldErrors(errorMessages) }
                     <div className="text-center mr-5 pr-5">
                     <button type="submit" className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">Se connecter</button>
                     </div>
@@ -105,7 +108,7 @@
 
 function mapStateToProps(state, props) {
   return {
-    login: state.login
+    errorMessages: getLoginErrorMessages(state)
   };
 }