I am using yo:angular-fullstack generator to build my website. When a user registers to the site, it will send an activation email with a link. When a user clicks the link, it will show activation successful and a timeout to go to the home page. However, when the timeout has not finished and the user clicks any other link in the page, it jumps to other page with continuing running the timeout. Severally seconds later, the user will be still moved to the home page.
$scope.countdown = 10;
$scope.onTimeout = function() {
$scope.countdown--;
timer = $timeout($scope.onTimeout, 1000);
if ($scope.countdown === 0) {
$timeout.cancel(timer);
$location.path('/');
}
};
var timer = $timeout($scope.onTimeout, 1000);
I don't know how to cancel the timer when the user clicks other links in this page.
You need to listen to AngularJS changing the route using the $locationChangeStart event:
$scope.$on('$locationChangeStart', function () {
$timeout.cancel(timer);
});
That way, when the route changes, the timer is cancelled and the user is not redirected.
module.controller("TestController", function($scope, $timeout) {
var onTimeout = function() {
// something
};
var timer = $timeout(onTimeout, 1000);
$scope.$on("$destroy", function() {
if (timer) {
$timeout.cancel(timer);
}
});
});
you can call it simply when scope is destroyed.
Related
This was the initial code I was using:
setInterval(function(){
r=confirm("You are about to be logged out! Press cancel if you want to remain logged in.");
if (r == true){
window.location.href = '../logout.php';
}else{
location.reload();
}
},30000);
The confirm dialog awaits action from the user. If the action is "cancel", they remain logged in. If the action is "OK" the are redirected to the logout.php page. The issue is that if the user does not respond, they are not logged out after those elapsed 30 seconds.
Then I thought I may use two time intervals:
setInterval(function(){
window.location.href = '../logout.php';
},60000);
setInterval(function(){
r=confirm("You are about to be logged out! Press cancel if you want to remain logged in.");
if (r == true){
window.location.href = '../logout.php';
}else{
location.reload();
}
},30000);
but since the confirm() method halts the script, the 60000 ms is never realised. Is there a way I can get this to work?
Here is my suggestion
start a timer that logs the user out
start a graceTimer to show a link
if link clicked, the timers restarts
if not, the user is logged out
https://jsfiddle.net/mplungjan/t5ejs72q/
let tId, tId1;
const end = 15000, // change to whatever - 30 minutes
grace = 3000, // 3 secs - should be 30 secs in real life
timer = () => {
clearTimeout(tId);
tId = setTimeout(function() {
// location.replace('../logout.php')
console.log("logged out")
}, end);
},
graceTime = () => tId1 = setTimeout(toggleGrace, end - grace),
toggleGrace = () => document.getElementById("stayLink").classList.toggle("hide"),
init = () => {
timer();
graceTime()
};
document.getElementById("stayLink").addEventListener("click", function(e) {
e.preventDefault();
toggleGrace();
init()
})
init()
.hide {
display: none;
}
Stay logged in?
I am trying to do a kiosk application. In this application, if index page opened with post values (index.html?location=5) except index page with no post value and any action happened in 60 seconds like mouse over or typing, redirect to index page with no value. I am using this code but..
function setIdle(cb, seconds) {
var timer;
var interval = seconds * 1000;
function refresh() {
clearInterval(timer);
timer = setTimeout(cb, interval);
};
$(document).on('keypress, click', refresh);
$(document).on('mouseover', refresh);
var parts = location.pathname.split('/');
if(parts[parts.length - 1] != 'index.html') {
location.href = 'index.html';
}
refresh();
}
setIdle(function() {
location.href = './index.html';
}, 60);
When I run this code, it is refreshing index page with no value. I can not figure it out how can I do that ?
I want to do
if index.html?location = 5 wait for 60 seconds for any mouse or keyboard action then return index.html
if index.html do not check mouse or keyboard
setIdle() gets called only once (when the page first loads), and this is where your conditional logic is. refresh() is what's actually doing the redirect, but this is not inside any sort of if, and so it gets called every single time regardless of which page you're on.
Why not ignore the idle function completely if the page is index.html?
function setIdle(cb, seconds) {
var timer;
var interval = seconds * 1000;
function refresh() {
clearInterval(timer);
timer = setTimeout(cb, interval);
};
$(document).on('keypress, click', refresh);
$(document).on('mouseover', refresh);
refresh();
}
var parts = location.pathname.split('/');
//If page is not index.html
if(parts[parts.length - 1] != 'index.html') {
//initialize the "idle" functionality
setIdle(function() {
location.href = './index.html';
}, 60);
}
I am trying to capture a reload event from a controller. Inside my controller I have the following...
refresh = function() {
console.log("At least we know it ran!");
if ($window.performance) {
if ($window.performance.navigation.type === 1) {
console.log('page reloaded');
}
}
return null;
};
$window.onbeforeunload = refresh;
$scope.$on('$destroy', function(e) {
delete $window.onbeforeunload;
});
But the refresh function is never hit when I push the browser's reload button. What am I missing here?
I want to reload a page in every 5 min if a user is not active on that page.(I don't want reload a page while user is active).
I have a code for reloading a page while clicking on the button.
<button ng-click="refreshDeliveries()">
<span>Refresh Deliveries</span>
</button>
$scope.refreshDeliveries = function () {
$window.location.reload();
};
But I just want if user is not active from past 5 min, page will automatically reloaded in Angularjs.
Thank you
You can use $interval method from angularJS
function reloadPage() {
var d = new Date();
var curTime = d.getTime(); //n in ms
$window.location.reload();
}
to set in 5 minutes
setIntvl = $interval(reloadPage, 300000);
cancel a interval
$interval.cancel(setIntvl);
This code works for me
and for auto idle refresh check
Auto logout with Angularjs based on idle user
This code sample might be helpful for you. It uses Angular 1.3 and https://github.com/HackedByChinese/ng-idle library:
(function() {
angular.module('myApp', ['ngIdle'])
.controller('ctrl', homeController)
.config(function(IdleProvider, KeepaliveProvider) {
// configure Idle settings
IdleProvider.idle(5); // in seconds
IdleProvider.timeout(5); // in seconds
KeepaliveProvider.interval(2); // in seconds
})
.run(function(Idle) {
// start watching when the app runs. also starts the Keepalive service by default.
Idle.watch();
});
function homeController($scope, Idle) {
$scope.message = 'Check browser console to get idle info';
$scope.events = [];
$scope.$on('IdleStart', function() {
console.log('Idle Start');
// the user appears to have gone idle
});
$scope.$on('IdleWarn', function(e, countdown) {
console.log(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() {
console.log('Idle Timeout');
// the user has timed out (meaning idleDuration + timeout has passed without any activity)
// this is where you'd log them
// ------You can reload the page here------
});
$scope.$on('IdleEnd', function() {
console.log('Idle End');
// 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.$on('Keepalive', function() {
console.log('Keep me Alive');
// do something to keep the user's session alive
});
}
}());
I'm working on my first AngularJS project and I'm working on a timeout that redirects the user to the startpage after a few minutes if they haven't clicked on anything. timeout is called on each page load to restart the timeout.
But the my problem is that restart() is called multiple times. One time for each page/view load. I use ngRoute.
For example if has clicked on three pages, timeout() has now been called three times and when the $timeout reaches the time, restart() is called three times.
myapp.controller(..., [...], function(...) {
function restart() {
$location.path("/slide/1");
}
function timeout() {
var timeoutHandle = $timeout(function() {
$timeout.cancel(timeoutHandle);
restart();
}, timeoutTime);
}
timeout();
}
Try to use this code:
var redirectTimeout;
var redirect = function() {
$location.path("/slide/1");
}
$timeout.cancel(redirectTimeout);
redirectTimeout = $timeout(function() {
var timeoutTime = 5000 // five seconds
redirectTimeout = $timeout(redirect, timeoutTime);
});
Here is the JSFiddle
Wouldn't it be better to put this kind of functionality inside a factory?