Idle timeout A dead simple jQuery plugin that executes a callback function if the user is idle.

Keep your mouse and keyboard still!
This plugin will display a modal to the user after 5 seconds of idleness.

Usage

// append modal to <body>
$body.append('<div class="uk-modal" id="modal_idle">' +
    '<div class="uk-modal-dialog">' +
        '<div class="uk-modal-header">' +
            '<h3 class="uk-modal-title">Your session is about to expire!</h3>' +
        '</div>' +
        '<p>You\'ve been inactive for a while. For your security, we\'ll log you out automatically.</p>' +
        '<p>Click "Stay Online" to continue your session.</p>' +
        '<p>Your session will expire in <span class="uk-text-bold md-color-red-500" id="sessionSecondsRemaining"></span> seconds.</p>' +
        '<div class="uk-modal-footer uk-text-right">' +
            '<button id="staySigned" type="button" class="md-btn md-btn-flat uk-modal-close">Stay Online</button><button type="button" class="md-btn md-btn-flat md-btn-flat-primary" id="logoutSession">Logout</button>' +
        '</div>' +
    '</div>' +
'</div>');

var modal = UIkit.modal("#modal_idle", {
        bgclose: false
    }),
    session = {
        //Logout Settings
        inactiveTimeout: 5000,      //(ms) The time until we display a warning message
        warningTimeout: 30000,      //(ms) The time until we log them out
        minWarning: 5000,           //(ms) If they come back to page (on mobile), The minumum amount, before we just log them out
        warningStart: null,         //Date time the warning was started
        warningTimer: null,         //Timer running every second to countdown to logout
        autologout: {
            logouturl: "login.html"
        },
        logout: function () {       //Logout function once warningTimeout has expired
            window.location = session.autologout.logouturl;
        }
    },
    $sessionCounter = $('#sessionSecondsRemaining').html(session.warningTimeout/1000);

$(document).on("idle.idleTimer", function (event, elem, obj) {
    //Get time when user was last active
    var diff = (+new Date()) - obj.lastActive - obj.timeout,
        warning = (+new Date()) - diff;

    //On mobile js is paused, so see if this was triggered while we were sleeping
    if (diff >= session.warningTimeout || warning <= session.minWarning) {
        modal.hide();
    } else {
        //Show dialog, and note the time
        $sessionCounter.html(Math.round((session.warningTimeout - diff) / 1000));
        modal.show();
        session.warningStart = (+new Date()) - diff;

        //Update counter downer every second
        session.warningTimer = setInterval(function () {
            var remaining = Math.round((session.warningTimeout / 1000) - (((+new Date()) - session.warningStart) / 1000));
            if (remaining >= 0) {
                $sessionCounter.html(remaining);
            } else {
                session.logout();
            }
        }, 1000)
    }
});

$body
    //User clicked ok to stay online
    .on('click','#staySigned', function () {
        clearTimeout(session.warningTimer);
        modal.hide();
    })
    //User clicked logout
    .on('click','#logoutSession', function () {
        session.logout();
    });

//Set up the timer, if inactive for 5 seconds log them out
$(document).idleTimer(session.inactiveTimeout);

Colors

Sidebar

Layout

Main menu accordion