It appears that the only way to allow for an idle timeout kind of deal in angularJS is to use this custom directive made by HackedByChinese called ng-idle. The problem that I have with using this directive is that when I go to sign the user out after a time out, nothing happens.
I'm doing some basic stuff with ng-show just to get a feel for things, and it works as intended as far as detecting when the user is idle or not, however once the user reaches the timeout state, nothing happens.
Here's my JS:
// include the `ngIdle` module
var app = angular.module('demo', ['ngIdle', 'ui.bootstrap']);
app
.controller('EventsCtrl', function($scope, Idle, $modal) {
$scope.logIn = function(){
$scope.loggedIn = true;
Idle.watch();
};
$scope.events = [];
$scope.$on('IdleStart', function() {
closeModals();
$scope.amIdle = true;
});
$scope.$on('IdleWarn', function(e, countdown) {
// follows after the IdleStart event, but includes a countdown until the user is considered timed out
// the countdown arg is the number of seconds remaining until then.
// you can change the title or display a warning dialog from here.
// you can let them resume their session by calling Idle.watch()
});
$scope.$on('IdleTimeout', function() {
// the user has timed out (meaning idleDuration + timeout has passed without any activity)
// this is where you'd log them
$scope.loggedIn = false;
$scope.amIdle = false;
});
$scope.$on('IdleEnd', function() {
// the user has come back from AFK and is doing stuff. if you are warning them, you can use this to hide the dialog
$scope.amIdle = false;
});
/*$scope.$on('Keepalive', function() {
$scope.amIdle = false;
});*/
})
.config(function(IdleProvider, KeepaliveProvider) {
// configure Idle settings
IdleProvider.idle(5); // in seconds
IdleProvider.timeout(5); // in seconds
KeepaliveProvider.interval(1); // in seconds
})
And my HTML:
<!DOCTYPE html>
<html lang="en-us" ng-app="demo">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-idle.js"></script>
<script src="app.js"></script>
<script src="ui-bootstrap-tpls-0.13.0.min.js"></script>
<body ng-controller="EventsCtrl">
<div ng-show="!loggedIn">
<label>Log In:<input type="text" name = "user">
<button type = "submit" ng-click="logIn()">Submit</button>
</label>
</div>
<div ng-show="loggedIn"><h2>NG-Idle test</h2>
<center><div ng-show="amIdle">Yo wake up</div>
</div>
</body>
</html>
It appears that the issue was that for whatever reason, the app wasn't being updated after the variable was changed. This was fixed by adding
After the two booleans being set to false in the IdleTimeout function.