class LoginForm extends React.Component {

    state = { name: '', password: '' };

    handleNameChange(e) {
        this.setState({ name: e.target.value });
    }

    handlePasswordChange(e) {
        this.setState({ password: e.target.value });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        const name = this.state.name.trim();
        const password = this.state.password.trim();
        if (!name || !password) {
            return;
        }
        this.props.onUserSubmit({ name, password });
        this.setState({ name: '', password: '' });
    }


    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <h1>Login form</h1>
                <h4>Username:</h4>
                <input type="text" placeholder="Enter your name" onChange={this.handleNameChange.bind(this)} />
                <h4>Password:</h4>
                <input type="password" placeholder="Enter your password" onChange={this.handlePasswordChange.bind(this)} />
                <br />
                <br />
                <input type="submit" value="Login" name="Login" />
            </form>
            );
    }
}