content: import React from 'react';
  import PropTypes from 'prop-types';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import * as actions from '../../actions/AuthActions';
  import LoginComponent from '../../components/Login/LoginComponent';
  
  import './Login.scss';
  
  class LoginPage extends React.Component {
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        login: Object.assign({}, props.LoginPage.login),
      };
  
      this.registerRedirect = this.registerRedirect.bind(this);
      this.onLoginChange = this.onLoginChange.bind(this);
      this.loginUser = this.loginUser.bind(this);
    }
  
    onLoginChange(event){
      const updatedLogin = Object.assign({}, this.state.login);
      updatedLogin[event.target.name] = event.target.value;
      this.setState({login: updatedLogin});
    }
  
    loginUser(){
      this.props.actions.loginUser(this.state)
      .then(() => {
        this.context.router.push('/home');
      });
    }
    registerRedirect(){
      this.context.router.push('/register');
    }
  
    render(){
        return (
            <div className="crypy-centered-container">
              <LoginComponent
                registerRedirect={this.registerRedirect}
                onLoginChange={this.onLoginChange}
                loginUser={this.loginUser}
                {...this.state}
              />
            </div>
        );
    }
  }
  
  LoginPage.propTypes ={
    LoginPage: PropTypes.object,
    actions: PropTypes.object
  };
  
  LoginPage.contextTypes = {
    router: PropTypes.object
  };
  
  function mapStateToProps() {
    let LoginPage = {
      login: {
        username: '',
        password: ''
      }
    };
  
    return {
      LoginPage: LoginPage
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      actions: bindActionCreators(actions, dispatch)
    };
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(LoginPage);
  