--- a/client/src/components/Login.js	Tue Nov 06 16:19:26 2018 +0100
+++ b/client/src/components/Login.js	Thu Nov 08 16:03:28 2018 +0100
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { Trans } from 'react-i18next';
+
 import '../App.css';
 import './Login.css';
 // import Navbar from './Navbar';
@@ -51,17 +53,26 @@
   }
 
   renderNonFieldErrors(errorMessages) {
-    console.log(errorMessages);
+
+    if (errorMessages && errorMessages.error) {
+      return (
+        <div className="alert alert-danger mt-4" role="alert">
+          <Trans i18nKey="login.login_error">Unable to log in.</Trans>
+        </div>
+      )
+    }
+
     const errors = R.path(['data','non_field_errors'], errorMessages);
     if (errors) {
       return (
-        <div className="alert alert-danger" role="alert">
+        <div className="alert alert-danger mt-4" role="alert">
         { errors.map((message, key) =>
-          <p key={ key }>{ message }</p>
+          <p key={ key }><Trans i18nKey="login.credentials_error">{ message }</Trans></p>
         ) }
         </div>
       )
     }
+
   }
 
   render() {
@@ -79,24 +90,24 @@
                   <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" >
-                      <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
+                      <label className="col-form-label text-primary font-weight-bold mt-2 text-capitalize"><Trans i18nKey="common.username">Nom d'utilisateur</Trans></label>
                       <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">
-                      <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
+                      <label className="col-form-label text-primary font-weight-bold mt-2 text-capitalize"><Trans i18nKey="common.password">Mot de passe</Trans></label>
                       <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) }
                     <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>
+                    <button type="submit" className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3 text-capitalize"><Trans i18nKey='common.connect'>Se connecter</Trans></button>
                     </div>
                   </form>
                 </div>
               </div>
               <p className="text-center">
-                <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Pas encore inscrit ? Créer un compte.</a>
+                <a className="text-muted" href="/register" onClick={ this.onClickRegister }><Trans i18nKey='login.registration_message'>Pas encore inscrit ? Créer un compte.</Trans></a>
               </p>
             </div>
           </div>