import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../actions/actions';

class Login extends Component {
  onSubmit = (e) => {
    e.preventDefault();
    this.props.login(this.state.username, this.state.password);
  }

  render() {
    return (
      <form onSubmit={this.onSubmit} className="login-form">
        <div className="login-header">
            blueprint Login
        </div>
        <div className="form-row">
          <label htmlFor="username">
              Username:
            <input
              type="text"
              id="username"
              onChange={e => this.setState({ username: e.target.value })}
              required
            />
          </label>
          <label htmlFor="password">
              Password:
            <input
              type="password"
              id="password"
              onChange={e => this.setState({ password: e.target.value })}
              required
            />
          </label>
          <div className="submitWrapper">
            <button type="submit" className="login-button">
                Login
            </button>
          </div>
        </div>
      </form>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => {
      return dispatch(login(username, password));
    }
  };
}

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