client/src/components/Register.js
changeset 143 cfcbf4bc66f1
parent 129 d48946d164c6
child 151 57d63a248f0d
--- a/client/src/components/Register.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Register.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, HelpBlock } from 'react-bootstrap';
 import '../App.css';
+import './Register.css';
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 
@@ -31,56 +31,55 @@
   renderErrorMessage(errorMessages, fieldname) {
     if (errorMessages && errorMessages.has(fieldname)) {
       return errorMessages.get(fieldname).map((message, key) =>
-        <HelpBlock key={ key }>{ message }</HelpBlock>
+        <p className="help-block" key={ key }>{ message }</p>
       );
     }
   }
 
   render() {
 
-    const panelHeader = (
-      <h4 className="text-uppercase text-center">Register</h4>
-    )
-
     const errorMessages = this.props.register.get('errorMessages');
 
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3}>
-              <Panel header={ panelHeader } className="panel-login">
-                <form onSubmit={this.submit}>
-                  <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 validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>
-                    <ControlLabel>Email</ControlLabel>
-                    <FormControl componentClass="input" type="email" inputRef={ref => { this.email = ref; }} />
-                    { this.renderErrorMessage(errorMessages, 'email') }
-                  </FormGroup>
-                  <FormGroup validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>
-                    <ControlLabel>Password</ControlLabel>
-                    <FormControl componentClass="input" type="password" inputRef={ref => { this.password1 = ref; }} />
-                    { this.renderErrorMessage(errorMessages, 'password1') }
-                  </FormGroup>
-                  <FormGroup validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>
-                    <ControlLabel>Confirm password</ControlLabel>
-                    <FormControl componentClass="input" type="password" inputRef={ref => { this.password2 = ref; }} />
-                    { this.renderErrorMessage(errorMessages, 'password2') }
-                  </FormGroup>
-                  <Button type="submit" block bsStyle="primary" onClick={this.register}>Register</Button>
-                </form>
-              </Panel>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-6 col-md-offset-3">
+              <div className="panel-login panel panel-default">
+                <div className="panel-heading">
+                  <h4 className="text-center panel-title">IRI Notes</h4>
+                  <form onSubmit={this.submit}>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
+                      <label className="control-label">Nom d'utilisateur</label>
+                      <input className="form-control" type="text" inputRef={ref => { this.username = ref; }} />
+                      { this.renderErrorMessage(errorMessages, 'username') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>
+                      <label className="control-label">Email</label>
+                      <input className="form-control" type="email" inputRef={ref => { this.email = ref; }} />
+                      { this.renderErrorMessage(errorMessages, 'email') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>
+                      <label className="control-label">Mot de passe</label>
+                      <input className="form-control" type="password" inputRef={ref => { this.password1 = ref; }} />
+                      { this.renderErrorMessage(errorMessages, 'password1') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>
+                      <label className="control-label">Confirmer le mot de passe</label>
+                      <input className="form-control" type="password" inputRef={ref => { this.password2 = ref; }} />
+                      { this.renderErrorMessage(errorMessages, 'password2') }
+                    </div>
+                    <button type="submit" className="btn btn-primary btn-lg">S'inscrire</button>
+                  </form>
+                </div>
+              </div>
               <p className="text-center">
-                <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Already registered? Sign in.</a>
+                <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Déjà inscrit ? Se connecter.</a>
               </p>
-            </Col>
-          </Row>
-        </Grid>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }