Logo Logo

Documentation v1.1.5

  • Home
  • Password Meter Exclusive
Preview
Light
Dark
System

Overview

Password Meter is an exclusive component of Ceres HTML Pro 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 div element 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 group with 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

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-semibold 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="ki-duotone ki-eye-slash fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                    <i class="ki-duotone ki-eye d-none fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span></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 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-->
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 to initialize explicitly for more control without data-kt-password-meter="true".
Name Description
Static Methods
createInstances (DOMString selector) Initializes Password Meter instances by selector. Default value of selector is [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 KTPasswordMeter class and initializes a Password Meter control with custom options: 
var options = {
    minLength: 8,
    checkUppercase: true,        
    checkLowercase: true,
    checkDigit: true,
    checkChar: true,
    scoreHighlightClass: "active"
};
var passwordMeterElement = document.querySelector("#kt_password_meter_control");
var passwordMeter = new KTPasswordMeter(passwordMeterElement, options);
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();
Preview Get Help Buy Now