Front: gestion de la déconnexion

frontend/src/actions/auth.actions.js

@@ -18,14 +18,14 @@ 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 logout() {
+    return { type: LOGOUT_REQUEST }
 }
 
-export function logoutFailure(username, error) {
-    return { type: LOGOUT_FAILURE, username, error }
+export function logoutFailure(error) {
+    return { type: LOGOUT_FAILURE, error }
 }
 
-export function logoutSuccess(username) {
-    return { type: LOGOUT_SUCCESS, username }
+export function logoutSuccess() {
+    return { type: LOGOUT_SUCCESS }
 }

frontend/src/app.js

@@ -6,6 +6,7 @@ import HomePage from './pages/home';
 import { ConnectedLoginPage as LoginPage } from './pages/login';
 import DashBoardClient from './pages/DashBoardClient';
 import DashBoardDev from './pages/DashBoardDev';
+import { ConnectedLogoutPage as LogoutPage } from './pages/logout';
 
 class App extends Component {
   render () {
@@ -14,6 +15,7 @@ class App extends Component {
       <HashRouter>
         <Switch>
           <Route path='/login' exact component={LoginPage} />
+          <Route path='/logout' exact component={LogoutPage} />
           <Route path='/home' exact component={HomePage} />
           <Route path='/dashboard-client' exact component={DashBoardClient} />
           <Route path='/dashboard-dev' exact component={DashBoardDev} />

frontend/src/pages/home.js

@@ -8,6 +8,7 @@ export default class HomePage extends React.PureComponent {
             <div className="section">
               <h1 className="title">Bienvenue sur PleaseWait !</h1>
               <h2 className="subtitle">Le gestionnaire de ticket simplifié.</h2>
+              <a href="#/logout">Se déconnecter</a>
             </div>
         </Page>
     );

frontend/src/pages/logout.js

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react'
+import { logout } from '../actions/auth.actions';
+import { connect } from 'react-redux';
+import { ConnectedPage as Page } from './page';
+
+export function LogoutPage({ dispatch, isLoggedIn, history }) {
+    useEffect(() => {
+        dispatch(logout());
+    }, []);
+    
+    useEffect(() => {
+        if (!isLoggedIn) history.push("/login");
+    }, [isLoggedIn]);
+
+    return (
+        <Page title="Déconnexion">
+            <div className="message is-info">
+                <div className="message-body">
+                    Déconnexion en cours...
+                </div>
+            </div>
+        </Page>
+    )
+}
+
+function mapStateToProps({ session }) {
+    return { isLoggedIn: session.isLoggedIn };
+}
+
+export const ConnectedLogoutPage = connect(mapStateToProps)(LogoutPage);

frontend/src/reducers/session.reducers.js

@@ -1,4 +1,4 @@
-import { LOGIN_SUCCESS } from "../actions/auth.actions";
+import { LOGIN_SUCCESS, LOGOUT_SUCCESS } from "../actions/auth.actions";
 
 const initialState = {
     isLoggedIn: false,
@@ -9,6 +9,8 @@ export function sessionReducer(state = initialState, action) {
     switch(action.type) {
         case LOGIN_SUCCESS:
                 return handleLoginSuccess(state, action);
+        case LOGOUT_SUCCESS:
+                return handleLogoutSuccess(state, action);
     };
     return state;
 }
@@ -22,3 +24,11 @@ function handleLoginSuccess(state, action) {
         },
     }
 };
+
+function handleLogoutSuccess(state, action) {
+    return {
+        ...state,
+        isLoggedIn: false,
+        user: null,
+    }
+};

frontend/src/sagas/auth.sagas.js

@@ -1,5 +1,5 @@
 import { call, put } from 'redux-saga/effects';
-import { loginFailure, loginSuccess } from '../actions/auth.actions';
+import { loginFailure, loginSuccess, logoutFailure, logoutSuccess } from '../actions/auth.actions';
 import { addMessage } from '../actions/message.actions';
 
 export function* loginSaga(action) {
@@ -35,3 +35,33 @@ function doLogin(username, password) {
         credentials: 'include'
     }).then(res => res.json())
 }
+
+export function* logoutSaga(action) {
+    let result;
+    try {
+        result = yield call(doLogout);
+    } catch(err) {
+        yield put(logoutFailure(err));
+        yield put(addMessage('danger', "Une erreur inconnue bloque le fonctionnement normal de l'application. Veuillez réessayer plus tard."));
+    }
+
+    if ('error' in result) {
+        yield put(logoutFailure(action.username, result.error));
+        const message = result.error.message ? result.error.message : result.error.toString();
+        yield put(addMessage('danger', message));
+        return
+    }
+
+    yield put(logoutSuccess(action.username));
+}
+
+function doLogout() {
+    return fetch('http://localhost:8001/api/v1/logout', {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        mode: 'cors',
+        credentials: 'include'
+    }).then(res => res.json())
+}

frontend/src/sagas/root.js

@@ -1,12 +1,13 @@
 import { all, takeLatest } from 'redux-saga/effects';
-import { LOGIN_REQUEST } from '../actions/auth.actions';
-import { loginSaga}  from './auth.sagas';
+import { LOGIN_REQUEST, LOGOUT_REQUEST } from '../actions/auth.actions';
+import { loginSaga, logoutSaga }  from './auth.sagas';
 import { PROJECT_USER_LIST, PROJECT_LIST } from '../actions/project';
 import { projectUserListSaga, projectListSaga } from './project';
 
 export default function* rootSaga() {
   yield all([
     takeLatest(LOGIN_REQUEST, loginSaga),
+    takeLatest(LOGOUT_REQUEST, logoutSaga),
     takeLatest(PROJECT_USER_LIST, projectUserListSaga),
     takeLatest(PROJECT_LIST, projectListSaga),
   ]);