Jul 2nd - Add password strength, suggestion when create/edit user

app/templates/admin/create_user.html

@@ -2,6 +2,29 @@
 {% block title %}Create User{% endblock %}
 {% block page_title %}User Management{% endblock %}
 
+{% block head %}
+<style>
+  /* ── Password rule checklist ── */
+  .pw-rules{
+    margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;
+    background:var(--bg);border:1px solid var(--border);border-radius:8px;
+    padding:10px 12px;
+  }
+  .pw-rule{
+    display:flex;align-items:center;gap:5px;
+    font-size:11.5px;color:var(--muted);
+    transition:color .2s;
+  }
+  .pw-rule .ri{
+    font-size:13px;width:14px;text-align:center;
+    transition:color .2s, transform .15s;
+  }
+  .pw-rule.met{color:var(--success);}
+  .pw-rule.met .ri{color:var(--success);transform:scale(1.1);}
+  .pw-rule.unmet .ri{color:var(--border2);}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="row justify-content-center">
   <div class="col-lg-7">
@@ -127,6 +150,26 @@
                 <div id="pw-strength-bar" style="height:100%;border-radius:2px;width:0%;transition:width .3s,background .3s;"></div>
               </div>
               <div id="pw-strength-label" style="font-size:11px;color:var(--muted);margin-top:4px;"></div>
+
+              <!-- Rule checklist — mirrors server-side validate_password() rules -->
+              <div class="pw-rules" id="pw-rules-box" style="display:none;">
+                <div class="pw-rule unmet" id="pw-rule-len">
+                  <span class="ri"><i class="bi bi-circle"></i></span>
+                  <span>8+ characters</span>
+                </div>
+                <div class="pw-rule unmet" id="pw-rule-upper">
+                  <span class="ri"><i class="bi bi-circle"></i></span>
+                  <span>Uppercase letter</span>
+                </div>
+                <div class="pw-rule unmet" id="pw-rule-digit">
+                  <span class="ri"><i class="bi bi-circle"></i></span>
+                  <span>Number</span>
+                </div>
+                <div class="pw-rule unmet" id="pw-rule-special">
+                  <span class="ri"><i class="bi bi-circle"></i></span>
+                  <span>Special character</span>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -160,18 +203,52 @@ function togglePw(fieldId, iconId) {
   }
 }
 
-// ── Password strength indicator ───────────────────────────────────────────────
+// ── Password strength + rule checklist ────────────────────────────────────────
+// Mirrors server-side validate_password() rules in validation_service.py.
+// Any change to the server rules must be reflected here too.
+const PW_RULES = {
+  len    : pw => pw.length >= 8,
+  upper  : pw => /[A-Z]/.test(pw),
+  digit  : pw => /\d/.test(pw),
+  special: pw => /[!@#$%^&*()\-_=+\[\]{};:'",.<>?/\\|`~]/.test(pw),
+};
+
+function setPwRule(id, met) {
+  const el = document.getElementById('pw-rule-' + id);
+  if (!el) return;
+  el.className = 'pw-rule ' + (met ? 'met' : 'unmet');
+  el.querySelector('.ri').innerHTML = met
+    ? '<i class="bi bi-check-circle-fill"></i>'
+    : '<i class="bi bi-circle"></i>';
+}
+
 document.getElementById('pw-field').addEventListener('input', function () {
   const val = this.value;
-  let score = 0;
-  if (val.length >= 8)                        score++;
-  if (val.length >= 12)                       score++;
-  if (/[A-Z]/.test(val) && /[a-z]/.test(val))score++;
-  if (/[0-9]/.test(val))                      score++;
-  if (/[^A-Za-z0-9]/.test(val))              score++;
 
   const bar   = document.getElementById('pw-strength-bar');
   const label = document.getElementById('pw-strength-label');
+  const rules = document.getElementById('pw-rules-box');
+
+  if (val.length === 0) {
+    bar.style.width = '0%';
+    label.textContent = '';
+    rules.style.display = 'none';
+    return;
+  }
+
+  rules.style.display = 'grid';
+  setPwRule('len',     PW_RULES.len(val));
+  setPwRule('upper',   PW_RULES.upper(val));
+  setPwRule('digit',   PW_RULES.digit(val));
+  setPwRule('special', PW_RULES.special(val));
+
+  let score = 0;
+  if (PW_RULES.len(val))     score++;
+  if (PW_RULES.upper(val))   score++;
+  if (PW_RULES.digit(val))   score++;
+  if (PW_RULES.special(val)) score++;
+  if (val.length >= 16)      score++;   // bonus for extra length
+
   const levels = [
     { pct: '20%',  bg: '#dc2626', text: 'Very weak'  },
     { pct: '40%',  bg: '#d97706', text: 'Weak'        },
@@ -179,11 +256,6 @@ document.getElementById('pw-field').addEventListener('input', function () {
     { pct: '80%',  bg: '#16a34a', text: 'Strong'      },
     { pct: '100%', bg: '#059669', text: 'Very strong' },
   ];
-  if (val.length === 0) {
-    bar.style.width = '0%';
-    label.textContent = '';
-    return;
-  }
   const lvl = levels[Math.min(score - 1, 4)] || levels[0];
   bar.style.width      = lvl.pct;
   bar.style.background = lvl.bg;