Overview

Password Meter is an exclusive component of Metronic that provides a simple and powerful build-in Javascript solution to calculate the password strength when a user enters a password string within an input field.

Usage

Password Meter's CSS and Javascript bundles are globally included in all pages.

<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>

Initialization

Password Meter structure comes in a few layers.
- Main Wrapper
- Visibility Toggle
- Highlight Meter
The Main Wrapper should be a simple divelement that will contain all the necessary components, such as: input field, input label and/or any additional spacing or note elements required. The Main Wrapper can be identified by adding data-kt-password-meter="true".
The Visibility Toggle is an icon button positioned within the input field to toggle password state from hidden to visible and vice versa. The Visibility Toggle can be identified by adding data-kt-password-meter-control="visibility".
The Highlight Meter is a group of elements that is structured in a way to display and highlight the password strength based on our Password Meter calculator. The Highlight Meter can be identified by adding data-kt-password-meter-control="highlight".
Password Meter is usually added as an input groupwith our default form validation and our extended Bootstrap's utility classes for styling.
Password Meter instances can also be controlled programmatically. See below for more info.

Basic Example

Here's a basic example of our Password Meter.

New Password

Use 8 or more characters with a mix of letters, numbers & symbols.

<!--begin::Main wrapper-->
<div class="fv-row" data-kt-password-meter="true">
    <!--begin::Wrapper-->
    <div class="mb-1">
        <!--begin::Label-->
        <label class="form-label fw-bold fs-6 mb-2">
            New Password
        </label>
        <!--end::Label-->

        <!--begin::Input wrapper-->
        <div class="position-relative mb-3">
            <input class="form-control form-control-lg form-control-solid"
                type="password" placeholder="" name="new_password" autocomplete="off" />

            <!--begin::Visibility toggle-->
            <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
                data-kt-password-meter-control="visibility">
                <i class="bi bi-eye-slash fs-2"></i>

                <i class="bi bi-eye fs-2 d-none"></i>
            </span>
            <!--end::Visibility toggle-->
        </div>
        <!--end::Input wrapper-->

        <!--begin::Highlight meter-->
        <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
            <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
            <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
            <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
            <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
        </div>
        <!--end::Highlight meter-->
    </div>
    <!--end::Wrapper-->

    <!--begin::Hint-->
    <div class="text-muted">
        Use 8 or more characters with a mix of letters, numbers & symbols.
    </div>
    <!--end::Hint-->
</div>
<!--end::Main wrapper-->

Markup Reference

Password Meter uses HTML attributes to identify the Main Wrapper, Visibility Toggle and Highlight Meter. Here are the references for each below

HTML Attribute references

Name Type Description

Name	Type	Description
`data-kt-password-meter`	`mandatory`	Enables the wrapper element as the Main Wrapper for Password Meter. Accepts `true`or `false`values. `<div data-kt-password-meter="true"> ... </div>`
`data-kt-password-meter-control`	`mandatory`	Identifies the element as a Visibility Toggle or a Highlight Meter. Accepts either `visibility`or `highlight`string values. Both `data-kt-password-meter-control`HTML attributes are mandatory and are required to be placed within the Main Wrapper. Here's a sample input field group with the Visibility Toggle aligned to the right of it to toggle password state from hidden to visible and vice versa: `<div class="position-relative mb-3"> <!--begin::Input--> <input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="new_password" autocomplete="off" /> <!--end::Input--> <!--begin::Visibility toggle--> <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility"> <i class="bi bi-eye-slash fs-2"></i> <i class="bi bi-eye fs-2 d-none"></i> </span> <!--end::Visibility toggle--> </div>` Here's a sample code structure for the Highlight Meter to display and highlight the password strength based on our Password Meter calculator: `<!--begin::Highlight meter--> <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight"> <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div> <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div> <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div> <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div> </div> <!--end::Highlight meter-->`

data-kt-password-meter

mandatory

Enables the wrapper element as the Main Wrapper for Password Meter. Accepts trueor falsevalues.

<div data-kt-password-meter="true">
    ...
</div>

data-kt-password-meter-control

mandatory

Identifies the element as a Visibility Toggle or a Highlight Meter. Accepts either visibilityor highlightstring values. Both data-kt-password-meter-controlHTML attributes are mandatory and are required to be placed within the Main Wrapper.

Here's a sample input field group with the Visibility Toggle aligned to the right of it to toggle password state from hidden to visible and vice versa:

<div class="position-relative mb-3">
    <!--begin::Input-->
    <input class="form-control form-control-lg form-control-solid"
        type="password"
        placeholder=""
        name="new_password"
        autocomplete="off" />
    <!--end::Input-->

    <!--begin::Visibility toggle-->
    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
        data-kt-password-meter-control="visibility">
        <i class="bi bi-eye-slash fs-2"></i>

        <i class="bi bi-eye fs-2 d-none"></i>
    </span>
    <!--end::Visibility toggle-->
</div>

Here's a sample code structure for the Highlight Meter to display and highlight the password strength based on our Password Meter calculator:

<!--begin::Highlight meter-->
<div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
</div>
<!--end::Highlight meter-->

All Bootstrap styling classes can be modified to suit your project needs. However, the structure and position of the HTML elements should remain the same.

Methods

All Password Meter components are initialized automatically, however the following are Password Meter's functionality methods for more control.

Name	Description
Static Methods
`getInstance(DOMElement element)`	Get the Password Meter instance created `var passwordMeterElement = document.querySelector("#kt_password_meter_control"); var passwordMeter = KTPasswordMeter.getInstance(passwordMeterElement);`
Public Methods
`Constructor`	Constructs a new instance of `KTPasswordMeter`class and initializes a Password Meter control: `var passwordMeterElement = document.querySelector("#kt_password_meter_control"); var passwordMeter = new KTPasswordMeter(passwordMeterElement);` Remove `data-kt-password-meter="true"`attribute to avoid lazy initializes.
`check`	Triggers the Password Meter to check the input string password strength. `passwordMeter.check();`
`getScore`	Returns the password strength score based on the input string. The score is calculated based on the characters used within the input string. Each character is split into 4 types to generate the password strength: `lowercase letters`, `uppercase letters`, `numbers`and special characters like `@ $ % !`. The password strength score starts from `0`and ends at `100`. `passwordMeter.getScore();`
`reset`	Resets the password meter's strength calculation. `passwordMeter.reset();`