# Password Strength Meter

Our JavaScript Password Strength Meter replaces existing password strength meters on signup and password change forms to not only provide a typical, algorithmic strength estimation, but also verify that the password has not been publicly exposed.

The password strength meter is **absolutely free** to use in its branded form up to 100,000 requests from your domain each month.

## Quick Start

[See the Quick Start Guide here.](#quick-start)

## Example Implementation

[See an example sign up form here.](https://www.enzoic.com/docs-password-strength-meter-example)

## Reference

The strength meter can be instantiated on an existing password INPUT element in a couple of different ways: either through extended HTML attributes applied to the INPUT or by a direct call to the Enzoic JavaScript API.

#### Creating Via HTML Attributes

***

This is the most straightforward way to use the strength meter on your page. Just add the HTML attributes to your existing password input, disable any existing strength meter, and go.

Example:

```
<input type="password" enz-enable enz-theme="light" enz-min-password-score="4" enz-css-success-class="field-ok" enz-css-fail-class="field-invalid" />
```

Available HTML attributes:

|        Attribute       |                                                                                                                                              Description                                                                                                                                             |       Default      |
| :--------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------: |
|       enz-enable       |                                                                                        This is the only attribute required to instantiate the Enzoic strength meter on an HTML INPUT element of type password.                                                                                       |         n/a        |
|        enz-theme       |                                                                                                 Which display theme to use for the strength meter UI. Current possibilites are “default” and “light”.                                                                                                |      “default”     |
| enz-min-password-score |                                                                   The minimum password score (0-5) you require. This defines the threshold used to determine when the success and fail CSS classes get added to the INPUT element.                                                                   |     4 (Strong)     |
|  enz-css-success-class |                                                                         The CSS class which gets added to the password INPUT element when the password strength is at least equal to the value of the enz-min-password-score.                                                                        |    “enz-success”   |
|   enz-css-fail-class   |                                                                             The CSS class which gets added to the password INPUT element when the password strength is less then the value of the enz-min-password-score.                                                                            |     “enz-fail”     |
|        enz-lang        | The Password Strength Meter currently has translations available for English, Spanish, Portuguese, French, and German. By default, the value of navigator.language will be used to select a language. Use this attribute to specify a language using its ISO 639-1 code, e.g. “en”, “de”, “fr”, etc. | navigator.language |

#### Creating Via JavaScript API

***

This is the approach to use if you have an input element which is not statically rendered (e.g. is rendered from JavaScript) and it is not straightforward to add the HTML attributes to it. In that case, you can call the Enzoic object’s applyToInputElement method to directly provide the element and options.

Example of creating the Enzoic control via the JavaScript API’s applyToInputElement method:

```
var options = {
  theme: 'default',
  minimumPasswordScore: Enzoic.PASSWORD_STRENGTH.Strong,
  cssSuccessClass: 'enz-success',
  cssFailClass: 'enz-fail'
};
 
Enzoic.applyToInputElement(document.getElementById("id_of_your_password_input"), options);
```

The applyToInputElement method is documented [here](https://www.enzoic.com/docs/docs-password-strength-meter/#applyToInputElement)

#### Password Scoring

***

Enzoic scores passwords on a scale of 0-5:

| Score | Description                                                                    | JavaScript Enum                      |
| ----- | ------------------------------------------------------------------------------ | ------------------------------------ |
| 0     | “Hacked” – means password was present in the Enzoic compromised passwords list | Enzoic.PASSWORD\_STRENGTH.Hacked     |
| 1     | Very Weak                                                                      | Enzoic.PASSWORD\_STRENGTH.VeryWeak   |
| 2     | Weak                                                                           | Enzoic.PASSWORD\_STRENGTH.Weak       |
| 3     | Medium                                                                         | Enzoic.PASSWORD\_STRENGTH.Medium     |
| 4     | Strong                                                                         | Enzoic.PASSWORD\_STRENGTH.Strong     |
| 5     | Very Strong                                                                    | Enzoic.PASSWORD\_STRENGTH.VeryStrong |

#### JavaScript API Reference

***

**Properties**

***

**Enzoic.cssFailClass**

**Type**

String

**Description**

The CSS class which is applied to the INPUT element whenever the currentPasswordScore is less than the minimumPasswordScore;

**Enzoic.cssSuccessClass**

**Type**

String

**Description**

The CSS class which is applied to the INPUT element whenever the currentPasswordScore is greater than or equal to the minimumPasswordScore;

**Enzoic.currentPasswordScore**

**Type**

Number

**Description**

This is the score Enzoic has calculated for the current password value in the input field.

**Enzoic.language**

**Type**

Number

**Description**

The currently selected language for the Enzoic UI, e.g. “en”, “es”, etc. Use the [setLanguage](https://www.enzoic.com/docs/docs-password-strength-meter/#setLanguage) method to modify it.

**Enzoic.minimumPasswordScore**

**Type**

Number

**Description**

The minimum password score threshold. This is a threshold value used to determine when the success/fail CSS classes are added to the underlying INPUT element. These CSS classes can be used to customize the styling of your input element to match the current pass/fail condition of the user’s password.

**Enzoic.theme**

**Type**

String

**Description**

The Enzoic theme which is used to style the strength meter UI. Possible values are “default” and “light”.

**Methods**

***

**Enzoic.applyToInputElement(element, \[options])**

**Overview**

Applies the Enzoic strength meter to an existing HTML INPUT element on the page.

**Parameters**

* **element**: HTMLElement/String\
  Either an INPUT element or the ID of an INPUT element representing the password input you would like to apply Enzoic to.
* **options**: *Object*\
  The desired options for the password strength meter.Possible values:

  | Option               | Descrption                                                                                                                                                                               | Default                          |
  | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
  | theme                | Which display theme to use for the strength meter UI. Current possibilites are “default” and “light”.                                                                                    | “default”                        |
  | minimumPasswordScore | The minimum score you require for a password to be accepted. This defines the threshold used to determine when the success and fail CSS classes get added to the password INPUT element. | Enzoic.PASSWORD\_STRENGTH.Strong |
  | cssSuccessClass      | The CSS class which gets added to the password INPUT element when the password strength is at least equal to the value of the enz-min-password-score.                                    | “enz-success”                    |
  | cssFailClass         | The CSS class which gets added to the password INPUT element when the password strength is less then the value of the enz-min-password-score.                                            | “enz-fail”                       |

**Enzoic.setLanguge(languageCode)**

**Overview**

Enzoic currently has translations available for English, Spanish, Portuguese, French, and German. By default, the value of navigator.language will be used to select a language. Use this method to specify a language using its ISO 639-1 code, e.g. “en”, “de”, “fr”, etc.

**Parameters**

* **languageCode**: String\
  The ISO 639-1 code for the newly selected language: “en”, “de”, “fr”, “es”, or “pt”

**Events**

***

**Enzoic.oncalcpasswordscore(password)**

**Overview**

This event fires whenever a password needs to be scored. By default, Enzoic uses the innovative open source [zxcvbn library](https://github.com/dropbox/zxcvbn) to calculate a strength score for passwords which are not known to be compromised. If you have an existing password scoring algorithm you would prefer to use instead of zxcvbn, assign a handler to this event. Your handler should calculate a score for the password parameter and return an object with score and message members.

**Parameters**

* **password**: String\
  The password to score.

**Return**

An object containing a score (see [Password Scoring](https://www.enzoic.com/docs/docs-password-strength-meter/#passwordscoring) above) and a message for display to the user. The message should provide guidance to the user on how to construct a satisfactory password, e.g. “Your password should be at least 9 characters long and contain at least one number and one symbol.”

**Example:**

```
Enzoic.oncalcpasswordscore = onCalcPasswordScore;
 
function onCalcPasswordScore(password) {
   // simplistic length check
   if (password.length < 9) {
       return {
           score: Enzoic.PASSWORD_STRENGTH.VeryWeak,
           message: "Your password should be at least 9 characters long."
       };
   }
   else {
       return {
           score: Enzoic.PASSWORD_STRENGTH.VeryStrong,
           message: '' // no message needed for satisfactory passwords
       };
   }
}
```

**Enzoic.onpasswordscoreresult(password, score)**

**Overview**

This event fires whenever an entered password has been scored.

**Parameters**

* **password**: String\
  The password which was entered.
* **score**: Number\
  The score calculated for the password. See [Password Scoring](https://www.enzoic.com/docs/docs-password-strength-meter/#passwordscoring) for an explanation of the values.
* **breached**: Boolean\
  If the password score indicates a hacked password (Enzoic.PASSWORD\_STRENGTH.Hacked), this flag indicates whether the password was exposed in a data breach. If this flag is true, the password was exposed alongside username(s) in a breach. If this value is false, the password was found in common password cracking dictionaries and was not exposed alongside a username.

**Return**

An object containing a score (see [Password Scoring](https://www.enzoic.com/docs/docs-password-strength-meter/#passwordscoring) above) and a message for display to the user. The message should provide guidance to the user on how to construct a satisfactory password, e.g. “Your password should be at least 9 characters long and contain at least one number and one symbol.”

**Example:**

```
Enzoic.onpasswordscoreresult = onPasswordScoreResult;
 
function onPasswordScoreResult(password, score, breached) {
    // just print the results to the console, for example
    console.log('Entered password: ' + password);
    console.log('Score: ' + score);
    console.log('Breached: ' + breached);
}
```

&#x20;