Remove From My Forums

How to increase session timeout!

Question
0

Sign in to vote

User-582711651 posted

Hi,

ref this url: https://www.codeproject.com/Tips/1175658/Session-Expiration-Popup

Based on this I deployed my page, all works well, but the following things need to do

01. Want to increase the ideal time 2 mins up to 6 mins

02. When I click the button id="btnOk" and "btnLogoutNow" not works.

<button id="btnOk" type="button" class="btn btn-default" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px; background-color: #428bca; color: #FFF;">Yes, Keep me Signed in</button>

<asp:Button ID="btnLogoutNow" CausesValidation="false" runat="server" Text="No, Sing me out" class="btn btn-default" Visible="true" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px; background-color: #428bca; color: #FFF;"></asp:Button>

Please help me.

Friday, October 23, 2020 10:05 AM

Answers

User-939850651 posted

Hi ayyappan.CNN,

I read the article you mentioned, I used this code to create a simple example, and modified some of the code, you could modify extendTime to the value you want, I use 10 seconds for testing.

Please refer below code:

<head>
    <link rel="stylesheet" href="Content/bootstrap.min.css" crossorigin="anonymous">
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <h4>Please wait for <span id="count"></span> seconds to view session timeout popup.</h4>

    <!--Start Show Session Expire Warning Popup here -->
    <div class="modal fade" id="session-expire-warning-modal" aria-hidden="true" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Session Expire Warning</h4>
                </div>
                <div class="modal-body">
                    Your session will expire in <span id="seconds-timer"></span> seconds. Do you want to extend the session?
                </div>
                <div class="modal-footer">
                    <button id="btnOk" type="button" class="btn btn-default" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px;  background-color: #428bca; color: #FFF;">Ok</button>
                    <button id="btnSessionExpiredCancelled" type="button" class="btn btn-default" data-dismiss="modal" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px; background-color: #428bca; color: #FFF;">Cancel</button>
                    <button id="btnLogoutNow" type="button" class="btn btn-default" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px;  background-color: #428bca; color: #FFF;">Logout now</button>
                </div>
            </div>
        </div>
    </div>
    <!--End Show Session Expire Warning Popup here -->
    <!--Start Show Session Expire Popup here -->
    <div class="modal fade" id="session-expired-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Session Expired</h4>
                </div>
                <div class="modal-body">
                    Your session is expired.
                </div>
                <div class="modal-footer">
                    <button id="btnExpiredOk" onclick="sessionExpiredRedirect()" type="button" class="btn btn-primary" data-dismiss="modal" style="padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; border: 1px solid transparent; border-radius: 4px; background-color: #428bca; color: #FFF;">Ok</button>
                </div>
            </div>
        </div>
    </div>
    <script src="Scripts/sessionTimeout.js"></script>
    <!-- This will init session -->
    <script>
        initSessionMonitor();
    </script>
    <!-- This script is only for show cound down timer on HTML Page -->
    <script type="text/javascript">
        window.onload = function () {
            (function () {
                var counter = 5;
                setInterval(function () {
                    counter--;
                    if (counter >= 0) {
                        span = document.getElementById("count");
                        span.innerHTML = counter;
                    }
                    if (counter === 0) {
                        clearInterval(counter);
                    }
                }, 1000);
            })();
        }
    </script>
</body>

sessionTimeout.js

var i = 1;
var sessServerAliveTime = 10 * 60 * 200;
var sessionTimeout = 5 * 1000;               //Initial timeout warning ==> 5 seconds 
//var extendTime = 6 * 60 * 1000;              //Extend time ==> 6 mins.
var extendTime = 10000;              //Extend time ==> 10 seconds for testing
var sessLastActivity;
var idleTimer, remainingTimer;
var isTimout = false;

var sess_intervalID, idleIntervalID;
var sess_lastActivity;
var timer;
var isIdleTimerOn = false;
localStorage.setItem('sessionSlide', 'isStarted');

function sessPingServer() {
    if (!isTimout) {
        //$.ajax({
        //    url: '/Admin/SessionTimeout',
        //    dataType: "json",
        //    async: false,
        //    type: "POST"
        //});

        return true;
    }
}

