Timout reset

[afterbit01]

Hello, if I stay on a html page and do ajax requests (without reloading the page) the session timeout popup is shown. Is there a way to avoid this, for example, reset the timer ?

[travishorn]

There is no way to do that currently. But this is an awesome idea for a new feature.

[tkhan-jd]

Is it possible to display session-timeout on a JQuery Fancy Box pop up?

[samipuro]

Would be a great addition, since many requests are served through Ajax these days, and not having this reset feature makes this nifty script a bit hard to implement.

[hectorx2x]

Hello, what I do to achieve this, is that every time there is a query AJAX REQUEST also go through a function "AJAX2" that what it does is reset the timer (which also is pending the movement of the mouse and scroll on the web), it works perfect, before that I had this problem and solve it that way, I do not know if it is the most professional, but it is practical and functional.

[JattJames]

@hectorx2x can you share the code you did managed to fix here.

@travishorn does this plugin supports multiple tabs?

[raziel057]

To fix disconnection issues when using multiple tabs, we should consider to set the last refresh page datetime in localstorage and reset the timeout on each tabs that subscribe to the datetime change in localstorage.

[jasonhall0612]

Hi, What is the solution again to programmatically reset the timeout timer?

[raziel057]

Please find here a specific implementation I used to fix issues using multiple tabs and taking Ajax request into account.

export default SessionTimeout => {

    const defaults = {
        timeOutAfter: 20,
        timeOutUrl: "/timed-out",
        dialogTitle: "Your session has expired",
        dialogContent: "Your session has expired due to inactivity. Please log in again to continue using the application.",
        dialogCloseBtnLabel: "Close",
        dialogLoginBtnLabel: "Log in"
    };

    const options = Object.assign(defaults, SessionTimeout);

    let timeoutId = null;

    let listenAjax = true;

    window.addEventListener("storage", handleStorageEvent);

    $(document).ajaxComplete(function() {
        if (listenAjax) {
            resetTimeout();
        }
    });

    resetTimeout();

    function deleteTimeout() {
        if (timeoutId !== null) {
            //console.log('Clear Timeout: ' + timeoutId);
            clearTimeout(timeoutId);
            timeoutId = null;
        }
    }

    function resetTimeout() {
        //console.log('resetTimeout');
        localStorage.setItem("lastActivity", Date.now().toString());
        deleteTimeout();
        startTimeout();
    }

    function startTimeout() {
        //console.log(timeoutId);
        if (localStorage.hasOwnProperty("lastActivity") && timeoutId === null) {
            let lastActivity = localStorage.getItem("lastActivity");
            let timoutAfter = options.timeOutAfter * 60 * 1000;
            //console.log(lastActivity);
            if (lastActivity !== null && (Date.now() - lastActivity) > timoutAfter) {
                logout();
            } else {
                timeoutId = setTimeout(() => {
                    logout();
                }, timoutAfter);
                //console.log('Set Timeout [' + timeoutId + ']: ' + timoutAfter);
            }
        }
    }

    function handleStorageEvent(event) {
        //console.log('handleStorageEvent');
        if (event.key === "lastActivity" && event.newValue !== null) {
            deleteTimeout();
            startTimeout();
        }
    }

    function logout() {
        //console.log('logout');
        $.ajax({
            type: 'post',
            url: options.timeOutUrl,
            dataType: 'html',
            success: function () {
                localStorage.removeItem("lastActivity");
                listenAjax = false;
                deleteTimeout();
                $('<div title="' + options.dialogTitle + '"><p class="txt-description">' + options.dialogContent + '</p></div>').dialog({
                    autoOpen: true,
                    modal: true,
                    resizable: false,
                    width: '80%',
                    dialogClass: 'session-timeout-dialog',
                    buttons: [{
                        'text': options.dialogCloseBtnLabel,
                        'class': 'btn btn-warning',
                        'click': function () {
                            $(this).dialog("close");
                        }
                    }, {
                        'text': options.dialogLoginBtnLabel,
                        'class': 'btn',
                        'click': function () {
                            window.location.href = options.timeOutUrl;
                        }
                    }]
                });
            },
            error: function () {
                window.location.href = options.timeOutUrl;
            }
        });
    }
};

Initilalization:

sessionTimeout({
    timeOutAfter: 20,
    timeOutUrl: 'logout',
});