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

| Bootstrap | jQuery | Fork awesome | Example | | --- | --- | --- | --- | | 3.4.1 | 1.12.4 | 1.1.7 | Bootstrap 3.4.1 example | | 4.6.0 | 3.5.1 | 1.1.7 | Bootstrap 4.6.0 example | | 5.0.2 | 3.5.1 | 1.1.7 | Bootstrap 5.0.2 example |

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

| Key | Default | Description | | --- | --- | --- | | className | ls-password-strength-meter | The className helps the developer target the strength meter wrapper element. The default value is also used in the (S)CSS file. | | inputGroupClass | input-group | When your password input field is wrapped around an input group, its class name (Bootstrap specific, useful when used with a non default configuration for lsPasswordToggler). | | inputGroupTag | div | When your password input field is wrapped around an input group, its tag name (Bootstrap specific, useful when used with a non default configuration for lsPasswordToggler). | | threshold | 3 | Either a number bewteen 1 and 5 or an array containing objects with a value and a Bootstrap class name (see default below). The class name will be applied to the strength meter once the entropy threshold value is reached. |

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

| ANSSI strength | Plugin threshold | Entropy threshold | | --- | --- | --- | | Very strong | 5 | 128 | | Strong | 4 | 100 | | Average | 3 | 80 | | Weak | 2 | 64 | | Very weak | 1 | 1 |

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

| Key | Default | Description | | --- | --- | --- | | addonClass | input-group-addon | The class name that defines a Bootstrap add-on for an input field | | btnClasses | btn btn-default | The Bootstrap class names used for the toggler button | | className | ls-password-toggler | The className helps the developer target the toggler wrapper element. The default value is also used in the (S)CSS file. | | hideClass | fa-eye-slash | The fork-awesome icon class for the button turning the field back into a password field | | hideTitle | Masquer le mot de passe | The title for the button turning the field back into a password field | | iconClass | fa | The generic fork-awesome icon class | | inputGroupClass | input-group | The class of the Bootstrap wrapper element that will be created (or already exists) around the password field | | inputGroupTag | div | The tag of the Bootstrap wrapper element that will be created (or already exists) around the password field | | position | before | The add-on position with respect to the field. Accepted values are before or after. | | showClass | fa-eye | The fork-awesome icon class for the button turning the field into a text field | | showTitle | Afficher le mot de passe | The title for the button turning the field into a text field |

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)