Quando um usuário se registra em alguma aplicação web, sempre é necessário o cadastramento de uma senha, e nem sempre o usuário cadastra uma senha segura. Nesse caso cabe a nós desenvolvedores de aplicações web mostrar para o usuário que a senha dele não é tão segura quanto ele pensa.

Para isto, vamos ver um script que modificará os "inputs password" para inserir neles uma funcionalidade que indique a qualidade da senhaque está sendo introduzida.

O script irá inserir um evento onkeyup e realizará uma série de comparações para conhecer a qualidade da senha, uma senha válida será a que cumprir todas as condições. As condições incluídas nesse exemplo são as tipicamente pedidas: que existam maiúsculas e minúsculas, algum número, caracteres especiais e uma quantidade de caracteres maior que 6.

Para checar cada condição usaremos expressões regulares e levaremos um contador para saber quantas condições foram cumpridas. Quando finalizarmos nossas comprovações calcularemos o percentual de qualidade e o indicaremos com uma barra de progresso. Esta barra aumentará conforme a qualidade da senha for aumentando e irá mudando da cor vermelha para verde conforme a qualidade da senha for aumentando.

O efeito de barra de progresso será realizado da seguinte maneira, temo suma imagem que vai funcionar como máscara, tendo duas partes de tamanho igual e cada uma dessas partes terão o mesmo tamanho do input. Cada metade terá uma funcionalidade, a metade da direita servirá para ocultar e a da esquerda para mostrar, conforme quisermos que a barra vá aumentando. Iremos movendo o fundo para a direita para que se possa visualizar a barra de progresso. Inicialmente a linha tracejada da imagem que mostramos como exemplo estará no lado esquerdo do input.





O código será o seguinte:

var __PASSWORD__ = {
colorKO: [255, 0, 0], // Color de contraseña no válida
color50: [127, 127, 0], // Color para el 50% para que no haya un cambio tan brusco
colorOK: [0, 255, 0], // Color de contraseña válida
width: 150,

// insere o evento onkeyup no input:password e insere o evento checkpassword
init: function() {
var inputs = document.getElementsByTagName("INPUT");
for (var i=0; i<inputs.length; i++) {
if (inputs.type == "password") {
inputs.addEventListener("keyup", __PASSWORD__.checkPassword, false);
inputs.className = "password";
}
}
},

// Obtém o percentual de cor entre a cor inicial e a cor final levando em conta uma cor intermediária
getColor: function(porc) {
var color = new Array();
var color1 = porc < 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc < 50? __PASSWORD__.color50:__PASSWORD__.colorOK;
color[0] = parseInt(color1[0]-((color1[0] -color2[0])*porc/100));
color[1] = parseInt(color1[1]-((color1[1] -color2[1])*porc/100));
color[2] = parseInt(color1[2]-((color1[2] -color2[2])*porc/100));

return color;
},

// Comprova a qualidade da senha
checkPassword: function() {
var valor = this.value;

var cont = 0;

var comprobaciones = new Array(
/[A-Z]/, // maiúsculas
/[a-z]/, // minúsculas
/d/, // números 
/.{6}/, // mais de 6 caracteres
/(s||/|!|"|·|$|%|&|(|)|=|?|¿|||@|#|¬|€|^|`|[' rel="nofollow" target="_blank">|+|*|¨|´|{|}|-|_|.|:|,|;|>|<)/ // Caracteres especiales
);
// verifica todas as condições
for (var i=0; i<comprobaciones.length; i++) {
if (valor.match(comprobaciones)) {
cont++;
}
}

//valores possíveis em caso de 5 condições: 0, 20, 40, 60, 80, 100, mas o valor mínimo tem que ser 20 para que coincida com o colorKo, já que se não, ao pressionar uma tecla será trocada a cor em colorKO+1
var porc = parseInt((cont*100/(comprobaciones.length-1))-(1/(comprobaciones.length-1)*100));

// Move o fundo tratando-o como uma máscara
this.style.backgroundPosition = (parseInt(cont*__PASSWORD__.width/comprobaciones.length)-(__PASSWORD__.width))+"px 0px";

//Troca a cor de fundo
var color = __PASSWORD__.getColor(porc);
if (porc < 0) {
this.style.backgroundColor = "";
} else {
this.style.backgroundColor = "rgb("+color[0]+", "+color[1]+", "+color[2]+")";
} 
}

};

window.addEventListener("load", function() {__PASSWORD__.init();}, false);