Feat logout modal (#542)

* feat: logout modal

Autologout: logout to currentPage and display Modal to reconnect

* build: bumb version to 2.4.17-rc1

* build: bumb version to 2.4.17

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stromae",
-  "version": "2.4.16",
+  "version": "2.4.17",
   "description": "Web application for the management of questionnaires powered by Lunatic",
   "repository": {
     "type": "git",

src/components/auth/hoc/hoc.js

@@ -1,21 +1,16 @@
+import { LogoutModal } from 'components/modals/logout';
 import { useOidc } from 'utils/oidc';
 
-const secure = (WrappedComponent) => {
+export const secure = (WrappedComponent) => {
   const Component = (props) => {
     const oidc = useOidc();
-    const { isUserLoggedIn, login } = oidc;
+    const { isUserLoggedIn } = oidc;
     const { otherProps } = props;
 
     if (isUserLoggedIn) {
       return <WrappedComponent {...otherProps} />;
-    }
-    login({
-      doesCurrentHrefRequiresAuth: true,
-    });
-    return null;
+    } else return <LogoutModal />;
   };
 
   return Component;
 };
-
-export default secure;

src/components/auth/hoc/index.js

@@ -1 +1 @@
-export { default } from './hoc';
+export { secure } from './hoc';

src/components/modals/logout/index.js

@@ -0,0 +1 @@
+export { default as LogoutModal } from './logout';

src/components/modals/logout/logout.js

@@ -0,0 +1,40 @@
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { buttonDictionary, errorDictionary } from 'i18n';
+import { useOidc } from 'utils/oidc';
+import { Button } from '../../designSystem';
+
+const LogoutModal = () => {
+  const { isUserLoggedIn, login: oidcLogin } = useOidc();
+
+  const login = () => oidcLogin({ doesCurrentHrefRequiresAuth: true });
+
+  return (
+    <Dialog
+      open={!isUserLoggedIn}
+      disableEscapeKeyDown
+      aria-labelledby='alert-dialog-slide-title'
+      aria-describedby='alert-dialog-slide-description'
+    >
+      <DialogTitle id='alert-dialog-slide-title'>
+        {errorDictionary.getErrorLogOffTitle}
+      </DialogTitle>
+      <DialogContent id='alert-dialog-slide-description'>
+        <DialogContentText>
+          {errorDictionary.getErrorLogOffDetails1}
+        </DialogContentText>
+        <DialogContentText>
+          {errorDictionary.getErrorLogOffDetails2}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={login}>{buttonDictionary.reconnect}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default LogoutModal;

src/components/router/router.js

@@ -1,7 +1,7 @@
+import { secure } from 'components/auth/hoc';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { environment } from 'utils/read-env-vars';
 import { READ_ONLY } from '../../utils/constants';
-import secure from '../auth/hoc/hoc';
 import { OrchestratorManager } from '../orchestrator/manager';
 import { Visualizer } from '../orchestrator/visualizer';
 import { NotFound } from '../pages';

src/i18n/buttonMessage.js

@@ -26,6 +26,7 @@ const buttonMessage = {
     en: `Go to the first page`,
   },
   visualize: { fr: `Visualiser`, en: `Visualize` },
+  reconnect: { fr: `Se reconnecter`, en: `Reconnect` },
 };
 
 export default buttonMessage;

src/i18n/errorMessage.js

@@ -1,4 +1,16 @@
 const errorMessage = {
+  getErrorLogOffTitle: {
+    fr: 'Vous avez été déconnecté',
+    en: 'You have been logged out',
+  },
+  getErrorLogOffDetails1: {
+    fr: 'Pour des raisons de sécurité, vous avez été déconnecté pour inactivité.',
+    en: 'For security reasons, you have been logged out for inactivity.',
+  },
+  getErrorLogOffDetails2: {
+    fr: 'Pour continuer à remplir le questionnaire, veuillez vous reconnecter.',
+    en: 'To continue completing the questionnaire, please log in again..',
+  },
   getError401: {
     fr: 'Vous semblez avoir été déconnecté.',
     en: 'Changing the sequence',

src/utils/oidc/index.js

@@ -35,6 +35,7 @@ const dummyOidc = {
     refreshTokenExpirationTime: null,
     accessTokenExpirationTime: Date.now() + 60 * 60 * 1000,
   },
+  login: () => window.location.reload(),
   getTokens: () => ({
     accessToken: null,
     idToken: null,
@@ -83,7 +84,7 @@ prOidc.then((oidc) => {
     clearTimeout(timer);
 
     timer = setTimeout(async () => {
-      await oidc.logout({ redirectTo: 'specific url', url: getLogoutUrl() });
+      await oidc.logout({ redirectTo: 'current page' });
     }, getDelayExpriationinMs());
   };