Documentation v1.0.11

Preview Purchase

Overview

Password Meter is an exclusive component of Craft 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.
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
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
createInstances(DOMString selector) Initializes Password Meter instances by selector. Default value of selectoris [data-kt-password-meter]. This method can be used to initialize dynamicly populated Password Meter instances(e.g: after Ajax request).
KTPasswordMeter.createInstances();
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 KTPasswordMeterclass 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, numbersand special characters like @ $ % !. The password strength score starts from 0and ends at 100.
passwordMeter.getScore();
reset Resets the password meter's strength calculation.
passwordMeter.reset();
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now