feat: désactiver le formulaire de login quand le serveur est injoignable

- Bouton et select disabled par défaut au démarrage
- Réactivés uniquement quand le health check confirme la connexion
- Pastille orange pulsante + "Reconnexion en cours..." au lieu de rouge fixe
- Style disabled grisé pour le bouton et le select
- resetLoginForm ne force plus disabled=false
This commit is contained in:
Pierre Marx
2026-03-18 20:33:22 -04:00
parent d377ed3ea8
commit 9e683a04e9
3 changed files with 38 additions and 13 deletions

View File

@@ -34,8 +34,8 @@
placeholder="Mot de passe" placeholder="Mot de passe"
required required
/> />
<select id="terminal" required> <select id="terminal" required disabled>
<option value="" placeholder>Chargement des postes...</option> <option value="">En attente du serveur...</option>
</select> </select>
<!-- Option de déconnexion forcée --> <!-- Option de déconnexion forcée -->
@@ -50,7 +50,7 @@
> >
</div> </div>
<button type="submit">Se connecter</button> <button type="submit" disabled>Se connecter</button>
<button type="button" id="quitLoginBtn" class="btn-quit">Quitter</button> <button type="button" id="quitLoginBtn" class="btn-quit">Quitter</button>
<div id="loginError" class="error-message"></div> <div id="loginError" class="error-message"></div>
</form> </form>

View File

@@ -440,9 +440,8 @@ function resetLoginForm() {
// Vider les messages d'erreur // Vider les messages d'erreur
if (loginError) loginError.textContent = ''; if (loginError) loginError.textContent = '';
// Réactiver le bouton et remettre le texte par défaut // Remettre le texte par défaut — l'état disabled depend du statut serveur
if (loginBtn) { if (loginBtn) {
loginBtn.disabled = false;
loginBtn.textContent = 'Se connecter'; loginBtn.textContent = 'Se connecter';
} }
} }
@@ -1240,12 +1239,29 @@ function refreshCurrentWebview() {
function updateServerIndicator(status) { function updateServerIndicator(status) {
const indicator = document.getElementById('signalrIndicator'); const indicator = document.getElementById('signalrIndicator');
const text = document.getElementById('signalrText'); const text = document.getElementById('signalrText');
const loginBtn = document.querySelector('#loginForm button[type="submit"]');
const terminalSelect = document.getElementById('terminal');
if (!indicator || !text) return; if (!indicator || !text) return;
// Reinitialiser les classes // Reinitialiser les classes
indicator.className = 'signalr-indicator'; indicator.className = 'signalr-indicator';
const serverReady = (status === 'connected');
// Activer/desactiver le formulaire de login
if (loginBtn) {
loginBtn.disabled = !serverReady;
loginBtn.textContent = serverReady ? 'Se connecter' : 'Se connecter';
}
if (terminalSelect) {
terminalSelect.disabled = !serverReady;
}
// Mettre a jour Choices.js si present
if (terminalChoices) {
serverReady ? terminalChoices.enable() : terminalChoices.disable();
}
switch(status) { switch(status) {
case 'connected': case 'connected':
indicator.classList.add('connected'); indicator.classList.add('connected');
@@ -1256,18 +1272,15 @@ function updateServerIndicator(status) {
text.textContent = 'Connexion en cours...'; text.textContent = 'Connexion en cours...';
break; break;
case 'disconnected': case 'disconnected':
indicator.classList.add('disconnected');
text.textContent = 'Serveur déconnecté';
break;
case 'error': case 'error':
indicator.classList.add('error'); indicator.classList.add('reconnecting');
text.textContent = 'Serveur injoignable'; text.textContent = 'Reconnexion en cours...';
break; break;
case 'disabled': case 'disabled':
indicator.classList.add('disabled'); indicator.classList.add('disabled');
text.textContent = 'Non configuré'; text.textContent = 'Non configuré';
break; break;
default: default:
text.textContent = 'Etat inconnu'; text.textContent = 'État inconnu';
} }
} }

View File

@@ -157,6 +157,11 @@ body {
background: #F44336; background: #F44336;
} }
.signalr-indicator.reconnecting {
background: #FFC107;
animation: pulse 1.5s infinite;
}
.signalr-indicator.disabled { .signalr-indicator.disabled {
background: #9E9E9E; background: #9E9E9E;
} }
@@ -190,12 +195,19 @@ body {
transition: background 0.3s; transition: background 0.3s;
} }
#loginForm button:hover { #loginForm button:hover:not(:disabled) {
background: #5a6fd8; background: #5a6fd8;
} }
#loginForm button:disabled { #loginForm button:disabled {
background: #a8b0e8; background: #ccc;
color: #999;
cursor: not-allowed;
}
#loginForm select:disabled {
background: #f0f0f0;
color: #999;
cursor: not-allowed; cursor: not-allowed;
} }