t |
Wait 10 seconds, you will see a expiring warning. Wait 10 more seconds and you will see that you have been logged out.
In the real world I forward them to the logout url, which intern fowards them to login screen, instead of showing the 2nd dialog. You can modify the session.logout function.
We could use the active.idleTimer event to clearTimeout, however I prefer the user to explicitly say they want to keep the session open by clicking ok, not just moving the mouse on the screen.
This demo takes into account when a mobile device closes the browser, and after the idle timeout expires, launches the browser again. Instead of displaying the warning, it will jump straight to the logged out dialog.
For the sake of complete demo, I've included the code needed to call a keepalive url to keep the server side session valid.
Here we use default bindings. Instead of explicitly telling idleTimer which element to bind to, it assumes document.
Some previous versions had issues mixing default binding with explicit calling on document.
This should no longer be the case. To test I've added 2 sets of buttons to show that they can be mixed.
The background color changes to show that it is returning a jQuery object
The idle timer is built on jQuery and provides two events: idle.idleTimer
and active.idleTimer
, which fire when the user's idle state has changed.
When you move your mouse over the page or start typing, you're considered "active".
On this page we have two idle timers. One for the entire document. Another for the text area on the right (or bottom if your on mobile).
I use explicit instantiation here