fix: Ajout de l'autofocus sur le champ code d'accès pour une saisie immédiate

- Focus automatique au lancement de l'application
- Focus automatique après déconnexion
- Plus besoin de cliquer avant de commencer à taper
- Amélioration significative de l'ergonomie de connexion
This commit is contained in:
Pierre Marx
2025-09-04 15:59:32 -04:00
parent ef3ee22991
commit 6eaef1ddda
3 changed files with 45 additions and 0 deletions

View File

@@ -1,5 +1,25 @@
# Changelog - SimpleConnect Electron
## [1.2.9] - 2025-09-04
### Ajouté
- **Autofocus sur le champ code d'accès** : Amélioration de l'ergonomie de connexion
- Focus automatique au lancement de l'application
- Focus automatique après déconnexion
- Sélection automatique du contenu existant pour remplacement rapide
- Plus besoin de cliquer avant de taper
### Modifié
- **Expérience utilisateur de connexion** : Accès direct au clavier
- Attribut HTML `autofocus` sur le champ code d'accès
- Focus forcé après fermeture de la modal de déconnexion
- Délais optimisés pour garantir le focus malgré les animations
### Technique
- Focus appliqué à 3 endroits : attribut HTML, chargement initial, après déconnexion
- Utilisation de `select()` pour sélectionner le contenu existant
- Délais de 100-200ms pour contourner les interférences des animations
## [1.2.8] - 2025-09-04
### Ajouté

View File

@@ -25,6 +25,7 @@
id="accessCode"
placeholder="Code d'accès"
required
autofocus
/>
<input
type="password"

View File

@@ -38,6 +38,11 @@ document.addEventListener('DOMContentLoaded', async () => {
} else {
// S'assurer que le formulaire est propre au démarrage
resetLoginForm();
// Mettre le focus sur le champ code d'accès
const accessCodeInput = document.getElementById('accessCode');
if (accessCodeInput) {
accessCodeInput.focus();
}
}
// Gestionnaire du formulaire de connexion
@@ -248,6 +253,16 @@ function showLogoutModal() {
webviews = {};
resetLoginForm(); // Réinitialiser le formulaire
showLoginPage();
// Forcer le focus après la fermeture complète de la modal
setTimeout(() => {
const accessCodeInput = document.getElementById('accessCode');
if (accessCodeInput) {
accessCodeInput.focus();
accessCodeInput.select();
}
}, 200);
cancelBtn.removeEventListener('click', handleCancel);
confirmBtn.removeEventListener('click', handleConfirm);
};
@@ -354,6 +369,15 @@ function hideLoginProgress() {
function showLoginPage() {
document.getElementById('loginPage').classList.add('active');
document.getElementById('mainPage').classList.remove('active');
// Mettre le focus sur le champ code d'accès après un court délai
setTimeout(() => {
const accessCodeInput = document.getElementById('accessCode');
if (accessCodeInput) {
accessCodeInput.focus();
accessCodeInput.select(); // Sélectionner le contenu s'il y en a
}
}, 100);
}
// Réinitialiser le formulaire de connexion