Criando um Formulário em Ajax de Login com jQuery

Artigo original escrito por Justin

Neste artigo eu quero mostrar como usar o jQuery para crirar uma tela de login com AJAX. Eu vou utilizar uma aplicação ASP.NET MVC para esta demonstração. Vou estar modificando a pequena aplicação padrão que é criada quando abrimos uma nova aplicação MVC. Então vamos em frente e crie uma aplicação MVC. Eu vou explicar o passo a passo, então quando este artigo estiver pronto, você terá uma aplicação em funcionamento.

Passo 1

Abra o LogOnUserControl.ascx. Ele está em /Views/Shared/. O que queremos é modificar o link para incluir um atributo onclick que irá disparar o a função login() e associar um id ao link. O código deve se parecer com este:

   1: <%= Html.ActionLink("Log On", "LogOn", "Account", null,

   2: new { onclick = "return login();", id = "login_link" })%>

Passo 2

Abra a página Site.Master, também localizada em /Views/Shared/, inclua os links para o stylesheet, o jQuery e o JavaScript na ssão head do documento.

   1: <link type="text/css" rel="stylesheet" href="../../Content/login.css" />

   2: <script type="text/javascript" src="../../Scripts/jquery-1.2.6.min.js"></script>

   3: <script type="text/javascript" src="../../Scripts/login.js"></script>

Vamos em frente e criar um arquivo chamado login.css em /Content/ e um login.js em /Scripts/. Deixe eles vazios por enquanto.

Passo 3

Ainda na Site.Master, insira o seguinte código no final da página, logo antes de fechar a tag body. Este é o nosso formulário de login que iremos usar. O código contem uma div com o id lightbox que irá cobrir a tela para causar a impressão de que nosso login é modal. O lightbox criará um fundo preto transparente.

Adicionalmente aos elementos input do formulário existe também uma div chamada message que servirá como uma área para as mensagens de retorno ao usuário.

<div id="lightbox"></div>
<div id="login_outer_container">
<div id="login_form">
<div id="message"></div>
<fieldset>
<legend>Login Information</legend>
<p>
<label for="username">Username:</label>
<%
   = Html.TextBox("username")
%>

<%
   = Html.ValidationMessage("username")
%>

</p>

<p>

<label for=”password”>Password:</label>

<%
   = Html.Password("password")
%>

<%
   = Html.ValidationMessage("password")
%>

</p>

<p>

<%
   = Html.CheckBox("rememberMe")
%> <label class=”inline” for=”rememberMe”>Remember me?</label>

</p>

<p>

<input type=”button” value=”Log On” onclick=”submitForm();” />

<input type=”button” value=”Cancel” onclick=”cancelLogin();” />

</p>

</fieldset>

</div>

</div>

Passo 4

Insira o seguinte código ao login.css. Este será o estilo para os elementos do nosso formulário.

   1: #lightbox {

   2: position: absolute;

   3: top: 0;

   4: left: 0;

   5: width: 100%;

   6: background: black;

   7: filter: alpha(opacity=60);

   8: opacity: 0.6;

   9: display: none;

  10: }

  11: 

  12: #login_outer_container {

  13: position: absolute;

  14: top: 50%;

  15: left: 50%;

  16: }

  17: 

  18: #login_form {

  19: position: relative;

  20: top: -125px;

  21: left: -200px;

  22: width: 400px;

  23: height: 250px;

  24: display: none;

  25: background: white;

  26: padding: 10px;

  27: border: 1px solid #424242;

  28: }

  29: #message {

  30: display: none;

  31: border: 1px solid #b8b8b8;

  32: background: #f6f3f6;

  33: padding: 5px;

  34: color: Red;

  35: }

  36: 

Passo 5

Agora é onde a mágica realmente acontece. Vamos inserir código ao login.js. Eu vou explicar lentamente o que cada função está fazendo e porque isso interessa para a nossa aplicação.

A primeira função que vamos criar é a login() que mencionamos mais ceso. Nesta função nós vamos pegar o elemento lightbox e associar a ele algumas propriedados de estilo. Note que nós estamos atribuindo um atributo filter da mesma forma que fizemos no login.css. Por algum motivo o IE perde este atributo e temos que colocar novamente. Nós também estamos dizendo ao lightbox para aparecer lentamente.

