Session Timeout

by Faisal Pathan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container-fluid">
  <h1>Session Timeout</h1>


  <button type="button" class="btn btn-primary" id="set-cookie">Set Timestamp Cookie</button><br/>
  <button type="button" class="btn btn-default" id="display-cookie">Display Timestamp Cookie</button><br/><br/>
  <p class="text-info">
    <b>Cookie Value</b>: <span id="cookie-value"></span><br/>
    <b>Time Remaining</b>: <span id="time-remaining"></span>
  </p>


</div>




















<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  Fork here:
  <a href='https://jsfiddle.net/KyleMit/t6wjox0s/'>
    Bootstrap 3.3.7 Skeleton
  </a>
</div>

CSS

/* Styles go here */
button {
  margin: 5px;
}

JavaScript

var sessionLengthSec = 64;
var sessionLengthMs = sessionLengthSec * 1000;

var modalPopupDisplayed = false;

timeoutCheckInterval = setInterval(function(){
	$("#display-cookie").click();
  var sessionCookie = getCookie(cookieName);
  var sessionDate = new Date(sessionCookie);
  
  var sessionTimeoutMs = sessionDate.getTime() + sessionLengthMs;
  var SessionTimeoutDate = new Date(sessionTimeoutMs);
  
  var remainingMs = sessionTimeoutMs - Date.now()
  var remainingSec = remainingMs / (1000)

  if (remainingSec <  60) {
  	// if we're within 60 seconds
    if (!modalPopupDisplayed) {
	    modalPopupDisplayed = true;
			showModalPopUp();      
    } 
    else {
    	// check if we're happy as clams
      if (remainingSec < 0) {
      	// if we're still here - redirect
        // popup will need to have self destructing count down timer
        //window.location
      }
    }

  } else {
  	// we have more than 1 minute remaining, clear popup flag - we must have done something
    modalPopupDisplayed = false;
  }
  
	$("#time-remaining").text(remainingSec.toFixed(2) + " seconds")
}, 1000);


var popUpObj;

function showModalPopUp() {

  popUpObj=window.open("PopUp.htm",
                       "ModalPopUp",
                       "toolbar=no," +
                       "scrollbars=no," +
                       "location=no," +
                       "statusbar=no," +
                       "menubar=no," +
                       "resizable=0," +
                       "width=400," +
                       "height=250," +
                       "left = 490," +
                       "top=300"
                      );
  popUpObj.focus();
}










// Code goes here
var cookieName = 'LastSessionActiveTime';

$("#set-cookie").click(function(e) {
  setCookie(cookieName, new Date().toLocaleString(),0);
}).click(); // set on load

$("#display-cookie").click(function(e) {
  var cookieValue = getCookie(cookieName);
  var text = "{"+cookieName +": "+cookieValue+"}";
 ...