content: /* eslint-disable react/jsx-indent */
  import React from 'react';
  import { connect } from 'react-redux';
  import { createStructuredSelector } from 'reselect';
  import Body from 'components/Body';
  import RenderField from 'components/RenderField';
  import { Field, reduxForm } from 'redux-form/immutable';
  import styles from './style.css';
  import Button from 'components/Button';
  import Header from 'components/Header';
  import messages from './messages';
  import { login } from './actions';
  import { selectAuth } from './selectors';
  import { FormattedMessage } from 'react-intl';
  import { push } from 'react-router-redux';
  
  export class AuthPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
  
    submit = (e) => {
      this.props.handleLogin(e);
    };
  
    openRoute = (route) => {
      this.props.changeRoute(route);
    };
  
    openHomePage = () => {
      this.openRoute('/');
    };
  
    render() {
      return (
        <div className={styles.bg}>
          <Header transparent back={this.openHomePage} noShadow />
          <Body relaxed offsetExtra>
          <form className={styles.form} onSubmit={this.props.handleSubmit(this.submit)}>
            <Field
              component={RenderField}
              type="email"
              name="username"
              placeholder="Digite seu e-mail"
              className="light"
              label={messages.username}
            />
            <Field
              component={RenderField}
              type="password"
              name="password"
              placeholder="Digite sua senha"
              className="light"
              label={messages.password}
            />
            {(this.props.auth).get('error') ?
              <div className={styles.error}>{(this.props.auth).get('errorMessage')}</div> : ''}
            <Body offsetExtra collapsedSides>
            <Button className="btn btn-block" disabledButton={this.submitting || !this.props.valid} type="submit">
              <FormattedMessage {...messages.button} />
            </Button>
            </Body>
            <Button className="btn btn_link btn-white btn_link-fat btn_sticky btn_block" nextIcon>
              <FormattedMessage {...messages.link} />
            </Button>
          </form>
          </Body>
        </div>);
    }
  }
  
  AuthPage.propTypes = {
    changeRoute: React.PropTypes.func,
    handleSubmit: React.PropTypes.func,
    handleLogin: React.PropTypes.func,
    valid: React.PropTypes.bool,
    auth: React.PropTypes.object,
  };
  
  const Auth = reduxForm({
    form: 'Auth',  // a unique identifier for this form
  })(AuthPage);
  
  const mapStateToProps = createStructuredSelector({
    auth: selectAuth(),
  });
  
  function mapDispatchToProps(dispatch) {
    return {
      changeRoute: (url) => dispatch(push(url)),
      handleLogin: (data) => dispatch(login(data)),
      dispatch,
    };
  }
  
  // Wrap the component to inject dispatch and state into it
  export default connect(mapStateToProps, mapDispatchToProps)(Auth);
  