JavaScript: creare un misuratore di robustezza delle password con la libreria zxcvbn

In questo articolo creeremo un misuratore di robustezza delle password in JavaScript utilizzando la libreria zxcvbn.

zxcvbn è una potente libreria che controlla l'entropia e la robustezza di una data password. È molto semplice da usare: passiamo la password al costruttore e otteniamo un oggetto contenente varie informazioni.

Le informazioni che utilizzeremo qui sono la proprietà score che riporta un punteggio da 0 a 4 che indica i cinque livelli di sicurezza di una password.

Partiamo dalla seguente marcatura:

<form id="test-form" action="" method="post" novalidate>
    <div class="form-group">
        <label for="password">Choose a password</label>
        <input type="text" name="password" id="password" class="form-control">
        <div class="password-meter-wrap">
            <div class="password-meter-bar"></div>
        </div>
    </div>
</form> 

Quindi possiamo creare cinque classi CSS con una larghezza crescente e un colore di sfondo diverso da applicare dinamicamente alla barra interna.

.password-meter-wrap {
    margin-top: 5px;
    height: 16px;
    background-color: #ddd;
}

.password-meter-bar {
    width: 0;
    height: 100%;
    transition: width 400ms ease-in;
}

.password-meter-bar.level0 {
    width: 20%;
    background-color: #d00;
}
.password-meter-bar.level1 {
    width: 40%;
    background-color: #f50;
}
.password-meter-bar.level2 {
    width: 60%;
    background-color: #ff0;
}
.password-meter-bar.level3 {
    width: 80%;
    background-color: rgb(161, 168, 65);
}

.password-meter-bar.level4 {
    width: 100%;
    background-color: #393;
}

Cinque livelli, cinque classi, cinque larghezze differenti che vanno da 0 a 100% con un singolo step pari al 20% perché 100/5 = 20.

Ora possiamo scrivere il codice JavaScript:

'use strict';

class PasswordMeter {
    constructor(selector) {
        this.wrappers = document.querySelectorAll(selector);
        if(this.wrappers.length > 0) {
            this.init(this.wrappers);
        }
    }
    init(wrappers) {
        wrappers.forEach(wrapper => {
            let bar = wrapper.querySelector('.password-meter-bar');
            let input = wrapper.previousElementSibling;

            input.addEventListener('keyup', () => {
                let value = input.value;
                bar.classList.remove('level0', 'level1', 'level2', 'level3', 'level4');
                let result = zxcvbn(value);
                let cls = `level${result.score}`;
                bar.classList.add(cls);
            }, false);
        });
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const passwordMeter = new PasswordMeter('.password-meter-wrap');
}, false);

Associamo un evento keyup al campo della password dove controlliamo la robustezza della password utilizzando il costruttore della libreria zxcvbn. Otteniamo il nostro risultato e usiamo il valore intero per modificare dinamicamente le classi CSS della barra interna. Come si può notare, questa logica è davvero semplice.

Demo

JavaScript: password strength meter with zxcvbn