Hack 64. Create a Login Box That Shrugs Off Invalid Logins | Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Use script.aculo.us to create a login control that shakes like a Mac OS X control if the login is invalid.

This hack sets up script.aculo.us with a web page, as explained in "Integrate script.aculo.us Visual Effects with an Ajax Application" [Hack #63], and then implements a text entry box that shakes if the user types in an invalid entry. If you've ever tried to log into Mac OS X with an incorrect username, you'll recognize this behavior. If the user enters a valid value in the text box, the hack makes an Ajax request, submitting the value to a server. The server's response to the request is displayed beneath the login button; this message automatically fades away in 10 seconds.

Whenever you implement a login-type widget, make sure that the application is designed to prevent any outsiders from mining your systems for valid usernames.

Here is the web page code for the hack, with script tags that import the required JavaScript files:

<html> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <script src="/books/4/254/1/html/2//javascripts/prototype.js" type="text/javascript"></script>     <script src="/books/4/254/1/html/2//javascripts/scriptaculous.js" type=
    "text/javascript"></script>     <script src="/books/4/254/1/html/2//javascripts/efflib.js" type="text/javascript"></script>     <style type="text/css">         @import "/stylesheets/hacks.css";     </style>     <title>Use script.aculo.us</title> </head> <body> <div  > <span >Enter your login name: </span> <form action="javascript:void%200" method="get"> <input  type="text" size="25" maxlength="30" class=
"txtbox"><br />  <button  >login</button>  <div   style="display:none;"></div> </form> </div> </body> </html>

Figure 8-2 shows what this web application looks like in Firefox 1.5.

Figure 8-2. Don't get shaken down

Users are invited to type their login names in the text field, and then click the "login" button to submit them. If the name entered is less than six characters long or contains any numbers, the box "shakes" or moves back and forth quickly, like a Mac OS X login field when a user enters an invalid name. If the login name passes muster, the application sends an Ajax request with the login name to a server, which returns the server name and the login name it received. This message is displayed beneath the login button, as Figure 8-3 shows.

Figure 8-3. A good name fades away

This message remains for 10 seconds, then elegantly fades away. Now let's see how we did that. Here's the efflib.js code:

window.onload=function(  ){     if($("login_nm") && $("gobut")){        $("gobut").onclick=function(  ){             if((! $F("login_nm")) || ($F("login_nm").length < 6) ||                    $F("login_nm").match(/\\d+/g) ){                  $("login_nm").value="";                  Effect.Shake('entry_box');             }  else {                 Svar xmlHttp= new Ajax.Request("/hacks/shake_resp",                 {method: "get",                     parameters: "login_nm="+$F("login_nm"),                     onComplete:function(request){                         $("answer").innerHTML=request.responseText;                         Effect.Appear("answer");                         var vrl=window.setInterval(function(  ){                             Effect.Fade("answer");                             window.clearInterval(vrl);                         },10*1000);                         }});             }        }     } };

Whole Lotta Shakin'

When the user clicks the login button, the code validates the text field, using a Prototype shortcut for getting the value of a form element ($F("login_nm")).

To use this shortcut, pass the id of the HTML element (nm_info, in the following example) to $F( ):

<input type="text"  size="25" />

If the validation fails, the code implements the shake behavior in this way:

Effect.Shake('entry_box');

The parameter to the Shake method is the id of the div that does the shakin' and bakin'.

If the validation succeeds, the code initiates an Ajax-style request with Prototype's Ajax.Request object. This request sets the stage for a couple of additional script.aculo.us effects:

Effect.Appear("answer"); var vrl=window.setInterval(function(  ){ Effect.Fade("answer"); window.clearInterval(vrl); },10*1000);

Effect.Appear( ) makes an element visible if the code initially sets its display CSS property to none:

<div   style="display:none;"></div>

Just pass in the id of the element you want to reveal as a parameter. One sort of hackish way to make the visible element fade away again on a timer is illustrated in the prior code snippet. I used the window.setInterval( ) method to wait 10 seconds and then call Effect.Fade("answer"). The code then clears that interval immediately, so it calls Effect.Fade( ) only once. This generates the effect where the server message appears beneath the login button for 10 seconds, then fades away.

Serve It Up

The server-side code is fairly trivial in the Ruby on Rails (RoR) framework:

class HacksController < ApplicationController        def shake_resp       if @request.xml_http_request?(  )          render :text => "Server--> "+          @request.env(  )["SERVER_SOFTWARE"].to_s+          " responds to login "+params[:login_nm].to_s       end     end

This code checks if the request originates from XMLHttpRequest, then it sends back some text specifying the name of the server software and the request parameter value (see "Find Out Whether Ajax Is Calling in the Request" [Hack #59]).

You can find more information on the Effect.Shake API at http://wiki.script.aculo.us/scriptaculous/show/Effect.Shake.