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 } from 'react-bootstrap'; |
4 import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap'; |
5 import '../App.css'; |
5 import '../App.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 { |
18 onClickRegister = (e) => { |
18 onClickRegister = (e) => { |
19 e.preventDefault(); |
19 e.preventDefault(); |
20 this.props.history.push('/register'); |
20 this.props.history.push('/register'); |
21 } |
21 } |
22 |
22 |
23 renderError() { |
23 renderErrorMessage(errorMessages, fieldname) { |
24 return ( |
24 if (errorMessages && errorMessages.has(fieldname)) { |
25 <Alert bsStyle="danger">Bad credentials</Alert> |
25 return errorMessages.get(fieldname).map((message, key) => |
26 ) |
26 <HelpBlock key={ key }>{ message }</HelpBlock> |
|
27 ); |
|
28 } |
|
29 } |
|
30 |
|
31 renderNonFieldErrors(errorMessages) { |
|
32 if (errorMessages && errorMessages.has('non_field_errors')) { |
|
33 const errors = errorMessages.get('non_field_errors'); |
|
34 return ( |
|
35 <Alert bsStyle="danger"> |
|
36 { errors.map((message, key) => |
|
37 <p key={ key }>{ message }</p> |
|
38 ) } |
|
39 </Alert> |
|
40 ) |
|
41 } |
27 } |
42 } |
28 |
43 |
29 render() { |
44 render() { |
30 |
45 |
31 const panelHeader = ( |
46 const panelHeader = ( |
32 <h4 className="text-uppercase text-center">Login</h4> |
47 <h4 className="text-uppercase text-center">Login</h4> |
33 ) |
48 ) |
|
49 |
|
50 const errorMessages = this.props.login.get('errorMessages'); |
34 |
51 |
35 return ( |
52 return ( |
36 <div> |
53 <div> |
37 <Navbar history={this.props.history} /> |
54 <Navbar history={this.props.history} /> |
38 <Grid fluid> |
55 <Grid fluid> |
39 <Row> |
56 <Row> |
40 <Col md={6} mdOffset={3}> |
57 <Col md={6} mdOffset={3}> |
41 <Panel header={ panelHeader } className="panel-login"> |
58 <Panel header={ panelHeader } className="panel-login"> |
42 <form> |
59 <form> |
43 <FormGroup> |
60 <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }> |
44 <ControlLabel>Username</ControlLabel> |
61 <ControlLabel>Username</ControlLabel> |
45 <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} /> |
62 <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} /> |
|
63 { this.renderErrorMessage(errorMessages, 'username') } |
46 </FormGroup> |
64 </FormGroup> |
47 <FormGroup> |
65 <FormGroup validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }> |
48 <ControlLabel>Password</ControlLabel> |
66 <ControlLabel>Password</ControlLabel> |
49 <FormControl componentClass="input" type="password" inputRef={ref => { this.password = ref; }} /> |
67 <FormControl componentClass="input" type="password" inputRef={ref => { this.password = ref; }} /> |
|
68 { this.renderErrorMessage(errorMessages, 'password') } |
50 </FormGroup> |
69 </FormGroup> |
51 { this.props.login.error && this.renderError() } |
70 { this.renderNonFieldErrors(errorMessages) } |
52 <Button block bsStyle="primary" onClick={this.login}>Login</Button> |
71 <Button block bsStyle="primary" onClick={this.login}>Login</Button> |
53 </form> |
72 </form> |
54 </Panel> |
73 </Panel> |
55 <p className="text-center"> |
74 <p className="text-center"> |
56 <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Not registered yet? Create an account.</a> |
75 <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Not registered yet? Create an account.</a> |