From 2b7a810a1d1020ed79fa763f66e4cde9b40ef8f4 Mon Sep 17 00:00:00 2001
From: yalsik <msdegoat@gmail.com>
Date: Fri, 11 Oct 2024 02:06:36 +0530
Subject: [PATCH] password strength checker

---
 assets/css/signin.css | 21 ++++++++++++++++
 signin.html           | 58 ++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/assets/css/signin.css b/assets/css/signin.css
index 69523980..261c546e 100644
--- a/assets/css/signin.css
+++ b/assets/css/signin.css
@@ -128,3 +128,24 @@ p {
         font-size: 14px;
     }
 }
+
+.strength-bar {
+    width: 100%;
+    height: 3px;
+    background-color: #ddd;
+    margin-top: 10px;
+  }
+  .strength-bar-inner {
+    height: 100%;
+    width: 0%;
+    background-color: red;
+    transition: width 0.3s ease;
+  }
+  #pass_login{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  #pass_login i{
+    padding-left: 200px;
+  }
\ No newline at end of file
diff --git a/signin.html b/signin.html
index f3a04090..cd4e5f27 100644
--- a/signin.html
+++ b/signin.html
@@ -28,10 +28,22 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                 </div>
                 <div class="input-group">
                     <label for="password">Password</label>
-                    <div class="password">
-                        <input type="password" id="password" name="password" placeholder="Enter your password" required>
-                        <i class="fa-solid fa-eye-slash" id="togglePassword"></i>
-                      </div>
+                    <div class="password" id="pass_login">
+                       <div id="pass_login">
+                        <input type="password" id="password" name="password" placeholder="Enter your password" oninput="checkPasswordStrength()" required>
+                        <i class="fa-solid fa-eye-slash" id="togglePassword" ></i>
+                        
+                       </div>
+                    </div>
+                        <div class="strength-bar">
+                            <div id="strengthBar" class="strength-bar-inner"></div>
+                        </div>
+                        <ul class="bullet-points">
+                            <li><small>Use special characters and numbers for strong password</small></li>
+                            <li><small>Use special characters and numbers for strong password</small></li>
+                            <li><small>Use special characters and numbers for strong password</small></li>
+                            <li><small>Use special characters and numbers for strong password</small></li>
+                        </ul>
                     </div>
                 <button type="submit" class="signin-btn">Sign In</button>
                 <p class="signup-link">Don't have an account? <a href="./signup.html">Sign up here</a></p>
@@ -51,6 +63,44 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
   this.classList.toggle("fa-eye");
 });
 
+function checkPasswordStrength() {
+      const password = document.getElementById('password').value;
+      const strengthBar = document.getElementById('strengthBar');
+      let strength = 0;
+
+      if (password.length >= 8) strength += 1;
+      if (/[A-Z]/.test(password)) strength += 1;
+      if (/[a-z]/.test(password)) strength += 1;
+      if (/[0-9]/.test(password)) strength += 1;
+      if (/[\W]/.test(password)) strength += 1;
+
+      switch (strength) {
+        case 1:
+          strengthBar.style.width = '20%';
+          strengthBar.style.backgroundColor = 'red';
+          break;
+        case 2:
+          strengthBar.style.width = '40%';
+          strengthBar.style.backgroundColor = 'orange';
+          break;
+        case 3:
+          strengthBar.style.width = '60%';
+          strengthBar.style.backgroundColor = 'yellow';
+          break;
+        case 4:
+          strengthBar.style.width = '80%';
+          strengthBar.style.backgroundColor = 'lightgreen';
+          break;
+        case 5:
+          strengthBar.style.width = '100%';
+          strengthBar.style.backgroundColor = 'green';
+          break;
+        default:
+          strengthBar.style.width = '0%';
+          break;
+        }
+    }
+
     </script>
 
 </body>