Bootstrap 5 Password Strength Meter

by
Bootstrap 5 Password Strength Meter
Code Snippet:Password Strength Meter (Vanilla JS)
Author: Marcus
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 4,873
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (File not found!)

This Bootstrap 5 code snippet helps you to create a password input field with a strength meter. It visually indicates password strength. It assesses the password’s complexity and uses color-coded meter sections to show strength levels, helping you create more secure passwords effortlessly.

You can implement this code in the password input field of your registration or sign-up forms to encourage users to create strong passwords when creating accounts.

How to Create Bootstrap 5 Password Strength Meter

1. First, make sure to include the Bootstrap 5 CSS and JavaScript libraries by adding the necessary CDN links to your HTML header.

  1. <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'>
  2. <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js'></script> 
  3. <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js'></script>

2. Now, add the HTML structure to your web page. The following code demonstrates how to set up a simple password input field with the strength meter:

  1. <body class="container-fluid bg-body-tertiary d-block">
  2.     <div class="row justify-content-center">
  3.         <div class="row justify-content-center">
  4.             <div class="col-12 col-md-6 col-lg-4" style="min-width: 500px;">
  5.                 <div class="card bg-white mb-5 mt-5 border-0" style="box-shadow: 0 12px 15px rgba(0, 0, 0, 0.02);">
  6.                     <div class="card-body p-5">
  7.     
  8.                         <label for="password-input" class="form-label fw-bold">Password</label>
  9.                         <input type="password" class="form-control" id="password-input" autocomplete="off"
  10.                                aria-autocomplete="list"
  11.                                aria-label="Password" aria-describedby="passwordHelp">
  12.                         <div class="password-meter">
  13.                             <div class="meter-section rounded me-2"></div>
  14.                             <div class="meter-section rounded me-2"></div>
  15.                             <div class="meter-section rounded me-2"></div>
  16.                             <div class="meter-section rounded"></div>
  17.                         </div>
  18.                         <div id="passwordHelp" class="form-text text-muted">Use 8 or more characters with a mix of
  19.                             letters, numbers &
  20.                             symbols.
  21.                         </div>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </div>
  27. </body>

3. Add the following CSS code to style the password strength meter. This code defines the appearance of the meter sections and differentiates them based on strength.

  1. .password-meter {
  2.     display: flex;
  3.     height: 5px;
  4.     margin-top: 10px;
  5. }
  6.  
  7. .meter-section {
  8.     flex: 1;
  9.     background-color: #ddd;
  10. }
  11.  
  12. .weak {
  13.     background-color: #ff4d4d;
  14. }
  15.  
  16. .medium {
  17.     background-color: #ffd633;
  18. }
  19.  
  20. .strong {
  21.     background-color: #00b300;
  22. }
  23.  
  24. .very-strong {
  25.     background-color: #009900;
  26. }

4. To make the password strength meter functional, add the following JavaScript code. This code calculates the strength of the entered password and updates the meter sections accordingly.

  1. const passwordInput = document.getElementById('password-input');
  2. const meterSections = document.querySelectorAll('.meter-section');
  3.  
  4. passwordInput.addEventListener('input', updateMeter);
  5.  
  6. function updateMeter() {
  7.     const password = passwordInput.value;
  8.     let strength = calculatePasswordStrength(password);
  9.  
  10.     // Remove all strength classes
  11.     meterSections.forEach((section) => {
  12.         section.classList.remove('weak', 'medium', 'strong', 'very-strong');
  13.     });
  14.  
  15.     // Add the appropriate strength class based on the strength value
  16.     if (strength >= 1) {
  17.         meterSections[0].classList.add('weak');
  18.     }
  19.     if (strength >= 2) {
  20.         meterSections[1].classList.add('medium');
  21.     }
  22.     if (strength >= 3) {
  23.         meterSections[2].classList.add('strong');
  24.     }
  25.     if (strength >= 4) {
  26.         meterSections[3].classList.add('very-strong');
  27.     }
  28. }
  29.  
  30. function calculatePasswordStrength(password) {
  31.     const lengthWeight = 0.2;
  32.     const uppercaseWeight = 0.5;
  33.     const lowercaseWeight = 0.5;
  34.     const numberWeight = 0.7;
  35.     const symbolWeight = 1;
  36.  
  37.     let strength = 0;
  38.  
  39.     // Calculate the strength based on the password length
  40.     strength += password.length * lengthWeight;
  41.  
  42.     // Calculate the strength based on uppercase letters
  43.     if (/[A-Z]/.test(password)) {
  44.         strength += uppercaseWeight;
  45.     }
  46.  
  47.     // Calculate the strength based on lowercase letters
  48.     if (/[a-z]/.test(password)) {
  49.         strength += lowercaseWeight;
  50.     }
  51.  
  52.     // Calculate the strength based on numbers
  53.     if (/\d/.test(password)) {
  54.         strength += numberWeight;
  55.     }
  56.  
  57.     // Calculate the strength based on symbols
  58.     if (/[^A-Za-z0-9]/.test(password)) {
  59.         strength += symbolWeight;
  60.     }
  61.  
  62.     return strength;
  63. }

That’s it! You’ve successfully implemented a Password Strength Meter. This tool enhances user security by guiding them to create stronger passwords. Feel free to customize the CSS styles to match your project’s design.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X