Skip to content

🎨 [Frontend] UX Cookie Expiration Date #6066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 16, 2024
Merged

🎨 [Frontend] UX Cookie Expiration Date #6066

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bb22f13
expirationDate property
odeimaiz Jul 16, 2024
b755b62
update logic
odeimaiz Jul 16, 2024
59b2b70
minor
odeimaiz Jul 16, 2024
b7b492e
Merge branch 'master' into enh/cookie-expiration-tracker
odeimaiz Jul 16, 2024
aa48d11
minors
odeimaiz Jul 16, 2024
b0186e1
handle hibernation
odeimaiz Jul 16, 2024
1ebfbb5
1'
odeimaiz Jul 16, 2024
95cb112
Merge branch 'master' into enh/cookie-expiration-tracker
odeimaiz Jul 16, 2024
9b11154
Merge branch 'master' into enh/cookie-expiration-tracker
odeimaiz Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 41 additions & 22 deletions services/static-webserver/client/source/class/osparc/CookieExpirationTracker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,44 +20,60 @@ qx.Class.define("osparc.CookieExpirationTracker", {
type: "singleton",

statics: {
PERMANENT_WARN_IN_ADVANCE: 60*60, // Show Permanent Flash Message 1h in advance
LOG_OUT_BEFORE_EXPIRING: 60 // Log user out 1' in before expiring
PERMANENT_WARN_IN_ADVANCE: 2*60*60*1000, // Show Permanent Flash Message 2h in advance
LOG_OUT_BEFORE_EXPIRING: 60*1000 // Log user out 1' in before expiring
},

properties: {
expirationDate: {
check: "Date",
nullable: false,
init: null,
apply: "__startInterval"
}
},

members: {
__updateInterval: null,
__message: null,
__messageTimer: null,
__messageInterval: null,
__logoutTimer: null,

startTracker: function() {
const cookieMaxAge = osparc.store.StaticInfo.getInstance().getCookieMaxAge();
const cookieMaxAge = osparc.store.StaticInfo.getInstance().getCookieMaxAge(); // seconds
if (cookieMaxAge) {
const nowDate = new Date();
const expirationTime = nowDate.getTime() + cookieMaxAge*1000 - this.self().LOG_OUT_BEFORE_EXPIRING*1000;
const expirationDate = new Date(expirationTime);
const showMessageIn = Math.max(cookieMaxAge - this.self().PERMANENT_WARN_IN_ADVANCE, 0);
this.__messageTimer = setTimeout(() => {
const willExpireIn = parseInt((expirationDate - nowDate)/1000);
this.__displayFlashMessage(willExpireIn);
}, showMessageIn*1000);

const logOutIn = Math.max(cookieMaxAge - this.self().LOG_OUT_BEFORE_EXPIRING, 0);
this.__logoutTimer = setTimeout(() => this.__logoutUser(), logOutIn*1000);
const expirationDateMilliseconds = nowDate.getTime() + cookieMaxAge*1000;
this.setExpirationDate(new Date(expirationDateMilliseconds));
}
},

stopTracker: function() {
if (this.__messageTimer) {
clearTimeout(this.__messageTimer);
}
if (this.__logoutTimer) {
clearTimeout(this.__logoutTimer);
if (this.__updateInterval) {
clearInterval(this.__updateInterval);
}

this.__removeFlashMessage();
},

__startInterval: function() {
this.__checkTimes();
// check every 1' if the countdown routine needs to be started
this.__updateInterval = setInterval(() => this.__checkTimes(), 60*1000);
},

__checkTimes: function() {
const nowDate = new Date();
const expirationDate = this.getExpirationDate();
if (nowDate.getTime() + this.self().PERMANENT_WARN_IN_ADVANCE > expirationDate.getTime()) {
this.__removeFlashMessage();
this.__displayFlashMessage(parseInt((expirationDate.getTime() - nowDate.getTime())/1000));
}
if (nowDate.getTime() + this.self().LOG_OUT_BEFORE_EXPIRING > expirationDate.getTime()) {
this.__logoutUser();
}
},

// FLASH MESSAGE //
__displayFlashMessage: function(willExpireIn) {
const updateFlashMessage = () => {
if (willExpireIn <= 0) {
Expand All @@ -68,7 +84,8 @@ qx.Class.define("osparc.CookieExpirationTracker", {
this.__updateFlashMessage(willExpireIn);
willExpireIn--;
};
this.__messageInterval = setInterval(updateFlashMessage, 1000);
updateFlashMessage();
this.__messageInterval = setInterval(updateFlashMessage, 1000); // update every second
},

__removeFlashMessage: function() {
Expand All @@ -82,15 +99,17 @@ qx.Class.define("osparc.CookieExpirationTracker", {
}
},

__updateFlashMessage: function(timeoutSec = 1000) {
__updateFlashMessage: function(timeoutSec) {
const timeout = osparc.utils.Utils.formatSeconds(timeoutSec);
const text = qx.locale.Manager.tr(`Your session will expire in ${timeout}.<br>Please log out and log in again.`);
if (this.__message === null) {
this.__message = osparc.FlashMessenger.getInstance().logAs(text, "WARNING", timeoutSec*1000);
this.__message.getChildControl("closebutton").exclude();
} else {
this.__message.setMessage(text);
}
},
// /FLASH MESSAGE //

__logoutUser: function() {
const reason = qx.locale.Manager.tr("Session expired");
Expand Down
Loading