Sexy LoginBox: Crear un formulario de login con Ajax y SexyLightbox

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 :D y también la mas complicada :-o
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

Este artículo contiene los siguientes archivos:

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

galax says:

claro debes de tener instalado en tu servidor local, appserv en la carpera www o bien sea en el apacahe…. ya que el archivo que intentaa jalar es de extencion .php

miguelf says:

Muchas felicidades, es sinduda muy buen trabajo todos los “productos sexys” que teneis.

Hace ya un par de días que estoy intentando adaptar el Sexy LoginBox a Jquery y no soy capaz por que apenas tengo experiencia en jquery.

Podría alguien ayudarme a traducir esta parte a lenguaje Jquery

$('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');
    }
}});

El resto ya lo tengo funcionando, pero ese trozo me tiene amargado y no me funciona.

Os agradezco enormemente la ayuda.
Muchas gracias

Raul says:

Holas, ya casi tengo implementado el sexy login en mi pagina solo que no me muestra el estado de loading o el de error, hise un pequeño cambio el index.html lo puse afuera de la raiz de la carpeta sexy-login, para mantener todo en orden mis archivos :P lo unico q cambie en index.html fue la direccion del boton de login.php a –> sexy-login/login.php Pero por alguna razon no me muestra los otros estados, me reconoce obviamente los js, img, el css pero los otros estados no. y no hise ningun cambio.

Raul says:

Bueno me reporto xD, ya lo he solucionado en el temple de login tenia que poner login/login.php porque la pagina se ejecutaba desde de la raiz y no desde la misma carpeta xD thks

n3fisto says:

Hola como hago con el sexylogin q me de las autorizacones para usuarios y admin ??? eso me falta me da errores gracias

Michael says:

Very nice. I think i will implement it in my latest project.

Adolfo says:

Hola de antemano exelente y felicitacion al equipo coders me encanto la web y sobre todo los post y los comentarios exlente..bueno basta de alagos x3 hahaha tengo una misera pregunta resulta que me funciona casi de maravilla el unico inconveniente es que cuando me da error porm algun campo no escrito o erroneo me sale el error pero despues de un milisimo de segundo me sale el archivo el cual le agrege como respuesta a un ok!..soy un principiante en esto del php y me e cabeciado desde hace rato y no se como resulverlo aqui les mando el codigo de validar_usuario.php

function quitar($mensaje)

{

	$nopermitidos = array("'",'\\','<','>',"\"");

	$mensaje = str_replace($nopermitidos, "", $mensaje);

	return $mensaje;

}

if(trim($HTTP_POST_VARS["usuario"]) != "" && trim($HTTP_POST_VARS["password"]) != "")

{

	// Puedes utilizar la funcion para eliminar algun caracter en especifico

	//$usuario = strtolower(quitar($HTTP_POST_VARS["usuario"]));

	//$password = $HTTP_POST_VARS["password"];

	// o puedes convertir los a su entidad HTML aplicable con htmlentities

	$usuario = strtolower(htmlentities($HTTP_POST_VARS["usuario"], ENT_QUOTES));

	$password = $HTTP_POST_VARS["password"];

	$result = mysql_query('SELECT password, usuario FROM usuarios WHERE usuario=\''.$usuario.'\'');

	if($row = mysql_fetch_array($result)){

		if($row["password"] == $password){

			$_SESSION["k_username"] = $row['usuario'];

			echo 'Has sido logueado correctamente '.$_SESSION['k_username'].' <p>';

			echo '<SCRIPT LANGUAGE="javascript">

			location.href = "index2.php";

			</SCRIPT>';

			//Elimina el siguiente comentario si quieres que re-dirigir automáticamente a index.php

			/*Ingreso exitoso, ahora sera dirigido a la pagina principal.

			*/

		}else{

			echo 'NO!';

		}

	}else{

		echo 'NO!';

	}

	mysql_free_result($result);

}else{

	echo 'NO!';

}

mysql_close();

?>

gracias :)

Adolfo says:

x3 me e equivocado era en respuesta a un “NO!” x3 disculpen

unrudiez says:

