Introduction

This article demonstrates MVC, using Angular Idle with UI Bootstrap. This article is useful to get a User Idle moment when logging in to the Application.

Angular Idle

Angular Idle can use an Angular module to detect and respond to idle users. We can almost maintain the session in the client side.

Follow the steps given below and we can use an Angular Idle in AngularJS in MVC.

  • Create MVC project.
  • Configure an  Angular Idle
  • Work with an Angular Idle.

Create MVC Project

Open Visual Studio 2015.

MVC

Go to New menu >Click New & project. Now, it will open New Project Window.

MVC

You can select ASP.NET Web Application on Framework 4.6. Enter the name of the project in Solution name textbox, followed by clicking OK button.

MVC

One more Window should be appearing. Select MVC template in this popup & click Ok button. Now, you can start.

Configure an Angular Idle

We will download the idle plug in from

Open the _Layout.cshtml and must refer the .js file from downloaded folder to this view page

  1. “~/Plugin/angular/angular.min.js”>
  2. “~/Plugin/angular-ui-router/release/angular-ui-router.min.js”>
  3. “~/Plugin/angular-idle/angular-idle.js”>
  4. “~/Plugin/angular-bootstrap/ui-bootstrap-tpls.min.js”>

Link My File

  1. “~/App/App.module.js”>
  2. “~/App/App.config.js”>
  3. “~/App/CarController.js”>
  4. “~/App/LoginConttroller.js”>

Angular Module

You will need to include the module as a dependency on your Application.

  1. var uiroute = angular
  2. .module(‘uiroute’, [‘ui.router’‘ngIdle’‘ui.bootstrap’])

Angular Config

You should also set your options, using the KeepaliveProvider, IdleProvider in your angular config file.

  1. uiroute.config([‘KeepaliveProvider’‘IdleProvider’function(KeepaliveProvider, IdleProvider) {
  2.     IdleProvider.idle(10);
  3.     IdleProvider.timeout(10);
  4.     KeepaliveProvider.interval(10);
  5. }]);

Angular Controller

You can set what action will be performed on the user idle times. Here, I will be shown a warning message & notified of the session logout .

  1. function closeModals() {
  2.     if ($scope.warning) {
  3.         $scope.warning.close();
  4.         $scope.warning = null;
  5.     }
  6.     if ($scope.timedout) {
  7.         $scope.timedout.close();
  8.         $scope.timedout = null;
  9.     }
  10. }
  11. $scope.$on(‘IdleStart’function() {
  12.     closeModals();
  13.     $scope.warning = $uibModal.open({
  14.         templateUrl: ‘warning-dialog.html’,
  15.         windowClass: ‘modal-danger’
  16.     });
  17. });
  18. $scope.$on(‘IdleEnd’function() {
  19.     closeModals();
  20. });
  21. $scope.$on(‘IdleTimeout’function() {
  22.     closeModals();
  23.     $scope.timedout = $uibModal.open({
  24.         templateUrl: ‘timedout-dialog.html’,
  25.         windowClass: ‘modal-danger’
  26.     });
  27. });

Angular Run

After configuring the angular.idle.js, you must initiate the function in your angular Run function.

  1. uiroute.run([‘Idle’function(Idle) {
  2.     Idle.watch();
  3. }]);

HTML code

Go to set HTML warning dialog & time out dialog given below.

  1. “text/ng-template” id=“warning-dialog.html”>
  2.     
    class=“modal-header small danger”>
  3.         

    Your are Idle.

  4.     
  •     
    “countdown” ng-init=“countdown=5” class=“modal-body”>
  •         “5” value=“5” animate=“false” class=“progress-striped active”>You’ll be logged out in {{countdown}} second(s).
  •     
  • “text/ng-template” id=“timedout-dialog.html”>
  •     
    class=“modal-header small warning”>
  •         

    You have Timed Out!

  •