import React from 'react';

export default class Login extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
    };

    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleLogin = this.handleLogin.bind(this);
  }

  render() {
    return (
      <div className="Login-Component">
        <form onSubmit={this.handleLogin}>
          <fieldset>
            <legend>Login</legend>

            <label for="username">Username:</label>
            <input id="username" name="username" type="text"
              value={this.state.username}
              onChange={this.handleUsernameChange} />
            <label for="password">Password:</label>
            <input id="password" name="password" type="password"
              value={this.state.password}
              onChange={this.handlePasswordChange} />

            <input type="submit" value="Submit" />
          </fieldset>
        </form>
      </div>
    );
  }

  handleUsernameChange(event) {
    this.setState((state, props) => ({
      username: event.target.value
    }));
  }

  handlePasswordChange(event) {
    this.setState((state, props) => ({
      password: event.target.value
    }));
  }

  handleLogin(event) {
    this.props.onChange({ username: this.state.username, password: this.state.password });
    event.preventDefault();
  }
}