Depois nós pegamos o elemento principal do form e mandamos também aparece lentamente.

No final, nós retornamos false para prevenir que o link nos mande para o seu href. Nós não queremos que a página recarregue.

   1: function login() {

   2: $('#lightbox')

   3: .css({

   4: 'height': $(document).height(),

   5: //reset opacity because IE loses it on open 

   6: 'filter': 'alpha(opacity=60)'

   7: })

   8: .fadeIn('slow');

   9: $('#login_form').fadeIn('slow');

  10: return false;

  11: }

Agora quando um usuário clica no link [ Log On ] um impressionante forumlário de login irá aparecer bem no centro da tela.

Note como nós definimos a altura do lightbox para a altura atual do documento. Se o usuário redimencionar a janela do navegador isso irá fazer com que o lightbox fique muito grande e aparecerá barras de rolagem ou com que fique muito pequeno também, tudo dependendo de como a tela será redimencionada. Para corrigir este problema nós vamos criar uma função que irá definir a altura do lightbox para a altura atual do documento e definir um evento que irá disparar nossa função sempre que a janela seja redimencionada.

   1: function adjustLightbox() {

   2: $('#lightbox').css({ 'height': $(document).height() });

   3: };

   4: 

   5: var resizeTimer = null;

   6: $(window).bind('resize', function() {

   7: if (resizeTimer) clearTimeout(resizeTimer);

   8: resizeTimer = setTimeout(adjustLightbox, 100);

   9: });

  10: 

Quando nós criamos o código do nosso formulário de login, adicionamos um botão que chamava a função cancelLogin() no evento onclick. Se o usuário clicar neste botão nós queremos cancelar o login, limpar o formulário e voltar para a tela principal. Vamos criar esta função.

Primeiro esta função irá dizer ao lightbox e ao formulário principal para lentamente desaparacer e voltar a tela principal.

Depois nós limpamos os valores de todos os elementos input que não são botões e nos certificamos de que o checkbox remember me não está marcado.

Ao final, nós limpamos o elemento de mensagem e escondemos ele também.

   1: function cancelLogin() {

   2: $('#lightbox').fadeOut('slow');

   3: $('#login_form').fadeOut('slow');

   4: $('#login_form input[type!=button]').val('');

   5: $('#login_form input[type=checkbox]').each(function(i) {

   6: this.checked = false;

   7: });

   8: $('#message').html('').css({ 'display' : 'none' });

   9: }

Isto nos leva a nossa última função que irá submeter o formulário quando o usuário clicar em submit. Primeiro criamos a função submitForm. Esta função está associada ao evento onclick do botão submit em nosso HTML.

   1: function submitForm() {

   2: 

   3: }

   4: 

A primeira coisa que queremos fazer é pegar os valores do formulário, username, password e remember me.

   1: var username = $('#username').value;

   2: var password = $('#password').value;

   3: var rememberMe = $('#rememberMe').checked ? 'true' : 'false';

Neste ponto você pode fazer qualquer tipo de validação nestes valores. Eu não vou incluir nenhuma validação nesta demonstração.

Agora iremos criar uma string com os dados dos três valores.

   1: var dataString = 'username=' + username + '&password=' + password + '&rememberMe='

   2:  + rememberMe;

Finalmente nós iremos configurar a chamada AJAX ao servidor para autenticar o usuário. Nós usaremos a string com os dados que acabamos de criar para passar ao nosso request. Nós temos que configurar também as chamadas de retorno em caso de sucesso ou falha.

Se a chamada foi bem sucedida, chamaremos a função cancelLogin() para fechar o formulário e mudar o link Log On para mostrar Log Off.

Se a chamada falhar, mostraremos uma mensagem de erro ao usuário.

   1: $.ajax({

   2: type: 'POST',

   3: url: '/Account/LogOn',

   4: data: dataString,

   5: success: function() {

   6: cancelLogin();

   7: $('#login_link').html('Log Off').href = '/Account/LogOff';

   8: },

   9: error: function() {

  10: $('#message').html('Failed to login')

  11: .css({ 'display': 'block' });

  12: }

  13: });

Com isso nós terminamos a aplicação. Você deve ter agora um formulário de login funcional.