1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { connect } from 'react-redux'; |
2 import { connect } from 'react-redux'; |
3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, HelpBlock } from 'react-bootstrap'; |
|
5 import '../App.css'; |
4 import '../App.css'; |
|
5 import './Register.css'; |
6 import Navbar from './Navbar'; |
6 import Navbar from './Navbar'; |
7 import * as authActions from '../actions/authActions'; |
7 import * as authActions from '../actions/authActions'; |
8 |
8 |
9 class Register extends Component { |
9 class Register extends Component { |
10 |
10 |
29 } |
29 } |
30 |
30 |
31 renderErrorMessage(errorMessages, fieldname) { |
31 renderErrorMessage(errorMessages, fieldname) { |
32 if (errorMessages && errorMessages.has(fieldname)) { |
32 if (errorMessages && errorMessages.has(fieldname)) { |
33 return errorMessages.get(fieldname).map((message, key) => |
33 return errorMessages.get(fieldname).map((message, key) => |
34 <HelpBlock key={ key }>{ message }</HelpBlock> |
34 <p className="help-block" key={ key }>{ message }</p> |
35 ); |
35 ); |
36 } |
36 } |
37 } |
37 } |
38 |
38 |
39 render() { |
39 render() { |
40 |
40 |
41 const panelHeader = ( |
|
42 <h4 className="text-uppercase text-center">Register</h4> |
|
43 ) |
|
44 |
|
45 const errorMessages = this.props.register.get('errorMessages'); |
41 const errorMessages = this.props.register.get('errorMessages'); |
46 |
42 |
47 return ( |
43 return ( |
48 <div> |
44 <div> |
49 <Navbar history={this.props.history} /> |
45 <Navbar history={this.props.history} /> |
50 <Grid fluid> |
46 <div className="container-fluid"> |
51 <Row> |
47 <div className="row"> |
52 <Col md={6} mdOffset={3}> |
48 <div className="col-md-6 col-md-offset-3"> |
53 <Panel header={ panelHeader } className="panel-login"> |
49 <div className="panel-login panel panel-default"> |
54 <form onSubmit={this.submit}> |
50 <div className="panel-heading"> |
55 <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }> |
51 <h4 className="text-center panel-title">IRI Notes</h4> |
56 <ControlLabel>Username</ControlLabel> |
52 <form onSubmit={this.submit}> |
57 <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} /> |
53 <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }> |
58 { this.renderErrorMessage(errorMessages, 'username') } |
54 <label className="control-label">Nom d'utilisateur</label> |
59 </FormGroup> |
55 <input className="form-control" type="text" inputRef={ref => { this.username = ref; }} /> |
60 <FormGroup validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }> |
56 { this.renderErrorMessage(errorMessages, 'username') } |
61 <ControlLabel>Email</ControlLabel> |
57 </div> |
62 <FormControl componentClass="input" type="email" inputRef={ref => { this.email = ref; }} /> |
58 <div className="form-group" validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }> |
63 { this.renderErrorMessage(errorMessages, 'email') } |
59 <label className="control-label">Email</label> |
64 </FormGroup> |
60 <input className="form-control" type="email" inputRef={ref => { this.email = ref; }} /> |
65 <FormGroup validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }> |
61 { this.renderErrorMessage(errorMessages, 'email') } |
66 <ControlLabel>Password</ControlLabel> |
62 </div> |
67 <FormControl componentClass="input" type="password" inputRef={ref => { this.password1 = ref; }} /> |
63 <div className="form-group" validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }> |
68 { this.renderErrorMessage(errorMessages, 'password1') } |
64 <label className="control-label">Mot de passe</label> |
69 </FormGroup> |
65 <input className="form-control" type="password" inputRef={ref => { this.password1 = ref; }} /> |
70 <FormGroup validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }> |
66 { this.renderErrorMessage(errorMessages, 'password1') } |
71 <ControlLabel>Confirm password</ControlLabel> |
67 </div> |
72 <FormControl componentClass="input" type="password" inputRef={ref => { this.password2 = ref; }} /> |
68 <div className="form-group" validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }> |
73 { this.renderErrorMessage(errorMessages, 'password2') } |
69 <label className="control-label">Confirmer le mot de passe</label> |
74 </FormGroup> |
70 <input className="form-control" type="password" inputRef={ref => { this.password2 = ref; }} /> |
75 <Button type="submit" block bsStyle="primary" onClick={this.register}>Register</Button> |
71 { this.renderErrorMessage(errorMessages, 'password2') } |
76 </form> |
72 </div> |
77 </Panel> |
73 <button type="submit" className="btn btn-primary btn-lg">S'inscrire</button> |
|
74 </form> |
|
75 </div> |
|
76 </div> |
78 <p className="text-center"> |
77 <p className="text-center"> |
79 <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Already registered? Sign in.</a> |
78 <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Déjà inscrit ? Se connecter.</a> |
80 </p> |
79 </p> |
81 </Col> |
80 </div> |
82 </Row> |
81 </div> |
83 </Grid> |
82 </div> |
84 </div> |
83 </div> |
85 ); |
84 ); |
86 } |
85 } |
87 } |
86 } |
88 |
87 |