Mot de passe

Le mot de passe est un élément d’interaction avec l’interface permettant d’aider l’usager à créer ou saisir un mot de passe.

HTML

Structure du composant

Le composant Mot de passe permet à l'utilisateur de masquer ou révéler le texte du mot de passe. Sa structure est la suivante :

Le Conteneur du mot de passe, obligatoire, est un élément HTML <div> défini par la classe fr-password.
Le libellé du mot de passe, obligatoire, doit être un élément HTML <label> avec les classe fr-label et fr-password__label, associé au mot de passe par son attribut for dont la valeur est égale à l'attribut id du mot de passe.
Une description additionnelle du mot de passe, optionnelle, peut être ajoutée dans le libellé, elle est définie par un élément <span> et la classe utilitaire fr-hint-text.
Le champ de mot de passe est contenu dans un élément HTML <div> défini par la classe fr-input-wrap.
Le mot de passe est un élément HTML <input> de type password, obligatoire, défini par la classe fr-password__input.
- Il dispose d'un attribut autocomplete dont la valeur varie selon l'usage du mot de passe entre new-password pour la création et current-password pour la connexion.
- Les attributs autocapitalize et autocorrect ont pour valeur false par défaut.
Un message d'information, d'erreur ou de succès peut être associé au mot de passe en utilisant un élément HTML <div> avec la classe fr-messages-group dans lequel on peut ajouter un message fr-message.
- Son attribut id doit être associé à l'attribut aria-describedby du mot de passe.
- Ce bloc peut être placé vide et être rempli dynamiquement, auquel cas il doit être annoncé à l'utilisateur en utilisant l'attribut aria-live="polite".
Une Fonctionnalité d’affichage du mot de passe, obligatoire, est contenue dans un élément <div> défini par les classes fr-password__checkbox, fr-checkbox-group, et fr-checkbox-group--sm, contenant :
- La case à cocher pour révéler ou masquer le mot de passe est un élément <input> de type checkbox.
- Le libellé de la case à cocher, obligatoire, doit être un élément HTML <label> avec la classe fr-label associé à la case à cocher par son attribut for dont la valeur est égale à l'attribut id de la case à cocher.

Exemple de structure HTML

<div class="fr-password">
    <label class="fr-password__label fr-label" for="password-input">
        Mot de passe
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <div class="fr-input-wrap">
        <input id="password-input" class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-input-messages" aria-required="true" name="password" autocomplete="new-password" type="password">
    </div>
    <div class="fr-messages-group" id="password-input-messages" aria-live="polite">
        <p class="fr-message">Votre mot de passe doit contenir :</p>
        <p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur">12 caractères minimum</p>
        <p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur">1 caractère spécial minimum</p>
        <p class="fr-message fr-message--info" data-fr-valid="validé" data-fr-error="en erreur">1 chiffre minimum</p>
    </div>
    <div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
        <input aria-label="Afficher le mot de passe" id="password-show" type="checkbox">
        <label class="fr-label" for="password-show">
            Afficher
        </label>
    </div>
</div>

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core et du mot de passe doivent être importés. L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec le fichier minifié, car plus léger.

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/password/password.min.css" rel="stylesheet">

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé :

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/password/password.legacy.min.css" rel="stylesheet">

Variantes de validation

Un message d'information complémentaire, d'erreur ou de succès doit être ajouté dans un bloc fr-messages-group à la fin du groupe du mot de passe et doit être lié à la liste déroulante via un attribut aria-describedby.

Pour ajouter un état de validation à un message, ajoutez une des classes suivantes sur le paragraphe comportant le message <p class="fr-message"> :

Par défaut le message indique une information.
La classe fr-message--error : Indique une erreur.
La classe fr-message--valid : Indique un succès.

Exemple de mot de passe après validation

<div class="fr-password">
    <label class="fr-password__label fr-label" for="password-validation-input">
        Mot de passe
    </label>
    <div class="fr-input-wrap">
        <input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-validation-input-messages" aria-required="true" name="password" value="x8A@" autocomplete="new-password" id="password-validation-input" type="password">
    </div>
    <div class="fr-messages-group" id="password-validation-input-messages" aria-live="polite">
        <p class="fr-message">Votre mot de passe doit contenir :</p>
        <p class="fr-message fr-message--error" data-fr-valid="validé" data-fr-error="en erreur">12 caractères minimum</p>
        <p class="fr-message fr-message--valid" data-fr-valid="validé" data-fr-error="en erreur">1 caractère spécial minimum</p>
        <p class="fr-message fr-message--valid" data-fr-valid="validé" data-fr-error="en erreur">1 chiffre minimum</p>
    </div>
    <div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
        <input aria-label="Afficher le mot de passe" id="password-validation-show" type="checkbox">
        <label class="fr--password__checkbox fr-label" for="password-validation-show">
            Afficher
        </label>
    </div>
</div>

Variante de mot de passe de connexion

Le composant mot de passe peut être utilisé dans un contexte de connexion et proposer un lien vers une page de récupération du mot de passe.

Exemple de mot de passe de connexion

<div class="fr-password">
    <label class="fr-password__label fr-label" for="password-connexion-input">
        Mot de passe
    </label>
    <div class="fr-input-wrap">
        <input class="fr-password__input fr-input" autocapitalize="off" autocorrect="off" aria-describedby="password-connexion-input-messages" aria-required="true" name="password" autocomplete="current-password" id="password-connexion-input" type="password">
    </div>
    <div class="fr-messages-group" id="password-connexion-input-messages" aria-live="polite">
    </div>
    <div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
        <input aria-label="Afficher le mot de passe" id="password-connexion-show" type="checkbox">
        <label class="fr--password__checkbox fr-label" for="password-connexion-show">
            Afficher
        </label>
    </div>
    <p>
        <a href="[À MODIFIER - url de la page de récupération]" class="fr-link">Mot de passe oublié ?</a>
    </p>
