Login Component

import React, { PropTypes, Component } from 'react/addons';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import reactMixin from 'react-mixin';
import {Link} from 'react-router';
import * as actionCreators from '../actions';
import { reduxForm } from 'redux-form';
import { loginFields as fields } from '../constants';
import { validateLoginForm as validate } from '../validation';


export class Login extends React.Component {

  componentWillMount () {
    this.props.actions.clearStatusText();
  }

  submit(values) {
    let redirect = this.props.location.query.next || '/feed';
    this.props.actions.loginUser(values.username, values.password, redirect);
  }

  render() {
    const {fields: {username, password}, handleSubmit, submitting} = this.props;

    return (
      <div className="g-row login">
        <div className="g-col">
          <h1 className="login__heading">Sign In</h1>

          {(this.props.statusText) ? <div className='alert alert-info'>{this.props.statusText}</div> : null}
          <form className="pure-form pure-form-stacked" onSubmit={handleSubmit( this.submit.bind(this) )}>

            <legend>Login Form</legend>

            <div className="pure-control-group">
              <label>* Username, or Email</label>
              <input type="text" placeholder="Username, or Email" {...username}/>
              {username.touched && username.error && <div className="errors">{username.error}</div>}
            </div>
            <div className="pure-control-group">
              <label>* Password</label>
              <input type="password" placeholder="Password" {...password}/>
              {password.touched && password.error && <div className="errors">{password.error}</div>}
              <Link to='/reset-request' className="forgot-password">forgot password?</Link>
            </div>

            <button className="submit__button" onClick={handleSubmit( this.submit.bind(this) )}>Submit</button>

          </form>

        </div>
      </div>
    );

  }
}

Login.propTypes = {
  submitting: PropTypes.bool.isRequired,
  fields: PropTypes.object.isRequired,
  resetForm: PropTypes.func.isRequired,
  handleSubmit: PropTypes.func.isRequired
};

Login = reduxForm({
  form: 'login-form',
  fields,
  validate
})(Login);

reactMixin(Login.prototype, React.addons.LinkedStateMixin);

const mapStateToProps = (state) => ({
  isAuthenticating: state.auth.isAuthenticating,
  statusText: state.auth.statusText
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(actionCreators, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);