The Client-Side Implementation

Moving on to the client side, there's one main file (loginPanel.html, see Listing Four) that does all the real work. Two additional small files (loginMeditiator.html, Listing Five, and loginRequestMediator.html, Listing Six) handle the inter-frame communication tasks. There's a fourth file (ajax.js) that's included in the source code distribution, that handles the actual AJAX request to the server.

LoginPanel.html

Half of the loginPanel.html file (Listing Four) is UI code, which I'm not going to look at in depth. The UI is defined by a bunch of <div> elements at the end of the file, which are displayed or hidden depending on what state the system is in. The various displayXXX methods towards the middle of the file do the hiding and displaying.

The more interesting code handles cookie management and server communication. The Cookie at about line 120 handles general cookie management. It has three methods:

1. flush(lifetime): This is the method that actually writes the cookie out to the browser's persistent store. You pass it the lifetime of the cookie in milliseconds. If the user choses "remain logged in," the lifetime is forever; otherwise it's very short (a maximum of 10 minutes). If the cookie exists at all, an automatic login is attempted when the file is loaded. The cookie contents is a bit of JSON that holds the login-session ID, the user name, and the value of the remain-logged-in flag.
   The flushCookie() method (just beneath the class definition we're looking at) is called to actually flush the cookie to the disk. When you chose to remain logged in, the cookie never expires, but it will be removed when you log out. More interesting code is the else clause, which handles the don't-remain-logged-in case:
   
   

   	loginCookie.flush( cookieLifeTime );
   	setTimeout( 'flushCookie()', cookieRenewalInterval );
       

   
   
   The flushCookie() method flushes the cookie to the disk with the default 10-minute lifetime. Then, a timer is created that wakes up every 5 minutes (cookieRenewalInterval). When the timer expires, it calls flushCookie() again, effectively renewing the life of the cookie for another 10 minutes. Note that this call isn't recursive. The timer calls flushCookie(), but flushCookie() doesn't call itself.
   When you navigate away from the current page, the timer ceases to exist, and the cookie just expires after 10 minutes. With no cookie, automatic login attempts will fail. If you return to the page while the cookie still exists, however, the login object will log you in automatically.
2. load(): Loads the cookie from the disk when you load the page and transfers the fields in the JSON to local varibles where they're easier to get at.
3. remove(): Removes the cookie. Used by logout.

The other methods of interest are the ones that make the AJAX calls (towards the end of the file). Taking doLogin() as characteristic, two methods work in concert. First, doLogin() itself, modifies the login cookie, and then makes an AJAX call to the server:

function doLogin( userName, password, remainLoggedIn )
{
    loginCookie.remove();
    loginCookie.loginSessionID = "";
    loginCookie.userName = userName;
    loginCookie.remainLoggedIn = remainLoggedIn;

    AJAXRequest( 'GET', 'loginManager?action=login'
                + '&username='      + userName
                + '&password='      + password
                , '', loginCallback );
}

The last argument to AJAXRequest is a callback method that's executed when the server returns a value to us:

function loginCallback( json )
{
    eval( 'response = ' + json + ";" ) ;
    
    if( response.status == 'OK' )
    {
        if( redirectURL )
            window.top.location = redirectURL;
            
        loginCookie.loginSessionID = response.loginSessionID;
        flushCookie();
        displayLogout();
        sendLoginNotification( response.userData );
    }
    else
    {
        window.alert( "We didn't recognize your user name or password (or both)." );
        displayLogin();
    }
}

The callback method is passed the JSON string that the Servlet returned to us, and the eval submits this JSON to the JavaScript interpreter, effectively creating a JavaScript object referenced by the variable response. The fields from the response can then be accessed using code like response.status.

AJAXRequest() is defined in the ajax.js file that I mentioned earlier. It is available in the source code distribution.

You can download Listing Four here.