57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
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();
|
|
}
|
|
}
|