From d48ac798a59407b6fbf81b3c0a8c290ac7f87d5b Mon Sep 17 00:00:00 2001 From: Tariq Soliman Date: Mon, 24 Jul 2023 15:47:41 -0700 Subject: [PATCH 1/3] #401 Main site timeout notification part 1 --- src/css/mmgisUI.css | 2 +- src/essence/Ancillary/Login/Login.css | 18 +++++++++- src/essence/Ancillary/Login/Login.js | 26 ++++++++++++++- .../UserInterface_/LayerUpdatedControl.css | 2 +- src/pre/RefreshAuth.js | 33 +++++++++---------- 5 files changed, 59 insertions(+), 22 deletions(-) diff --git a/src/css/mmgisUI.css b/src/css/mmgisUI.css index 43e48385..809db950 100644 --- 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 index e8b0e176..7cf1cdf2 100644 --- 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 index b495f465..ec99b795 100644 --- 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 index 9ca71f08..78f37f8f 100644 --- 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 index b58c8443..782282c8 100644 --- 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 + }
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() + - '
Login again to renew
' - if (append) document.body.appendChild(elm) - } - - if (result.authenticated) { if ( mmgisglobal.lastInteraction + _refreshAuth_interactedPast <= From b2e2ce068772c84429372f7e9833722a6d8d5b74 Mon Sep 17 00:00:00 2001 From: Tariq Soliman Date: Mon, 24 Jul 2023 16:22:02 -0700 Subject: [PATCH 2/3] #401 Main site timeout notification part 2 --- src/essence/Ancillary/Login/Login.js | 6 +++--- src/pre/RefreshAuth.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/essence/Ancillary/Login/Login.js b/src/essence/Ancillary/Login/Login.js index ec99b795..ee9b5d8d 100644 --- a/src/essence/Ancillary/Login/Login.js +++ b/src/essence/Ancillary/Login/Login.js @@ -90,7 +90,6 @@ var Login = { Login.loginBar .append('div') - .attr('class', 'attention') .attr('id', 'loginUser') .style('text-align', 'center') .style('font-size', '12px') @@ -117,8 +116,9 @@ var Login = { else window._tippyLoginUser = tippy('#loginUser', { content: Login.username, - placement: 'bottom', + placement: 'bottom-end', theme: 'blue', + allowHTML: true, }) } @@ -560,7 +560,7 @@ function loginSuccess(data, ignoreError) { else window._tippyLoginUser = tippy('#loginUser', { content: Login.username, - placement: 'bottom', + placement: 'bottom-end', theme: 'blue', allowHTML: true, }) diff --git a/src/pre/RefreshAuth.js b/src/pre/RefreshAuth.js index 782282c8..0d76af12 100644 --- a/src/pre/RefreshAuth.js +++ b/src/pre/RefreshAuth.js @@ -58,7 +58,7 @@ if (mmgisglobal.SERVER == 'node' && mmgisglobal.AUTH == 'csso') { if (window._tippyLoginUser && window._tippyLoginUser[0]) window._tippyLoginUser[0].setContent(content) if ( - result.exp - now <= 1000 && + result.exp - now <= _refreshAuth_expiringLessThan && document.getElementById('loginUser') != null ) { document From a6d4906b2569a5cbc7948f5751614816a991aa19 Mon Sep 17 00:00:00 2001 From: Tariq Soliman Date: Mon, 24 Jul 2023 16:45:59 -0700 Subject: [PATCH 3/3] #401 Main site timeout notification - warn at 20 min --- src/pre/RefreshAuth.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pre/RefreshAuth.js b/src/pre/RefreshAuth.js index 0d76af12..40c1bffb 100644 --- a/src/pre/RefreshAuth.js +++ b/src/pre/RefreshAuth.js @@ -36,7 +36,7 @@ if (mmgisglobal.SERVER == 'node' && mmgisglobal.AUTH == 'csso') { mmgisglobal.lastInteraction = Math.floor(Date.now() / 1000) var _refreshAuth_checkEvery = 60000 * 10 //milliseconds - var _refreshAuth_expiringLessThan = 60 * 11 //seconds + var _refreshAuth_expiringLessThan = 60 * 20 //seconds var _refreshAuth_interactedPast = 60000 * 30 //milliseconds function ssorefresh() {