Adding a user agreement JavaScript plugin to IdeaJam

The following is an overview of implementing a simple “terms and agreement” JavaScript plugin to your existing IdeaJam Web site.

First, you need to create the necessary language strings in each of the languages that your IdeaJam installation is using. Within each language, the following JavaScript variables need to be defined in the JavaScript Settings section:

Defining language strings

var LANG_LOGIN_LEGAL_AGREEMENT = 'I acknowledge I have read and understood the terms and agreement policy of this Web site.';
var LANG_LOGIN_LEGAL_NOACCEPT = 'You confirm you have acknowledged the terms and agreement policy.'; 

LANG_LOGIN_LEGAL_AGREEMENT contains the text that will appear next to the checkbox, while LANG_LOGIN_LEGAL_NOACCEPT is the text that appears when the user attempts to login without first checking said box.

Adding the custom HTML to the DOM

Since this is a custom piece, JavaScript was used to integrate the plugin into the existing application – client-side.

To keep things simple, I just inserted two HTML elements – the checkbox field and a <div> to act as a wrapper (for styling purposes only).

Since this plugin should be rendered while the page is loading, it’s important to insert it somewhere in the existing DOM – but beneath the login box. Fortunately, there is an existing control within the control panel called Welcome Text that can be used as the container for this custom JavaScript.

Within Welcome Text the following JavaScript needs to be inserted which will create the necessary DOM elements:

var legalCheck = document.createElement('div');

// Basic styling to create some gutter space between the login button.
legalCheck.setAttribute('style', 'margin: 5px 0; text-align: left;');

// Create the checkbox (with accompanying text label) for the terms agreement.
legalCheck.innerHTML = '<input type="checkbox" value="1" id="legalterms_agreement" name="legalterms_agreement" />&#160;' + LANG_LOGIN_LEGAL_AGREEMENT;

// Insert the new checkbox element in the DOM before the login button.
var loginButton = document.getElementById('quickloginbutton');
document.getElementById('loginHolder').insertBefore(legalCheck, loginButton);

Now that the HTML components are in place, all that remains is to hook them up to an onclick event and determine whether or not the terms and agreement checkbox has been selected or not.

Attaching JavaScript functionality

Before the login form fires off its response to the server, we must first check to ensure that the checkbox has indeed been checked. If it has, then proceed as normal; otherwise, an error message needs to be returned and the form should not submit.

In addition, the user should not have to go through this process each time they login, so their result – once they have confirmed they have read the terms and conditions by checking the box – will be stored within a cookie. When the come back to the site at a later date, the terms and conditions box will be checked/disabled automatically and they can just login as-per-normal.

The following is the code snippet (including functions for reading and writing a cookie) that achieves this:

function createCookie(name,value,days) {
  if (days) {
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

var cookie = readCookie('legalterms')
var legalCheckbox = document.getElementById('legalterms_agreement');

if(cookie == "accepted") {
	legalCheckbox.setAttribute('checked', 'checked');
	legalCheckbox.setAttribute('disabled', 'disabled');
}

loginButton.onclick = function() {
	if(legalCheckbox.checked) {
		createCookie("legalterms", "accepted", 365);

		return true;
	} else {
		alert(LANG_LOGIN_LEGAL_NOACCEPT);

		return false;
	}
}

And there you have it, a functional terms and agreement solution for your IdeaJam powered Web site!

Feedback

Always good to hear positive feedback – appreciate the kind words from the Elguji IdeaJam folk.

Screenshot of blog response to my article.