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, Alert, HelpBlock } from 'react-bootstrap'; |
|
5 import '../App.css'; |
4 import '../App.css'; |
|
5 import './Login.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 Login extends Component { |
9 class Login extends Component { |
10 |
10 |
42 } |
42 } |
43 |
43 |
44 renderErrorMessage(errorMessages, fieldname) { |
44 renderErrorMessage(errorMessages, fieldname) { |
45 if (errorMessages && errorMessages.has(fieldname)) { |
45 if (errorMessages && errorMessages.has(fieldname)) { |
46 return errorMessages.get(fieldname).map((message, key) => |
46 return errorMessages.get(fieldname).map((message, key) => |
47 <HelpBlock key={ key }>{ message }</HelpBlock> |
47 <p className="help-block" key={ key }>{ message }</p> |
48 ); |
48 ); |
49 } |
49 } |
50 } |
50 } |
51 |
51 |
52 renderNonFieldErrors(errorMessages) { |
52 renderNonFieldErrors(errorMessages) { |
53 if (errorMessages && errorMessages.has('non_field_errors')) { |
53 if (errorMessages && errorMessages.has('non_field_errors')) { |
54 const errors = errorMessages.get('non_field_errors'); |
54 const errors = errorMessages.get('non_field_errors'); |
55 return ( |
55 return ( |
56 <Alert bsStyle="danger"> |
56 <div class="alert alert-danger" role="alert"> |
57 { errors.map((message, key) => |
57 { errors.map((message, key) => |
58 <p key={ key }>{ message }</p> |
58 <p key={ key }>{ message }</p> |
59 ) } |
59 ) } |
60 </Alert> |
60 </div> |
61 ) |
61 ) |
62 } |
62 } |
63 } |
63 } |
64 |
64 |
65 render() { |
65 render() { |
66 |
66 |
67 const panelHeader = ( |
|
68 <h4 className="text-uppercase text-center">Login</h4> |
|
69 ) |
|
70 |
|
71 const errorMessages = this.props.login.get('errorMessages'); |
67 const errorMessages = this.props.login.get('errorMessages'); |
72 |
68 |
73 return ( |
69 return ( |
74 <div> |
70 <div> |
75 <Navbar history={this.props.history} /> |
71 <Navbar history={this.props.history} /> |
76 <Grid fluid> |
72 <div className="container-fluid"> |
77 <Row> |
73 <div className="row"> |
78 <Col md={6} mdOffset={3}> |
74 <div className="col-md-6 col-md-offset-3"> |
79 <Panel header={ panelHeader } className="panel-login"> |
75 <div className="panel-login panel panel-default"> |
80 <form onSubmit={this.submit}> |
76 <div className="panel-heading"> |
81 <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }> |
77 <h4 className="text-center panel-title">IRI Notes</h4> |
82 <ControlLabel>Username</ControlLabel> |
78 <form onSubmit={this.submit}> |
83 <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="username" /> |
79 <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }> |
84 { this.renderErrorMessage(errorMessages, 'username') } |
80 <label className="control-label">Nom d'utilisateur</label> |
85 </FormGroup> |
81 <input className="form-control" type="text" onChange={this.handleInputChange} name="username" /> |
86 <FormGroup validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }> |
82 { this.renderErrorMessage(errorMessages, 'username') } |
87 <ControlLabel>Password</ControlLabel> |
83 </div> |
88 <FormControl componentClass="input" type="password" onChange={this.handleInputChange} name="password" /> |
84 <div className="form-group" validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }> |
89 { this.renderErrorMessage(errorMessages, 'password') } |
85 <label className="control-label">Mot de passe</label> |
90 </FormGroup> |
86 <input className="form-control" type="password" onChange={this.handleInputChange} name="password" /> |
91 { this.renderNonFieldErrors(errorMessages) } |
87 { this.renderErrorMessage(errorMessages, 'password') } |
92 <Button type="submit" block bsStyle="primary" onClick={this.login}>Login</Button> |
88 </div> |
93 </form> |
89 { this.renderNonFieldErrors(errorMessages) } |
94 </Panel> |
90 <button type="submit" className="btn btn-primary btn-lg">Se connecter</button> |
|
91 </form> |
|
92 </div> |
|
93 </div> |
95 <p className="text-center"> |
94 <p className="text-center"> |
96 <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Not registered yet? Create an account.</a> |
95 <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Pas encore inscrit ? Créer un compte.</a> |
97 </p> |
96 </p> |
98 </Col> |
97 </div> |
99 </Row> |
98 </div> |
100 </Grid> |
99 </div> |
101 </div> |
100 </div> |
102 ); |
101 ); |
103 } |
102 } |
104 } |
103 } |
105 |
104 |