text: import React from "react";
  import { bindActionCreators } from "redux";
  import { connect } from "react-redux";
  import { authActions } from "../actions";
  
  import { validateEmail, renderError } from "../utils/misc";
  
  import "../static/styles/LoginView.css";
  
  class LoginView extends React.Component {
    constructor(props) {
      super(props);
      const redirectRoute = "/";
      this.state = {
        email: "",
        password: "",
        email_error_text: null,
        password_error_text: null,
        redirectTo: redirectRoute,
        // disabled: true,
        disabled: false
      };
    }
  
    isDisabled() {
      let email_is_valid = false;
  
      if (this.state.email === "") {
        this.setState({
          email_error_text: null
        });
      } else if (validateEmail(this.state.email)) {
        email_is_valid = true;
        this.setState({
          email_error_text: null
        });
      } else {
        this.setState({
          email_error_text: "Sorry, this is not a valid email"
        });
      }
  
      if (email_is_valid) {
        this.setState({
          disabled: false
        });
      } else {
        this.setState({
          disabled: true
        });
      }
    }
  
    changeValue(e, type) {
      const value = e.target.value;
      const next_state = {};
      next_state[type] = value;
      this.setState(next_state, () => {
        this.isDisabled();
      });
    }
  
    _handleKeyPress(e) {
      if (e.key === "Enter") {
        if (!this.state.disabled) {
          this.login(e);
        }
      }
    }
  
    login(e) {
      e.preventDefault();
      this.props.login(
        this.state.email,
        this.state.redirectTo
      );
    }
  
    emailClasses() {
      return this.state.email_error_text != null ? "invalid" : "";
    }
  
    submitClasses() {
      return this.state.disabled == true
        ? "btn btn-medium waves-effect waves-light s12 disabled"
        : "btn btn-medium waves-effect waves-light s12";
    }
  
    render() {
      return (
        <div className="container">
          <div className="row">
            <div className="col m4 offset-m4 z-depth-3 card-panel">
              <div className="col hg22 offset-hg1">
                <h2 className="center-align">Login</h2>
                {this.props.account.loginLoading && (
                  <div className="progress">
                    <div className="indeterminate" />
                  </div>
                )}
                <div className="row">
                  <form className="col s12">
                    {this.props.account.loginError &&
                      renderError(this.props.account.loginError)}
                      
                    <div className="row">
                      <div className="input-field col s12">
                        <input
                          id="email"
                          type="email"
                          value={this.state.email}
                          className={this.emailClasses()}
                          onChange={e => this.changeValue(e, "email")}
                        />
                        <label
                          htmlFor="email"
                          className={this.state.email != null ? "active" : ""}
                        >
                          Email
                        </label>
                        {this.state.email_error_text && (
                          <div className="error--text">
                            {this.state.email_error_text}
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="row">
                      <div className="col m12">
                        <div className="col s10  offset-s1">
                          <button
                            className={this.submitClasses()}
                            type="button"
                            name="action"
                            onClick={e => this.login(e)}
                          >
                            Log in
                          </button>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  
  function mapStateToProps(state) {
    const { account } = state;
    return {
      account
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators(authActions, dispatch);
  }
  
  const connectedRegisterPage = connect(
    mapStateToProps,
    mapDispatchToProps
  )(LoginView);
  export { connectedRegisterPage as LoginView };
  