Development #74652
inclure une case à cocher pour afficher en clair le mot de passe
0%
Description
Demande récurrente (mais flemme de chercher dans les audits d'accessibilité pour des références), c'est aussi une préconisation du NIST,
In order to assist the claimant in successfully entering a memorized secret, the verifier SHOULD offer an option to display the secret — rather than a series of dots or asterisks — until it is entered. This allows the claimant to verify their entry if they are in a location where their screen is unlikely to be observed.
— Digital Identity Guidelines, https://pages.nist.gov/800-63-3/sp800-63b.html#-5112-memorized-secret-verifiers
C'est également présent dans le composant "mot de passe" du système de design gouv.fr, https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mot-de-passe (sans commentaire particulier pour le justifier).
Ma position a toujours été que c'était aux navigateurs d'assurer le taf. Pas un franc succès. Je propose ici finalement de mettre ça en place.
Fichiers
Demandes liées
Révisions associées
Historique
Mis à jour par Frédéric Péters il y a environ un an
- Fichier 0001-general-add-reveal-checkbox-to-password-fields-74652.patch 0001-general-add-reveal-checkbox-to-password-fields-74652.patch ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
(la partie css devra être dupliquée dans publik-base-theme, mais voyons d'abord ici).
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
Je ne comprends pas l'intérêt de lancer un trigger change au chargement de la page.
Nul besoin de sauvegarder l'état du checkbox de visibilité. Il devrait toujours être décoché au chargement d'une page (le choix d'afficher le pass en clair devrait toujours provenir d'une action humaine).
Mis à jour par Frédéric Péters il y a environ un an
Sur un rafraichissement de page type F5, le navigateur peut conserver la case cochée, sans en lancer l'événement.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
Ok, j'ai alors une préférence pour décocher la checkbox si cochée au chargement d'une page, que d'afficher le pass en clair.
Mis à jour par Frédéric Péters il y a environ un an
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
- Statut changé de Solution proposée à Solution validée
Côté CSS et pour PBT il faudra garantir que le label du champ ne rentre poas en conflit avec la checkbox de visibilité.
Mis à jour par Frédéric Péters il y a environ un an
Ok pour moi ça n'arrive pas. Soit page de connexion l'intitulé est "Mot de passe" et ça laisse de la place, même avec deux blocs côte à côte, soit le libellé est plus long, "Confirmation du nouveau mot de passe" mais là on a toute la largeur.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
Techniquement les 2 peuvent se superposer. Et des cas où ça peut arriver existent, comme créer un thème avec un font-size de base de 18 (ex Saumur, MNHN), choisir une font qui chasse un peu plus. L'idéal serait qu'à la création d'un thème on ait pas à se soucier de devoir corriger le layout d'un widget en fonction des choix typos du thème.
(Je pose une capture du formulaire de création de compte à 360px et font-size 18px)
Mis à jour par Frédéric Péters il y a environ un an
Ok et donc l'idée serait de poser un padding-right sur le label, pour forcer un retour à la ligne plus tôt ?
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ un an
Appliquer un padding au label.
Par exemple un padding de 6em.
Mais ce padding ne s'adaptera pas à toutes les caracs d'une font. Dans certains cas le padding pourra être trop grand (utilisation d'une font condensed par ex.) ou trop petit.
J'ai alors tenté une solution 2, radicalement différente, à base de grid.
Mais le préalable est de décaler le {% block widget-bottom } après le bloc { widget-content %} (Si excluant, back solution padding)
.gadjo-password-field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: .7em; .content { grid-column-end: span 2; } } .password-visibility-checkbox { display: flex; grid-row: 1 / 2; grid-column: 2 / 3; input { margin-bottom: 0; } input + label { margin: 0; } }
Mis à jour par Frédéric Péters il y a environ un an
Mais ce padding ne s'adaptera pas à toutes les caracs d'une font. Dans certains cas le padding pourra être trop grand (utilisation d'une font condensed par ex.) ou trop petit.
Je préférerais quand même cette petite solution simple; avec un peu de marge au pire ça passe à la ligne un peu trop tôt.
Mis à jour par Robot Gitea il y a environ un an
- Statut changé de Solution validée à Solution proposée
Frédéric Péters (fpeters) a ouvert une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/gadjo/pulls/4
- Titre : inclure une case à cocher pour afficher en clair le mot de passe (#74652)
- Modifications : https://git.entrouvert.org/entrouvert/gadjo/pulls/4/files
Mis à jour par Robot Gitea il y a environ un an
- Statut changé de Solution proposée à Solution validée
Corentin Sechet (csechet) a approuvé une pull request sur Gitea concernant cette demande :
Mis à jour par Robot Gitea il y a environ un an
- Statut changé de Solution validée à Résolu (à déployer)
Frédéric Péters (fpeters) a mergé une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/gadjo/pulls/4
- Titre : inclure une case à cocher pour afficher en clair le mot de passe (#74652)
- Modifications : https://git.entrouvert.org/entrouvert/gadjo/pulls/4/files
Mis à jour par Transition automatique il y a environ un an
- Statut changé de Résolu (à déployer) à Solution déployée
Mis à jour par Frédéric Péters il y a 12 mois
- Lié à Development #50758: /login/ : switch pour afficher à l’usager le mot de passe saisi en clair avant tentative d’authentification ajouté
general: add reveal checkbox to password fields (#74652)