function sessServerAlive() {
    sess_intervalID = setInterval('sessPingServer()', sessServerAliveTime);
}

function initSessionMonitor() {
    $(document).bind('keypress.session', function (ed, e) {
        sessKeyPressed(ed, e);
    });
    $(document).bind('mousedown keydown', function (ed, e) {

        sessKeyPressed(ed, e);
    });
    sessServerAlive();
    startIdleTime();
}

$(window).scroll(function (e) {
    localStorage.setItem('sessionSlide', 'isStarted');
    startIdleTime();
});

function sessKeyPressed(ed, e) {
    var target = ed ? ed.target : window.event.srcElement;
    var sessionTarget = $(target).parents("#session-expire-warning-modal").length;

    if (sessionTarget != null && sessionTarget != undefined) {
        if (ed.target.id != "btnSessionExpiredCancelled" && ed.target.id != "btnSessionModal" && ed.currentTarget.activeElement.id != "session-expire-warning-modal" && ed.target.id != "btnExpiredOk"
            && ed.currentTarget.activeElement.className != "modal fade modal-overflow in" && ed.currentTarget.activeElement.className != 'modal-header'
            && sessionTarget != 1 && ed.target.id != "session-expire-warning-modal") {
            localStorage.setItem('sessionSlide', 'isStarted');
            startIdleTime();
        }
    }
}

function startIdleTime() {
    stopIdleTime();
    localStorage.setItem("sessIdleTimeCounter", $.now());
    idleIntervalID = setInterval('checkIdleTimeout()', 1000);
    isIdleTimerOn = false;
}

var sessionExpired = document.getElementById("session-expired-modal");
function sessionExpiredClicked(evt) {
    window.location = "Logout.html";
}

sessionExpired.addEventListener("click", sessionExpiredClicked, false);
function stopIdleTime() {
    clearInterval(idleIntervalID);
    clearInterval(remainingTimer);
}

var firstCheck = (function () {
    var executed = false;
    return function () {
        if (!executed) {
            executed = true;
            // do something
            if (!isIdleTimerOn) {
                localStorage.setItem('sessionSlide', false);
                countdownDisplay();

                $('.modal-backdrop').css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 500);
                $('#session-expire-warning-modal').css('z-index', 1500);
                $('#btnOk').css('background-color', '#428bca');
                $('#btnOk').css('color', '#fff');
                $('#btnSessionExpiredCancelled').css('background-color', '#428bca');
                $('#btnSessionExpiredCancelled').css('color', '#fff');
                $('#btnLogoutNow').css('background-color', '#428bca');
                $('#btnLogoutNow').css('color', '#fff');

                $("#seconds-timer").empty();
                $("#session-expire-warning-modal").modal('show');

                isIdleTimerOn = true;
            }
        }
    };
})();

var firstLogut = (function () {
    var executed = false;
    return function () {
        if (!executed) {
            executed = true;
            // do something
            $("#session-expire-warning-modal").modal('hide');
            $("#session-expired-modal").modal('show');
            clearInterval(sess_intervalID);
            clearInterval(idleIntervalID);

            $('.modal-backdrop').css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 100);
            $("#session-expired-modal").css('z-index', 2000);
            $('#btnExpiredOk').css('background-color', '#428bca');
            $('#btnExpiredOk').css('color', '#fff');

            isTimout = true;
            sessLogOut();
        }
    };
})();

