Este artículo está inspirado en una duda presentada en el foro.

¿Te gustaría crear un sistema de logueo sexy, usando Ajax y SexyLightbox? En esta mini-guia explicaremos paso a paso como crearlo e implementarlo en tu web!

Sexy LoginBox

Bueno… como no podía ser de otra manera, nombré a este proyecto Sexy LoginBox porque me parece sexy! no es que tenga pocas ideas para nombres (la verdad es que si). En fin, el resultado será algo como esto:

Pueden ver una demostración funcionando. Para comprobar que la demo funciona, ingresen estos datos:
Usuario: admin
Contraseña: admin

Paso 1: Introducción

En primer lugar necesitaremos 3 divs, que serán los encargados cada uno de ser un “estado” diferente. Tendremos un div para el formulario, un div para el “cargando”, y otro div mostrará un error de “usuario y/o contraseña incorrectos”.

Por supuesto, solo se mostrará uno a la vez, según corresponda el estado.

Paso 2: Crear los divs de estado

Nada más que eso, creamos el formulario y los divs de estado.

Primero, el formulario [sexy-login]:

<div id="Sexy-login" class="login">
  <form action="login.php" method="post" id="loginform">
    <label><em>Username : </em><input type="text" name="usuario" /></label>
    <label><em>Password : </em><input type="password" name="password" /></label>
    <input type="submit" class="submit" id="submit" value="Login" onclick="return SexyLoginInit();" />
  </form>
</div>

Atentos con el evento onclick del botón submit. Lo siguiente es el CSS del formulario:

.login {
width: 238px;
margin: 0 auto;
padding:20px 0 0 43px;
background: url(images/user.png) no-repeat left center;
}

.login label {
display:block;
font-size:12px;
padding-bottom:5px;
text-align:right;
}

.login label em{
width:80px;
display:block;
float:left;
font-style: normal;
}

.login input {
width:146px;
height:22px;
border:1px solid #ccc;
}

.login input.submit {
width:auto;
height:auto;
border:1px solid #ccc;
float:right;
}

El div que se muestra cuando la petición está siendo enviada [sexy-loading]:

<div id="Sexy-loading" class="login loading" style="display:none;">
Cargando...
</div>

.loading {
text-align: center;
width: 238px;
margin: 0 auto;
padding:40px 0;
background: url(images/ajax-loader.gif) no-repeat center 60px;
}

El div que se muestra cuando hubo un error en el login [sexy-error]:

<div id="Sexy-error" class="login error" style="display:none;">
Nombre de usuario o contraseña incorrectos. <br /><a href="#" id="again">¿Deseas volver a intentarlo?</a>
</div>

.error{
margin: 0 auto;
padding:20px 0 20px 55px;
width:212px;
background: url(images/dialog-error.png) no-repeat left center;
}

Guardaremos estas cosas en un archivo llamado login_template.html, y aunque todavía no hemos acabado aquí, vamos al paso siguiente.

Paso 3: Crear el PHP encargado de validar

Para el ejemplo lo llamaremos login.php (el formulario anterior apuntaba aquí). Como no nos interesa ahondar en los detalles de la seguridad y demás yerbas del logueo, el php será muy cortito y al pie.

<?PHP
//Comprobar que nos envien las variables
if(!empty($_POST["usuario"]))
{
  //sleep(2); //only for debug

  //Super rutina de seguridad para la comprobación de usuarios
  if($_POST["usuario"] == "admin" && $_POST["password"] == "admin")
  {
    echo "OK!"; //Dato clave, de esto depende el Formulario AJAX
  }
  else
  {
    echo "NO!"; //Dato clave, de esto depende el Formulario AJAX
  }

}
elseif ((bool) $_GET['exito'])
{
  echo "Logueado correctamente.";
}
else
{
  include("login_template.html");
}
?>

Vamos por partes. En primer lugar, si llamamos a login.php directamente nos enviará a login_template.html (el formulario). Solo para nuestro ejemplo, hemos puesto que usuario y contraseña sean “admin” mediante un condicional muy simple. En caso de que el logueo sea correcto, enviaremos una palabra clave: OK!
El script siguiente verificará si el usuario y contraseña existen o no mediante esa palabra clave.

Paso 4: Creando el script

Esta es la parte más divertida y también la mas complicada
Los que sabemos un poco de javascript estamos al tanto de que hay dos maneras de invocar un evento: la intrusiva y la no intrusiva. En nuestro formulario, el boton posee un javascript intrusivo puesto que se invoca directamente desde la “propiedad” onclick.

¿Cómo hacerlo no intrusivo? Lamentablemente no se puede, debido a lo siguiente:
Cuando el Sexy Lightbox carga la página, también ejecuta todo el código javascript dentro de ella, pero lo hace ANTES de mostrar el HTML. Osea, que no hay manera de agregar eventos a los objetos, si los objetos no han sido creados aún.

La solución: Ejecutar el código cuando se presiona el botón Enviar. Usaremos una variable (Sexy_FirstTime) para asignar los eventos sólo la primera vez.

<script type="text/javascript">
var Sexy_FirstTime = 0;

function SexyLoginInit() {
  if (Sexy_FirstTime) {
    $('loginform').send(); //enviamos el form por ajax
    return false;
  } else {
    Sexy_FirstTime = 1;
  }

Lo siguiente se ejecutará sólo la primera vez:

  $('loginform').set('send', {

    onRequest: function() {
      $('Sexy-loading').setStyle('display', 'block');
      $('Sexy-login').setStyle('display', 'none');
    },

    onComplete: function(response) {
      $('Sexy-loading').setStyle('display', 'none');
      if (response == "OK!")
      {
        document.location.href = "login.php?exito=1"; //ir a esta URL si el logueo es exitoso
      }
      else if (response == "NO!")
      {
        $('Sexy-error').setStyle('display', 'block');
      }
      else
      {
        $('Sexy-login').setStyle('display', 'block');
      }
  }});

En el div sexy-error hay un enlace que dice “¿Deseas volver a intentarlo?”, con lo siguiente lo hacemos funcionar:

  $('again').addEvent('click', function(event) {

    event.stop();
    $('Sexy-error').setStyle('display', 'none');
    $('Sexy-loading').setStyle('display', 'none');
    $('Sexy-login').setStyle('display', 'block');

  });

//  ...
  $('loginform').send();

  return false;

};
</script>

Paso 5: Descargar

Eso es todo! Échale un vistazo a la demo.