From 1b7a7f87a6ec61381b6ee868cdfd2a5c0c42b615 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 21 Dec 2025 20:01:43 +0000
Subject: [PATCH] Refactor: Move add user form to a modal

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/control.html      | 95 ++++++++++++++++++++++------------------
 public/js/app_control.js | 24 ++++++++++
 2 files changed, 76 insertions(+), 43 deletions(-)

diff --git a/public/control.html b/public/control.html
index a06a506..72f74f9 100644
--- a/public/control.html
+++ b/public/control.html
@@ -172,48 +172,6 @@
 
     <div class="tab-pane fade" id="admin-users" role="tabpanel" aria-labelledby="admin-users-tab">
       <div class="row g-3">
-        <div class="col-12 col-xxl-5">
-          <div class="card p-3">
-            <h4 class="mb-1">Ajouter un utilisateur</h4>
-            <p class="text-muted mb-3">
-              Crée un compte avec un <strong>mot de passe temporaire</strong> (affiché une seule fois). L’utilisateur devra le changer à sa prochaine connexion.
-            </p>
-
-            <div id="add-user-response" class="alert d-none" role="alert"></div>
-
-            <form id="add-user-form">
-              <div class="mb-3">
-                <label for="add_user_name" class="form-label">Nom</label>
-                <input type="text" class="form-control" id="add_user_name" placeholder="Prénom / pseudo" required>
-              </div>
-              <div class="mb-3">
-                <label for="add_user_email" class="form-label">Email</label>
-                <input type="email" class="form-control" id="add_user_email" placeholder="email@exemple.com" required>
-              </div>
-              <div class="form-check mb-3">
-                <input class="form-check-input" type="checkbox" id="add_user_admin">
-                <label class="form-check-label" for="add_user_admin">
-                  Admin
-                </label>
-              </div>
-
-              <div id="add-user-result" class="border rounded p-2 bg-light d-none mb-3">
-                <div class="small text-muted mb-1">Mot de passe temporaire (affiché une seule fois)</div>
-                <div class="d-flex gap-2 align-items-center">
-                  <code class="flex-grow-1" id="add-user-temp-password">—</code>
-                  <button type="button" class="btn btn-outline-secondary btn-sm" id="copy-add-user-temp-password">Copier</button>
-                </div>
-                <div class="small text-muted mt-2" id="add-user-expires-at"></div>
-              </div>
-
-              <div class="d-flex flex-wrap gap-2 justify-content-end">
-                <button type="button" id="add-user-reset" class="btn btn-outline-secondary">Reset</button>
-                <button type="submit" class="btn btn-warning" id="add-user-submit">Créer l’utilisateur</button>
-              </div>
-            </form>
-          </div>
-        </div>
-
         <div class="col-12">
           <div class="card p-3">
             <div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-2">
@@ -223,7 +181,10 @@
                   <span id="admin-users-count">—</span> utilisateur(s)
                 </div>
               </div>
-              <button type="button" id="refresh-users" class="btn btn-outline-primary btn-sm">Rafraîchir</button>
+              <div class="d-flex gap-2">
+                <button type="button" id="open-add-user-modal" class="btn btn-warning btn-sm">Ajouter un utilisateur</button>
+                <button type="button" id="refresh-users" class="btn btn-outline-primary btn-sm">Rafraîchir</button>
+              </div>
             </div>
 
             <div class="table-responsive">
@@ -433,6 +394,54 @@
   </div>
 </div>
 
+<!-- Add user modal -->
+<div class="modal fade" id="addUserModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Ajouter un utilisateur</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="text-muted mb-2">
+          Crée un compte avec un <strong>mot de passe temporaire</strong> (affiché une seule fois). L’utilisateur devra le changer à sa prochaine connexion.
+        </div>
+
+        <div id="add-user-response" class="alert d-none" role="alert"></div>
+
+        <form id="add-user-form">
+          <div class="mb-3">
+            <label for="add_user_name" class="form-label">Nom</label>
+            <input type="text" class="form-control" id="add_user_name" placeholder="Prénom / pseudo" required>
+          </div>
+          <div class="mb-3">
+            <label for="add_user_email" class="form-label">Email</label>
+            <input type="email" class="form-control" id="add_user_email" placeholder="email@exemple.com" required>
+          </div>
+          <div class="form-check mb-3">
+            <input class="form-check-input" type="checkbox" id="add_user_admin">
+            <label class="form-check-label" for="add_user_admin">Admin</label>
+          </div>
+
+          <div id="add-user-result" class="border rounded p-2 bg-light d-none">
+            <div class="small text-muted mb-1">Mot de passe temporaire (affiché une seule fois)</div>
+            <div class="d-flex gap-2 align-items-center">
+              <code class="flex-grow-1" id="add-user-temp-password">—</code>
+              <button type="button" class="btn btn-outline-secondary btn-sm" id="copy-add-user-temp-password">Copier</button>
+            </div>
+            <div class="small text-muted mt-2" id="add-user-expires-at"></div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Fermer</button>
+        <button type="button" id="add-user-reset" class="btn btn-outline-secondary">Reset</button>
+        <button type="submit" form="add-user-form" class="btn btn-warning" id="add-user-submit">Créer</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Edit movie modal -->
 <div class="modal fade" id="editMovieModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-lg modal-dialog-scrollable">
diff --git a/public/js/app_control.js b/public/js/app_control.js
index e053847..f9993d4 100644
--- a/public/js/app_control.js
+++ b/public/js/app_control.js
@@ -219,6 +219,9 @@ window.onload = async function () {
   const adminUsersTabBtn = document.getElementById('admin-users-tab');
 
   // Admin: add user form elements
+  const openAddUserModalBtn = document.getElementById('open-add-user-modal');
+  const addUserModalEl = document.getElementById('addUserModal');
+  const addUserModal = addUserModalEl ? new bootstrap.Modal(addUserModalEl) : null;
   const addUserForm = document.getElementById('add-user-form');
   const addUserNameEl = document.getElementById('add_user_name');
   const addUserEmailEl = document.getElementById('add_user_email');
@@ -279,6 +282,16 @@ window.onload = async function () {
     if (addUserSubmitBtn) addUserSubmitBtn.disabled = false;
   }
 
+  function openAddUserModal() {
+    if (!addUserModal) return;
+    resetAddUserUi({ resetForm: true });
+    try { addUserModal.show(); } catch (_) {}
+    // Focus name field (best effort)
+    setTimeout(() => {
+      try { addUserNameEl?.focus(); } catch (_) {}
+    }, 50);
+  }
+
   function resetResetUserModalUi() {
     hideAlert(resetUserModalResponseEl);
     if (resetUserModalResultEl) resetUserModalResultEl.classList.add('d-none');
@@ -569,6 +582,17 @@ window.onload = async function () {
     });
   }
 
+  if (openAddUserModalBtn) {
+    openAddUserModalBtn.addEventListener('click', () => openAddUserModal());
+  }
+
+  if (addUserModalEl) {
+    // Whenever the modal is opened, clear previous result/state.
+    addUserModalEl.addEventListener('shown.bs.modal', () => {
+      resetAddUserUi({ resetForm: true });
+    });
+  }
+
   if (addUserResetBtn) {
     addUserResetBtn.addEventListener('click', () => {
       resetAddUserUi({ resetForm: true });