Merge pull request #511 from PavanTeja2005/strengthmeter

added password strength meter

login.html

@@ -36,33 +36,75 @@ <h2 class="title">Sign in</h2>
                 </a>
               </div>
           </form>
-          <form action="#" class="sign-up-form">
+          <form action="#" class="sign-up-form" style="background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
             <h2 class="title">Sign up</h2>
             <div class="input-field">
-              <i class="fas fa-user"></i>
-              <input type="text" placeholder="Username" />
+                <i class="fas fa-user"></i>
+                <input type="text" placeholder="Username" />
             </div>
             <div class="input-field">
-              <i class="fas fa-envelope"></i>
-              <input type="email" placeholder="Email" />
+                <i class="fas fa-envelope"></i>
+                <input type="email" placeholder="Email" />
             </div>
             <div class="input-field">
-              <i class="fas fa-lock" id="toggle-password-signup"></i>
-              <input type="password" placeholder="Password" id="password-input-signup" />
+                <i class="fas fa-lock" id="toggle-password-signup"></i>
+                <input type="password" placeholder="Password" id="password-input-signup" />
             </div>
+
+            <!-- Password strength meter starts here (initially hidden) -->
+            <div id="password-strength-section" style="display: none;">
+                <label for="password-input-signup">Password Strength:</label>
+                <div class="strength-meter" style="width: 100%; max-width: 300px; height: 10px; background-color: #e0e0e0; border-radius: 5px; margin: 10px auto;">
+                    <div id="strength-bar-signup" style="height: 100%; width: 1%; background-color: #d73f40; border-radius: 5px; transition: width 0.5s, background-color 0.5s;"></div>
+                </div>
+                <div class="strength-label" id="strength-label-signup" style="font-size: 14px; margin-top: 10px;">Weak</div>
+            </div>
+            <!-- Password strength meter ends here -->
+
             <input type="submit" class="btn" value="Sign up" />
             <p class="social-text">Or Sign up with social platforms</p>
             <div class="social-media">
                 <a href="https://www.google.com" target="_blank" class="social-icon">
                     <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i>
-                  </a>
+                </a>
                 <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
-                  <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267B2;"></i>
+                    <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267B2;"></i>
                 </a>
                 <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
-                  <i class="fab fa-github" style="font-size: 24px; color: #333;"></i> </a>
-              </div>
-          </form>
+                    <i class="fab fa-github" style="font-size: 24px; color: #333;"></i>
+                </a>
+            </div>
+        </form>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
+        <script>
+            let passwordSignup = document.getElementById("password-input-signup");
+            let strengthBarSignup = document.getElementById("strength-bar-signup");
+            let strengthLabelSignup = document.getElementById("strength-label-signup");
+            let passwordStrengthSection = document.getElementById("password-strength-section");
+
+            passwordSignup.oninput = function () {
+                let value = passwordSignup.value;
+
+                // Show the strength meter when the user starts typing
+                if (value.length > 0) {
+                    passwordStrengthSection.style.display = "block";
+                } else {
+                    passwordStrengthSection.style.display = "none";
+                }
+
+                let result = zxcvbn(value);
+                let score = result.score; // Score is between 0 and 4
+                let widths = ["1%", "25%", "50%", "75%", "100%"];
+                let colors = ["#d73f40", "#dc6551", "#f2b84f", "#bde952", "#3ba62f"];
+                let labels = ["Very Weak", "Weak", "Fair", "Good", "Strong"];
+
+                strengthBarSignup.style.width = widths[score];
+                strengthBarSignup.style.backgroundColor = colors[score];
+                strengthLabelSignup.textContent = labels[score];
+            };
+        </script>
+
         </div>
       </div>