« Flyout Menus Now Working in IE 7. But what about IE 6? | Blogs | Using Flyout Menu to Administer Web Applications »
How to Embed a Login Form on All Lotus Domino Pages
From the limited feedback I received on the flyout menus what I did get was a couple of questions (as in, literally, two people asked) about how I managed to provide a login form that wasn't just the default Domino one. It seems people are unaware how simple this is to do. No, there isn't any special jiggery-pokery going on server-side. It's just a few lines of Passthru HTML!
Here's a screenshot of the Form:
Yep. It's all just passthru HTML. What we have is a form (the bit between the red lines is the important part) that simply mimics the default Domino login form. By design it always points to the same place, so we can simply hard code the action parameter of the form to "/names.nsf?login". The field names are always the same too, so we just need to make sure we have the two fields on our "fake" form -- one called Username and one called Password.
The other field I've added is optional but useful nonetheless. It's called RedirectTo and does pretty much what its name suggests. If you pass the path of the page you're currently viewing to this field then a succussful login will return the authenticated user back to the same page. To do this you can see I've used a Computed Value for the input's value. To pass the path of the current page the Formula for the Computed Value is simply Path_Info, which is the name of a self-referencing CGI field you need to add to your form.
All very straight-forward so far. Now for the painful part.
Form elements in HTML can not be nested. This means that if there's an open <orm> tag on the page then you need to close it with a </form> before you can include the above PassThru!
The trouble is that Domino has a tendency to stick in its own form tags even when you don't need them. Predicting whether it will or not isn't as easy as you'd think. It's easier to assume it will and so we need to close Domino's form with a close form tag at the top of our form.
Closing Domino's form can mean the actual Form that you've embedded the login form in to no longer works. Whether you feel safe doing this or not depends on each application. In most cases you need to be logged in to create stuff anyway, so there's no need to worry about the Forms and whether they can be submitted or not.
If you can't close Domino's Form and still need an embedded login form then you can always stick it right at the bottom of the Form. You then know that all your fields and buttons will still function. You just then need to use CSS to move the login form back to the top somewhere using absolute positioning.
One thing's for sure. While it might be easy to do it's not always as simple as it should be. This, as ever, is because of Domino. I read somewhere that massive changes to the way Domino produces HTML are on there way in version 8.5. Not a moment too soon. I just hope it's going to answer at least some of the pains of developing with Domino, such as this one. Things that should be so simple are often a headache.
Further reading: Custom Login Forms - A How-To - how to configure Domino to use a custom login form for each database.
Comments
Caroline (Wed 30 Jan 2008 06:07 AM)
This looks useful - not something I've ever thought about doing until now. Thanks.
Not sure about the <orm> element though! ;-)
"Form elements in HTML can not be nested. This means that if there's an open <orm> tag on the page then you need to close it with a </form> before you can include the above PassThru!"
Nick (Wed 30 Jan 2008 07:57 AM)
Thanks Jake. More reason you got the reward. I never put any thought into putting this into our website, and I am quickly applying this as we speak.
Nick (Wed 30 Jan 2008 07:57 AM)
Ooops. No money in it, I guess I should have said "Award"
Ajay B Mali (Wed 30 Jan 2008 08:17 AM) e-mail
Hi Jake,
We are getting two HTML form tag in view source of page in browser, one form tag for main form and other which is login form.
My question is, How will I handle when we are submiiting the Login form ? Will it submit the main form as well ?
Could you please help me
Regards
Ajay B Mali
jay (Wed 30 Jan 2008 09:26 AM) website
Just make sure that the LOGIN form is NOT nested inside the MAIN form. As long as they are not nested, the correct form will be submitted.
Erik (Wed 30 Jan 2008 09:49 AM) website / e-mail
Thank you!
Sometimes we focus on domino being so different, that we try to make things to hard and miss these simple solutions.
You're the man!
Chris Toohey (Wed 30 Jan 2008 12:04 PM) website / e-mail
I do something like this - but as I roll my own forms etc. I don't have to worry about this as much. What I typically do is have a DIV id'ed as "popup", where I'll throw UI prompt content and make it act as a modal window (ie., z-index it out, drop a full-page semi-transparent DIV between the background and the "popup") and use AJAX to populate said popup with whatever I need.
Most of the time it's field-level stuff - ie., a widget to complete a subset of fields on the form or something like that (think name pickers, etc.), but I've used the same approach to give the user a login form from anywhere in the application. The "popup" DIV sits right after the BODY tag, so it's never really an issue having to deal with nested forms - despite the DHTML giving the appearance of such functionality.
That being said, good stuff! ;-)
Tommy Valand (Wed 30 Jan 2008 01:41 PM) website / e-mail
@Ajay: I've made a demoapplication on how to inject forms using DHTML if you're interested. Somewhat similar technique to what Chris is talking about, although not as fancy, as it was a quick mockup.
{Link}
Sorry for the intrusion Jake.. :)
Chris Toohey (Wed 30 Jan 2008 02:52 PM) website / e-mail
Well, if Tommy can link to *his* article... ;-)
{Link}
Rob (Sat 2 Feb 2008 11:40 AM) website / e-mail
Thanks Jake. That's just the info I need to try out your flyout login (that has a ring to it).
I like Tommy's idea about squeezing the code into the HTML body attribute form field too.
You're making me a hero to my customers.
Rob:-]
Ian (Mon 11 Feb 2008 11:02 AM) e-mail
Does the login form rely on single signon being switched on?
Jake Howlett (Mon 11 Feb 2008 11:23 AM)
Do you mean session-based authentication Ian? If so, yes. No need for SSO as such.
andy (Tue 12 Feb 2008 06:46 AM) website / e-mail
Here is a modified way of logging on using AJAX...
Using the same form from Jake..
add this code to your jsHeader..
var oXmlHttp;
function getHTTPObject()
{
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
throw new Error("XMLHttpRequest not supported");
}
}
function stateChanged()
{
if (oXmlHttp.readyState==4 || oXmlHttp.readyState=="complete")
{
document.write(oXmlHttp.responseText);
}
}
function login()
{
var content = '';
oXmlHttp = getHTTPObject();
oXmlHttp.onreadystatechange = stateChanged;
oXmlHttp.open( "POST", '/names.nsf?login', true );
oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
content += "&redirectto=" + document.getElementById('redirectto').value;
content += "&username=" + document.getElementById('form_email').value;
content += "&password=" + document.getElementById('form_password').value;
oXmlHttp.send(content);
}
and this to your form...
<input type ="button" value ="login" onclick= "login()">
everything else remains the same.
andy : notes411
Add your response here:
