121 lines
3.1 KiB
JavaScript
121 lines
3.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {
|
|
Col,
|
|
Row,
|
|
Button,
|
|
Form,
|
|
FormGroup,
|
|
Label,
|
|
Input,
|
|
Alert,
|
|
} from 'reactstrap';
|
|
import { FaSignInAlt } from 'react-icons/fa';
|
|
import { Cookies } from 'react-cookie';
|
|
import API, { setAuthorization } from './Api';
|
|
|
|
class Login extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.signIn = this.signIn.bind(this);
|
|
this.handleChange = this.handleChange.bind(this);
|
|
|
|
this.state = {
|
|
email: '',
|
|
password: '',
|
|
message: '',
|
|
};
|
|
}
|
|
|
|
signIn(event) {
|
|
event.preventDefault(); // Let's stop this event.
|
|
event.stopPropagation(); // Really this time.
|
|
API.post('login', {}, {
|
|
auth: {
|
|
username: this.state.email,
|
|
password: this.state.password,
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (response.status === 200) {
|
|
const cookies = new Cookies();
|
|
const Authorization = `Basic ${new Buffer(`${this.state.email}:${this.state.password}`).toString('base64')}`;
|
|
|
|
cookies.set('cfa_bo', Authorization);
|
|
setAuthorization(Authorization);
|
|
this.setState({ message: '' });
|
|
this.props.history.push('/categories');
|
|
} else {
|
|
this.setState({ message: 'Mot de passe erroné !' });
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.setState({ message: 'Mot de passe erroné !' });
|
|
});
|
|
}
|
|
|
|
handleChange(event) {
|
|
const target = event.target;
|
|
const value = target.type === 'checkbox' ? target.checked : target.value;
|
|
const name = target.name;
|
|
|
|
this.setState({
|
|
[name]: value,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Row style={{ marginTop: '64px' }}>
|
|
<Col
|
|
className="Login"
|
|
xs="12"
|
|
sm={{ size: 4, offset: 4 }}
|
|
>
|
|
<h2>RodiVert :: Interface de saisie</h2>
|
|
<img src="/logo.png" alt="RodiVert" style={{ margin: '22px' }} />
|
|
<Form onSubmit={this.signIn}>
|
|
<FormGroup row>
|
|
<Label for="email" sm={4}>Email</Label>
|
|
<Col sm={8}>
|
|
<Input
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
placeholder="Adresse mail"
|
|
onChange={this.handleChange}
|
|
/>
|
|
</Col>
|
|
</FormGroup>
|
|
<FormGroup row>
|
|
<Label for="password" sm={4}>Mot de passe</Label>
|
|
<Col sm={8}>
|
|
<Input
|
|
type="password"
|
|
name="password"
|
|
id="password"
|
|
placeholder="Mot de passe"
|
|
onChange={this.handleChange}
|
|
/>
|
|
</Col>
|
|
</FormGroup>
|
|
{this.state.message !== ''
|
|
? (
|
|
<Alert color="danger">
|
|
{this.state.message}
|
|
</Alert>
|
|
) : (null)}
|
|
<Button color="primary">
|
|
<FaSignInAlt />
|
|
{' '}
|
|
Connexion
|
|
</Button>
|
|
</Form>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Login;
|