Dismissing the timeout dialog between tabs/windows

[jonathanhaglund]

I've been implementing your plugin today and I think I've run across an issue that is either a bug or an inherent browser problem, but I can't figure out which.

I used one of your examples as my reference implementation, stripping out the keepalive bits because my server side session management has its own timeout mechanism. Your cross-tab/window feature works perfectly for avoiding the popup, but when I dismiss it in one tab, it stays open in the other(s), and they eventually trigger the logout event.

This is my full code, which like I said is mostly the same as your example:

<script>
	(function ($) {
		var
			session = {
				//Logout Settings
				inactiveTimeout: 10000,     //(ms) The time until we display a warning message
				warningTimeout: 30000,      //(ms) The time until we log them out
				minWarning: 5000,           //(ms) If they come back to page (on mobile), The minumum amount, before we just log them out
				warningStart: null,         //Date time the warning was started
				warningTimer: null,         //Timer running every second to countdown to logout
				logout: function () {       //Logout function once warningTimeout has expired
					window.location = '/index.cfm?action=login.logout';
				}
			};

		$(document).on("idle.idleTimer", function (event, elem, obj) {
			//Get time when user was last active
			var
				diff = (+new Date()) - obj.lastActive - obj.timeout,
				warning = (+new Date()) - diff
			;
			
			//On mobile js is paused, so see if this was triggered while we were sleeping
			if (diff >= session.warningTimeout || warning <= session.minWarning) {
				window.location = '/index.cfm?action=login.logout';
			} else {
				//Show dialog, and note the time
				$('#sessionSecondsRemaining').html(Math.round((session.warningTimeout - diff) / 1000));
				$("#sessionTimoutModal").modal("show");
				session.warningStart = (+new Date()) - diff;

				//Update counter downer every second
				session.warningTimer = setInterval(function () {
					var remaining = Math.round((session.warningTimeout / 1000) - (((+new Date()) - session.warningStart) / 1000));
					if (remaining >= 0) {
						$('#sessionSecondsRemaining').html(remaining);
					} else {
						session.logout();
					}
				}, 1000)
			}
		});

		//User clicked ok to extend session
		$("#extendSession").click(function () {
			clearTimeout(session.warningTimer);
		});
		//User clicked logout
		$("#logoutSession").click(function () {
			session.logout();
		});
		
		//Set up the timer, if inactive for 10 seconds log them out
		$(document).idleTimer({
			timeout:session.inactiveTimeout,
			timerSyncId:"compendium-logout-timer"
		});
	})(jQuery);
</script>

[fetters5]

Did you figure this out by chance?

[thorst]

Tabs can't communicate with one another. Each has it's own js engine associated. So the only way to handle this is to use your server. This is particularly tricky on mobile.

When the user switches back to your tab, you could check the server quick to see if thier session is valid prior to showing the dialog and killing the session.

I'm my situation I am dealing with sensitive information and decided I'd rather inconvenience my power user with multiple tabs open, then risk exposing data.