@libriciel/ls-jquery-password

1.2.3 • Public • Published

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)

Readme

Keywords

none

Package Sidebar

Install

npm i @libriciel/ls-jquery-password

Weekly Downloads

41

Version

1.2.3

License

MIT

Unpacked Size

103 kB

Total Files

31

Last publish

Collaborators

  • tpapin
  • epommateau
  • lhameury
  • adrienbricchi
  • cbuffin