Terms & Conditions for Lotus Connections Login page

Tweet

Recently, I was working with a customer who wanted to ensure that their users agree to some terms and conditions before being able to log on to Lotus Connections. It turns out that this customization is not too bad. I had heard from Mitch Cohen that jQuery was a nice library to do this.

I did some searching online to see if someone had done something similar. I found this awesome article: Modal Confirmation Dialog on Form Submit: Javascript, jQuery, and Thickbox. It basically shows you how to do the same thing in 3 different ways. I chose to use jQuery for this little project.

Here's step-by-step how I did it:

1. Download the jQuery libraries. This link did it for me: http://jqueryui.com/download/jquery-ui-1.7.2.custom.zip
2. Extract the files to a directory in your HTTP server. I put them in a directory called jq in: C:\IBM\HTTPServer\htdocs\en_US
3. Go to <WAS_PROFILE_ROOT>\installedApps\<cellName>\Homepage.ear\dboard.war\auth
4. Save a copy of login.jsp
5. Open login.jsp with your favorite text editor
6. Add the following before the closing </HEAD> element
   
   

   <!-- Include jQuery --> <link rel="stylesheet" type="text/css" href="/jq/jquery-ui-1.7.2.custom.css"> <script type="text/javascript" src="/jq/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/jq/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ // jQuery UI Dialog $('#dialog').dialog({ autoOpen: false, width: 400, modal: true, resizable: false, buttons: { "I Agree": function() { document.lotusLoginForm.submit(); }, "I do NOT agree": function() { $(this).dialog("close"); } } }); $('form#lotusLoginForm').submit(function(){ $('#dialog').dialog('open'); return false; }); }); </script>

   
   
7. Now go on to the end of the file.
8. Just before the </BODY> element, insert the following code:
   
   

   <div id="dialog" title="Terms and Conditions"> <p> <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> <p>Lorem ipsum,blah blah blah</p> <p>If you agree, click <b>I Agree</b> below.</p> <p>Otherwise, click <b>I do NOT agree</b>.<p> </div>