Ajout page d'authentification

frontend/src/actions/auth.actions.js

@@ -0,0 +1,31 @@
+export const LOGIN_REQUEST = 'LOGIN_REQUEST'
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
+export const LOGIN_FAILURE = 'LOGIN_FAILURE';
+
+export function login(username, password) {
+    return { type: LOGIN_REQUEST, username, password }
+}
+
+export function loginFailure(username, error) {
+    return { type: LOGIN_FAILURE, username, error }
+}
+
+export function loginSuccess(username) {
+    return { type: LOGIN_SUCCESS, username }
+}
+
+export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'
+export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
+export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';
+
+export function logout(username, password) {
+    return { type: LOGOUT_REQUEST, username, password }
+}
+
+export function logoutFailure(username, error) {
+    return { type: LOGOUT_FAILURE, username, error }
+}
+
+export function logoutSuccess(username) {
+    return { type: LOGOUT_SUCCESS, username }
+}

frontend/src/app.js

@@ -3,6 +3,7 @@ import { hot } from 'react-hot-loader'
 import { HashRouter } from 'react-router-dom' // ou BrowserRouter
 import { Route, Switch, Redirect } from 'react-router'
 import HomePage from './pages/home';
+import { ConnectedLoginPage as LoginPage } from './pages/login';
 
 class App extends Component {
   render () {
@@ -10,6 +11,7 @@ class App extends Component {
     <Fragment>
       <HashRouter>
         <Switch>
+          <Route path='/login' exact component={LoginPage} />
           <Route path='/home' exact component={HomePage} />
           <Route component={() => <Redirect to="/home" />} />
         </Switch>

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);

frontend/src/reducers/session.reducers.js

@@ -0,0 +1,24 @@
+import { LOGIN_SUCCESS } from "../actions/auth.actions";
+
+const initialState = {
+    isLoggedIn: false,
+    user: null,
+};
+
+export function sessionReducer(state = initialState, action) {
+    switch(action.type) {
+        case LOGIN_SUCCESS:
+                return handleLoginSuccess(state, action);
+    };
+    return state;
+}
+
+function handleLoginSuccess(state, action) {
+    return {
+        ...state.user,
+        isLoggedIn: true,
+        user: {
+            username: action.username,
+        },
+    }
+};

frontend/src/sagas/auth.sagas.js

@@ -0,0 +1,33 @@
+import { call, put } from 'redux-saga/effects';
+import { loginFailure, loginSuccess } from '../actions/auth.actions';
+
+export function* loginSaga(action) {
+    let result;
+    try {
+        result = yield call(doLogin, action.username, action.password);
+    } catch(err) {
+        yield put(loginFailure(action.username, err));
+    }
+
+    if ('error' in result) {
+        yield put(loginFailure(action.username, result.error));
+        return
+    }
+
+    yield put(loginSuccess(action.username));
+}
+
+function doLogin(username, password) {
+    return fetch('http://localhost:8001/api/v1/login', {
+        method: 'POST',
+        body: JSON.stringify({
+            username: username,
+            password: password
+        }),
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        mode: 'cors',
+        credentials: 'include'
+    }).then(res => res.json())
+}

frontend/src/sagas/root.js

@@ -1,7 +1,9 @@
 import { all, takeLatest } from 'redux-saga/effects';
+import { LOGIN_REQUEST } from '../actions/auth.actions';
+import { loginSaga}  from './auth.sagas';
 
 export default function* rootSaga() {
   yield all([
-    
+    takeLatest(LOGIN_REQUEST, loginSaga),
   ]);
 }

frontend/src/store/store.js

@@ -1,11 +1,12 @@
 import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
 import createSagaMiddleware from 'redux-saga'
 import rootSaga from '../sagas/root'
+import { sessionReducer } from '../reducers/session.reducers';
 
 const sagaMiddleware = createSagaMiddleware()
 
 const rootReducer = combineReducers({
-  // Ajouter vos reducers ici
+  session: sessionReducer,
 });
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;