lo utilizo para un trabajo de la universidad y he modificado asi el login.php

y conexion.php

y al inicio de las siguientes paginas

espero que sirva y si veis algo mal comentais, estoy aprendiendo gracias

Cristian says:

Si en un explorador pongo:

http://www.coders.me/ejemplos/sexy-login-box/login.php?exito=1

Entro sin validar nada, por lo que no es muy seguro el sistema que digamos.

Alguna solucion para esto?

agam says:

please help me ?

i want to print the response directly !?

i removed
if (response == “OK!”){
document.location.href =”login.php?exito=1″;
}

tried ..

if (response){
document.getElementById(“display”).innerHTML = response;
}

AND

if (response){
document.write(‘response’).setStyle(‘display’, ‘block’);
}

AND

if (response){
document.getElementById(setStyle(‘display’, ‘block’)).innerHTML = ‘response’;
}

To no avail .

AGAM says:

por favor que me ayude?

i desea imprimir directamente la respuesta!?

yo quité

if (response == "OK!"){
 [php]  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');
}

y trató de …

if (response){
document.getElementById(”display”).innerHTML = response;
} 

y …

if (response){
document.write(’response’).setStyle(’display’, ‘block’);
}

y …

if (response){
document.getElementById(setStyle(’display’, ‘block’)).innerHTML = ‘response’;
}

En vano .

moz90 says:

amigo tengo un problema estoy tratando de hacer lo mismo pero con una formulario de registros de usarios(5 campos), me sale todo bien pero ahora quiero mostrar mas msj de validacion (Los Password deben coicidir, ¿Desea volver intentarlo?) para la contraseña y email, pero al tratar de hacer eso, no me sale bien le doy click en desea volver a intentarlo y se qeda parado y no regresa al formulario, hize esto, a ver si me ayudan, ahi tienen mi correo plis, se los agredeceria si me ayudan, gracias

onComplete: function(response) {
      $('Sexy-loading').setStyle('display', 'none');
      if (response == "OK!")
      {
        document.location.href = "index.html";
      }
      else if (response == "NO!")
      {
        $('Sexy-error').setStyle('display', 'block');
      }
	  else if (response == "NOS!")
      {
        $('Sexy-error-a').setStyle('display', 'block');
      }
      else
      {
        $('Sexy-login').setStyle('display', 'block');
      }
  }});

y agrege esto arriba,

<div id="Sexy-error-a" class="login error" style="display:none;">
Las Contraseñas no coiciden.<br /><a href="#" id="again">¿Deseas volver a intentarlo?</a>
</div>

y

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

    event.stop();

	$('Sexy-error').setStyle('display', 'none');
	$('Sexy-loading').setStyle('display', 'none');
    $('Sexy-login').setStyle('display', 'block');
	$('Sexy-error-a').setStyle('display', 'none');
  });
jaime says:

bueno primero, algien me podria explica este codigo desde el principio, no lo enriendo ni me carga, otra pregunta pueden coexsistir los js con los tales mootools si la pregunta es muy tonta perdone tengo esa duda

nitana says:

muchas gracias la voy a utilizar para una página pero al momento que le corrí con el wampserver me da una error en la línea 18 la voy a revisar gracias..

geras998 says:

Disculpen quisiera que me dijeran si esto se puede adaptar para hacer la validacion desde una base de datos de mysql y si saben como. Gracias

Eduardosco says:

Que buen tutorial…
me sirvio de mucho
gracias

Giancarlo says:

Como puedo introducir esto en mi web? Soy totalmente neofito en esto y utilizo WordPress. Donde debo poner cada archivo y que tengo que poner para activarlo? ):

Gracias de antemano, y disculpen mi ignorancia.

ARiel F says:

Muy buen aporte… lo estoy implementando en mi web.
Saludos desde AR.

michelle estrada says:

alguna forma para que no usar lightbox

Miguel says:

Hola tengo una duda ami me da un error en la linea 18 esto sale

Notice: Undefined index: exito in C:\xampp\htdocs\login-box\login.php on line 18

quien me puede ayudar porfavor