Digg.com like Login Control

Simple and Pretty Cool.

Originally Posted on mikedopp.net

 <a id="login-link" href="javascript:showLogin();">Login</a>
    <div id="login-panel" style="visibility: hidden;">
       <fieldset onkeydown="checkForEnter();">
           <label>
               UserName:
               <input type="text" id="userName" /></label>
           <label>
               Password:<input type="password" id="password" /></label>
           <label class="checkbox" for="rememberMe">
               <input type="checkbox" id="rememberMe" checked="checked" />Remember Me
               <asp:Button ID="Button1" runat="server" UseSubmitBehavior="false" onClientClick="setTimeout(loginButton_Click, 0); return false;" Text="Login &raquo;" PostBackUrl="~/catalog/Default.aspx" /></label></fieldset>
    </div>
 

Javascript involved:
   These functions here are mearly for a "WOW" factor. They have nothing
    to do with ASP.NET AJAX. The ASP.NET AJAX functionality is below. 

var hideTimerID = 0;
    
   function showLogin() {
       clearTimeout(hideTimerID);
    
       $get("login-link").style.visibility = "hidden";
    
       $get("login-panel").style.visibility = "visible";
    
       $get("userName").focus();
    
       // Hide the login panel after 30 seconds.
       hideTimerID = setTimeout(hideLogin, 30000);
   }
    
   function hideLogin() {
       $get("login-link").style.visibility = "visible";
    
       $get("login-panel").style.visibility = "hidden";
    
       // Blank out the username and password for security reasons.
       $get("userName").value = "";
    
       $get("password").value = "";
   }
    
   function checkForEnter(e) {
       if (!e) e = window.event;
    
       if (e && e.keyCode == 13) {
           loginButton_Click();
       }
   }

Now we are in the actual ASP.NET AJAX implementation. These are some very
  simple JavaScript methods that will tap into the ASP.NET AJAX Framework.

  

function errorCallback(error) {
       alert(error.get_message());
   }
    
   function loginCallback(loggedIn) {
       hideLogin();
       if (loggedIn == false) {
           alert("The username and password you supplied is invalid.");
       }
   }
    
   function loginButton_Click() {
       Sys.Services.AuthenticationService.login($get("userName").value, $get("password").value,
           $get("rememberMe").checked, null, location.href, loginCallback, errorCallback);
   }
   function logoutButton_Click() {
       Sys.Services.AuthenticationService.logout(location.href, null, errorCallback);
   }
 
Of course feel free to change it how you like but this is the basic howto.
 

No Comments