Session Timeout

src/App.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter } from "react-router-dom";
 import { Helmet } from 'react-helmet';
-
+import SessionTimeoutDialog from '../Common/ViewSettings/SessionTimeoutDialog';
 
 import ErrorBoundary from './pages/Fallback/ErrorBoundary';
 import Shell from './components/Shell/Shell';
@@ -13,6 +13,7 @@ import CenteredContent from './components/Layout/CenteredContent';
 
 function App() {
   const { t } = useTranslation();
+  const sessionDialogRef = useRef(null);
 
   return (
     <BrowserRouter>
@@ -23,6 +24,7 @@ function App() {
         <CenteredContent>
           <Routes />
         </CenteredContent>
+        <SessionTimeoutDialog dialogRef={sessionDialogRef} />
       </ErrorBoundary>
     </BrowserRouter>
   );

src/components/InformationDialog/InformationDialog.js

@@ -0,0 +1,139 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { spacing } from '@ui5/webcomponents-react-base';
+import { Icon } from '@ui5/webcomponents-react/lib/Icon';
+import { Button } from '@ui5/webcomponents-react/lib/Button';
+import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
+import { Dialog } from '@ui5/webcomponents-react/lib/Dialog';
+import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
+import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
+import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
+import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
+import { TextWrapper } from '../../util/Layout'
+import Constants from '../../util/Constants';
+
+const _getHeaderIcon = type => {
+  switch (type) {
+    case Type.Warning:
+      return _getHeaderWarningIcon();
+    case Type.Error:
+      return _getHeaderErrorIcon();
+    default:
+      return _getHeaderInfoIcon();
+  }
+};
+
+const _getHeaderWarningIcon = () => {
+  return (
+    <Icon
+      name="message-warning"
+      style={{
+        width: '1.5rem',
+        height: '1.5rem',
+        color: '#feb60a'
+      }}
+    />
+  );
+};
+
+const _getHeaderErrorIcon = () => {
+  return (
+    <Icon
+      name="message-error"
+      style={{
+        width: '1.5rem',
+        height: '1.5rem',
+        color: '#ff5254'
+      }}
+    />
+  );
+};
+
+const _getHeaderInfoIcon = () => {
+  return (
+    <Icon
+      name="message-information"
+      style={{
+        width: '1.5rem',
+        height: '1.5rem',
+        color: 'black'
+      }}
+    />
+  );
+};
+
+const _handleAvoidEscapeClosing = (avoidEscapeClose) => {
+  document.addEventListener('keydown', (e) => {
+    if (e.keyCode === Constants.KEYBOARD_KEYS.ESCAPE && avoidEscapeClose) {
+      e.stopPropagation();
+    }
+  }, true);
+};
+
+const InformationDialog = ({ dialogRef, avoidEscapeClose, headerText, innerText, closeButtonText, children, onClose, type }) => {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    _handleAvoidEscapeClosing(avoidEscapeClose);
+  }, []);
+
+  const _onClose = () => {
+    onClose && onClose();
+    if (dialogRef.current) {
+      dialogRef.current.close();
+    }
+  };
+
+  const _getFooter = () => {
+    return (
+      <FlexBox
+        alignItems={FlexBoxAlignItems.Center}
+        direction={FlexBoxDirection.RowReverse}
+        style={spacing.sapUiTinyMargin}
+      >
+        <Button design={ButtonDesign.Transparent} onClick={_onClose}>
+          {closeButtonText ? closeButtonText : t('app.generics.close')}
+        </Button>
+      </FlexBox>
+    );
+  };
+
+  const _getHeader = () => {
+    return (
+      <FlexBox
+        alignItems={FlexBoxAlignItems.Center}
+        justifyContent={FlexBoxJustifyContent.Center}
+        style={spacing.sapUiContentPadding}
+      >
+        {_getHeaderIcon(type)}
+        <TextWrapper style={spacing.sapUiTinyMarginBegin}>
+          {headerText}
+        </TextWrapper>
+      </FlexBox>
+    );
+  };
+
+  return (
+    <Dialog
+      ref={dialogRef}
+      slot="header"
+      header={_getHeader()}
+      footer={_getFooter()}
+      onAfterClose={_onClose}
+    >
+      <div style={{ ...spacing.sapUiContentPadding }}>
+        <FlexBox direction={FlexBoxDirection.Column}>
+          {innerText ? <TextWrapper>{innerText}</TextWrapper> : children}
+        </FlexBox>
+      </div>
+    </Dialog>
+  );
+};
+
+export default InformationDialog;
+
+export const Type = {
+  Warning: 'WARNING',
+  Error: 'ERROR',
+  Info: 'INFO'
+};

