Password Strength

jQuery Password Strength Meter.

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>

New password

Password strength:

New password must be 8-20 characters long. Tip: Make it hard to guess (wrong: password123).

<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.