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.

Answer 1

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();
}