Prepared just for Show and Tell Thursday!
By Mark Barton with Jerry Carter
Getting tired of ugly Domino login forms or faceless browser pop up dialogs? Once again showing a flair for melding various techniques, Mark Barton brings us an elegant, cutting edge modal login interface utilizing DHTML, Ajax, and JSON JavaScript notation.
Updated Jan 14 2009 - our apologies, the demo is no longer available for download.
Introduction
This article will explain how to have a cross browser modal Domino login form which will gracefully inform the user if they have not successfully logged in. This is not a new topic, and many of our peers have discussed it before. But with the growing popularity of robust, cross browser JavaScript libraries, we have an opportunity to do this in a really beautiful way without much effort.
Jake has already mentioned before about the need for an embedded login form. It's true our options are limited with stock Domino, but this technique provides a way that Jake can have his embedded login but gives us the option to go a slight bit further.
Building on top of Yogis example and utilizing the power of the Prototype script library, along with the visual simplicity of the extended Lightbox script written by Particletree we arrive at our demo page
How it works
The technique relies on the following prerequisites:
- The server is running Session based authentication for the required domain
- The code relies on the Prototype script library
- Assumes the standard error message returned by a failed authentication is in English (I will explain why below).
AJAX Login
We'll need a few pieces to put this all together, starting with the Login Page (in this case, literally a page design element. We've been using a lot more pages in our designs to get the control over Domino we want.) It just has your basic UI bits showing the user where to click to login to the application.
When the user clicks the login link this calls the login method from the login Object - this JavaScript object can be found in the JavaScript library - login.js.
NB I should point out the JavaScript code is written in JSON format - which has many advantages to procedural JavaScript - for more info on this read JSON for the masses either way it should still make sense
The first thing this code does is display a processing graphic (just unhides it) - this is good practice when performing any AJAX calls as it lets the user know something is happening.
Next it will URL escape the username and password and then, using Prototype's AJAX request method, perform a HTTP Post to - http://DominoServer/Names.nsf?login with our users login credentials.
NB In case you're new to logins and authentication, passwords and ID's are always passed as clear text over http:// whether using GET or POST. The only way to address this is to use SSL, which gets you https:// (s for secure). You can get SSL certificates for your server fairly cheap these days, but getting one and applying one to your server are both beyond the scope of this article.
This will result in the Domino server either returning some HTML informing the user of a any potential login problem. This response content is passed to the onComplete handler which looks, specifically, for the text "Invalid username or password was specified." This is where internationalisation may be an issue - you just need to make sure the boolean test conditions correspond to what your Domino server returns.
NB Check out the DomBulletin template on OpenNTF for some crafty ideas on internationalising web interfaces with js libraries.
If the string is found (meaning a login error), the user is informed via an alert, the input fields are cleared and the "processing" graphic is hidden again.
If the string was not found, then we have a successful login and we're free to accommodate the user with access to secured features or content. In my case I just reload the current page, but you could route them to a new page, trigger an email, make the screen colors flash like a Vegas slot machine, you're call. Handling the response through our Ajax mechanism means our outcome is JavaScript driven, which means the options are wide open.
Lightbox
To get the login box to display in a modal fashion - rather than embedding the whole form in the current page we use the Particletree script.
NB Yes, you can embed the form. But, we're all about unambiguous functionality, so making the login form the center of focus and shading the rest of the page seems about as straight forward and unambiguous as you can get, to us anyway. One could argue usability but it's really a pure look and feel issue. Do as you like (or as are requested by your customer!)
The script that comes with Lihtbox is very simple but has a limitation in that its not set up to resize the container DIV which holds the modal form without some modification. This might be addressed in later versions, but for now it suits our purpose anyway.
The original demo also has styling for a specific use: popping-over photos. This may not really be suitable for your idea of a modal form, so take heart that modifications are not too difficult. In this case, the CSS file that comes with the Lightbox demo was modified to make the content DIV have a transparent background to suit Mark's taste - the choice of how you integrate these elements is of course yours.
Once you have included or linked the script library and CSS file in your page all you need to do is make sure the "Login" link has a class of lbOn (short for Lightbox On), you can have multiple classes as in the example.
e.g.
Login to the Application
What the script does, when clicking on the above, is pull in the contents of the response via an AJAX call and then display it in a pseudo modal dialogue.
NB WC3 allows multi-classing with a blank space delimiter. This is a great way to modularize your CSS, in case you'd never seen it (Jerry just abused this technique liberally on a large project for speed and ease of control over many styles and pages). Most modern browsers support this functionality. If you need to support NS4 or IE5, you may want to do some testing first.
The Lightbox script can pull any HTML content into the Lightbox also making it useful for help or instructional pop-overs. Just make sure your display DIVs have an overflow property so a scroll bar can be displayed if its too large (e.g.: overflow:auto.)
Conclusion
The techniques displayed here propose a way to utilize the latest and greatest scripts to enhance your Domino applications in an accessible and usable (not to mention pleasing) way without exerting great effort. No doubt, with the blazing speed at which new and more powerful libraries are being brought to public notice, achieving similar effect in the near future will have more variations and options. But, for the moment, this offers very slick presentation with ease of implementation. Sounds good, eh?
Updated Jan 14 2009 - our apologies, the demo is no longer available for download.
P.S. don't forget to have at look at the JSON method of writing JavaScript.