import React, { Component } from 'react';

import '../common/styles.css';

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
    }
  }

  handleInputChange = (e) => {
    const { name, value } = e.target;

    if (name) {
      this.setState({ [name]: value });
    }
  }

  render() {
    return (
      <div className="login-form">
        <div className="container">
          <div className="row">
            <div className="col-sm-9 col-md-7 col-lg-5 mx-auto">
              <div className="card card-signin my-5">
                <div className="card-body">
                  <h5 className="card-title text-center">Sign in</h5>
                  <form className="form-signin">
                    <div className="form-label-group">
                      <label for="username">Username</label>
                      <input name="username" id="username" type="text" value={this.state.username} onChange={this.handleInputChange} placeholder="Username" required autoFocus className="form-control" />
                    </div>

                    <div className="form-label-group">
                      <label for="inputPassword">Password</label>
                      <input name="password" type="password" id="inputPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={this.handleInputChange} required />
                    </div>

                    <button className="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Login;