I have been using ng-idle for some time now for below requirement.
Our requirement was when the user is idle for 60 mins. After 55 mins show pop up with the confirmation box saying do you want to continue your session or not(I have used sweet alert).
If the user click on continue then reset the idle time else log out forcefully by calling broadcast method.
Configuration has to be done in app.js when the users log-in inside app.config like below
app.config(['KeepaliveProvider', 'IdleProvider', function (KeepaliveProvider, IdleProvider) {
IdleProvider.idle(TimeOut.firstAPiCall);--It will call Idle On method
IdleProvider.timeout(TimeOut.SessionTimeOut);--It will be called when the total time is (TimeOut.firstAPiCall +TimeOut.SessionTimeOut)
KeepaliveProvider.interval(TimeOut.interval);}]) --It will be called like a heart beat for mentioned timeout until the idle start has not occured.
Below is the code for showing pop-up
$scope.$on('IdleStart', function () {
$scope.$broadcast('SessionIdleUpdate', 'IdleStart', TimeOut.FirstApicall);
$rootScope.idleTimerSession = setTimeout(function () {
console.log("pop up appeared on : " + new Date())
$scope.timedout = SweetAlert.swal({
title: "Alert",
text: "Your session is about to expire in 5 minutes, Do you want to continue?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DDDDD",
confirmButtonText: "CONTINUE",
cancelButtonText: "No"
}, function (isConfirm) {
if (isConfirm) {
clearTimeout(idleTimer);
}
else {
console.log("pop up closed from confirm on : " + new Date())
$scope.$broadcast('SessionTimeOutLogOut', null);
Idle.unwatch();
$scope.started = false;
}
});
//This check is to handle idle pop up if it appears and user doesnt perform any action it will simply logout.
var idleTimer = setTimeout(function () {
swal.close();
$scope.$broadcast('SessionTimeOutLogOut', null);
Idle.unwatch();
$scope.timedout = null;
}, (TimeOut.sessionTimeOut) * 1000);
}, (TimeOut.idleTimeOut - TimeOut.idleCheckDuration) * 1000);-- Time out is added to hold the pop up for that much duration . Because once the idle start is occured you wont be able to call the API
});
Below is the code for handling idle end event:
$scope.$on('IdleEnd', function () {
$scope.$broadcast('SessionIdleUpdate', 'IdleEnd', 0));
clearTimeout($rootScope.idleTimerSession);
closeModals();
});
Below is the code for Time Out it will be called after ---(TimeOut.firstAPiCall +TimeOut.SessionTimeOut)
$scope.$on('IdleTimeout', function (forceLogout) {
swal.close();
$scope.$broadcast('SessionTimeOutLogOut', null);
Idle.unwatch();
});
