06/04 Optimize app

templates/admin/users.html

@@ -3,7 +3,13 @@
 {% block content %}
 <div class="page-header">
   <h1 class="page-title">User Management</h1>
-  <button class="btn btn-primary" onclick="openModal('modal-create-user')">＋ Add User</button>
+  <div class="flex gap-1 items-center">
+    <div class="search-wrap">
+      <input type="text" id="user-search" placeholder="Search users…" autocomplete="off">
+      <span class="search-icon">🔍</span>
+    </div>
+    <button class="btn btn-primary" onclick="openModal('modal-create-user')">＋ Add User</button>
+  </div>
 </div>
 
 <div class="card">
@@ -33,9 +39,9 @@
                   title="Send password reset link to {{ u.email }}">✉ Reset</button>
           {% endif %}
           <form method="post" action="{{ url_for('admin_users.delete', user_id=u.id) }}"
-                style="display:inline"
-                onsubmit="return confirm('Delete user {{ u.username }}?')">
-            <button class="btn btn-danger btn-sm" type="submit">✕</button>
+                style="display:inline">
+            <button class="btn btn-danger btn-sm js-delete-user" type="button"
+                    data-username="{{ u.username }}">✕</button>
           </form>
         </td>
       </tr>
@@ -76,7 +82,11 @@
         </div>
         <div class="form-group">
           <label class="form-label">Password *</label>
-          <input class="form-control" type="password" name="password" required>
+          <input class="form-control" type="password" name="password" id="create-user-pw" required>
+          <div class="pw-strength-wrap">
+            <div class="pw-strength-bar"><div class="pw-strength-fill" id="create-user-pw-fill"></div></div>
+            <small class="pw-strength-label" id="create-user-pw-label"></small>
+          </div>
         </div>
       </div>
       <div class="modal-footer">
@@ -136,6 +146,30 @@
 </div>
 
 <script>
+/* User search */
+(function() {
+  var timer = null;
+  document.getElementById('user-search').addEventListener('input', function() {
+    var val = this.value;
+    clearTimeout(timer);
+    timer = setTimeout(function() {
+      var q = val.trim().toLowerCase();
+      document.querySelectorAll('tbody tr').forEach(function(row) {
+        row.style.display = !q || row.textContent.toLowerCase().includes(q) ? '' : 'none';
+      });
+    }, 250);
+  });
+}());
+
+/* Delete user — safe confirm via data-attribute */
+document.querySelectorAll('.js-delete-user').forEach(function(btn) {
+  btn.addEventListener('click', function() {
+    if (confirm('Delete user ' + btn.dataset.username + '?')) {
+      btn.closest('form').submit();
+    }
+  });
+});
+
 function openEditUser(u) {
   document.getElementById('edit-username').value   = u.username;
   document.getElementById('edit-full-name').value  = u.full_name || '';
@@ -147,6 +181,8 @@ function openEditUser(u) {
   openModal('modal-edit-user');
 }
 
+attachPasswordStrength('create-user-pw', 'create-user-pw-fill', 'create-user-pw-label');
+
 document.querySelectorAll('.js-send-reset').forEach(function(btn) {
   btn.addEventListener('click', function() {
     var username = btn.dataset.username;