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:
@@ -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>
|
||||||
|
|||||||
29
renderer.js
29
renderer.js
@@ -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';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user