text: import React, { Component } from "react";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { Link } from "react-router-dom";
  import { loginUser } from "../../actions/authActions";
  import TextFieldGroup from "../common/TextFieldGroup";
  
  class Login extends Component {
    constructor() {
      super();
      this.state = {
        email: "",
        password: "",
        errors: {}
      };
  
      this.onChange = this.onChange.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
    componentDidMount() {
      if (this.props.auth.isAuthenticated) {
        this.props.history.push("/dashboard");
      }
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.auth.isAuthenticated) {
        this.props.history.push("/dashboard");
      }
  
      if (nextProps.errors) {
        this.setState({ errors: nextProps.errors });
      }
    }
  
    onChange(e) {
      this.setState({ [e.target.name]: e.target.value });
    }
  
    onSubmit(e) {
      e.preventDefault();
  
      const userData = {
        email: this.state.email,
        password: this.state.password
      };
  
      this.props.loginUser(userData);
    }
  
    render() {
      const { errors } = this.state;
  
      var style = {
        maxWidth: "500px"
      };
  
      return (
        <div className="login">
          <div className="card mb-3 mx-auto form-shadow" style={style}>
            <div className="card-body">
              <form onSubmit={this.onSubmit}>
                <TextFieldGroup
                  placeholder="Email Adress"
                  name="email"
                  type="email"
                  value={this.state.email}
                  onChange={this.onChange}
                  error={errors.email}
                />
                <TextFieldGroup
                  placeholder="Password"
                  name="password"
                  type="password"
                  value={this.state.password}
                  onChange={this.onChange}
                  error={errors.password}
                />
                <input
                  type="submit"
                  className="btn-block"
                  id="landing-button-form"
                />
              </form>
            </div>
            <div className="card-footer bg-transparent">
              Not a member? Register
              <Link to="/register"> here</Link>
            </div>
          </div>
        </div>
      );
    }
  }
  
  Login.propTypes = {
    loginUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state => ({
    auth: state.auth,
    errors: state.errors
  });
  
  export default connect(
    mapStateToProps,
    { loginUser }
  )(Login);
  