You’re working on an awesome app, and you want to logout users that don’t have any activities for a certain amount of time on the app — yup, they deserve it (just kidding :D)

There is a package name ng-idle that you can use in this situation, and they also have a version for Angular 2+ if you want to try it out. However, in this article, I will do a demo on AngularJS 1.x — Yeah, I’m working with those old fashtioned guys for now.

If you want to take a peek that the final product, you can do it at Plunker.

Create an AngularJS project

Well, you just need a html and/or a JavaScript file to run an AngularJS project

// index.html

<html ng-app="myApp">

<head>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-idle/1.3.2/angular-idle.min.js"></script>

<script src="app.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<section ng-controller="DemoCtrl">

<p>

<button type="button" class="btn btn-success" ng-hide="started" ng-click="start()">Start Demo</button>

<button type="button" class="btn btn-danger" ng-show="started" ng-click="stop()">Stop Demo</button>

</p>

</section>

</body> Start Demo Stop Demo </html>

First, I embeded angularjs and angular-idle to the head of the html file. The others are just for decoration.

// app.js angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ngIdle']); angular.module('myApp').config(['KeepaliveProvider', 'IdleProvider', function(KeepaliveProvider, IdleProvider) { // configure Idle settings

IdleProvider.idle(5);

IdleProvider.timeout(5);

KeepaliveProvider.interval(10); IdleProvider.interrupt('keydown wheel mousedown touchstart touchmove scroll');

}]); angular.module('myApp').controller('DemoCtrl', function ($scope, Idle, Keepalive, $uibModal) { $scope.$on('IdleStart', function() {

// the user appears to have gone idle

}); $scope.$on('IdleTimeout', function() {

// the user has timed out, let log them out

}); $scope.$on('IdleEnd', function() {

// the user has come back from AFK and is doing stuff

}); }); angular.module('myApp').config(function(IdleProvider, KeepaliveProvider) {

IdleProvider.idle(5);

IdleProvider.timeout(5);

KeepaliveProvider.interval(10);

});

Create Modal for Warning and Timeout

Warning Modal — this will show before timeout

// warning-dialog.html <div class="modal-header">

<h3 class="modal-title" id="modal-title">{{ pc.title }}</h3>

</div>

<div idle-countdown="countdown" ng-init="countdown=5" class="modal-body" id="modal-body">

<uib-progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</uib-progressbar>

</div>

<div class="modal-footer">

<button class="btn btn-primary" type="button" ng-click="pc.ok()">OK</button>

<button class="btn btn-warning" type="button" ng-click="pc.cancel()">Cancel</button>

</div>

Timeout Modal — this will show after the warning modal and the user doesn’t do anything. At this stage, the user has already logged out.

// timeout-dialog.html <div class="modal-header">

<h3 id="modal-title">You've Timed Out!</h3>

</div>

<div class="modal-body" id="modal-body">

<p>

You were idle too long...

</p>

</div>

Please check the Plunker for the full working project.

Hope this helps :)