timeout-dialog.jquery.js

Table of Contents

• Description
• Demo
• Example and Documentation
  • Options
  • How to use
• Support
• Dependencies
• Credit

Description

timeout-dialog.jquery.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.

Demo

timeout-dialog.jquery.js examples (jamesperrin.github.io)

Example and Documentation

Options

Name	Type	Default	Description
timeout	number	1200	The number of your session timeout (in seconds). The timeout value minus the countdown value determines how long until the dialog appears.
countdown	number	60	The countdown total value (in seconds).
title	string	'Your session is about to expire!'	The title message in the dialog box.
message	string	'You will be logged out in {0} seconds.'	The countdown message where {0} will be used to enter the countdown value.
question	string	'Do you want to stay signed in?'	The question message if they want to continue using the site or not.
keepAliveButtonText	string	'Yes, Keep me signed in'	The text of the YES button to keep the session alive.
signOutButtonText	string	'No, Sign me out'	The text of the NO button to kill the session.
keepAliveUrl	string	/keep-alive	The url that will perform a GET request to keep the session alive. This GET expects a 'OK' plain HTTP response.
logoutUrl	string	null	The url that will perform a POST request to kill the session. If no logoutUrl is defined it will just redirect to the url defined in logoutRedirectUrl.
logoutRedirectUrl	string	/	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.
restartOnYes	boolean	true	A boolean value that indicates if the countdown will restart when the user clicks the 'keep session alive' button.
dialogWidth	number	350	The width of the dialog box.
enableClientEvents	boolean	false	Flag to enable client event to keep sessin alive.
ajaxSettings	json	ajaxSettings: { type: 'POST', url: this.keepAliveUrl, contentType: 'application/json', dataType: 'json', cache: false, headers: { Accept: 'application/json', },	A JSON object for overriding jQuery AJAX settings.

How to use

$(function () {
  $('#timeout-example').click(function (e) {
    e.preventDefault();

    $.timeoutDialog({
      timeout: 1,
      countdown: 60,
      logoutRedirectUrl: 'https://github.com/jamesperrin/timeout-dialog.js',
      restartOnYes: false,
    });
  });
});

Support

Please contact @jamesperrin if you have any questions or change requests.

Dependencies

• jQuery
• jQuery UI

Credit

timeout-dialog.js was originally developed by Rodrigo Neri(@rigoneri)