mirror of
https://git.sr.ht/~emersion/gamja
synced 2024-11-14 11:15:13 -05:00
c547a32282
This is one of the differences between React and Preact: https://preactjs.com/guide/v10/differences-to-react/#use-oninput-instead-of-onchange Closes: https://todo.sr.ht/~emersion/gamja/128
51 lines
1.1 KiB
JavaScript
51 lines
1.1 KiB
JavaScript
import { html, Component } from "../lib/index.js";
|
|
|
|
export default class NetworkForm extends Component {
|
|
state = {
|
|
username: "",
|
|
password: "",
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleInput = this.handleInput.bind(this);
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
|
|
if (props.username) {
|
|
this.state.username = props.username;
|
|
}
|
|
}
|
|
|
|
handleInput(event) {
|
|
let target = event.target;
|
|
let value = target.type == "checkbox" ? target.checked : target.value;
|
|
this.setState({ [target.name]: value });
|
|
}
|
|
|
|
handleSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
this.props.onSubmit(this.state.username, this.state.password);
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
|
|
<label>
|
|
Username:<br/>
|
|
<input type="username" name="username" value=${this.state.username} required/>
|
|
</label>
|
|
<br/><br/>
|
|
|
|
<label>
|
|
Password:<br/>
|
|
<input type="password" name="password" value=${this.state.password} required autofocus/>
|
|
</label>
|
|
<br/><br/>
|
|
|
|
<button>Login</button>
|
|
</form>
|
|
`;
|
|
}
|
|
}
|