Session Timeout Warning Popup with Countdown Using jQuery and PHP

Posted 12:53 pm by muni & filed under HTML5, JAVASCRIPT, JQUERY, MYSQL, PHP.

In this tutorial we are going to see how to show Session Timeout Warning Popup with Countdown Using jQuery and PHP. For example you are logged in your Gmail account and chekced mail, then you forget to logout your Gmail account and went out. There is a possiblity some one to access your Gmail account and send mailcious email to everyone in your friends list or do something else. To avoid such a mailcious access by someone, we need to find user activity and show Session Timeout Warning Popup with countdown to logout a user. Now we are going to implement this functionality using jQuery and PHP.

Please refer my previous tutorial User registration, Login and forget passwird Using PHP5, MySQLi, jQuery and Bootstrap before continuing this.

Use following Username : muni@smarttutorials.net & Password : 12345 to login.

Session Timeout Warning Popup with Countdown

Step 1:

I have used setTimeout() function to detect user inactivity, If user inactivity found to particluar amount of time it will show session timeout warning popup with countdown to the user. If user didn’t do anything it will automatically logged out from the web application. When user presses Keep me signed in button then it reset max_count and runs from initially.

Add following jQuery script in the user authenticated pages to detect user inactivity and show session timeout warning messages. I had added this script in footer.php file in the templates folder.

Please add jquery libary to work below script.

<script>
var c = 0; max_count = 10; logout = true;
startTimer();
function startTimer(){
	setTimeout(function(){
		logout = true;
		c = 0; 
		max_count = 10;
		$('#timer').html(max_count);
		$('#logout_popup').modal('show');
		startCount();

	}, 10000);
}

function resetTimer(){
	logout = false;
	$('#logout_popup').modal('hide');
	startTimer();
}

function timedCount() {
    c = c + 1;
   	remaining_time = max_count - c;
   	if( remaining_time == 0 && logout ){
   		$('#logout_popup').modal('hide');
		location.href = $('#logout_url').val();

	}else{
    	$('#timer').html(remaining_time);
    	t = setTimeout(function(){timedCount()}, 1000);
	}
}

function startCount() {
   timedCount();
}
</script>

Step 2:

Here warning popup design HTML markups. I have added this in the footer.php file in  the templates folder.

<div class="modal fade" id="logout_popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div style="width:100%;height:100%;margin: 0px; padding:0px">
					<div style="width:25%;margin: 0px; padding:0px;float:left;">
						<i class="fa fa-warning" style="font-size: 140px;color:#da4f49"></i>
					</div>
					<div style="width:70%;margin: 0px; padding:0px;float:right;padding-top: 10px;padding-left: 3%;">
						<h4>Your session is about to expire!</h4>
						<p style="font-size: 15px;">You will be logged out in <span id="timer" style="display: inline;font-size: 30px;font-style: bold">10</span> seconds.</p>				
						<p style="font-size: 15px;">Do you want to stay signed in?</p>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
			<div style="margin-left: 30%;margin-bottom: 20px;margin-top: 20px;">
				<a href="javascript:;" onclick="resetTimer()" class="btn btn-primary" aria-hidden="true">Yes, Keep me signed in</a>
				<a href="<?php echo BASE_PATH.'logout.php';?>" class="btn btn-danger" aria-hidden="true">No, Sign me out</a>
			</div>
		</div>
	</div>
</div>

 .