In my previous post I hinted at how an unobtrusive javascript login system might look. I’ve put together the following example to expand on the idea.

Here are the steps that we’ll cover:

1. Create a working HTML-based login system
2. Enhance the login links to show the login form in a lightbox
3. Add error handling to lightbox login form
4. Discuss some of the problems with a completely unobtrusive approach

I’ll be using the authlogic gem for authentication, jQuery for awesomeness, and facebox for a lightbox.

Simple HTML login

Rather than building an authentication system from scratch I’ve forked Ben Johnson’s authogic_example.

At this point we have a working app that will let us register and login along with all the javascript libraries we’ll need.

Enhancement

First, we need to change the UserSessions#new

What is happening here is that we’re choosing not to render the layout if the request is an AJAX request.

The next step is to add an identifying attribute to the login link to create a lightbox. We’ll go ahead and follow the Facebox idiom of adding rel="facebox":

Now we can move to the Javascript.

Facebox makes this super simple. However, in the next part we’ll have to take more granular control of displaying the lightbox in order to deal with AJAX-ifying the login form.

Error handling

Now we have an awesome lightbox but when we submit bad data then the page changes and we end up at the regular old Login page. We need to add the appropriate javascript and change the create action to handle bad stuff.

The final step is to call the function we just defined in the success callback so we always attach this behavior when the form is loaded.

This might look complex but here is what is happening:

• We attach to the click event for the login link.
• We pass facebox an anonymous function so that we will still see the loading animation immediately after the user clicks the link.
• We do a GET on the link’s href, open that in the lightbox, and AJAX-ify the newly added login form.

Now when we try to login with bad credentials…

If you’d like to see all of this put together then you can checkout the part_one branch (git checkout -b part_one origin/part_one).

Problems

I am not preaching the One True Way™, rather, I am trying to find a better way. Here’s some disclosure about the problems I see with this approach:

• We have to put a fair amount of HTML in our Javascript. Instead, the controller could render the action minus the layout with a status of 406.
• 406 Not Acceptable may be a bad choice for bad params. I really don’t know which code is the best choice.
• If we go to /user_sessions/new and click the login link then we render the login form twice on a page which means there are two DOM IDs of #new_user_session
• We’ve put request.xhr? in the controllers and added more complexity. We could take a more idiomatic approach using something like format.xhr or respond_to_xhr by building a Rails plugin.

Next steps

In part two we’ll go over how to prompt a user with the lightbox for credentials when she clicks a link requiring an authenticated session.