-
Notifications
You must be signed in to change notification settings - Fork 141
/
LoginForm.js
47 lines (39 loc) · 1.31 KB
/
LoginForm.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React, {Component} from 'react'
import { Alert, Button, Jumbotron, Form } from 'reactstrap';
import TextInput from './TextInput'
export default class LoginForm extends Component {
state = {
username: '',
password: ''
}
handleInputChange = (event) => {
const target = event.target;
const value = target.type ===
'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
componentDidMount() {
this.primaryInput.focus();
}
onSubmit = (event) => {
event.preventDefault()
this.props.onSubmit(this.state.username, this.state.password)
}
render() {
const {errors} = this.props
return (
<Jumbotron className="container">
<Form onSubmit={this.onSubmit}>
<h1>Authentication</h1>
{errors.non_field_errors?<Alert color="danger">{errors.non_field_errors}</Alert>:""}
<TextInput name="username" label="Username" error={errors.username} getRef={input => this.primaryInput = input} onChange={this.handleInputChange}/>
<TextInput name="password" label="Password" error={errors.password} type="password" onChange={this.handleInputChange}/>
<Button type="submit" color="primary" size="lg">Log In</Button>
</Form>
</Jumbotron>
)
}
}