Implemented session timeout modal

TIER · Jun 3, 2021 · 7b6583f · 7b6583f
1 parent fc4e141
commit 7b6583f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 deletions.
diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
@@ -524,6 +524,9 @@ message.invalid-regex-pattern=Invalid Regular Expression
 
 message.invalid-signing=Unless the response or the assertions are signed, SAML security is compromised  and the service should reject the SAML response. (If it doesn\u0027t, investigate, as that is serious unless the HTTP-Artifact binding is in use.)
 
+message.session-timeout-heading=Session timed out
+message.session-timeout-body=Your session has timed out. Please login again.
+
 tooltip.entity-id=Entity ID
 tooltip.service-provider-name=Service Provider Name (Dashboard Display Only)
 tooltip.force-authn=Disallows use (or reuse) of authentication results and login flows that don\u0027t provide a real-time proof of user presence in the login process

diff --git a/ui/public/index.html b/ui/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta charset="utf-8">
     <title>Shibboleth IDP UI</title>
     <base href="/">

diff --git a/ui/src/app/App.js b/ui/src/app/App.js
@@ -25,10 +25,14 @@ import { NewSource } from './metadata/new/NewSource';
 import { NewProvider } from './metadata/new/NewProvider';
 import { Filter } from './metadata/Filter';
 import { Contention } from './metadata/contention/ContentionContext';
+import { SessionModal } from './core/user/SessionModal';
+import Button from 'react-bootstrap/esm/Button';
 
 
 function App() {
 
+    const [showTimeout, setShowTimeout] = React.useState();
+
     const httpOptions = {
         redirect: 'manual',
         interceptors: {
@@ -37,13 +41,13 @@ function App() {
 
                 return options;
             },
-            /*response: async ({response}) => {
+            response: async ({response}) => {
                 if (response.type === "opaqueredirect") {
-                    // window.location.reload();
-                } else {
-                    return response;
+                    setShowTimeout(true);
                 }
-            }*/
+
+                return response;
+            }
         }
     };
 
@@ -53,6 +57,9 @@ function App() {
                 <Notifications>
                     <UserProvider>
                         <I18nProvider>
+                            <SessionModal show={showTimeout}>
+                                <Button variant="primary" onClick={() => window.location.reload()}>Log in</Button>
+                            </SessionModal>
                             <Contention>
                                 <UserConfirmation>
                                     {(message, confirm, confirmCallback, setConfirm, getConfirmation) =>

diff --git a/ui/src/app/core/user/SessionModal.js b/ui/src/app/core/user/SessionModal.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Modal from 'react-bootstrap/Modal';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import Translate from '../../i18n/components/translate';
+
+export function SessionModal({ show, children }) {
+
+    return (
+        <>
+            <Modal show={show}>
+                <Modal.Header><Translate value="message.session-timeout-heading">Session timed out</Translate></Modal.Header>
+                <Modal.Body className="d-flex align-content-center">
+                    <FontAwesomeIcon className="text-danger mr-4" size="4x" icon={faExclamationTriangle} />
+                    <p className="text-danger font-weight-bold mb-0">
+                        <Translate value="message.session-timeout-body">Your session has timed out. Please login again.</Translate>
+                    </p>
+                </Modal.Body>
+                <Modal.Footer>
+                    {children}
+                </Modal.Footer>
+            </Modal>
+        </>
+    );
+}