1 import React, { Component } from 'react';

     2 import { connect } from 'react-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';

     6 import Navbar from './Navbar';

     7 import * as authActions from '../actions/authActions';

     8 

     9 class Register extends Component {

    10 

    11   register = () => {

    12     const username = this.username.value;

    13     const email = this.email.value;

    14     const password1 = this.password1.value;

    15     const password2 = this.password2.value;

    16 

    17     this.props.authActions.registerSubmit(username, email, password1, password2);

    18   }

    19 

    20   onClickLogin = (e) => {

    21     e.preventDefault();

    22     this.props.history.push('/login');

    23   }

    24 

    25   renderError() {

    26     return (

    27       <Alert bsStyle="danger">Bad credentials</Alert>

    28     )

    29   }

    30 

    31   renderErrorMessage(errorMessages, fieldname) {

    32     if (errorMessages && errorMessages.has(fieldname)) {

    33       return errorMessages.get(fieldname).map((message, key) =>

    34         <HelpBlock key={ key }>{ message }</HelpBlock>

    35       );

    36     }

    37   }

    38 

    39   render() {

    40 

    41     const panelHeader = (

    42       <h4 className="text-uppercase text-center">Register</h4>

    43     )

    44 

    45     const errorMessages = this.props.register.get('errorMessages');

    46 

    47     return (

    48       <div>

    49         <Navbar history={this.props.history} />

    50         <Grid fluid>

    51           <Row>

    52             <Col md={6} mdOffset={3}>

    53               <Panel header={ panelHeader } className="panel-login">

    54                 <form>

    55                   <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>

    56                     <ControlLabel>Username</ControlLabel>

    57                     <FormControl componentClass="input" type="text" inputRef={ref => { this.username = ref; }} />

    58                     { this.renderErrorMessage(errorMessages, 'username') }

    59                   </FormGroup>

    60                   <FormGroup validationState={ errorMessages && errorMessages.has('email') ? 'error' : null }>

    61                     <ControlLabel>Email</ControlLabel>

    62                     <FormControl componentClass="input" type="email" inputRef={ref => { this.email = ref; }} />

    63                     { this.renderErrorMessage(errorMessages, 'email') }

    64                   </FormGroup>

    65                   <FormGroup validationState={ errorMessages && errorMessages.has('password1') ? 'error' : null }>

    66                     <ControlLabel>Password</ControlLabel>

    67                     <FormControl componentClass="input" type="password" inputRef={ref => { this.password1 = ref; }} />

    68                     { this.renderErrorMessage(errorMessages, 'password1') }

    69                   </FormGroup>

    70                   <FormGroup validationState={ errorMessages && errorMessages.has('password2') ? 'error' : null }>

    71                     <ControlLabel>Confirm password</ControlLabel>

    72                     <FormControl componentClass="input" type="password" inputRef={ref => { this.password2 = ref; }} />

    73                     { this.renderErrorMessage(errorMessages, 'password2') }

    74                   </FormGroup>

    75                   <Button block bsStyle="primary" onClick={this.register}>Register</Button>

    76                 </form>

    77               </Panel>

    78               <p className="text-center">

    79                 <a className="text-muted" href="/login" onClick={ this.onClickLogin }>Already registered? Sign in.</a>

    80               </p>

    81             </Col>

    82           </Row>

    83         </Grid>

    84       </div>

    85     );

    86   }

    87 }

    88 

    89 function mapStateToProps(state, props) {

    90   return {

    91     register: state['register']

    92   };

    93 }

    94 

    95 function mapDispatchToProps(dispatch) {

    96   return {

    97     authActions: bindActionCreators(authActions, dispatch)

    98   }

    99 }

   100 

   101 export default connect(mapStateToProps, mapDispatchToProps)(Register);