How to use?
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/pwstrength-bootstrap/dist/pwstrength-bootstrap.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/js/hs.pwstrength.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of password strength module
$('.js-pwstrength').each(function () {
var pwstrength = $.HSCore.components.HSPWStrength.init($(this));
});
});
</script>
Basic example
<form id="changePasswordForm" class="js-validate">
<!-- Input -->
<div class="mb-6">
<div class="js-form-message">
<label class="input-label">
New password
</label>
<div class="form-group">
<input id="passwordStrength" type="password" class="js-pwstrength form-control" name="passwordStrength" placeholder="Enter your password" aria-label="Enter your password"
data-hs-pwstrength-options='{
"ui": {
"container": "#changePasswordForm",
"viewports": {
"progress": "#passwordStrengthProgress",
"verdict": "#passwordStrengthVerdict"
},
"progressExtraCssClasses": "bg-white h-4rem"
}
}'>
</div>
</div>
</div>
<!-- End Input -->
<div class="w-lg-50">
<!-- Password Strength -->
<div class="mb-6">
<div class="d-flex justify-content-between mb-2">
<h3 class="h6">Password strength:</h3>
<span id="passwordStrengthVerdict"></span>
</div>
<div id="passwordStrengthProgress" class="mb-2"></div>
<p class="small">New password must be 8-20 characters long. Tip: Make it hard to guess (wrong: password123).</p>
</div>
<!-- End Password Strength -->
<!-- Buttons -->
<button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Password</button>
<button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover">Cancel</button>
<!-- End Buttons -->
</div>
</form>
Extend
Plugin methods are called using a wrapper:
<script>
$(document).on('ready', function () {
// initialization of password strength
$('.js-pwstrength').each(function () {
var pwstrength = $.HSCore.components.HSPWStrength.init($(this));
$.HSCore.components.HSPWStrength.methods($(this), "destroy"); // matches $(this).pwstrength("destroy");
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-pwstrength-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-pwstrength-options='{}'. For more detailed or missing attributes/functions, see the official jQuery Password Strength documentation documentation page.