feat(ui): custom modal dialog for update confirmation (v1.4.3)

public/api.php

@@ -140,7 +140,7 @@ try {
             $installedVerData = file_exists("{$appDir}/version.json")
                 ? json_decode((string)file_get_contents("{$appDir}/version.json"), true)
                 : [];
-            $installedVer = $installedVerData['version'] ?? '1.4.2';
+            $installedVer = $installedVerData['version'] ?? '1.4.3';
 
             echo json_encode([
                 'success'          => true,

public/assets/app.js

@@ -5896,14 +5896,57 @@ async function checkSystemUpdate(notify = false) {
     }
 }
 
-async function runSystemUpdate() {
+function openUpdateConfirmModal() {
-    if (!confirm("Voulez-vous lancer la mise à jour de NexusPBX ?\n\nUne sauvegarde préventive automatique de vos configurations et de votre base de données sera créée.")) {
+    const modal = document.getElementById('modal-confirm-update');
-        return;
+    if (!modal) return;
+
+    let targetVer = '';
+    let currVer = (appState && appState.version) ? appState.version : (document.querySelector('meta[name="nexus-app-version"]')?.content || '');
+
+    try {
+        const cachedRaw = localStorage.getItem('nexus_update_cached_data');
+        if (cachedRaw) {
+            const cached = JSON.parse(cachedRaw);
+            if (cached.latest_version) targetVer = cached.latest_version;
+            if (cached.current_version) currVer = cached.current_version;
+        }
+    } catch (_) {}
+
+    const elTarget = document.getElementById('update-modal-target-version');
+    const elCurrent = document.getElementById('update-modal-current-version');
+    const elBadge = document.getElementById('update-modal-target-badge');
+
+    if (elTarget) elTarget.textContent = targetVer ? `v${targetVer}` : 'Dernière version';
+    if (elCurrent) elCurrent.textContent = currVer ? `v${currVer}` : 'vActuelle';
+    if (elBadge && targetVer) elBadge.textContent = `v${targetVer} disponible`;
+
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
 }
 
+function closeUpdateConfirmModal() {
+    const modal = document.getElementById('modal-confirm-update');
+    if (modal) {
+        modal.classList.add('hidden');
+        modal.classList.remove('flex');
+    }
+}
+
+function runSystemUpdate() {
+    openUpdateConfirmModal();
+}
+
+async function executeSystemUpdate() {
+    const btnModalConfirm = document.getElementById('btn-confirm-update-action');
     const btnRun = document.getElementById('btn-run-update');
     const statusText = document.getElementById('update-status-text');
 
+    if (btnModalConfirm) {
+        btnModalConfirm.disabled = true;
+        btnModalConfirm.classList.add('opacity-75', 'cursor-not-allowed');
+        btnModalConfirm.innerHTML = '<span class="animate-spin mr-2">↻</span> Déploiement en cours...';
+    }
+
     if (btnRun) {
         btnRun.disabled = true;
         btnRun.innerHTML = '<span class="animate-spin mr-1.5">↻</span> Mise à jour en cours...';
@@ -5959,22 +6002,40 @@ async function runSystemUpdate() {
                 statusText.textContent = `Mise à jour terminée avec succès (v${newVer}) ! Rechargement...`;
             }
 
+            if (btnModalConfirm) {
+                btnModalConfirm.className = 'px-5 py-2.5 rounded-xl text-xs font-bold bg-emerald-600 text-white flex items-center gap-2';
+                btnModalConfirm.innerHTML = '✓ Mise à jour terminée ! Rechargement...';
+            }
+
             // 3. Rechargement avec paramètre anti-cache pour forcer le navigateur à récupérer le nouveau DOM
             setTimeout(() => {
+                closeUpdateConfirmModal();
                 window.location.href = window.location.origin + window.location.pathname + '?_t=' + Date.now();
-            }, 2000);
+            }, 1800);
         } else {
+            closeUpdateConfirmModal();
             alert("Erreur lors de la mise à jour :\n\n" + (data.output || data.message));
             if (btnRun) {
                 btnRun.disabled = false;
                 btnRun.innerHTML = 'Réessayer la mise à jour';
             }
+            if (btnModalConfirm) {
+                btnModalConfirm.disabled = false;
+                btnModalConfirm.classList.remove('opacity-75', 'cursor-not-allowed');
+                btnModalConfirm.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg><span>Lancer la mise à jour (1-Clic)</span>';
+            }
         }
     } catch (e) {
+        closeUpdateConfirmModal();
         alert("Erreur réseau lors de la mise à jour : " + e.message);
         if (btnRun) {
             btnRun.disabled = false;
             btnRun.innerHTML = 'Réessayer la mise à jour';
         }
+        if (btnModalConfirm) {
+            btnModalConfirm.disabled = false;
+            btnModalConfirm.classList.remove('opacity-75', 'cursor-not-allowed');
+            btnModalConfirm.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg><span>Lancer la mise à jour (1-Clic)</span>';
+        }
     }
 }

public/index.php

@@ -18,7 +18,7 @@ $companyLogo = trim($branding['company_logo'] ?? '');
 $hasBranding = !empty($companyName) || !empty($companyLogo);
 
 $appVerData = file_exists(__DIR__ . '/../version.json') ? json_decode((string)file_get_contents(__DIR__ . '/../version.json'), true) : [];
-$appVersion = $appVerData['version'] ?? '1.4.2';
+$appVersion = $appVerData['version'] ?? '1.4.3';
 ?>
 <!DOCTYPE html>
 <html lang="fr" class="h-full">
@@ -4726,6 +4726,92 @@ $appVersion = $appVerData['version'] ?? '1.4.2';
         </div>
     </div>
 
+    <!-- ===================================================================== -->
+    <!-- MODAL : CONFIRMATION MISE À JOUR SYSTEME (OTA 1-CLIC)                 -->
+    <!-- ===================================================================== -->
+    <div id="modal-confirm-update" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 backdrop-blur-sm p-3 sm:p-4 overflow-y-auto">
+        <div class="bg-anthracite-900 border border-indigo-500/40 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden my-6 animate-fadeIn">
+            <!-- Entête stylisée -->
+            <div class="px-6 py-5 border-b border-anthracite-800 bg-gradient-to-r from-indigo-950/50 via-anthracite-900 to-anthracite-900 flex items-start justify-between">
+                <div class="flex items-center gap-3.5">
+                    <div class="w-11 h-11 rounded-xl bg-indigo-500/15 border border-indigo-500/30 text-indigo-400 flex items-center justify-center shrink-0 shadow-lg shadow-indigo-950/50">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                        </svg>
+                    </div>
+                    <div>
+                        <div class="flex items-center gap-2">
+                            <h3 class="text-base font-bold text-white">Mise à Jour du Système NexusPBX</h3>
+                            <span id="update-modal-target-badge" class="px-2 py-0.5 rounded text-[10px] font-bold tracking-wide uppercase bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">OTA 1-Clic</span>
+                        </div>
+                        <p class="text-xs text-slate-400 mt-0.5">Déploiement officiel et rechargement sans coupure</p>
+                    </div>
+                </div>
+                <button type="button" onclick="closeUpdateConfirmModal()" class="text-slate-400 hover:text-white p-1.5 rounded-lg hover:bg-anthracite-800 transition">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
+
+            <!-- Corps de la modale -->
+            <div class="p-6 space-y-4">
+                <!-- Info cible -->
+                <div class="p-3.5 rounded-xl bg-anthracite-950/90 border border-anthracite-800 flex items-center justify-between">
+                    <div>
+                        <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Version Cible</div>
+                        <div id="update-modal-target-version" class="text-base font-bold text-emerald-400 font-mono mt-0.5">v...</div>
+                    </div>
+                    <div class="text-right">
+                        <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Version Actuelle</div>
+                        <div id="update-modal-current-version" class="text-sm font-semibold text-slate-300 font-mono mt-0.5">v...</div>
+                    </div>
+                </div>
+
+                <!-- Garanties & Sauvegarde automatique -->
+                <div class="p-3.5 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-300 flex items-start gap-3">
+                    <svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+                    </svg>
+                    <div>
+                        <strong class="font-bold text-emerald-200">Sauvegarde préventive automatique incluse :</strong>
+                        <p class="mt-0.5 text-emerald-300/90 leading-relaxed">Une sauvegarde complète de votre base SQLite et de vos configurations Asterisk sera créée avant toute modification.</p>
+                    </div>
+                </div>
+
+                <!-- Ce que fait la mise à jour -->
+                <div class="space-y-2">
+                    <div class="text-xs font-semibold text-slate-300">Étapes automatiques du déploiement :</div>
+                    <ul class="text-xs text-slate-400 space-y-1.5 pl-1">
+                        <li class="flex items-center gap-2">
+                            <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 shrink-0"></span>
+                            <span>Téléchargement des derniers fichiers et correctifs du dépôt officiel.</span>
+                        </li>
+                        <li class="flex items-center gap-2">
+                            <span class="w-1.5 h-1.5 rounded-full bg-indigo-400 shrink-0"></span>
+                            <span>Exécution des migrations SQLite et régénération des configurations Asterisk.</span>
+                        </li>
+                        <li class="flex items-center gap-2">
+                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shrink-0"></span>
+                            <span>Rechargement à chaud sans interruption des communications actives.</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Boutons d'action -->
+            <div class="px-6 py-4 border-t border-anthracite-800 bg-anthracite-950/80 flex items-center justify-end gap-3">
+                <button type="button" onclick="closeUpdateConfirmModal()"
+                    class="px-4 py-2.5 rounded-xl text-xs font-semibold bg-anthracite-800 hover:bg-anthracite-750 text-slate-300 border border-anthracite-700 transition">
+                    Annuler
+                </button>
+                <button type="button" id="btn-confirm-update-action" onclick="executeSystemUpdate()"
+                    class="px-5 py-2.5 rounded-xl text-xs font-bold bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-400 text-white shadow-lg shadow-indigo-600/30 transition flex items-center gap-2">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                    <span>Lancer la mise à jour (1-Clic)</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- ===================================================================== -->
     <!-- MODAL : URL XML YEALINK REMOTE PHONEBOOK (cm_to_yl_ab.php)            -->
     <!-- ===================================================================== -->

version.json

@@ -1,12 +1,12 @@
 {
-  "version": "1.4.2",
+  "version": "1.4.3",
   "codename": "Helios",
   "release_date": "2026-11-04",
   "min_php_version": "8.2",
   "changelog": [
+    "Nouvelle boîte modale élégante et personnalisée pour confirmer le lancement des mises à jour (remplacement du confirm natif)",
     "Rendu serveur natif garanti du logo et nom de l'exploitant sur la page de connexion",
     "Boîte de connexion allégée en style verre dépoli transparent (Glassmorphism backdrop-blur)",
-    "Nouveau fond d'écran immersif haute définition (réseau constellation)",
+    "Nouveau fond d'écran immersif haute définition (réseau constellation)"
-    "Lissage élégant des graphiques CPU/RAM et Réseau (splines Bézier cubiques sans angles vifs)"
   ]
 }