password strength meter

src/pages/profile_page.html

@@ -59,9 +59,14 @@
     </div>
 
     <div>
-        <label class="input_label">Strength: Weak</label><br />
+        <label class="input_label" id="strengh-label">Strength: Weak</label
+        ><br />
         <div class="progress-bar">
-            <div class="progress-bar-progress" style="width: 50%"></div>
+            <div
+                class="progress-bar-progress"
+                id="password-progress"
+                style="width: 0%"
+            ></div>
         </div>
     </div>
 
@@ -184,6 +189,10 @@
 </script>
 
 <script src="/static/error/error.js" type="text/javascript"></script>
+<script
+    src="/static/javascript/password_strength.js"
+    type="text/javascript"
+></script>
 <script
     src="/static/javascript/handle_password_change.js"
     type="text/javascript"

static/javascript/handle_password_change.js

@@ -87,3 +87,22 @@ changePasswordButton.addEventListener("click", () => {
       displayError(err.message);
     });
 });
+
+document.getElementById("new_password").addEventListener("input", () => {
+  score = EvaluatePassword(document.getElementById("new_password").value).score;
+  strengh_label = document.getElementById("strengh-label");
+  password_progress = document.getElementById("password-progress");
+
+  password_progress.style.width = score + "%";
+
+  if (score <= 40) {
+    strengh_label.innerText = "Strength: Weak";
+    password_progress.style.backgroundColor = "var(--password-strength-weak)";
+  } else if (score > 40 && score <= 70) {
+    strengh_label.innerText = "Strength: Medium";
+    password_progress.style.backgroundColor = "var(--password-strength-medium)";
+  } else if (score > 40 && score >= 70) {
+    strengh_label.innerText = "Strength: Strong";
+    password_progress.style.backgroundColor = "var(--password-strength-strong)";
+  }
+});

static/javascript/password_strength.js

@@ -43,9 +43,6 @@ function EvaluatePassword(password) {
     }
   }
 
-  if (!accepted && isLongEnough) {
-    errors.push("Password is too simple. Try adding more variety or length.");
-  }
   return {
     score: Math.min(score, 100),
     errors: errors,

static/progress_bar.css

@@ -1,3 +1,7 @@
+:root {
+    --progress-top: #becbd8;
+}
+
 .progress-bar {
     width: 100%;
     background-color: var(--bg-input);
@@ -6,7 +10,7 @@
 }
 
 .progress-bar-progress {
-    background-color: blue;
+    background-color: var(--progress-top);
     height: 20px;
     border-radius: 10px;
 }

static/style.css

@@ -16,6 +16,10 @@
     --error-red: #ef4444; /* Professional Red */
     --error-border-red: #e22d2d;
 
+    --password-strength-weak: var(--error-red);
+    --password-strength-medium: #efe943;
+    --password-strength-strong: #43ef6b;
+
     font-family: "Inter", sans-serif;
     -webkit-font-smoothing: antialiased;
 }