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 addingdata-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.
|
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:
Here's a sample code structure for the Highlight Meter to display and highlight the password strength based on our Password Meter calculator:
|
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).
|
getInstance(DOMElement element)
|
Get the Password Meter instance created
|
| Public Methods | |
Constructor
|
Constructs a new instance of
KTPasswordMeterclass and initializes a Password Meter control:
Remove
data-kt-password-meter="true"attribute to avoid lazy initializes. |
check
|
Triggers the Password Meter to check the input string password strength.
|
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.
|
reset
|
Resets the password meter's strength calculation.
|
2022©
Keenthemes
