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

Is there a method for verifying the application signature in Ionic?

Using Google App Script's pageToken to store attachments on Google Drive

Synchronize JSON data with the Document Object Model (DOM

Understanding the Mechanics of $route in AngularJS

In TypeScript, the function is failing to retrieve the complete array value

What is the best way to trigger an API call using AJAX whenever the page loads and at regular intervals using `setInterval()` function?

Sending a request to a JSON file using Ajax

Transferring information between a pair of PHP functions via AJAX communications

Date Object Replacement Error: "this is not a valid Date object."

What is the best way to store all rows in a dynamically changing table with AngularJS?

Encountering an Issue: Unable to Generate Line Chart with gRaphael Library

Creating a dynamically generated JavaScript array using the JSON format

Pattern for matching alphabet and numerical characters, excluding whitespace

Using jQuery, compare the values of two elements and update the class based on the comparison outcome

Issue with Laravel 5.4: AJAX behaving unexpectedly and not returning errors as it should

What is the best way to iterate through a JSON file?

Tips for acquiring an object to utilize in v-bind within a v-for loop

Encountering an issue when running the 'cypress open' command in Cypress

"Enhance Your Communication: Utilize setTimeout in Ajax

Assign a value to ng-model using JavaScript