diff -r f0f83f5530a6 -r c78d579f4b55 client/src/components/Register.js
--- a/client/src/components/Register.js	Thu Dec 06 01:35:30 2018 +0100
+++ b/client/src/components/Register.js	Tue Dec 18 02:27:22 2018 +0100
@@ -2,18 +2,40 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as authActions from '../actions/authActions';
+import { Trans } from 'react-i18next';
+import * as R from 'ramda';
 
 class Register extends Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: '',
+      email: '',
+      password1: '',
+      password2: ''
+    }
+
+
+  }
+
   register = () => {
-    const username = this.username.value;
-    const email = this.email.value;
-    const password1 = this.password1.value;
-    const password2 = this.password2.value;
+    const {
+      username,
+      email,
+      password1,
+      password2 } = this.state;
 
     this.props.authActions.registerSubmit(username, email, password1, password2);
   }
 
+  handleChange = (event) => {
+    const newState = {};
+    newState[event.target.name] = event.target.value;
+    this.setState(newState);
+  }
+
   submit = (e) => {
     e.preventDefault();
 
@@ -26,16 +48,44 @@
   }
 
   renderErrorMessage(errorMessages, fieldname) {
-    if (errorMessages && errorMessages.has(fieldname)) {
-      return errorMessages.get(fieldname).map((message, key) =>
-        <p className="form-text" key={ key }>{ message }</p>
+    if (errorMessages && fieldname in errorMessages) {
+      return errorMessages[fieldname].map((message, key) =>
+        <p key={ key } className="form-text alert alert-danger mt-4" role="alert" >{ message }</p>
       );
     }
   }
 
+  renderNonFieldErrors(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.reduce(
+      (acc, p) => R.concat(acc, R.ifElse(Array.isArray, R.identity, v => [v,])(R.pathOr([], ['data', p], errorMessages))),
+      [],
+      ['non_field_errors', 'detail']
+    );
+    if (errors && errors.length > 0 ) {
+      return (
+        <div className="alert alert-danger mt-4" role="alert">
+        { errors.map((message, key) =>
+          <p key={ key }><Trans i18nKey="register.register_error">{ message }</Trans></p>
+        ) }
+        </div>
+      )
+    }
+
+  }
+
+
   render() {
 
-    // const errorMessages = this.props.register.errorMessages;
+    const errorMessages = this.props.register.error ? this.props.register.errorMessages : false ;
 
     return (
       <div>
@@ -47,34 +97,35 @@
                 <div className="card-header bg-secondary border-0 mt-5 pt-5">
                   <h4 className="text-center card-title font-weight-bold text-lg" onClick={this.onClickHome}>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 }*/>
-                      <label className="col-form-label text-primary font-weight-bold mt-2">Nom d'utilisateur</label>
-                      <input className="form-control bg-irinotes-form border-0 text-muted" type="text" /*inputRef={ref => { this.username = ref; }}*/ />
-                      {/* { this.renderErrorMessage(errorMessages, 'username') } */}
+                    <div className="form-group mb-2 ml-3 w-75">
+                      <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="username"><Trans i18nKey="common.username">Nom d'utilisateur</Trans></label>
+                      <input className="form-control bg-irinotes-form border-0 text-muted" type="text" onChange={this.handleChange} value={this.state.username} name="username" />
+                      { errorMessages && this.renderErrorMessage(errorMessages.data, 'username') }
                     </div>
-                    <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }*/>
-                      <label className="col-form-label text-primary font-weight-bold mt-2">Email</label>
-                      <input className="form-control bg-irinotes-form border-0 text-muted" type="email" /*inputRef={ref => { this.email = ref; }}*/ />
-                      {/* { this.renderErrorMessage(errorMessages, 'email') } */}
+                    <div className="form-group mb-2 ml-3 w-75">
+                      <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="email"><Trans i18nKey="common.email">Email</Trans></label>
+                      <input className="form-control bg-irinotes-form border-0 text-muted" type="email" onChange={this.handleChange} value={this.state.email} name="email" />
+                      { errorMessages && this.renderErrorMessage(errorMessages.data, 'email') }
                     </div>
-                    <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }*/>
-                      <label className="col-form-label text-primary font-weight-bold mt-2">Mot de passe</label>
-                      <input className="form-control bg-irinotes-form border-0 text-muted" type="password" /*inputRef={ref => { this.password1 = ref; }}*/ />
-                      {/* { this.renderErrorMessage(errorMessages, 'password1') } */}
+                    <div className="form-group mb-2 ml-3 w-75">
+                      <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="password1"><Trans i18nKey="common.password">Mot de passe</Trans></label>
+                      <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleChange} value={this.state.password1} name="password1" />
+                      { errorMessages && this.renderErrorMessage(errorMessages.data, 'password1') }
                     </div>
-                    <div className="form-group mb-2 ml-3 w-75" /*validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }*/>
-                      <label className="col-form-label text-primary font-weight-bold mt-2">Confirmer le mot de passe</label>
-                      <input className="form-control bg-irinotes-form border-0 text-muted" type="password" /*inputRef={ref => { this.password2 = ref; }}*/ />
-                      {/* { this.renderErrorMessage(errorMessages, 'password2') } */}
+                    <div className="form-group mb-2 ml-3 w-75">
+                      <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="password2"><Trans i18nKey="register.password_confirmation">Confirmer le mot de passe</Trans></label>
+                      <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleChange} value={this.state.password2} name="password2" />
+                      { errorMessages && this.renderErrorMessage(errorMessages.data, 'password2') }
                     </div>
+                    { this.renderNonFieldErrors(errorMessages) }
                     <div className="text-center mr-5 pr-5">
-                    <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3">S'inscrire</button>
+                    <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3"><Trans i18nKey="register.register">S'inscrire</Trans></button>
                     </div>
                   </form>
                 </div>
               </div>
               <p className="text-center">
-                <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Déjà inscrit ? Se connecter.</a>
+                <a className="text-muted" href="/login" onClick={ this.onClickLogin }><Trans i18nKey="register.already_registered">Déjà inscrit ? Se connecter</Trans>.</a>
               </p>
             </div>
           </div>