feat: modal confirmation glassmorphism + crontabs nettoyage

Modal confirmation custom (assets/app.js) :
- Remplace le confirm() natif du navigateur par une modal glassmorphism
- Header glass-dark avec icône warning rouge + "Confirmation"
- Message dynamique depuis data-confirm du formulaire
- Boutons Annuler (glass) et Confirmer (rouge)
- Fermeture via overlay, bouton Annuler ou Escape
- Au clic Confirmer : supprime data-confirm et submit le formulaire

Crontab Docker (docker/cron/crontab) :
- 0 2 * * * app:clean:pending-delete (nettoyage clients pending_delete)
- 0 5 * * * app:email-tracking:purge (purge tracking > 90j)
- 0 6 * * * app:dns:check (vérification DNS)
- 0 4 * * 0 app:meilisearch:setup (reindex complet dimanche 4h)
- 0 7 * * * app:cloudflare:clean (nettoyage _acme-challenge)

Ansible deploy.yml.disabled :
- Ajout cron clean pending delete (daily 2h)
- Ajout cron meilisearch full reindex (weekly dimanche 4h)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-04-04 12:05:25 +02:00
parent a047f61911
commit c2c05505c8
3 changed files with 69 additions and 2 deletions

View File

@@ -29,11 +29,56 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
// data-confirm
// data-confirm — modal glassmorphism custom
const confirmModal = document.createElement('div');
confirmModal.id = 'confirm-modal';
confirmModal.className = 'hidden fixed inset-0 z-[100] flex items-center justify-center';
confirmModal.innerHTML = `
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="confirm-overlay"></div>
<div class="relative glass-heavy w-full max-w-md mx-4 overflow-hidden" style="border-radius: 16px;">
<div class="glass-dark text-white px-6 py-4 flex items-center gap-3" style="border-radius: 16px 16px 0 0;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span class="text-sm font-bold uppercase tracking-widest">Confirmation</span>
</div>
<div class="p-6">
<p id="confirm-message" class="text-sm font-medium text-gray-700 leading-relaxed"></p>
<div class="flex justify-end gap-3 mt-6">
<button type="button" id="confirm-cancel" class="px-5 py-2 glass font-bold uppercase text-xs tracking-wider text-gray-700 hover:bg-gray-900 hover:text-white transition-all">Annuler</button>
<button type="button" id="confirm-ok" class="px-5 py-2 bg-red-600 text-white font-bold uppercase text-xs tracking-wider hover:bg-red-700 transition-all" style="border-radius: 6px;">Confirmer</button>
</div>
</div>
</div>`;
document.body.appendChild(confirmModal);
let pendingForm = null;
const confirmMessage = document.getElementById('confirm-message');
const confirmCancel = document.getElementById('confirm-cancel');
const confirmOk = document.getElementById('confirm-ok');
const confirmOverlay = document.getElementById('confirm-overlay');
const closeConfirm = () => { confirmModal.classList.add('hidden'); pendingForm = null; };
confirmCancel.addEventListener('click', closeConfirm);
confirmOverlay.addEventListener('click', closeConfirm);
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && pendingForm) closeConfirm(); });
confirmOk.addEventListener('click', () => {
if (pendingForm) {
confirmModal.classList.add('hidden');
pendingForm.removeAttribute('data-confirm');
pendingForm.requestSubmit();
}
});
document.querySelectorAll('form[data-confirm]').forEach(form => {
form.addEventListener('submit', (e) => {
if (!confirm(form.dataset.confirm)) {
if (form.dataset.confirm) {
e.preventDefault();
pendingForm = form;
confirmMessage.textContent = form.dataset.confirm;
confirmModal.classList.remove('hidden');
}
});
});