Turn login div into form to allow using enter
This commit is contained in:
parent
6bc6a08c83
commit
9ee0e09a5e
@ -30,7 +30,8 @@ class Login extends Component {
|
|||||||
|
|
||||||
inputChanged = event => this.setState({ [event.target.name]: event.target.value })
|
inputChanged = event => this.setState({ [event.target.name]: event.target.value })
|
||||||
|
|
||||||
login = async () => {
|
login = async evt => {
|
||||||
|
evt.preventDefault()
|
||||||
this.setState({ loading: true })
|
this.setState({ loading: true })
|
||||||
const resp = await api.login(this.state.username, this.state.password)
|
const resp = await api.login(this.state.username, this.state.password)
|
||||||
if (resp.token) {
|
if (resp.token) {
|
||||||
@ -53,17 +54,17 @@ class Login extends Component {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
return <div className="login-wrapper">
|
return <div className="login-wrapper">
|
||||||
<div className={`login ${this.state.error && "errored"}`}>
|
<form className={`login ${this.state.error && "errored"}`} onSubmit={this.login}>
|
||||||
<h1>Maubot Manager</h1>
|
<h1>Maubot Manager</h1>
|
||||||
<input type="text" placeholder="Username" value={this.state.username}
|
<input type="text" placeholder="Username" value={this.state.username}
|
||||||
name="username" onChange={this.inputChanged}/>
|
name="username" onChange={this.inputChanged}/>
|
||||||
<input type="password" placeholder="Password" value={this.state.password}
|
<input type="password" placeholder="Password" value={this.state.password}
|
||||||
name="password" onChange={this.inputChanged}/>
|
name="password" onChange={this.inputChanged}/>
|
||||||
<button onClick={this.login}>
|
<button onClick={this.login} type="submit">
|
||||||
{this.state.loading ? <Spinner/> : "Log in"}
|
{this.state.loading ? <Spinner/> : "Log in"}
|
||||||
</button>
|
</button>
|
||||||
{this.state.error && <div className="error">{this.state.error}</div>}
|
{this.state.error && <div className="error">{this.state.error}</div>}
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user