</div>

JavaScript

Installation du JavaScript

Pour fonctionner, le composant mot de passe nécessite l'utilisation de JavaScript. Chaque composant utilisant JavaScript possède un fichier JS spécifique et requiert le fichier JS du core.

Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant </body>) :

<script type="module" src="dist/core/core.module.min.js"></script>
<script type="module" src="dist/component/password/password.module.min.js"></script>

NB: Il est aussi possible d'importer le JS global du DSFR dsfr.module.js

Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé :

<script type="text/javascript" nomodule href="dist/legacy/legacy.nomodule.min.js" ></script>
<script type="text/javascript" nomodule src="dist/core/core.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/component/password/password.nomodule.min.js"></script>

Une fois le JavaScript chargé, le composant fonctionne automatiquement.

Instances

Sur le mot de passe, les éléments suivants sont instanciés :

Le conteneur, via la classe : fr-password
Le champs de mot de passe, via la classe : password__input
Le libellé, via la classe : fr-password__label
La case à cocher pour révéler ou masquer le mot de passe, via la classe : fr-password__checkbox et l'élément <input> de type checkbox

Une fois chargé, le JS ajoute un attribut data-fr-js-NOM_INSTANCE="true" sur chacun des éléments instanciés.

API

Il est possible d'interagir avec les instances du composant en JavaScript via une API.

Cette API est disponible depuis la méthode window.dsfr(instance) du core.

Exemple :

const elem = document.getElementById('ID_TAB');
dsfr(elem).passwordInput.isEnabled;

L'ensemble des propriétés et méthodes disponibles sont définies ci-après :

password

isEnabled
Description	Défini si le fonctionnement du mot de passe est activé ou non
Type	property
Retour	Boolean
Exemple	`dsfr(elem).password.isEnabled = false`

node
Description	Renvoie le noeud HTML de l'élément.
Type	property
Retour	DOMElement
Exemple	`dsfr(elem).password.node`

passwordInput

isEnabled
Description	Défini si le fonctionnement du mot de passe est activé ou non
Type	property
Retour	Boolean
Exemple	`dsfr(elem).passwordInput.isEnabled = false`

node
Description	Renvoie le noeud HTML de l'élément.
Type	property
Retour	DOMElement
Exemple	`dsfr(elem).passwordInput.node`

passwordLabel

isEnabled
Description	Défini si le fonctionnement du libellé du mot de passe est activé ou non
Type	property
Retour	Boolean
Exemple	`dsfr(elem).passwordLabel.isEnabled = false`

node
Description	Renvoie le noeud HTML de l'élément.
Type	property
Retour	DOMElement
Exemple	`dsfr(elem).passwordLabel.node`

passwordToggle

isEnabled
Description	Défini si le fonctionnement d'affichage du mot de passe est activé ou non
Type	property
Retour	Boolean
Exemple	`dsfr(elem).passwordToggle.isEnabled = false`

node
Description	Renvoie le noeud HTML de l'élément.
Type	property
Retour	DOMElement
Exemple	`dsfr(elem).passwordToggle.node`

Note de version

Voir les évolutions sur github

v1.11.0 - 11 décembre 2023

placement checkbox & icon info

met a jour l'icône de message d'information
met a jour le placement de la checkbox

🐛 fix

password

#832

couleur du texte de la checkbox "afficher"

utilisation du token de couleur : text-label-grey

🐛 fix

password

#750

v1.10.0 - 19 juillet 2023

boutons spéciaux input Safari

Dans les champs de type password, sur safari Mac, il y a une icône apportant des outils supplémentaire qui se superpose à l’icône des signalant la hauteur de casse
Déplacement des icônes natives pour qu'elles ne se superposent pas
Retrait de l'icône capslock native, privilégiant la nôtre

✨ feat

core

password

#711

correctif accessibilité des messages

ajout sur les messages de validation et d'erreur de la composition du mot de passe d'un statut en after uniquement pour les lecteurs d'écrans

Breaking change:

il est nécessaire d'ajouter les attributs data-fr-validet data-fr-error avec les textes correspondants à l'état (respectivement, en français, "validé" et "en erreur"

🐛 fix

💥 Breaking change

password

#694

retrait du bouton natif sur edge

Sur edge une icône oeil apparaît au focus d'un champ de type "password"
Retrait de l'icone native

🐛 fix

password

#669

correctif états de la case à cocher

force l'état de la checkbox à l'état par défaut, pour éviter qu'elle ne passe en erreur/succès si elle hérite de cet état sur le composant.

🐛 fix

password

#667

bug icône

conditionne l'ajout de la classe utile fr-icon à l'utilisation d'une string en paramètre icon

🐛 fix

password

#648

v1.9.3 - 17 mai 2023

correction capslock safari

Correction erreur js sur le champ password au clic sur le trousseau (safari)
Retrait icone native capslock safari
Ajout attribut autocapitalize='off' sur les champs password et email pour désactiver la majuscule au début (mobile)
Ajout attribut autocorrect sur les champs password et email pour désactiver la correction orthographique

🐛 fix

password

account

#503

v1.9.1 - 11 avril 2023

correctif erreur getModifierState

Lorsque le navigateur fait l'autocompletion du champ password, il lance un événement qui n'est pas forcément un évènement de clavier et provoque une erreur indiquant que la fonction getModifierState n'existe pas.

🐛 fix

password

#574

v1.8.0 - 27 octobre 2022

correction template password

fix

password

#399

ajout du composant mot de passe

feat

password

#391

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github