Password strength (zxcvbn)

A password strength estimator inspired by password crackers.

Usage

Use the data-zxcvbn attribute within a progress bar. With this attribute you can define the target input password field and additional text which tells the user whether the password is weak or strong.

 <input type="password" class="form-control mb-3" id="password" autocomplete="off" placeholder="Your password">
 
<div class="d-flex justify-content-between align-items-center mt-3 h-15px">
    <div class="progress d-flex flex-grow-1 h-10px">
        <div data-zxcvbn='{"input": "#password", "text": "#progressText"}' class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="fs-6" id="progressText"></span>
</div>

By using code splitting and dynamic import techniques you don't need to worry about the size of the JavaScript file. Dashly will only import the necessary files when they are needed.

	<input type="password" class="form-control mb-3" id="password" autocomplete="off" placeholder="Your password">

	<div class="d-flex justify-content-between align-items-center mt-3 h-15px">
	<div class="progress d-flex flex-grow-1 h-10px">
	<div data-zxcvbn='{"input": "#password", "text": "#progressText"}' class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<span class="fs-6" id="progressText"></span>
	</div>