I hate websites that timeout and don't let you know about it this script pops up a message when you timeout and allows you to re-login in place
idle user timeout with relogin popup
var idleOut_SE;
var custBeat_SE = 30;//min
var custTick_SE = 3;//sec
var custLoggedIn_SE = true;
var custActive_SE = false;
$(document).ready(function(){
$(document).keydown(activity_SE);
$(document).mousemove(activity_SE);
$(document).mousedown(activity_SE);
$(document).click(activity_SE);
$(document).scroll(activity_SE);
setInterval(checkActivity_SE, 1000*custTick_SE);
idleOut_SE = setTimeout(logout_SE, 1000*60*custBeat_SE);
});
function activity_SE() {
custActive_SE = true;
}
function checkActivity_SE() {
/*
* check for activity if warranted
* ajax reset authentication timeout
*/
if(!custLoggedIn_SE || !custActive_SE)
return;
clearTimeout(idleOut_SE);
ajaxPost("resetLogin.php", new Array(), null);
custActive_SE = false;
idleOut_SE = setTimeout(logout_SE, 1000*60*custBeat_SE);
}
function logout_SE(){
/*
* display relogin box
* no additional html/css needed
*/
custLoggedIn_SE = false;
clearTimeout(idleOut_SE);
var style = document.createElement('style');
style.id = "timeOutSecStyle";
style.type = 'text/css';
var styleText = '';
styleText += '';
styleText += '.popUpContent \n';
styleText += '{\n';
styleText += ' background: #fff;\n';
styleText += ' width: 350px;\n';
styleText += ' margin: auto;\n';
styleText += ' padding: 5px;\n';
styleText += ' position: relative;\n';
styleText += ' z-index: 1000;\n';
styleText += '}\n';
styleText += '.autoTimeOutSec \n';
styleText += '{\n';
styleText += ' background: #ace;\n';
styleText += ' text-align: left;\n';
styleText += ' font-weight: 700;\n';
styleText += ' padding: 5px;\n';
styleText += ' margin: 0 0 5px 0;\n';
styleText += '}\n';
styleText += '.timeOutSecPopUp\n';
styleText += '{\n';
styleText += ' background-image: url("common/authentication/semi-transparent.gif");\n';
styleText += ' width: 100%;\n';
styleText += ' height: 100%;\n';
styleText += ' position: fixed;\n';
styleText += ' top: 0;\n';
styleText += ' left: 0;\n';
styleText += ' text-align: center;\n';
styleText += '}\n';
document.getElementsByTagName('head')[0].appendChild(style);
if(style.styleSheet)
style.styleSheet.cssText = styleText;
else
style.innerHTML = styleText;
var timeOutSecPopUp = document.createElement("div");
timeOutSecPopUp.id="timeOutSecPopUp";
timeOutSecPopUp.className="timeOutSecPopUp";
var table = document.createElement("table");
table.style["height"] = "100%";
table.style["width"] = "100%";
var tr = document.createElement("tr");
var td = document.createElement("td");
td.style["verticalAlign"] = "middle";
var popUpContent = document.createElement("div");
popUpContent.className = "popUpContent";
popUpContent.id = "popUpContent";
var autoTimeOutSec = document.createElement("div");
autoTimeOutSec.className = "autoTimeOutSec";
var txt = document.createTextNode("Login Expiration");
autoTimeOutSec.appendChild(txt);
var myForm = document.createElement("form");
myForm.name = "timeOutSec";
var p = document.createElement("p");
txt = document.createTextNode("You have been logged out due to inactivity. Please relogin to continue where you left off.");
p.appendChild(txt);
myForm.appendChild(p);
var input = document.createElement("input");
input.type = "text";
input.name = "username";
input.id = "username";
input.focus();
myForm.appendChild(input);
input = document.createElement("input");
input.type = "password";
input.name = "password";
input.id = "password";
myForm.appendChild(input);
input = document.createElement("br");
myForm.appendChild(input);
input = document.createElement("input");
input.type = "button";
input.value = "Resume Session";
input.onclick = function (){
relogin_SE(this.form)
};
myForm.appendChild(input);
popUpContent.appendChild(autoTimeOutSec);
popUpContent.appendChild(myForm);
popUpContent.onclick = function(e){
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
};
td.appendChild(popUpContent);
td.onclick = function(e){
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
};
tr.appendChild(td);
table.appendChild(td);
timeOutSecPopUp.appendChild(table);
document.getElementsByTagName('body') [0].appendChild(timeOutSecPopUp);
}
function relogin_SE(myForm)
{
/*
* ajax some relogin script that returns
* xmlDoc with code tag containing
* -1 for server unreachable
* 0 for invalid login
* 1 for success
*/
ajaxPost("resetLogin.php?ajaxRelogin=anhsuekd", [
["username", myForm.username.value],
["password", myForm.password.value]
], authenticated_SE, "xml");
}
function authenticated_SE() {
codeList = xmlDoc.getElementsByTagName('code');
code = codeList[0].firstChild.nodeValue
if(code != 1) {
mesgList = xmlDoc.getElementsByTagName('mesg');
mesg = mesgList[0].firstChild.nodeValue
linkList = xmlDoc.getElementsByTagName('link');
link = linkList[0].firstChild.nodeValue
var popUpContent = document.getElementById("popUpContent");
var secLoginResp = document.getElementById("secLoginResp");
if(secLoginResp)
secLoginResp.parentNode.removeChild(secLoginResp);
var p = document.createElement("p");
p.id = "secLoginResp";
txt = document.createTextNode(mesg);
p.appendChild(txt);
a = document.createElement("a");
a.href = link;
txt = document.createTextNode('System Administrator');
a.appendChild(txt);
p.appendChild(a);
popUpContent.appendChild(p);
} else {
custLoggedIn_SE = true;
idleOut_SE = setTimeout(logout_SE, 1000*60*custBeat_SE);
var myNode = document.getElementById("timeOutSecStyle");
myNode.parentNode.removeChild(myNode);
myNode = document.getElementById("timeOutSecPopUp");
myNode.parentNode.removeChild(myNode);
}
}
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.