From c7bef13dcdb6ce4b51705154c323a334a49cc5fb Mon Sep 17 00:00:00 2001
From: Pierre Marx <pm_git@pmfrca.com>
Date: Thu, 4 Sep 2025 15:51:01 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20Animation=20de=20progression=20pendant?=
 =?UTF-8?q?=20la=20d=C3=A9connexion=20(v1.2.7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout d'un spinner circulaire animé pendant la déconnexion
- Rotation fluide avec design violet cohérent
- Textes dynamiques "Déconnexion en cours..." pendant le processus
- Boutons masqués pour éviter les doubles clics
- Transitions en fondu entre icône et spinner
- Délais optimisés pour une expérience fluide
---
 docs/changelog.md | 22 +++++++++++++++++++
 index.html        | 13 ++++++-----
 renderer.js       | 56 ++++++++++++++++++++++++++++++++++++++++++++++-
 styles-modern.css | 41 ++++++++++++++++++++++++++++++++++
 4 files changed, 126 insertions(+), 6 deletions(-)

diff --git a/docs/changelog.md b/docs/changelog.md
index fab0ce5..2e61067 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,27 @@
 # Changelog - SimpleConnect Electron
 
+## [1.2.7] - 2025-09-04
+
+### Ajouté
+- **Animation de déconnexion** : Feedback visuel pendant le processus
+  - Spinner circulaire animé avec rotation fluide (1 tour/seconde)
+  - Design cohérent avec le thème violet de l'application
+  - Ombre subtile pour un effet de profondeur
+  - Transition en fondu entre l'icône et le spinner
+
+### Modifié
+- **Modal de déconnexion** : États visuels dynamiques
+  - Textes mis à jour pendant la déconnexion ("Déconnexion en cours...", "Veuillez patienter")
+  - Boutons masqués pendant le processus pour éviter les doubles clics
+  - Délais optimisés : 300ms avant + 500ms après pour une transition fluide
+  - Restauration automatique de l'état initial après déconnexion
+
+### Technique
+- Nouvelles fonctions showLogoutProgress() et hideLogoutProgress()
+- Animation CSS @keyframes spin pour la rotation du spinner
+- Gestion asynchrone avec Promise pour les délais d'animation
+- Structure HTML modifiée avec IDs pour contrôle dynamique
+
 ## [1.2.6] - 2025-09-04
 
 ### Ajouté
diff --git a/index.html b/index.html
index f1e2765..e065bab 100644
--- a/index.html
+++ b/index.html
@@ -121,13 +121,16 @@
     <!-- Modal de confirmation de déconnexion -->
     <div id="logoutModal" class="modal-overlay">
       <div class="logout-modal">
-        <div class="logout-modal-icon">
+        <div class="logout-modal-icon" id="logoutIcon">
           <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">
+        <div class="logout-spinner" id="logoutSpinner" style="display: none;">
+          <div class="spinner-ring"></div>
+        </div>
+        <h2 id="logoutTitle">Déconnexion</h2>
+        <p id="logoutText">Êtes-vous sûr de vouloir vous déconnecter ?</p>
+        <p class="logout-modal-subtitle" id="logoutSubtitle">Votre session sera fermée et vous devrez vous reconnecter.</p>
+        <div class="logout-modal-buttons" id="logoutButtons">
           <button id="cancelLogoutBtn" class="btn-modal-cancel">Annuler</button>
           <button id="confirmLogoutBtn" class="btn-modal-confirm">Se déconnecter</button>
         </div>
diff --git a/renderer.js b/renderer.js
index 1f0cbb5..469541c 100644
--- a/renderer.js
+++ b/renderer.js
@@ -208,8 +208,21 @@ function showLogoutModal() {
     };
     
     const handleConfirm = async () => {
-        modal.classList.remove('active');
+        // Afficher l'animation de déconnexion
+        showLogoutProgress();
+        
+        // Attendre un peu pour que l'animation soit visible
+        await new Promise(resolve => setTimeout(resolve, 300));
+        
+        // Effectuer la déconnexion
         await ipcRenderer.invoke('logout');
+        
+        // Attendre encore un peu pour une transition fluide
+        await new Promise(resolve => setTimeout(resolve, 500));
+        
+        // Réinitialiser et fermer
+        modal.classList.remove('active');
+        hideLogoutProgress();
         currentAgent = null;
         currentCentres = [];
         activeCenter = null;
@@ -240,6 +253,47 @@ function showLogoutModal() {
     document.addEventListener('keydown', handleEscape);
 }
 
+// Afficher l'animation de progression de déconnexion
+function showLogoutProgress() {
+    const modal = document.querySelector('.logout-modal');
+    const icon = document.getElementById('logoutIcon');
+    const spinner = document.getElementById('logoutSpinner');
+    const title = document.getElementById('logoutTitle');
+    const text = document.getElementById('logoutText');
+    const subtitle = document.getElementById('logoutSubtitle');
+    const buttons = document.getElementById('logoutButtons');
+    
+    // Masquer l'icône et afficher le spinner
+    icon.style.display = 'none';
+    spinner.style.display = 'block';
+    
+    // Mettre à jour les textes
+    title.textContent = 'Déconnexion en cours...';
+    text.textContent = 'Veuillez patienter';
+    subtitle.textContent = 'Fermeture de votre session...';
+    
+    // Masquer les boutons
+    buttons.style.display = 'none';
+}
+
+// Masquer l'animation de progression de déconnexion
+function hideLogoutProgress() {
+    const icon = document.getElementById('logoutIcon');
+    const spinner = document.getElementById('logoutSpinner');
+    const title = document.getElementById('logoutTitle');
+    const text = document.getElementById('logoutText');
+    const subtitle = document.getElementById('logoutSubtitle');
+    const buttons = document.getElementById('logoutButtons');
+    
+    // Restaurer l'état initial
+    icon.style.display = 'flex';
+    spinner.style.display = 'none';
+    title.textContent = 'Déconnexion';
+    text.textContent = 'Êtes-vous sûr de vouloir vous déconnecter ?';
+    subtitle.textContent = 'Votre session sera fermée et vous devrez vous reconnecter.';
+    buttons.style.display = 'flex';
+}
+
 // === GESTION DES PAGES ===
 function showLoginPage() {
     document.getElementById('loginPage').classList.add('active');
diff --git a/styles-modern.css b/styles-modern.css
index 5a5cbb8..679867d 100644
--- a/styles-modern.css
+++ b/styles-modern.css
@@ -770,6 +770,47 @@ body {
     animation: pulse 2s infinite;
 }
 
+/* Spinner de déconnexion */
+.logout-spinner {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 20px;
+    position: relative;
+}
+
+.spinner-ring {
+    width: 80px;
+    height: 80px;
+    border: 8px solid #f3f4f6;
+    border-top: 8px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.logout-modal.processing .logout-modal-icon {
+    animation: fadeOut 0.3s forwards;
+}
+
+.logout-modal.processing .logout-spinner {
+    animation: fadeIn 0.3s forwards;
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.8); }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: scale(0.8); }
+    to { opacity: 1; transform: scale(1); }
+}
+
 .logout-modal h2 {
     margin: 0 0 15px 0;
     color: #333;