import React, { useState } from 'react';

function Login(props) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleLogin = (event) => {
    props.onChange({ username: username, password: password });
    event.preventDefault();
  };

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

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

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

export default Login