I want my frontend to track user inactivity (no mouse/keyboard input) and call my logout API when a specified time threshold is reached.
It seems straightforward at first (promising libraries like jquery-idletimer), however the inactivity tracking needs to support multiple tabs of the same website and even when the user closes all tabs of the website. The duration they have exited the page should count towards the threshold, and if reached while page is closed, my logout API needs to still be called. If the user reopens the page before the threshold, the timer needs to be reset.
Is this still possible from the frontend?
Related
I have on the client side (mobile) a timer (setTimeout()) which triggers refreshing the token on the server side by sending a post message to the server.
That timer does not seem to trigger sending a message to the server when the screen timeout on my mobile is on and the screen is black.
How can I enable triggering even if the mobile has the screen switched off.
I don't think there is a a way for angular to know when a page is locked. You could track any input or page movements instead and reset a timeout timer so that if the page stays idle for a while you could send a request to the server. That being said you would probably want the page timeout to be decently long to avoid closing a session while a user is still using the page. What you can also do is have a warning message pop up when the timeout is reached that prompts the user to say they are still using the page, if they click yes reset the timer again otherwise close the session.
This question already has answers here:
Run JavaScript code on window close or page refresh?
(8 answers)
Closed 1 year ago.
I have a site I'm building where a user clicks a row from a datagrid and it opens a new Chrome window with a form filled with data from the row. I only want one user editing the data at a time so if another user gets in, the screen is read-only. I do this by setting a LockUserID and LockDate on the row after a user enters. The minute the first user (lockuser) saves the data it will close the window and null out the LockUserID and LockDate so then next person can get in.
My problem is if a user clicks the chrome x button I don't know that the user left therefore the LockUserID and LockDate still have a value on the row and anyone that gets in afterward will have a read only view.
I have tried using before unload but this almost feels like a hack considering beforeunload is used for refreshing and other events.
Does anyone have any better suggestions with locking?
Maybe you can send a regular AJAX request to the server. Let's say every 30 seconds. The server saves the time. When a new user tries to open the side you can check if the interval is bigger between the last incoming request and the current time than the 40 seconds and if so unlock the site.
Not the best solution i think but it should work
Or the better solution: Run JavaScript code on window close or page refresh?
Is there a way to create a countdown timer that continues to countdown where it is left off when the user transferred to another page?
For example,
On page 1 the user clicks on the link which takes them to page 2.
The countdown timer on page 1 is XX:YY
Page two loads and the countdown is XX:YY and continues from there...
Yes, but it depends how are you developing you application.
If you are working on SPA, it'll be easy. Since your JS state won't change while user is navigating on your page, you just need to put the countdown on a global variable/singleton and update on it (remember that it could break if user open a new tab or refresh the page).
You also could keep this state on a SharedWorker and share this information between many tabs, and persist this data using Web Storage API.
Situation: I have a page that shows a stream of posts (news) submitted by our members. I have a setInterval() in this page that causes it to refresh every x seconds - if user is idle for x seconds.
Recently I have added video posts where user can click on an item and video would begin to play immediately in the page (so far I'm only using youtube iframes).
The problem: my auto refresh sometimes refreshes the news content while user is watching a video and being "idle"... which causes video to close and content to reset...etc. Meaning, user will loose his/her position in the video and have to start over.
My question: how do I detect if this page has at least one video that is currently "playing"? I'd like to use this to decide if auto refresh should occur or not.
Note: I'm not currently in favor of using the custom player or google/youtube js api because soon I will be adding support for videos from other services such as vimeo, 56.com...etc.
Question rephrased: is there a "universal" javascript or jquery method to detect if a video is currently playing in the document or window?
Thank you!
What would be the best way to monitor activity of a user on the page? I am developing a CMS system and using this as a security feature, if user is inactive for set amount of minutes then jQuery would trigger a function which would trigger whole page overlay and load in login script having to force the user to re-enter the password in-order to reopen the page or else after so many failed attempts PHP would force the user to logout script and destroy entire session.
So here how it would go
If no activity after 5min
jQuery(checks user activity every 5min) -> loop <- jQuery(if no activity after 5min) -> function(trigger overlay + authorization script via AJAX)
If there is activity
jQuery(checks user activity every 5min) -> loop <- jQuery(if active go back to loop)
So ye this is about it, thanks in advance.
Activity Definition for this script: Movement of mouse or input(keyboard) of text into text fields or clicking elements.
You can use jQuery's Idle Timer plugin.
As Justin says, jQuery does have an idle timer plugin. However, this method is not going to be sufficient alone unless your idle timer also destroys login cookies - your overlay can easily be circumvented by an array of browser plugins, or even (depending on how your application is built) GET parameters.
Reloading the page would even circumvent this "security" unless you log the user out.