<!DOCTYPE html>
<
html
>
<
head
>
<
title
> AngularJS ng-Idle </
title
>
<
script
type
=
"text/javascript"
src
=
</
script
>
<
script
type
=
"text/javascript"
src
=
</
script
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
<
script
type
=
"text/javascript"
src
=
</
script
>
<
script
type
=
"text/javascript"
>
var app = angular.module('myApp', ['ngIdle', 'ui.bootstrap']);
app.controller('DemoCtrl', function($scope, Idle, Keepalive, $modal) {
$scope.started = false;
function closeModals() {
if($scope.warning) {
$scope.warning.close();
$scope.warning = null;
}
if($scope.timedout) {
$scope.timedout.close();
$scope.timedout = null;
}
}
$scope.$on('IdleStart', function() {
closeModals();
$scope.warning = $modal.open({
templateUrl: 'warning-dialog.html',
windowClass: 'modal-warning'
});
});
$scope.$on('IdleEnd', function() {
closeModals();
});
$scope.$on('IdleTimeout', function() {
closeModals();
$scope.timedout = $modal.open({
templateUrl: 'timedout-dialog.html',
windowClass: 'modal-danger'
});
});
$scope.start = function() {
console.log('start');
closeModals();
Idle.watch();
$scope.started = true;
};
$scope.stop = function() {
console.log('stop');
closeModals();
Idle.unwatch();
$scope.started = false;
};
});
app.config(function(IdleProvider, KeepaliveProvider) {
IdleProvider.idle(5);
IdleProvider.timeout(5);
KeepaliveProvider.interval(10);
});
</
script
>
</
head
>
<
body
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h3
style
=
"color:purple"
>AngularJS ng-idle</
h3
>
<
div
ng-app
=
"myApp"
class
=
"ng-scope"
>
<
div
ng-controller
=
"DemoCtrl"
class
=
"ng-scope"
>
<
p
>
<
button
type
=
"button"
class
=
"btn btn-success"
ng-hide
=
"started"
ng-click
=
"start()"
> Login
</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger ng-hide"
data-ng-show
=
"started"
data-ng-click
=
"stop()"
> Reset
</
button
>
</
p
>
</
div
>
<
script
type
=
"text/ng-template"
id
=
"warning-dialog.html"
>
<
div
class
=
"modal-header"
>
<
h3
>
The Idle mode is activated,
because you are idle for far too long.
As a result, you are going to be
logout after in a few moments.
</
h3
>
</
div
>
<
div
idle-countdown
=
"countdown"
ng-init
=
"countdown=5"
class
=
"modal-body"
>
<
progressbar
max
=
"5"
value
=
"5"
animate
=
"false"
class
=
"progress-striped active"
>
DO SOMETHING FAST! You are getting
logged out in {{countdown}} second(s).
</
progressbar
>
</
div
>
</
script
>
<
script
type
=
"text/ng-template"
id
=
"timedout-dialog.html"
>
<
div
class
=
"modal-header"
>
<
h3
>Sorry, you have been Logged Out</
h3
>
</
div
>
<
div
class
=
"modal-body"
>
<
p
>
This program was idle for far too long.
So we apologize for logging you out,
but we had no option.
</
p
>
</
div
>
</
script
>
</
div
>
</
body
>
</
html
>