Un script sencillo con Mootools para mostrar a un usuario la fortaleza de una clave escrita en un campo de formulario.
En este sentido ya publicamos dos artículos prácticos, simples pero ilustrativos de las posibilidades que tenemos utilizando este framework Javascript: Texarea con cuenta de caracteres y Tip Simple. Ahora vamos a mostrar otro script sencillo para realizar un campo de clave (input de tipo password) que tiene un avisador de la fortaleza de la contraseña escrita. Este sistema, que hemos podido ver en algunas páginas y que queda muy bien, sirve para informar al usuario sobre lo débil o fuerte que es la clave que ha escrito.
Podemos ver el ejemplo que vamos a explicar en una página aparte.
Como ya sabemos, cualquier ejemplo Mootools tiene una serie de componentes que hay que ver por separado.
Código HTML
El código HTML que necesitaremos para este ejemplo es muy sencillo. Simplemente será un formulario que tiene un campo INPUT password, donde el usuario debe escribir la clave.
<form>
Clave: <input type="password" id="clave" name="clave">
</form>
Hay que fijarse en el atributo id del INPUT, que es el nombre (id="clave") que nos va a servir para acceder al campo desde Mootools.
Código CSS
Además, hemos separado una serie de estilos CSS, que servirán para personalizar la apariencia del mensaje de fortaleza de la clave. Para que sea más visual y vistoso, podrá tener 3 colores distintos. Rojo cuando la clave es débil, naranja cuando es medianamente segura y verde cuando es una clave con una fortaleza adecuada.
<style type="text/css">
.avisoclave{
margin-left:10px;
font-size: 9pt;
display: inline;
}
.clavefloja{
color: #990000;
}
.clavemedia{
color: #cc8800;
}
.clavefuerte{
color: #009900;
}
</style>
Como hemos podido ver, tenemos una clase llamada "avisoclave" que es general, con estilos generales para el mensaje de aviso de fortaleza de la clave, que valdrán en todos los casos. Luego tenemos 3 clases para cada uno de los posibles estados de fuerza o debilidad de la contraseña.
Clase Mootools para generar el aviso de fortaleza de la contraseña
Ahora viene la parte más bonita, aunque la más complicada de entender, que es en la que creamos el script Javascript con la clase Mootools que automatizará todo el proceso de visionado del estado de seguridad de la clave.Para ir imaginándola previamente, pensar que la clase Mootools debe contener:
Un constructor, que inicialice el objeto que se encargará de mostrar la fortaleza.
Este constructor debe situar en la página, al lado del campo INPUT password un contenedor para mostrar el mensaje de fuerza o debilidad de la clave.
Además, debe evaluarse por primera vez la clave para mostrar su fortaleza
Además, debe crearse un evento asociado al campo INPUT password para que, cuando el usuario escriba texto en ese campo password, cambie el mensaje que muestra la seguridad de la clave.
También tendremos un método en la clase, que se encargará de evaluar lo que el usuario haya escrito en el campo password, para mostrar la fuerza o debilidad de la contraseña.
Este método debe recuperar el value del campo INPUT password.
Luego, viendo lo que hay en ese INPUT, decidir el nivel de consistencia de la clave
Según el nivel de la clave, debe escribir lo que toque (clave débil, media o fuerte) en el elemento que se había generado para mostrar el mensaje de fortaleza de la clave.
Además, según la fortaleza o debilidad, debe asignar las clases de CSS correspondientes, que se crearon para darle más visibilidad al mensaje.
Una vez que hemos entendido algo los requisitos de este sistema, vamos a ver el código fuente de esta clase Mootools.
var ValidadorClave = new Class({
//creo el constructor
initialize: function(miCampoClave){
//obtengo el elemento del campo password
this.campoClave = $(miCampoClave);
//creo un elemento para mostrar al usuario la fuerza de la clave escrita
this.mensajeFuerzaClave = new Element ("div" , {"class": "avisoclave"});
//llamo a un método de esta clase para que muestre la fuerza de la clave
this.muestraFuerzaClave();
//inyecto el elemento después del campo clave
this.mensajeFuerzaClave.inject(this.campoClave, "after");
//creo un evento para que, cuando se escriba algo en el campo password, se actualice la fuerza de la clave
this.campoClave.addEvent("keyup", function(){
this.muestraFuerzaClave();
}.bind(this));
},
//método para mostrar la fuerza de una clave
muestraFuerzaClave: function(){
//recupero el texto escrito en el campo password
claveActual = this.campoClave.value;
//compruebo la fuerza, a través de la longitud de la clave
if (claveActual.length <= 4){
//escribo en el mensaje de fuerza que la clave es floja (débil)
this.mensajeFuerzaClave.set("html","Clave floja");
//si el mensaje de la fuerza tenía la class de CSS "clavemedia", la quito
if(this.mensajeFuerzaClave.hasClass("clavemedia"))
this.mensajeFuerzaClave.removeClass("clavemedia");
//si el mensaje de la fuerza tenía la class de CSS "clavefuerte", la quito
if(this.mensajeFuerzaClave.hasClass("clavefuerte"))
this.mensajeFuerzaClave.removeClass("clavefuerte");
//añado la class de CSS "clavefloja" para que el texto se muestre con ese estilo
this.mensajeFuerzaClave.addClass("clavefloja");
}else{
if (claveActual.length <= 6){
this.mensajeFuerzaClave.set("html","Clave media");
if(this.mensajeFuerzaClave.hasClass("clavefloja"))
this.mensajeFuerzaClave.removeClass("clavefloja");
if(this.mensajeFuerzaClave.hasClass("clavefuerte"))
this.mensajeFuerzaClave.removeClass("clavefuerte");
this.mensajeFuerzaClave.addClass("clavemedia");
}else{
this.mensajeFuerzaClave.set("html","Clave fuerte");
if(this.mensajeFuerzaClave.hasClass("clavefloja"))
this.mensajeFuerzaClave.removeClass("clavefloja");
if(this.mensajeFuerzaClave.hasClass("clavemedia"))
this.mensajeFuerzaClave.removeClass("clavemedia");
this.mensajeFuerzaClave.addClass("clavefuerte");
}
}
}
});
El código se ha comentado, para que se pueda entender mejor qué se hace en cada paso. No obstante, no cabe duda que, para entenderlo, debes haber seguido en desarrollo web .com el Manual de programación con Mootols , al menos los que tratan sobre la creación de clases y métodos, constructor, la clase Element y la creación y manejo de eventos.
Quizás no habíamos visto todavía los métodos de Element addClass(), hasClass() y removeClass(), que sirven respectivamente para añadir una clase de CSS al elemento de la página que recibía ese método, para saber si un elemento tenía una clase determinada y para eliminar una class de CSS de un elemento.
Un detalle que cabe señalar es que en este script, para decidir si una clave es o no segura, simplemente miramos la longitud de la clave... pero realmente para saber si la clave es fuerte o dévil habría que ver también otras cosas, como si se han combinado mayúsculas y minúsculas, si tiene números y letras, o incluso otros caracteres como espacios, puntos, etc.
Instanciar el objeto para validar la seguridad de la clave
Por último, mostramos el código fuente en Javascript que tendríamos que colocar para instanciar el objeto que evalúa la seguridad de la contraseña y lo asocia al campo INPUT password colocado en el código HTML.
window.addEvent("domready", function(){
var miValidadorClave = new ValidadorClave("clave");
});
Esto hace que, cuando la página está lista para recibir instrucciones que van a alterar el DOM, se instancie un objeto de la clase ValidadorClave. Al constructor simplemente se le pasa el id que tiene el campo password que queremos asociar al verificador de la seguridad de la clave.
Eso es todo! Esperamos que se haya podido entender... si no, simplemente te recomiendo repasar el manual de Mootools de DesarrolloWeb.com, porque realmente ya se ha explicado todo lo que tendrías que saber para construir este sistema de verificación de la fortaleza de una clave.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...