src/components/SessionTimeout/SessionTimeout.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import InformationDialog, { Type } from '../InformationDialog/InformationDialog';
+import Constants from '../../util/Constants';
+
+const SessionTimeoutDialog = ({ dialogRef }) => {
+  const { t } = useTranslation();
+  const TIMEOUT_MODE = {
+    type: Type.Error,
+    headerText: t('session.expired'),
+    closeButtonText: t('session.expired.button.reload'),
+    innerText: t('session.expired.text'),
+    onClose: () => window.location.reload()
+  };
+  const WARNING_MODE = {
+    type: Type.Warning,
+    headerText: t('session.warning.expired'),
+    closeButtonText: t('session.expired.button.close'),
+    innerText: t('session.warning.expired.text'),
+    onClose: null
+  };
+  const [options, setOptions] = useState(TIMEOUT_MODE);
+  const ACTIVITY_EVENTS = ['click', 'focus', 'blur', 'keyup', 'keydown', 'mousemove', 'scroll'];
+  let sessionIntervalCount = 1;
+
+  useEffect(() => {
+    handleUserActivity();
+  }, []);
+
+  useEffect(() => {
+    const sessionIntervalFinder = setInterval(() => {
+      if (sessionIntervalCount >= Constants.SESSION.REFRESH_WARNING && sessionIntervalCount < Constants.SESSION.REFRESH_LIMIT) {
+        setOptions(WARNING_MODE);
+        dialogRef.current.open();
+
+      } else if (sessionIntervalCount >= Constants.SESSION.REFRESH_LIMIT) {
+        clearInterval(sessionIntervalFinder);
+        setOptions(TIMEOUT_MODE);
+        dialogRef.current.open();
+      }
+
+      sessionIntervalCount++;
+    }, Constants.SESSION.TIMEOUT_INTERVAL);
+  }, []);
+
+  const handleUserActivity = () => {
+    for (let i = 0, len = ACTIVITY_EVENTS.length; i < len; i++) {
+      window.addEventListener(ACTIVITY_EVENTS[i], () => {
+        sessionIntervalCount = 0;
+      });
+    }
+  };
+
+  return (
+    <InformationDialog
+      avoidEscapeClose
+      dialogRef={dialogRef}
+      type={options.type}
+      onClose={options.onClose}
+      headerText={options.headerText}
+      closeButtonText={options.closeButtonText}
+      innerText={options.innerText} />
+  );
+};
+
+export default SessionTimeoutDialog;

src/hooks/useRequest.js

@@ -4,15 +4,13 @@ import UrlProvider from '../util/URLProvider';
 import Request from '../util/Request';
 import Constants from '../util/Constants';
 
-const FIVE_MINUTES_IN_MILLISECONDS = 1000 * 60 * 5;
-
 function useOperation(reactQueryKey, operation, urlKey, dataParam, config) {
   const { data, status } = useQuery(reactQueryKey, async () => {
     const url = UrlProvider.getUrl(urlKey);
     const res = await Request[operation](url, dataParam, config);
     return res.data;
   }, {
-    staleTime: FIVE_MINUTES_IN_MILLISECONDS
+    staleTime: Constants.REACT_QUERY.STALE_TIME
   });
 
   return { data, status };

src/locales/en/translation.json

@@ -8,5 +8,12 @@
   "page.error.alt": "Error",
   "page.notfound.text": "Hmmm, we could find this URL",
   "page.notfound.alt": "Not Found",
-  "page.fallback.reload.text": "Reload this page"
+  "page.fallback.reload.text": "Reload this page",
+  "session.expired": "Session Expired",
+  "session.expired.button.reload": "Reload",
+  "session.expired.text": "Your session has expired. Please reload to continue.",
+  "session.warning.expired": "Session Almost Expiring",
+  "session.expired.button.close": "Close",
+  "session.warning.expired.text": "If you not perform an action within 2 minutes, your session will expire.",
+  "app.generics.close": "Close"
 }

src/locales/pt/translation.json

@@ -8,5 +8,12 @@
   "page.error.alt": "Erro",
   "page.notfound.text": "Hmmm, não conseguimos encontrar esta página",
   "page.notfound.alt": "Não Encontrado",
-  "page.fallback.reload.text": "Recarregar"
+  "page.fallback.reload.text": "Recarregar",
+  "session.expired": "Sessão expirada",
+  "session.expired.button.reload": "Recarregar",
+  "session.expired.text": "Sua sessão expirou. Recarregue para continuar.",
+  "session.warning.expired": "Sessão quase expirada",
+  "session.expired.button.close": "Fechar",
+  "session.warning.expired.text": "Se você não efetuar uma ação nos próximos 2 minutos, a sua sessão irá expirar.",
+  "app.generics.close": "Fechar"
 }

src/util/Constants.js

@@ -7,13 +7,22 @@ export default {
     },
     KEYS: {
       GET_USER_LOGGED: 'GET_USER_LOGGED'
-    }
+    },
+    STALE_TIME: 1000 * 60 * 5
   },
   REQUEST: {
     GET: 'get',
     POST: 'get',
     PUT: 'put',
     PATCH: 'patch',
     DELETE: 'delete',
+  },
+  SESSION: {
+    TIMEOUT_INTERVAL: 60000,
+    REFRESH_LIMIT: 15,
+    REFRESH_WARNING: 13,
+  },
+  KEYBOARD_KEYS: {
+    ESCAPE: 27
   }
 };

src/util/Layout.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text } from '@ui5/webcomponents-react/lib/Text';
+
+export const TextWrapper = ({ children, isOnHeader, style }) => {
+  return (
+    <Text
+      tooltip={children}
+      wrapping
+      className={isOnHeader && 'text-header-color'}
+      style={{ ...style, lineHeight: '20px' }}
+    >
+      {children}
+    </Text>
+  );
+};