Password Strength

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 Front to enable it.

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 requirements:

Ensure that these requirements are met:

Minimum 8 characters long - the more, the better
At least one lowercase character
At least one uppercase character
At least one number, symbol, or whitespace character

                    
                      <!-- Form Group -->
                      <div class="row form-group">
                        <label for="newPassword" class="col-sm-3 col-form-label input-label">New password</label>

                        <div class="col-sm-9">
                          <input type="password" class="js-pwstrength form-control" name="newPassword" id="newPassword" placeholder="Enter new password" aria-label="Enter new password"
                                 data-hs-pwstrength-options='{
                                   "ui": {
                                     "container": "#changePasswordForm",
                                     "viewports": {
                                       "progress": "#passwordStrengthProgress",
                                       "verdict": "#passwordStrengthVerdict"
                                     }
                                   }
                                 }'>

                          <p id="passwordStrengthVerdict" class="form-text"></p>

                          <div id="passwordStrengthProgress" class="mb-3"></div>

                          <h5>Password requirements:</h5>

                          <p class="font-size-sm mb-2">Ensure that these requirements are met:</p>

                          <ul class="font-size-sm">
                            <li>Minimum 8 characters long - the more, the better</li>
                            <li>At least one lowercase character</li>
                            <li>At least one uppercase character</li>
                            <li>At least one number, symbol, or whitespace character</li>
                          </ul>
                        </div>
                      </div>
                      <!-- End Form Group -->

                      <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-white mr-2">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                      </div>

Preview
HTML

                    
                      <!-- Button Trigger Modal -->
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Open modal
                      </button>
                      <!-- End Button Trigger Modal -->

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Advanced select</h5>
                              <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                <i class="tio-clear tio-lg" aria-hidden="true"></i>
                              </button>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <!-- Form Group -->
                              <div class="row form-group">
                                <label for="newPasswordModalEg" class="col-sm-3 col-form-label input-label">New password</label>

                                <div class="col-sm-9">
                                  <input type="password" class="js-pwstrength form-control" name="newPasswordModalEg" id="newPasswordModalEg" placeholder="Enter new password" aria-label="Enter new password"
                                         data-hs-pwstrength-options='{
                                           "ui": {
                                             "container": "#changePasswordFormModalEg",
                                             "viewports": {
                                               "progress": "#passwordStrengthProgressModalEg",
                                               "verdict": "#passwordStrengthVerdictModalEg"
                                             }
                                           }
                                         }'>

                                  <p id="passwordStrengthVerdictModalEg" class="form-text"></p>

                                  <div id="passwordStrengthProgressModalEg"></div>
                                </div>
                              </div>
                              <!-- End Form Group -->
                            </div>
                            <!-- End Body -->

                            <!-- Footer -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Continue</button>
                            </div>
                            <!-- End Footer -->
                          </div>
                        </div>
                      </div>
                      <!-- End Modal -->

Methods

Parameters	Description	Default value
`template`	Mask data	`null`

How to use

Basic examples

Password requirements:

Modal example

Methods