-
Notifications
You must be signed in to change notification settings - Fork 0
/
Login.jsx
107 lines (92 loc) · 2.75 KB
/
Login.jsx
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React from 'react';
import axios from 'axios';
import { Button, FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import './Login.css';
const validEmailRegex = RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);
class Login extends React.Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: '',
errors: {}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentWillMount() {
return this.props.isLoggedIn ? this.redirect() : null
}
redirect = () => {
this.props.history.push('/')
}
handleChange(event) {
event.preventDefault();
const { name, value } = event.target;
this.setState({ [name]: value });
let errors = this.state.errors;
}
handleSubmit(event) {
event.preventDefault();
this.setState({
errors: {}
})
const user = {
email: this.state.email.toLowerCase(),
password: this.state.password
}
axios.post('/api/login', { user: user }, { withCredentials: true })
.then(({ data }) => {
if ('errors' in data) {
this.setState( { errors: data.errors } )
} else {
this.props.handleLogin(data)
this.redirect()
}
})
.catch(errs => { console.log(errs) })
}
render() {
const { email, password, errors } = this.state;
const { checkedLogin, isLoggedIn } = this.props;
const isButtonEnabled = validEmailRegex.test(email) && email.length > 0 && password.length > 0;
let alert;
if (checkedLogin && isLoggedIn) {
this.props.history.push('/');
}
if (Object.keys(errors).length > 0) {
alert =
<div className='alert alert-danger' role='alert'>
{Object.keys(errors).map((key, _) => (
<div>{errors[key]}</div>
))}
</div>;
}
return (
<div className='login'>
<h1>Log In</h1>
<form onSubmit={this.handleSubmit}>
{alert}
<FormGroup controlId='email' bsSize='large'>
<FormLabel>Email</FormLabel>
<FormControl
name='email'
type='email'
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId='password' bsSize='large'>
<FormLabel>Password</FormLabel>
<FormControl
name='password'
type='password'
onChange={this.handleChange}
/>
</FormGroup>
<Button block disabled={!isButtonEnabled} bsSize='large' type='submit'>Log In</Button>
</form>
</div>
);
}
}
export default Login