idle user timeout with relogin popup

jstfsklh211 0 Tallied Votes 298 Views Share

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

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);
    }
}