mikedopp.net

doppNet
posts - 56, comments - 8, trackbacks - 1

Digg like Login control

This is pretty cool.

 

   1:   <a id="login-link" href="javascript:showLogin();">Login</a>
   2:  <div id="login-panel" style="visibility: hidden;">
   3:     <fieldset onkeydown="checkForEnter();">
   4:         <label>
   5:             UserName:
   6:             <input type="text" id="userName" /></label>
   7:         <label>
   8:             Password:<input type="password" id="password" /></label>
   9:         <label class="checkbox" for="rememberMe">
  10:             <input type="checkbox" id="rememberMe" checked="checked" />Remember Me
  11:             <asp:Button ID="Button1" runat="server" UseSubmitBehavior="false" onClientClick="setTimeout(loginButton_Click, 0); return false;" Text="Login &raquo;" PostBackUrl="~/catalog/Default.aspx" /></label></fieldset>
  12:  </div>
 
Javascript involved:
 
   1:  //// These functions here are mearly for a "WOW" factor. They have nothing
   2:  //// to do with ASP.NET AJAX. The ASP.NET AJAX functionality is below.
   3:   
   4:  var hideTimerID = 0;
   5:   
   6:  function showLogin() {
   7:      clearTimeout(hideTimerID);
   8:   
   9:      $get("login-link").style.visibility = "hidden";
  10:   
  11:      $get("login-panel").style.visibility = "visible";
  12:   
  13:      $get("userName").focus();
  14:   
  15:      // Hide the login panel after 30 seconds.
  16:      hideTimerID = setTimeout(hideLogin, 30000);
  17:  }
  18:   
  19:  function hideLogin() {
  20:      $get("login-link").style.visibility = "visible";
  21:   
  22:      $get("login-panel").style.visibility = "hidden";
  23:   
  24:      // Blank out the username and password for security reasons.
  25:      $get("userName").value = "";
  26:   
  27:      $get("password").value = "";
  28:  }
  29:   
  30:  function checkForEnter(e) {
  31:      if (!e) e = window.event;
  32:   
  33:      if (e && e.keyCode == 13) {
  34:          loginButton_Click();
  35:      }
  36:  }    
  37:   
  38:      
  39:  //// Now we are in the actual ASP.NET AJAX implimentation. These are some very
  40:  //// simple JavaScript methods that will tap into the ASP.NET AJAX Framework.
  41:   
  42:  function errorCallback(error) {
  43:      alert(error.get_message());
  44:  }
  45:   
  46:  function loginCallback(loggedIn) {
  47:      hideLogin();
  48:      if (loggedIn == false) {
  49:          alert("The username and password you supplied is invalid.");
  50:      }
  51:  }
  52:   
  53:  function loginButton_Click() {
  54:      Sys.Services.AuthenticationService.login($get("userName").value, $get("password").value,
  55:          $get("rememberMe").checked, null, location.href, loginCallback, errorCallback);
  56:  }
  57:  function logoutButton_Click() {
  58:      Sys.Services.AuthenticationService.logout(location.href, null, errorCallback);
  59:  }

Enjoy!

Print | posted on Tuesday, July 31, 2007 6:00 AM |

Feedback

No comments posted yet.

Post Comment

Title  
Name  
Email
Url
Comment   
Please add 5 and 2 and type the answer here:

Powered by: