From b9ed00c1278f612abf5fa0132fab096c63b97eae Mon Sep 17 00:00:00 2001
From: Gregory Wells <gawells@astraltech.xyz>
Date: Mon, 6 Apr 2026 15:48:27 -0400
Subject: [PATCH] password strength meter

---
 src/pages/profile_page.html                 | 13 +++++++++++--
 static/javascript/handle_password_change.js | 19 +++++++++++++++++++
 static/javascript/password_strength.js      |  3 ---
 static/progress_bar.css                     |  6 +++++-
 static/style.css                            |  4 ++++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/pages/profile_page.html b/src/pages/profile_page.html
index 3f607c6..60ba945 100644
--- a/src/pages/profile_page.html
+++ b/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"
diff --git a/static/javascript/handle_password_change.js b/static/javascript/handle_password_change.js
index 53f33bb..ca2e79d 100644
--- a/static/javascript/handle_password_change.js
+++ b/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)";
+  }
+});
diff --git a/static/javascript/password_strength.js b/static/javascript/password_strength.js
index 9696eeb..ffcc1c9 100644
--- a/static/javascript/password_strength.js
+++ b/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,
diff --git a/static/progress_bar.css b/static/progress_bar.css
index c40c649..8dab6cc 100644
--- a/static/progress_bar.css
+++ b/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;
 }
diff --git a/static/style.css b/static/style.css
index 1fc7b30..ac3dd8a 100644
--- a/static/style.css
+++ b/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;
 }