feat: Modal de déconnexion personnalisée remplaçant le confirm natif (v1.2.3)

- Nouvelle modal moderne avec design élégant et animations
- Icône emoji 👋 avec gradient violet et animation pulse
- Textes en français avec titre et description
- Fond flou avec overlay sombre pour meilleur focus
- Trois méthodes de fermeture : bouton, clic externe, Escape
- Suppression du popup système Electron

docs/changelog.md

@@ -1,5 +1,28 @@
 # Changelog - SimpleConnect Electron
 
+## [1.2.3] - 2025-09-04
+
+### Ajouté
+- **Modal de déconnexion personnalisée** : Interface moderne pour la confirmation
+  - Design élégant avec icône emoji 👋 dans un cercle gradient
+  - Animation pulse sur l'icône et effet scaleIn à l'ouverture
+  - Textes en français avec titre et sous-titre descriptif
+  - Fond flou avec overlay sombre (backdrop-filter)
+  - Boutons stylisés avec gradient violet et effets hover
+
+### Modifié
+- **Expérience utilisateur de déconnexion** : Remplacement du confirm() natif
+  - Plus de popup système Electron avec logo générique
+  - Interface cohérente avec le design de l'application
+  - Trois méthodes de fermeture : bouton Annuler, clic externe, touche Escape
+  - Gestion propre des event listeners avec nettoyage automatique
+
+### Technique
+- Nouvelle fonction showLogoutModal() remplaçant le confirm() natif
+- HTML de la modal ajouté avec structure sémantique
+- Styles CSS avec animations @keyframes scaleIn
+- Z-index 3000 pour s'assurer que la modal est au-dessus de tout
+
 ## [1.2.2] - 2025-09-04
 
 ### Supprimé

index.html

@@ -121,6 +121,22 @@
       </div>
     </div>
 
+    <!-- Modal de confirmation de déconnexion -->
+    <div id="logoutModal" class="modal-overlay">
+      <div class="logout-modal">
+        <div class="logout-modal-icon">
+          <span>👋</span>
+        </div>
+        <h2>Déconnexion</h2>
+        <p>Êtes-vous sûr de vouloir vous déconnecter ?</p>
+        <p class="logout-modal-subtitle">Votre session sera fermée et vous devrez vous reconnecter.</p>
+        <div class="logout-modal-buttons">
+          <button id="cancelLogoutBtn" class="btn-modal-cancel">Annuler</button>
+          <button id="confirmLogoutBtn" class="btn-modal-confirm">Se déconnecter</button>
+        </div>
+      </div>
+    </div>
+
     <!-- Scripts -->
     <script src="choices.min.js"></script>
     <script src="renderer.js"></script>

renderer.js

@@ -75,6 +75,13 @@ document.addEventListener('DOMContentLoaded', async () => {
     
     // Charger les préférences utilisateur
     loadUserPreferences();
+    
+    // Gérer les boutons de la modal de déconnexion (si on est sur la page principale)
+    const cancelLogoutBtn = document.getElementById('cancelLogoutBtn');
+    const confirmLogoutBtn = document.getElementById('confirmLogoutBtn');
+    if (cancelLogoutBtn && confirmLogoutBtn) {
+        // Les event listeners sont gérés dans showLogoutModal()
+    }
 
     // Écouter les appels entrants
     ipcRenderer.on('incoming-call', (event, callData) => {
@@ -177,15 +184,56 @@ async function handleLogin(e) {
 }
 
 // Déconnexion
-async function handleLogout() {
+function handleLogout() {
-    if (confirm('Voulez-vous vraiment vous déconnecter ?')) {
+    showLogoutModal();
+}
+
+// Afficher la modal de déconnexion
+function showLogoutModal() {
+    const modal = document.getElementById('logoutModal');
+    modal.classList.add('active');
+    
+    // Bouton annuler
+    const cancelBtn = document.getElementById('cancelLogoutBtn');
+    const confirmBtn = document.getElementById('confirmLogoutBtn');
+    
+    // Gérer les clics
+    const handleCancel = () => {
+        modal.classList.remove('active');
+        cancelBtn.removeEventListener('click', handleCancel);
+        confirmBtn.removeEventListener('click', handleConfirm);
+    };
+    
+    const handleConfirm = async () => {
+        modal.classList.remove('active');
         await ipcRenderer.invoke('logout');
         currentAgent = null;
         currentCentres = [];
         activeCenter = null;
         webviews = {};
         showLoginPage();
-    }
+        cancelBtn.removeEventListener('click', handleCancel);
+        confirmBtn.removeEventListener('click', handleConfirm);
+    };
+    
+    cancelBtn.addEventListener('click', handleCancel);
+    confirmBtn.addEventListener('click', handleConfirm);
+    
+    // Fermer la modal en cliquant en dehors
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            handleCancel();
+        }
+    });
+    
+    // Fermer avec Escape
+    const handleEscape = (e) => {
+        if (e.key === 'Escape') {
+            handleCancel();
+            document.removeEventListener('keydown', handleEscape);
+        }
+    };
+    document.addEventListener('keydown', handleEscape);
 }
 
 // === GESTION DES PAGES ===

styles-modern.css

@@ -715,6 +715,120 @@ body {
     animation: fadeIn 0.3s;
 }
 
+/* === MODAL DE DÉCONNEXION === */
+.modal-overlay {
+    display: none;
+    position: fixed;
+    z-index: 3000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+    animation: fadeIn 0.2s;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-overlay.active {
+    display: flex;
+}
+
+.logout-modal {
+    background: white;
+    border-radius: 16px;
+    padding: 40px;
+    max-width: 420px;
+    width: 90%;
+    text-align: center;
+    animation: scaleIn 0.3s ease;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+@keyframes scaleIn {
+    from {
+        transform: scale(0.9);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.logout-modal-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 40px;
+    animation: pulse 2s infinite;
+}
+
+.logout-modal h2 {
+    margin: 0 0 15px 0;
+    color: #333;
+    font-size: 28px;
+    font-weight: 600;
+}
+
+.logout-modal p {
+    margin: 0 0 10px 0;
+    color: #555;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+.logout-modal-subtitle {
+    color: #999 !important;
+    font-size: 14px !important;
+    margin-bottom: 30px !important;
+}
+
+.logout-modal-buttons {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    margin-top: 30px;
+}
+
+.btn-modal-cancel,
+.btn-modal-confirm {
+    padding: 12px 30px;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    min-width: 140px;
+}
+
+.btn-modal-cancel {
+    background: #f1f3f5;
+    color: #495057;
+}
+
+.btn-modal-cancel:hover {
+    background: #e9ecef;
+    transform: translateY(-2px);
+}
+
+.btn-modal-confirm {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-modal-confirm:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }