Create a lockscreen feature in AngularJS that becomes active after a period of inactivity

Question

Create a lockscreen feature in AngularJS that becomes active after a period of inactivity

I am looking to integrate a lockscreen feature into my app using Angular.js. This lockscreen will consist of a route and an HTML template containing a form that prompts the user to re-enter their password in order to keep their session active.

The purpose of this lockscreen is to prevent unauthorized access if a user leaves their computer or session unattended for an extended period of time.

My goal now is to have Angular execute this action after a specified amount of time of user inactivity. Any suggestions on how to achieve this?

Edit:
Please note that I am not interested in a jQuery solution that reloads the page after a certain period of inactivity, as this would disrupt the user's workflow.

javascript angularjs

Answer 1

Answer №1

To enhance security, it is important to implement this feature on the server using sessions. This prevents unauthorized users from making requests pretending to be someone who was previously logged in and active.

I'm looking for a way to make Angular handle this task after a certain period of user inactivity. Any suggestions?

Angular provides the $interval service, which can be used to execute a task at regular intervals. However, capturing all events within a document, such as detecting if a user has walked away or switched tabs, is more complex.

An alternative method is to monitor mouse movement. Below is an adaptation of this solution for the Angular framework:

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

Answer 2

To enhance security, it is important to implement this feature on the server using sessions. This prevents unauthorized users from making requests pretending to be someone who was previously logged in and active.

I'm looking for a way to make Angular handle this task after a certain period of user inactivity. Any suggestions?

Angular provides the $interval service, which can be used to execute a task at regular intervals. However, capturing all events within a document, such as detecting if a user has walked away or switched tabs, is more complex.

An alternative method is to monitor mouse movement. Below is an adaptation of this solution for the Angular framework:

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

Answer 3

Answer №2

I recently incorporated the ng-idle directive into my project, and I must say it offers a plethora of useful features in a user-friendly manner. Check it out here: https://github.com/hackedbychinese/ng-idle

Answer 4

I recently incorporated the ng-idle directive into my project, and I must say it offers a plethora of useful features in a user-friendly manner. Check it out here: https://github.com/hackedbychinese/ng-idle

Create a lockscreen feature in AngularJS that becomes active after a period of inactivity

Answer №1

Answer №2

Similar questions

The state may be modified, but the component remains unchanged

Is there a way to detect when a CSS background image has finished loading? Does an event trigger upon completion?

Deactivating a Vue custom filter when hovering over it

The Javascript setTimeout Function Prolongs Its Operation

Dynamically populate 7 select boxes with options using JQuery

Personalize the error message for throwing an exception in JavaScript

Is there a way to ensure that an external file function completes before proceeding with the main code execution?

Iterating over an array of objects and executing asynchronous operations

The rsuite table does not properly reflect changes in state data

Attempting to obtain a score value from the input, but unsuccessful in doing so

Customizing Body Color in CKEditor for Dynamic Designs

Challenges with implementing speech recognition within a React component's state

tips for navigating through an AngularJS $resource instance

The Bootstrap modal simply fades away without ever making an appearance

Having trouble reaching a public method within an object passed to the @Input field of an Angular component

Leveraging $pristine in AngularJS for Form Validation

Modify the value of a CSS property through JavaScript

This page is overwhelmed with an excessive number of active WebGL contexts, resulting in the inevitable loss of the oldest context. Brace yourselves, for the veteran context shall

Ways to incorporate conditional checks prior to running class methods

Tips for avoiding cursor sticking in css rotate transform in firefox?