#401 Main site timeout notification part 1

NASA-AMMOS · Jul 24, 2023 · d48ac79 · d48ac79
1 parent fec9c89
commit d48ac79
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 22 deletions.
diff --git a/src/css/mmgisUI.css b/src/css/mmgisUI.css
@@ -1580,7 +1580,7 @@ input::-webkit-inner-spin-button {
     cursor: default;
 }
 .mmgisToast.failure {
-    background-color: #a11717;
+    background-color: var(--color-r1);
 }
 
 /*spinner1*/

diff --git a/src/essence/Ancillary/Login/Login.css b/src/essence/Ancillary/Login/Login.css
@@ -5,7 +5,11 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(to top, rgba(29, 31, 32, 0.95), rgba(29, 31, 32, 0.9));
+    background: linear-gradient(
+        to top,
+        rgba(29, 31, 32, 0.95),
+        rgba(29, 31, 32, 0.9)
+    );
     z-index: 999999;
     opacity: 0;
     pointer-events: none !important;
@@ -156,3 +160,15 @@
 #forceSignupButton:hover {
     color: var(--color-mmgis);
 }
+#loginDiv #loginUser.attention {
+    animation: 0.8s attention ease infinite alternate;
+}
+
+@keyframes attention {
+    0% {
+        background: var(--color-r1);
+    }
+    100% {
+        background: var(--color-red);
+    }
+}
diff --git a/src/essence/Ancillary/Login/Login.js b/src/essence/Ancillary/Login/Login.js
@@ -4,6 +4,7 @@ import * as d3 from 'd3'
 import F_ from '../../Basics/Formulae_/Formulae_'
 import L_ from '../../Basics/Layers_/Layers_'
 import ToolController_ from '../../Basics/ToolController_/ToolController_'
+import tippy from 'tippy.js'
 
 import calls from '../../../pre/calls'
 
@@ -89,8 +90,8 @@ var Login = {
 
         Login.loginBar
             .append('div')
+            .attr('class', 'attention')
             .attr('id', 'loginUser')
-            .attr('title', Login.loggedIn ? Login.username : '')
             .style('text-align', 'center')
             .style('font-size', '12px')
             .style('font-weight', 'bold')
@@ -110,6 +111,17 @@ var Login = {
             .style('transition', 'opacity 0.2s ease-out')
             .html(Login.loggedIn ? Login.username[0] : '')
 
+        if (Login.loggedIn) {
+            if (window._tippyLoginUser && window._tippyLoginUser[0])
+                window._tippyLoginUser[0].setContent(Login.username)
+            else
+                window._tippyLoginUser = tippy('#loginUser', {
+                    content: Login.username,
+                    placement: 'bottom',
+                    theme: 'blue',
+                })
+        }
+
         //Show signup for admins
         if (
             window.mmgisglobal.AUTH === 'local' &&
@@ -541,6 +553,18 @@ function loginSuccess(data, ignoreError) {
                 background: Login.loggedIn ? 'var(--color-a)' : 'transparent',
             })
             .html(Login.username[0])
+
+        if (Login.loggedIn) {
+            if (window._tippyLoginUser && window._tippyLoginUser[0])
+                window._tippyLoginUser[0].setContent(Login.username)
+            else
+                window._tippyLoginUser = tippy('#loginUser', {
+                    content: Login.username,
+                    placement: 'bottom',
+                    theme: 'blue',
+                    allowHTML: true,
+                })
+        }
     } else {
         document.cookie = 'MMGISUser=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'
 

diff --git a/src/essence/Basics/UserInterface_/LayerUpdatedControl.css b/src/essence/Basics/UserInterface_/LayerUpdatedControl.css
@@ -33,7 +33,7 @@
     color: var(--color-a) !important;
 }
 .DISCONNECTED {
-    background: var(--color-red) !important;
+    background: var(--color-r1) !important;
     color: var(--color-f) !important;
 }
 .leaflet-control-update-layer-icon > .mdi-reload-alert,

diff --git a/src/pre/RefreshAuth.js b/src/pre/RefreshAuth.js
@@ -49,26 +49,23 @@ if (mmgisglobal.SERVER == 'node' && mmgisglobal.AUTH == 'csso') {
 
                 var now = Math.floor(Date.now() / 1000)
 
-                if (mmgisglobal.SHOW_AUTH_TIMEOUT) {
-                    var append = false
-
-                    var elm = document.getElementById('AUTH_TIMEOUT')
-                    if (elm == null) {
-                        elm = document.createElement('div')
-                        append = true
+                if (result.authenticated) {
+                    const content = `${
+                        result.sub
+                    }<br />Authentication expiring in ${(result.exp - now)
+                        .toString()
+                        .toHHMMSS()}`
+                    if (window._tippyLoginUser && window._tippyLoginUser[0])
+                        window._tippyLoginUser[0].setContent(content)
+                    if (
+                        result.exp - now <= 1000 &&
+                        document.getElementById('loginUser') != null
+                    ) {
+                        document
+                            .getElementById('loginUser')
+                            .classList.add('attention')
                     }
-                    elm.id = 'AUTH_TIMEOUT'
-                    elm.style.cssText =
-                        'position:fixed;left:225px;bottom:0px;z-index:11000;font-family:monospace;font-size:11px;color:#121626;'
-                    elm.innerHTML =
-                        'Authentication expiring in ' +
-                        (result.exp - now).toString().toHHMMSS() +
-                        '<div onclick="ssologin()" style="cursor:pointer;">Login again to renew</div>'
 
-                    if (append) document.body.appendChild(elm)
-                }
-
-                if (result.authenticated) {
                     if (
                         mmgisglobal.lastInteraction +
                             _refreshAuth_interactedPast <=