Session Timeout Warning Popup with Countdown Using jQuery and PHP

Posted by & 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

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>

 .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!