--- 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>
);
}