Sencha Touch 2 – Idle Timeout or Session Timeout

This is an example on how I’ve implemented a simple idle timeout check in Sencha Touch 2.

First capture any touch events that might occur by using:

var viewPort = Ext.get('ext-viewport');
viewPort.on(['touchstart', 'touchend', 'touchmove', 'swipe', 'dragstart', 'drag', 'dragend', 'tap', 'singletap', 'doubletap', 'longpress', 'pinch', 'rotate'], 'onViewPortEvent', this);

I’ve defined my onViewPortEvent to reset the timer.

onViewPortEvent: function (e, target, options, eventController) {
    if (MySessionTimeout.app.sessionPromptShowing == 0) {
        MySessionTimeout.app.idleMin = MySessionTimeout.app.settingsIdleMin;
        MySessionTimeout.app.idleSec = MySessionTimeout.app.settingsIdleSec;
    }
}

Initially I tried by using only one delayed task and run it, but for some reasons it would only fire it once (many experience the same thing).

So I wrote the same task twice and jumped between them to keep the timer going.

Here’s the snippet of task1:

var task1 = Ext.create('Ext.util.DelayedTask', function () {
    if (MySessionTimeout.app.idleSec < 1 && MySessionTimeout.app.idleMin > 0) {
        MySessionTimeout.app.idleMin--;
        MySessionTimeout.app.idleSec = 60;
    }
    //Logging out once the timer reaches 1sec
    if (MySessionTimeout.app.idleMin == 0 && MySessionTimeout.app.idleSec == 1) {
        if (debugC) console.log('task1 cancel');
        me.onSessionTimeout('Signing out due to inactivity..');
        task1.cancel();
        task2.cancel();
    }
    //Display a Prompt to the user if the minute counter hits 0
    if (MySessionTimeout.app.idleMin == 0 && MySessionTimeout.app.sessionPromptShowing == 0) {
        MySessionTimeout.app.sessionPromptShowing = 1;
        Ext.Msg.confirm("MySessionTimeout", "Your session is about to expire, do you want to continue?", function (answer) {
            if (answer == 'yes') {
                MySessionTimeout.app.idleMin = MySessionTimeout.app.settingsIdleMin;
                MySessionTimeout.app.idleSec = MySessionTimeout.app.settingsIdleSec;
                MySessionTimeout.app.sessionPromptShowing = 0;
            } else {
                MySessionTimeout.app.sessionPromptShowing = 0;
                me.onSessionTimeout('Signing out..');
            }
        });
    }
    MySessionTimeout.app.idleSec--;
    me.getTimer().setHtml(' minutes: ' + MySessionTimeout.app.idleMin + ' seconds: ' + MySessionTimeout.app.idleSec);

    task2.delay(1000);

}, this);

Task2 is build the same way with the exception of changing task2.delay(1000) to task1.delay(1000).

After that, simply fire up task1.delay(1000).

Fork me on Github | Demo (in progress)