Wednesday, August 27, 2014

Show Session Timeout alert to website users using jQuery

Many times when session times out, if the user does not refresh or request a page within the time-out period, the session ends. And it happens without showing any warning to the user. But now, You can alert your website users about Session Timeout using jQuery.



Timeout-dialog.js is a JQuery plugin that displays a timeout popover after a certain period of time. The timeout dialog should be used whenever you want to display to the user that the logged in session is about to expire. It creates a light box with a countdown and options to stay signed in or sign out.

How to use it?


Just download the plugin and include its library reference along with jQuery. A very basic example would be,
1$.timeoutDialog();
However, this plugin comes with many options that you can set to define session timeout. Some of them are,
  • timeout - The number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears. The default value is 1200.
  • countdown - The countdown total value (in seconds). The default value is 60.
  • logout_url - The url that will perform a POST request to kill the session. If no logout_url is defined it will just redirect to the url defined in logout_redirect_url.
  • logout_redirect_url - The redirect url after the logout happens, usually back to the login url. It will also contain a next query param with the url that they were when timedout and a timeout=t query param indicating if it was from a timeout, this value will not be set if the user clicked the 'No, Sign me out' button.
  • title - The title message in the dialog box. The default value is 'Your session is about to expire!'
  • message - The countdown message where {0} will be used to enter the countdown value. The default value is ''You will be logged out in {0} seconds.'
1$.timeoutDialog({
2      timeout: 1,
3      countdown: 60,
4      logout_redirect_url: 'http://mywebsite.com'
5});
There are many other options as well which you can set. Please visit the official website for more detail.

Download Source
https://github.com/rigoneri/timeout-dialog.js