JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<script src="https://superheroic.s3.amazonaws.com/libs/js.cookie.js"></script>
<script src="https://superheroic.s3.amazonaws.com/libs/jquery.blockUI.js"></script>
<div id="main">

</div>
<div class="dialog">

</div>

CSS

#main { width: 100%; min-height:600px;border:1px solid pink }

JavaScript

var timeoutWarning = 1; // minutes
	var idleTime = 1000; // milliseconds
	var logoutUrl = '/logout'; // URL to logout page.
	var keepAliveUrls = ['/uri1','/uri2','uri3'];

	function checkExpiration(){
			console.log('check timer');
			if( Cookies.get('evolvTime') == undefined  ){
	    		idleWarning();
	        return true;
	    }
	    setTimeout(function(){ checkExpiration() }, 5000);
	    return false;
	}
	// Start warning timer.
	function setWarningCookie(minutes) {
			var expireIn = 1/(1440/minutes);
	    Cookies.set('evolvTime', 'active', {
	    	expires: expireIn
			});
	    checkExpiration();
	}

	// Reset timers.
	function resetTimeout(int,urls) {
	    clearTimeout(int);
	    $.unblockUI();
	    for (i = 0; i < urls.length; i++) {
	    		console.log( 'todo: ajax ping this->' + urls[i] );
			}
	    setWarningCookie(timeoutWarning);
	}

	function idleTimer(millisecs,$obj,$btn){
			var i = Math.round((millisecs/1000)*60);
			var int = setInterval(function () {
	        $obj.text(i);
	        i-- || (clearInterval(int), idleTimeout(logoutUrl));
	    }, 1000);
	    $btn.on('click',function(e){ resetTimeout(int,keepAliveUrls) })
	}

	// Show idle timeout warning dialog.
	function idleWarning() {
			var $extndbtn = $('<button>extend</button>');
	    var $cnt = $('<span/>',{text:'60'});
			var $msg = $('<span/>',{text:'You will automatically be logged out in '}).append($cnt).append('<span> seconds.</span><hr>').append($extndbtn);
	    $.blockUI({ message: $msg });
	     idleTimer(idleTime,$cnt,$extndbtn);

	}

	// Logout the user.
	function idleTimeout(url) {
	    console.log('timed out! - todo: redirect to ->' + url);
      $('.blockUI.blockMsg').html('<span>Logging Out...</span>');
	}


	setWarningCookie(timeoutWarning);