Implement a lockscreen (watch for inactivity) in AngularJS

Question

I'd like to implement a lockscreen in my app using Angular.js, a lockscreen is simply a route and an HTML template with a form that asks the user to re-enter their password to keep their session active.

It's meant to prevent abusive use of someone's session if they leave their computer / session active for a long period of time.

Now I want my Angular to perform this task after X minutes of inactivity. Any ideas?

Edit:
I'm not asking for a jQuery function to reload the page after X minutes of inactivity, otherwise the user can't keep what they were doing.

possible duplicate of [Detecting idle time in JavaScript elegantly](http://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly) — Dzinx, Sep 19 '15 at 08:33
Absolutely not. Please stop tagging questions as possibly already answered, that answer is not adapted for single page applications, it means whatever the user was doing, it will refresh his whole page (application). Hence the Angular.js tag. — Shotgun, Sep 19 '15 at 08:41
Umm, what is the question, then? I thought the difficult part is figuring out how to detect inactivity. — Dzinx, Sep 19 '15 at 08:42
As said : "I'd like to implement a lockscreen in my app using Angular.js" — Shotgun, Sep 19 '15 at 08:43
So, do you mean something like: "how to show a full-screen modal dialog in AngularJS?" — Dzinx, Sep 19 '15 at 08:44

sdgluck · Accepted Answer · 2015-09-19T09:07:08.690

This kind of functionality would first need to be implemented on the server via sessions so that someone with the know-how couldn't still make requests as the person who was previously logged in and active within the application.

Now I want my Angular to perform this task after X minutes of inactivity. Any ideas?

Within Angular you can use the $interval service to perform a task every n ms. However, there is no simple way of capturing all events that occur within a document, and this is presumably how you would definitively know if a user had walked away from their machine or tabbed out of the application, for example.

A simple alternative would be to watch for mouse movement. Here is that answer adapted to the Angular ecosystem:

[ See it working in a JSFiddle. ]

HTML

<div ng-app>
    <div ng-controller="IdleWatch">
        <span ng-show="!isIdle()">User not idle</span>
        <span ng-show="isIdle()">User idle</span>
    </div>
</div>

JavaScript

function IdleWatch ($scope, $interval, $document) {
    var int = null;
    var callbacks = [];
    var idleTime = 0;

    $scope.isIdle = function() {
        return (idleTime > 0);
    };

    angular.element($document).bind('mousemove', function(e) {
        idleTime = 0;
        $interval.cancel(int);
        startInterval();
        $scope.$apply();
    });

    function startInterval() {
        int = $interval(function() {
            idleTime += 3000;
        }, 3000);
    }

    startInterval();
}

I will give the $interval a go, never heard of it, thank you :) — Shotgun, Sep 19 '15 at 08:46
As $interval is just a thin wrapper for setInterval, and setInterval is the top-voted answer for [Detecting idle time in JavaScript elegantly](http://stackoverflow.com/questions/667555/detecting-idle-time-in-javascript-elegantly), I still think this question is a duplicate. — Dzinx, Sep 19 '15 at 08:50
@DzinX, yes, it's an interval that works as a service inside an AngularJS app, one that allows you to access other AngularJS functionalities. It has nothing to do with the raw setInterval that would execute a random function every milliseconds. It's like asking how to use MySQL with Symfony framework in PHP, and giving me a link to how to use MySQL in raw PHP. — Shotgun, Sep 19 '15 at 15:26

score 0 · Answer 2 · answered Sep 19 '15 at 09:32

0

I used ng-idle directive, it has several great features and was simple to implement. https://github.com/hackedbychinese/ng-idle

answered Sep 19 '15 at 09:32

Enkode

4,515
4
35
50

Implement a lockscreen (watch for inactivity) in AngularJS

2 Answers2