Librería Users.js (2). Identificación

Anteriormente he descrito cómo se construye un formulario de registro de usuarios. Comentaba que, terminado el envío, era tarea del servidor enviar un correo electrónico de confirmación, lo que permite asegurar que quien aporta los datos es efectivamente el dueño de la cuenta. Pero es necesario un paso adicional para completar este chequeo: el usuario debe proporcionar al servidor un código contenido en dicho correo que sirva como confirmación. Lo usual es generar una clave cuya devolución se pide, por lo general incluyéndola como una variable en una URL. El servidor la recibe mediante el método GET y completa la validación del usuario. Y en tal caso, lo adecuado es enviar un segundo correo para informar de ello. No se describen estos pasos en detalle, ya que el propósito de estas entradas es presentar la librería Users.js, que recoge el código en Javascript para la gestión de usuarios.
Terminado el registro, podemos continuar con la identificación. Para llevarla a cabo, es necesario que la página web contenga inicialmente dos campos: un identificador (que en nuestro caso es el alias que hemos introducido en el registro, pero bien podría valer el correo electrónico) y la contraseña. También se debe dar posibilidad a restaurar dicha contraseña en caso de olvido, y de registrarse en caso de no haberlo hecho antes. Para estos dos fines se incluyen los botones correspondientes.

<div id="login" class="hidden"><form id="login_form" action="javascript:;" name="login_form">Nombre:
<input id="login_id" name="login_id" type="text" />
Contraseña:
<input id="login_password" name="login_password" type="password" />
<input type="submit" value="Entrar" />
<span id="login_message" class="error"> </span></form>No tengo cuenta.
<input id="login_create" type="submit" value="Crear una" />
He olvidado mi clave.
<input id="login_restore" type="submit" value="Restaurar" />

</div>

<div id="login" class="hidden"><form id="login_form" action="javascript:;" name="login_form">Nombre:

Contraseña:

<span id="login_message" class="error"> </span></form>No tengo cuenta.

He olvidado mi clave.

</div>

Como en otras ocasiones, se ha reservado una etiqueta span para mostrar mensajes de error. El más importante es la advertencia de que nos hemos equivocado al introducir el nombre o la contraseña.

// Login
$("#login_form").bind("submit", function() {
$.ajax({
type: "POST", url: "a.php",
data:{a:"login",login_id:$("#login_id").val(),login_password:$("#login_password").val()}
}).done(function(data) {
data=eval(data)[0];
if (data==null)
$("#login_message").text("Incorrecto").show().fadeOut(timefade);
$("#login_password").val("");
refresh_user();
});
});&gt;

// Login

$("#login_form").bind("submit", function() {

$.ajax({

type: "POST", url: "a.php",

data:{a:"login",login_id:$("#login_id").val(),login_password:$("#login_password").val()}

}).done(function(data) {

data=eval(data)[0];

if (data==null)

$("#login_message").text("Incorrecto").show().fadeOut(timefade);

$("#login_password").val("");

refresh_user();

});

});>

Hago notar que el contenido del formulario de identificación no se muestra inicialmente, sino que se ha mantenido oculto. La razón es que se pretende usar la misma página para el acceso inicial y el contenido una vez ya nos hemos identificado. Haciendo esto se evita que el navegador salte a una página nueva, con el consiguiente retraso en la recarga. Esto mejora la experiencia de usuario, pero nos enfrenta a un problema: cuando se muestra la página por primera vez, es necesario averiguar si el usuario se ha identificado o no previamente. Como esta información no la almacena el navegador, sino el servidor en una variable de sesión, debemos de gestionar desde Javascript una consulta inicial para conocer este valor. Esta tarea, y la actualización de la página que lleva asociada, la he llevado a la función refresh_user que se ve ha visto al final del código del evento de envío de datos identificativos.

function refresh_user() {
$.ajax({
type: "POST", url: "a.php",
data:{a:"user"}
}).done(function( data ) {
if (data!="") {
data=eval(data)[0];
$("#identification_user").val(data["id"]);
$("#profile_descriptor").val(data["descriptor"]);
$("#profile_email").val(data["email"]);
$("#login").hide(timeshow);
$("#registered").show(timeshow);
}
else {
$("#identification_user").val("");
$("#login").show(timeshow);
$("#registered").hide(timeshow);
}
$("#identification_user").change();
});
}

function refresh_user() {

$.ajax({

type: "POST", url: "a.php",

data:{a:"user"}

}).done(function( data ) {

if (data!="") {

data=eval(data)[0];

$("#identification_user").val(data["id"]);

$("#profile_descriptor").val(data["descriptor"]);

$("#profile_email").val(data["email"]);

$("#login").hide(timeshow);

$("#registered").show(timeshow);

}

else {

$("#identification_user").val("");

$("#login").show(timeshow);

$("#registered").hide(timeshow);

}

$("#identification_user").change();

});

}

La función refresh_user hace visible (parte else) el formulario de identificación caso de que no se haya iniciado sesión. Pero si ya lo ha hecho, lo que se visibiliza es la capa registered, donde se muestra todo lo que debe verse al estar ya dentro. Esto incluye varios elementos:

El nombre de usuario.
El botón para cerrar sesión.
El botón para modificar datos del perfil. No voy a entrar en detalles sobre esta parte, para no hacer farragosa la entrada pero, como puede observarse, aunque los campos estén ocultos, se han rellenado con el código previo.
Y todo lo demás, que no se muestra por ser específico de cada proyecto, pero que estaría recogido dentro de la capa registered.

<div id="registered" class="hidden">
<div id="identification"><input id="identification_user" readonly="readonly" type="text" value="" />
<input id="logout" class="button" type="button" value="Salir" />
<input id="profile_change" class="button" type="button" value="Perfil" />
<div id="profile" class="hidden"><form id="profile_form" action="javascript:;" name="profile_form">Nombre completo:
<input id="profile_descriptor" name="profile_descriptor" type="text" />
<span id="profile_descriptor_message" class="error"> </span>
Contraseña:
<input id="profile_password" name="profile_password" type="password" />
<span id="profile_password_message" class="error"> </span>
Confirmar contraseña:
<input id="profile_password2" name="profile_password2" type="password" />
<span id="profile_password2_message" class="error"> </span>
<input id="profile_submit" type="submit" value="Enviar" /></form><input id="profile_close" type="submit" value="Cerrar" />

</div>
</div>

<div id="profile" class="hidden"><form id="profile_form" action="javascript:;" name="profile_form">Nombre completo:

Contraseña:

Confirmar contraseña:

</div>

Por último, y me dejo algunos aspectos como la modificación de datos o la restauración de contraseña, es importante incluir la desconexión, que como se ve en el código de arriba se hace desde el botón logout. Dicho cierre se realiza desde el servidor, liberando todas las variables de sesión que se hayan podido crear, de modo que el código Javascript sólo debe hacer la llamada correspondiente y refrescar la página:

// Logout
$("#logout").bind("click", function() {
$.ajax({
type: "POST", url: "a.php",
data:{a:"logout"}
}).done(function(data) {
refresh_user();
});
});