@libriciel/ls-jquery-password v1.2.3

ls-jquery-password

Description

A jQuery plugin for password fields at Libriciel SCOP, using Bootstrap 3, 4 or 5 and fork awesome. It adds a toggler and a strength meter (with respect to ANSSI recommendations) to password fields.

The strength meter was inspired by the "Password Strength" xkcd comic, to encourage passwords that humans can easily remember while still having a large entropy (possible values).

The toggler makes it possible for the user to toggle the password field to a text field so the user can check the word.

The strength meter should turn green and reach 100 % once the desired password entropy has been reached.

The strength meter only takes the entropy of the password into account (brute force).

When compared to other password strength meters such as Kaspersky password checker, it does not check for repetitions, common passwords, leaked passwords, words, ...

Basic usage

<link rel="stylesheet" href="dist/css/ls-jquery-password.css">

<script src="dist/js/ls-jquery-password.min.js"></script>

// Example with Boostrap 4.6
$('input[type=password]')
    // Default parameters for a "strength" of 3 (entropy of at least 80) as defined by the ANSSI.
    .lsPasswordStrengthMeter($.fn.lsPasswordStrengthMeter.configure('4.6', 3))
    .lsPasswordToggler($.fn.lsPasswordToggler.configure('4.6'));

Examples

Advanced usage (configuration)

lsPasswordStrengthMeter

Default configuration

$.fn.lsPasswordStrengthMeter.configure('4.6', 3)
// which is equivalent to
{
    "className": "ls-password-strength-meter",
    "inputGroupClass": "input-group",
    "inputGroupTag": "div",
    "thresholds": [
        { "value": 0, "className": "bg-danger" },
        { "value": 40, "className": "bg-warning" },
        { "value": 80, "className": "bg-success" }
    ]
}

Result

<div class="form-group row">
    <label for="UserPasswordTest" class="col-sm-3 col-form-label">Mot de passe</label>
    <div class="col-sm-9">
        <input name="data[User][password]" id="UserPasswordTest" class="form-control" type="password">
    </div>
</div>

<div class="form-group row">
    <label for="UserPasswordTest" class="col-sm-3 col-form-label">Mot de passe</label>
    <div class="col-sm-9">
        <input name="data[User][password]" id="UserPasswordTest" class="form-control" type="password"><div class="progress ls-password-strength-meter">
            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">0%</div>
        </div>
    </div>
</div>

Configuration keys

The default threshold value 3 is translated to the following, when using Bootstrap 4 configuration:

[
    { "value": 80, "className": "bg-success" }, // A password with an entropy >= 80 will have a 100 % green bar
    { "value": 40, "className": "bg-warning" }, // A password with an entropy >= 40 (and < 80) will have a yellow bar between [50 %, 100 % [
    { "value": 0, "className": "bg-danger" }    // A password with an entropy < 40 will have a red bar between [0 %, 50 % [
]

Thresholds

lsPasswordToggler

Default configuration

$.fn.lsPasswordToggler.configure('4.6')
// which is equivalent to
{
  "addonClass": "input-group-text",
  "className": "ls-password-toggler",
  "btnClasses": "btn btn-default",
  "btnWrapper": "<div class=\"input-group-prepend\"></div>",
  "hideClass": "fa-eye",
  "hideTitle": "Masquer le mot de passe",  
  "iconClass": "fa",  
  "inputGroupClass": "input-group",
  "inputGroupTag": "div",
  "position": "before",
  "showClass": "fa-eye-slash",
  "showTitle": "Afficher le mot de passe"
}

Result

<div class="form-group row">
    <label for="UserPasswordTest" class="col-sm-3 col-form-label">Mot de passe</label>
    <div class="col-sm-9">
        <input name="data[User][password]" id="UserPasswordTest" class="form-control" type="password">
    </div>
</div>

<div class="form-group row">
    <label for="UserPasswordTest" class="col-sm-3 col-form-label">Mot de passe</label>
    <div class="col-sm-9">
        <div class="input-group">
            <div class="input-group-prepend"><span class="ls-password-toggler btn btn-default input-group-text" title="Afficher le mot de passe"><span class="fa fa-eye-slash" aria-hidden="true"> </span></span>
            </div>
            <input name="data[User][password]" id="UserPasswordTest" class="form-control" type="password">
        </div>
    </div>
</div>

Configuration keys

Developpment

There is a Dockerfile and a docker-compose.yml file that will launch a Grunt that will build the dist plugin files, launch unit tests and watch for changes made to the source code.

(docker image ls --quiet ls-jquery-password | xargs docker image rmi -f)
(docker-compose down --remove-orphans --volumes ; docker-compose up ; docker-compose down --remove-orphans --volumes)