function checkIdleTimeout() {
    //Check first timeout
    var FirstTimeout = (parseInt(localStorage.getItem('sessIdleTimeCounter')) + (sessionTimeout));
    //I updated the user selection time to 5 seconds for testing
    if (i < 11) {
        if ($.now() > FirstTimeout) {
            firstCheck();
        }
        if ($.now() > FirstTimeout + sessionTimeout) {
            firstLogut();
        }
        i++;
    }
    // $('#sessionValue').val() * 60000;
    var idleTime = (parseInt(localStorage.getItem('sessIdleTimeCounter')) + (extendTime));
    if ($.now() > (idleTime + sessionTimeout)) {
        $("#session-expire-warning-modal").modal('hide');
        $("#session-expired-modal").modal('show');
        clearInterval(sess_intervalID);
        clearInterval(idleIntervalID);

        $('.modal-backdrop').css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 100);
        $("#session-expired-modal").css('z-index', 2000);
        $('#btnExpiredOk').css('background-color', '#428bca');
        $('#btnExpiredOk').css('color', '#fff');

        isTimout = true;
        sessLogOut();
    }
    else if ($.now() > idleTime) {
        ////var isDialogOpen = $("#session-expire-warning-modal").is(":visible");
        if (!isIdleTimerOn) {
            ////alert('Reached idle');
            localStorage.setItem('sessionSlide', false);
            countdownDisplay();

            $('.modal-backdrop').css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 500);
            $('#session-expire-warning-modal').css('z-index', 1500);
            $('#btnOk').css('background-color', '#428bca');
            $('#btnOk').css('color', '#fff');
            $('#btnSessionExpiredCancelled').css('background-color', '#428bca');
            $('#btnSessionExpiredCancelled').css('color', '#fff');
            $('#btnLogoutNow').css('background-color', '#428bca');
            $('#btnLogoutNow').css('color', '#fff');

            $("#seconds-timer").empty();
            $("#session-expire-warning-modal").modal('show');

            isIdleTimerOn = true;
        }
    }
}

$("#btnSessionExpiredCancelled").click(function () {
    $('.modal-backdrop').css("z-index", parseInt($('.modal-backdrop').css('z-index')) - 500);
});

$("#btnOk").click(function () {
    $("#session-expire-warning-modal").modal('hide');
    $('.modal-backdrop').css("z-index", parseInt($('.modal-backdrop').css('z-index')) - 500);
    startIdleTime();
    clearInterval(remainingTimer);
    //Remaining timer
    var time = (extendTime / 1000) - 1;
    timeoutSpan = setInterval(function () {
        if (time >= 0) {
            $('#count').html(time);
            time = time - 1;
        } else {
            clearInterval(timeoutSpan);
        }
    }, 1000);

    localStorage.setItem('sessionSlide', 'isStarted');
});

$("#btnLogoutNow").click(function () {
    localStorage.setItem('sessionSlide', 'loggedOut');
    window.location = "Logout.html";
    sessLogOut();
    $("#session-expired-modal").modal('hide');

});
$('#session-expired-modal').on('shown.bs.modal', function () {
    $("#session-expire-warning-modal").modal('hide');
    $(this).before($('.modal-backdrop'));
    $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

$("#session-expired-modal").on("hidden.bs.modal", function () {
    window.location = "Logout.html";
});

$('#session-expire-warning-modal').on('shown.bs.modal', function () {
    $("#session-expire-warning-modal").modal('show');
    $(this).before($('.modal-backdrop'));
    $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

function countdownDisplay() {

    var dialogDisplaySeconds = 4;

    remainingTimer = setInterval(function () {
        if (localStorage.getItem('sessionSlide') == "isStarted") {
            $("#session-expire-warning-modal").modal('hide');
            startIdleTime();
            clearInterval(remainingTimer);
        }
        else if (localStorage.getItem('sessionSlide') == "loggedOut") {
            $("#session-expire-warning-modal").modal('hide');
            $("#session-expired-modal").modal('show');
        }
        else {

            $('#seconds-timer').html(dialogDisplaySeconds);
            dialogDisplaySeconds -= 1;
        }
    }
        , 1000);
};

function sessLogOut() {
    // $.ajax({
    //     url: 'Logout.html',
    //     dataType: "json",
    //      async: false,
    //      type: "POST"
    //   });

    window.location = "Logout.html";
}

Logout.html

<html>
<b>You are logged out. Thank You</b>
</html>

Result:

If possible, you could also modify it to meet your requirements.

Hope this can help you.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, October 27, 2020 3:46 AM

Answered by:

How to increase session timeout!

Question

Answers