class SignInForm extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "",
      password: ""
    };
  }

  onChange(key, value) {
    this.setState({ [key]: value});
  }

  onSubmit(ev) {
    ev.preventDefault();
    alert (`You submitted username=${this.state.username} password=${this.state.password}`);
  }

  render() {
    const onUsernameChange = (ev) => this.onChange("username", ev.target.value);
    const onPasswordChange = (ev) => this.onChange("password", ev.target.value);
    return (
      <form onSubmit={(ev) => this.onSubmit(ev)}>
        <p>Username: <input name="username" type="text" value={this.state.username} onChange={onUsernameChange} /></p>
        <p>Password: <input name="password" type="password" value={this.state.password} onChange={onPasswordChange} /></p>
        <button type="submit">Sign In</button>
      </form>
    );
  }
}