En este tutorial vamos a crear un precioso medidor de seguridad para contraseñas. Este medidor determinará la complejidad de una contraseña y moverá una aguja en consecuencia, con la ayuda del plugin Complexify jQuery. Sólo cuando se introduzca una contraseña lo suficientemente compleja, el usuario será capaz de continuar con el registro.
Hay disponible un archivo PSD para que puedas personalizar el formulario a tu gusto.
El HTML
Comenzamos con la creación de un documento HTML5 estándar que incluirá el formulario de registro. El formulario no tendrá otro fin nada más que servir como ejemplo para el medidor de seguridad de contraseñas. Si necesitas que el formulario de registro funcione de verdad, tendrás que escribir el código del lado del servidor.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to Make a Beautiful Password Strength Indicator</title>
<!-- The stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<h1>Sign up, it's FREE!</h1>
<form class="" method="post" action="">
<div class="row email">
<input type="text" id="email" name="email" placeholder="Email" />
</div>
<div class="row pass">
<input type="password" id="password1" name="password1" placeholder="Password" />
</div>
<div class="row pass">
<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
</div>
<!-- The rotating arrow -->
<div class="arrowCap"></div>
<div class="arrow"></div>
<p class="meterText">Password Meter</p>
<input type="submit" value="Register" />
</form>
</div>
<!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/jquery.complexify.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Para esta práctica incluimos la versión 1.7.2 de jQuery, el plugin Complexify y nuestro script.js justo antes del cierre de la etiqueta body, para un mejor rendimiento.
El jQuery
El código de jQuery de a continuación es bastante sencillo. Atamos una serie de eventos para los elementos del formulario y los validamos. Si se encuentra un error, le agregamos una clase de "error" al div .row que contiene el input. Esto mostrará la cruz roja. La clase de "success" por el contrario, mostrará un símbolo de check verde. Cuando se envíe el formulario, comprobamos si todas las filas están marcadas como success para permitir el submit.
assets/js/script.js
$(function(){
// Form items
var pass1 = $('#password1'),
pass2 = $('#password2'),
email = $('#email'),
form = $('#main form'),
arrow = $('#main .arrow');
// Empty the fields on load
$('#main .row input').val('');
// Handle form submissions
form.on('submit',function(e){
// Is everything entered correctly?
if($('#main .row.success').length == $('#main .row').length){
// Yes!
alert("Thank you for trying out this demo!");
e.preventDefault(); // Remove this to allow actual submission
}
else{
// No. Prevent form submission
e.preventDefault();
}
});
// Validate the email field
email.on('blur',function(){
// Very simple email validation
if (!/^S+@S+.S+$/.test(email.val())){
email.parent().addClass('error').removeClass('success');
}
else{
email.parent().removeClass('error').addClass('success');
}
});
/* The Complexify code will go here */
// Validate the second password field
pass2.on('keydown input',function(){
// Make sure it equals the first
if(pass2.val() == pass1.val()){
pass2.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.parent()
.removeClass('success')
.addClass('error');
}
});
});
Con esto solucionado, podemos continuar con el plugin Complexify, el cual validará la contraseña. El plugin tiene una función callback con dos argumentos: un porcentaje de 0 a 100 en función de la complejidad de la contraseña, y un entero que degine la longitud mínima de la contraseña, que por defecto lo toma de la propiedad minimumChars.
Al ajustar la propiedad strengthScaleFactor puedes permitir que las contraseñas sean simples. La escala por defecto es 1, que requiere una mezcla de letras mayúsculas y minúsculas, números y caracteres especiales, pero me pareció demasiado estricto, así que lo bajé a 0,7. Puedes reducirlo aún más si necesitas contraseñas aún más simples.
pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){
if(valid){
pass2.removeAttr('disabled');
pass1.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.attr('disabled','true');
pass1.parent()
.removeClass('success')
.addClass('error');
}
var calculated = (complexity/100)*268 - 134;
var prop = 'rotate('+(calculated)+'deg)';
// Rotate the arrow. Additional rules for different browser engines.
arrow.css({
'-moz-transform':prop,
'-webkit-transform':prop,
'-o-transform':prop,
'-ms-transform':prop,
'transform':prop
});
});
Si se ha pasado un valor válido, habilitamos el segundo campo de contraseña (que está desactivado por defecto). También utilizaremos transformaciones CSS3 para rotar la aguja. La transformación será animada gracias a una propiedad de transición que se puede ver en la sección de CSS. La flecha se mueve de -134 a 134 grados (por defecto 0 grados corresponden a la flecha apuntando verticalmente hacia arriba), por lo que el código compensa eso.
El CSS
Voy a incluir sólo las partes más interesantes de la hoja de estilo. El código que anima la flecha y define la transición.
#main form .arrow{
background: url("../img/arrow.png") no-repeat -10px 0;
height: 120px;
left: 214px;
position: absolute;
top: 392px;
width: 11px;
/* Defining a smooth CSS3 animation for turning the arrow */
-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
/* Putting the arrow in its initial position */
-moz-transform: rotate(-134deg);
-webkit-transform: rotate(-134deg);
-o-transform: rotate(-134deg);
-ms-transform: rotate(-134deg);
transform: rotate(-134deg);
}
/* The small piece that goes over the arrow */
#main form .arrowCap{
background: url("../img/arrow.png") no-repeat -43px 0;
height: 20px;
left: 208px;
position: absolute;
top: 443px;
width: 20px;
z-index: 10;
}
Hemos terminado!
Y este ha sido el artículo en el que trataba explicaros cómo crear un medidor de seguridad para contraseñas, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!
Fuente: tutorialzine.com