Ajout page d'authentification

frontend/src/pages/login.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react'
+import 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>
+            <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);