Refactor: Move add user form to a modal
Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
co-authored by
mathieumoran1
mathieumoran1
parent
87396f72b8
commit
1b7a7f87a6
+52
-43
@@ -172,48 +172,6 @@
|
|||||||
|
|
||||||
<div class="tab-pane fade" id="admin-users" role="tabpanel" aria-labelledby="admin-users-tab">
|
<div class="tab-pane fade" id="admin-users" role="tabpanel" aria-labelledby="admin-users-tab">
|
||||||
<div class="row g-3">
|
<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 protected]" 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="col-12">
|
||||||
<div class="card p-3">
|
<div class="card p-3">
|
||||||
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-2">
|
<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)
|
<span id="admin-users-count">—</span> utilisateur(s)
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
@@ -433,6 +394,54 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 protected]" 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 -->
|
<!-- Edit movie modal -->
|
||||||
<div class="modal fade" id="editMovieModal" tabindex="-1" aria-hidden="true">
|
<div class="modal fade" id="editMovieModal" tabindex="-1" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||||
|
|||||||
@@ -219,6 +219,9 @@ window.onload = async function () {
|
|||||||
const adminUsersTabBtn = document.getElementById('admin-users-tab');
|
const adminUsersTabBtn = document.getElementById('admin-users-tab');
|
||||||
|
|
||||||
// Admin: add user form elements
|
// 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 addUserForm = document.getElementById('add-user-form');
|
||||||
const addUserNameEl = document.getElementById('add_user_name');
|
const addUserNameEl = document.getElementById('add_user_name');
|
||||||
const addUserEmailEl = document.getElementById('add_user_email');
|
const addUserEmailEl = document.getElementById('add_user_email');
|
||||||
@@ -279,6 +282,16 @@ window.onload = async function () {
|
|||||||
if (addUserSubmitBtn) addUserSubmitBtn.disabled = false;
|
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() {
|
function resetResetUserModalUi() {
|
||||||
hideAlert(resetUserModalResponseEl);
|
hideAlert(resetUserModalResponseEl);
|
||||||
if (resetUserModalResultEl) resetUserModalResultEl.classList.add('d-none');
|
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) {
|
if (addUserResetBtn) {
|
||||||
addUserResetBtn.addEventListener('click', () => {
|
addUserResetBtn.addEventListener('click', () => {
|
||||||
resetAddUserUi({ resetForm: true });
|
resetAddUserUi({ resetForm: true });
|
||||||
|
|||||||
Reference in New Issue
Block a user