67 lines
2.7 KiB
JavaScript
67 lines
2.7 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { ConnectedPage as Page } from './page';
|
|
import { login } from '../actions/auth.actions';
|
|
import { connect } from 'react-redux';
|
|
|
|
export function LoginPage({ dispatch, isLoggedIn, history }) {
|
|
|
|
const [ formData, setFormData ] = useState({username: '', password: ''});
|
|
const onUsernameChange = evt => setFormData({ ...formData, username: evt.target.value });
|
|
const onPasswordChange = evt => setFormData({ ...formData, password: evt.target.value });
|
|
|
|
const onSubmit = evt => {
|
|
evt.preventDefault();
|
|
const { username, password } = formData;
|
|
dispatch(login(username, password));
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isLoggedIn) history.push('/home');
|
|
}, [isLoggedIn]);
|
|
|
|
return (
|
|
<Page title="Login">
|
|
<div className="section">
|
|
<div className="columns">
|
|
<div className="column is-4 is-offset-4">
|
|
<div className="box">
|
|
<div className="field">
|
|
<label className="label">Nom d'utilisateur</label>
|
|
<div className="control">
|
|
<input
|
|
value={formData.username}
|
|
onChange={onUsernameChange}
|
|
type="text" className="input" />
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Mot de passe</label>
|
|
<div className="control">
|
|
<input
|
|
value={formData.password}
|
|
onChange={onPasswordChange}
|
|
className="input" type="password" />
|
|
</div>
|
|
</div>
|
|
<div className="field is-grouped is-grouped-right">
|
|
<p className="control">
|
|
<button onClick={onSubmit}
|
|
className="button is-primary">
|
|
Se connecter
|
|
</button>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
function mapStateToProps({ session }) {
|
|
return { isLoggedIn: session.isLoggedIn };
|
|
}
|
|
|
|
export const ConnectedLoginPage = connect(mapStateToProps)(LoginPage); |