feat: Ajout d'une animation de connexion avec spinner et feedback visuel

- Modal de progression pendant l'authentification SignalR
- Messages dynamiques selon le contexte (connexion normale ou forcée)
- Design cohérent avec la modal de déconnexion
- Transitions fluides entre les étapes du processus
- Amélioration de l'expérience utilisateur avec feedback continu

docs/changelog.md

@@ -1,5 +1,27 @@
 # Changelog - SimpleConnect Electron
 
+## [1.2.8] - 2025-09-04
+
+### Ajouté
+- **Animation de connexion** : Feedback visuel pendant le processus d'authentification
+  - Modal avec spinner animé identique à celui de déconnexion
+  - Messages dynamiques adaptés au contexte (connexion normale ou forcée)
+  - Progression en plusieurs étapes : authentification → chargement des centres
+  - Design cohérent avec la modal de déconnexion
+
+### Modifié
+- **Expérience de connexion** : Interface plus professionnelle
+  - Plus d'attente sans feedback visuel
+  - Messages clairs sur l'état du processus
+  - Transitions fluides entre les étapes
+  - Modal automatiquement fermée en cas d'erreur ou de succès
+
+### Technique
+- Nouvelles fonctions : showLoginProgress(), updateLoginProgress(), hideLoginProgress()
+- Styles CSS pour .login-progress-modal avec animation scaleIn
+- Gestion asynchrone avec délais pour transitions fluides
+- Messages adaptés selon le mode de connexion (normal/forcé)
+
 ## [1.2.7] - 2025-09-04
 
 ### Ajouté

index.html

@@ -137,6 +137,18 @@
       </div>
     </div>
 
+    <!-- Modal de progression de connexion -->
+    <div id="loginModal" class="modal-overlay">
+      <div class="login-progress-modal">
+        <div class="login-spinner">
+          <div class="spinner-ring"></div>
+        </div>
+        <h2 id="loginTitle">Connexion en cours...</h2>
+        <p id="loginText">Authentification auprès du serveur</p>
+        <p class="login-modal-subtitle" id="loginSubtitle">Veuillez patienter...</p>
+      </div>
+    </div>
+
     <!-- Scripts -->
     <script src="choices.min.js"></script>
     <script src="renderer.js"></script>

renderer.js

@@ -150,11 +150,17 @@ async function handleLogin(e) {
     // Sauvegarder le terminal sélectionné pour la prochaine fois
     localStorage.setItem('last-terminal', terminal);
     
+    // Afficher la modal de progression de connexion
+    showLoginProgress(forceDisconnect);
+    
     // Désactiver le bouton pendant la connexion
     loginBtn.disabled = true;
     loginBtn.textContent = forceDisconnect ? 'Reconnexion...' : 'Connexion en cours...';
     errorDiv.textContent = '';
     
+    // Attendre un peu pour que l'animation soit visible
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
     try {
         // Préparer les credentials pour SignalR
         const credentials = {
@@ -172,14 +178,27 @@ async function handleLogin(e) {
             currentCentres = result.centres;
             errorDiv.textContent = '';
             console.log('Connexion réussie:', currentAgent.name, 'sur le poste', terminal);
+            
+            // Mettre à jour le message de progression
+            updateLoginProgress('Chargement de vos centres...', 'Préparation de l\'interface...');
+            
+            // Attendre encore un peu pour une transition fluide
+            await new Promise(resolve => setTimeout(resolve, 500));
+            
+            // Masquer la modal et afficher la page principale
+            hideLoginProgress();
             showMainPage();
         } else {
+            // Masquer la modal en cas d'échec
+            hideLoginProgress();
             errorDiv.textContent = result.message || 'Identifiants incorrects';
             loginBtn.disabled = false;
             loginBtn.textContent = 'Se connecter';
         }
     } catch (error) {
         console.error('Erreur lors de la connexion:', error);
+        // Masquer la modal en cas d'erreur
+        hideLoginProgress();
         errorDiv.textContent = 'Erreur de connexion. Veuillez réessayer.';
         loginBtn.disabled = false;
         loginBtn.textContent = 'Se connecter';
@@ -294,6 +313,43 @@ function hideLogoutProgress() {
     buttons.style.display = 'flex';
 }
 
+// Afficher l'animation de progression de connexion
+function showLoginProgress(isForceDisconnect = false) {
+    const modal = document.getElementById('loginModal');
+    const title = document.getElementById('loginTitle');
+    const text = document.getElementById('loginText');
+    const subtitle = document.getElementById('loginSubtitle');
+    
+    // Afficher la modal
+    modal.classList.add('active');
+    
+    // Adapter les textes selon le type de connexion
+    if (isForceDisconnect) {
+        title.textContent = 'Reconnexion en cours...';
+        text.textContent = 'Déconnexion de la session précédente';
+        subtitle.textContent = 'Puis authentification...';
+    } else {
+        title.textContent = 'Connexion en cours...';
+        text.textContent = 'Authentification auprès du serveur';
+        subtitle.textContent = 'Veuillez patienter...';
+    }
+}
+
+// Mettre à jour le texte de progression de connexion
+function updateLoginProgress(text, subtitle) {
+    const textElement = document.getElementById('loginText');
+    const subtitleElement = document.getElementById('loginSubtitle');
+    
+    if (textElement) textElement.textContent = text;
+    if (subtitleElement) subtitleElement.textContent = subtitle;
+}
+
+// Masquer l'animation de progression de connexion
+function hideLoginProgress() {
+    const modal = document.getElementById('loginModal');
+    modal.classList.remove('active');
+}
+
 // === GESTION DES PAGES ===
 function showLoginPage() {
     document.getElementById('loginPage').classList.add('active');

styles-modern.css

@@ -875,6 +875,46 @@ body {
     to { opacity: 1; }
 }
 
+/* Modal de progression de connexion */
+.login-progress-modal {
+    background: white;
+    padding: 50px;
+    border-radius: 16px;
+    text-align: center;
+    max-width: 400px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    animation: scaleIn 0.3s ease-out;
+}
+
+.login-spinner {
+    margin: 0 auto 30px;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.login-progress-modal h2 {
+    margin: 0 0 15px 0;
+    color: #333;
+    font-size: 28px;
+    font-weight: 600;
+}
+
+.login-progress-modal p {
+    margin: 0 0 10px 0;
+    color: #555;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+.login-modal-subtitle {
+    color: #999 !important;
+    font-size: 14px !important;
+    margin-bottom: 0 !important;
+}
+
 .modal-content {
     background-color: white;
     margin: 10% auto;