🆕 Demande de mot de passe

Le bloc fonctionnel de “demande de mot de passe” permet d’aider un utilisateur Ă  crĂ©er ou saisir un mot de passe.

Il doit ĂȘtre utilisĂ© lorsque votre service nĂ©cessite de demander Ă  l’utilisateur de crĂ©er ou saisir un mot de passe, notamment dans les cas de crĂ©ation de compte ou de connexion. Des modĂšles de page pour ces deux usages sont Ă  disposition : page de crĂ©ation de compte et page de connexion .

Le bloc de “demande de mot de passe” se base sur le champs de saisie de type “password” et se dĂ©cline en deux variantes couvrant les deux cas d’usages de rĂ©fĂ©rence :

  • la demande de mot de passe pour la crĂ©ation d’un compte
  • la demande de mot de passe pour la connexion

Structure du champ mot de passe

Ce bloc utilise un champ de saisie classique et s’adapte en fonction du contexte de demande d’adresse Ă©lectronique. Le champ dĂ©diĂ© au mot de passe voit sa description dynamique fonction du contenu saisi se placer sous le champ. Il est composĂ© des Ă©lĂ©ments suivants:

Le champ mot de passe est composé des éléments suivant :

  • un label - obligatoire, “Mot de passe”
  • un texte de description - optionnelle, Ă  remplir pour prĂ©ciser les rĂšgles de sĂ©curisation notamment dans les cas de crĂ©ation de compte
  • un champ input “password” - obligatoire
  • une fonctionnalitĂ© d’affichage du mot de passe - obligatoire, au clic permet d’afficher en clair les caractĂšres saisis dans le champ

La demande de mot de passe aide l’utilisateur grñce au champ “mot de passe” car :

  • il permet Ă  l’utilisateur de saisir le mot de passe via un “coller” dans le champ
  • il cache le mot de passe, et donne la possibilitĂ© Ă  l’utilisateur de l'afficher au besoin
  • il montre le dernier caractĂšre saisi sur certains navigateurs
  • il autorise la saisie de long mot de passe sans avoir de de nombre caractĂšres maximum

Création ou modification de mot de passe associé à un compte.

Par défaut

Dans ce contexte, il est demandĂ© Ă  l’utilisateur de crĂ©er un mot de passe soumis Ă  des contraintes de rĂšgles de sĂ©curisation. Pour aider l’utilisateur, il faut utiliser le texte de description pour prĂ©ciser les rĂšgles Ă  respecter, et les Ă©ventuels formats attendus (longueurs, utilisation de caractĂšres et de casse spĂ©cifiques, etc.) Le champ dĂ©diĂ© au mot de passe voit sa description dynamique fonction du contenu saisi se placer sous le champ.

Votre mot de passe doit contenir :

12 caractĂšres minimum

1 caractÚre spécial minimum

1 chiffre minimum

                    <div class="fr-password" id="password-1138">
    <label class="fr-label" for="password-1138-input">
        Mot de passe
        <span class="fr-hint-text">Texte de description additionnel</span>
    </label>
    <div class="fr-input-wrap">
        <input class="fr-password__input fr-input" aria-describedby="password-1138-input-messages" aria-required="true" name="password" autocomplete="new-password" id="password-1138-input" type="password">
    </div>
    <div class="fr-messages-group" id="password-1138-input-messages" aria-live="assertive">
        <p class="fr-message" id="password-1138-input-message">Votre mot de passe doit contenir :</p>
        <p class="fr-message fr-message--info" id="password-1138-input-message-info">12 caractĂšres minimum</p>
        <p class="fr-message fr-message--info" id="password-1138-input-message-info-1">1 caractÚre spécial minimum</p>
        <p class="fr-message fr-message--info" id="password-1138-input-message-info-2">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-1138-show" type="checkbox" aria-describedby="password-1138-show-messages">
        <label class="fr-password__checkbox fr-label" for="password-1138-show">
            Afficher
        </label>
        <div class="fr-messages-group" id="password-1138-show-messages" aria-live="assertive">
        </div>
    </div>
</div>
                    
                  

Un modÚle de page de création de compte est à disposition.

Message d’erreur

Dans le cas d’erreur de saisie, il faut reprendre l’affichage d’erreur du champ input, et prĂ©ciser dans le texte le type d’erreur rencontrĂ© en fonction des rĂšgles de sĂ©curisation (exemple : “le mot de passe doit comporter au moins un chiffre”, etc.).

Demande de mot de passe pour la connexion

Par défaut

Dans ce contexte, il est demandĂ© Ă  l’utilisateur de rentrer son mot de passe pour se connecter. Un lien vers la page de rĂ©cupĂ©ration de mot de passe doit ĂȘtre placĂ© en dessous.

Mot de passe oublié ?

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

Messages d’erreur

Dans le cas d’erreur de saisie, il est prĂ©fĂ©rable de ne pas reprendre l’affichage d’erreur du champ input ‘inviduel’, afin de ne pas indiquer l’origine de l’erreur (entre l’identifiant ou le mot de passe).

Il faut utiliser dans ce cas le bloc alerte et mettre un message spĂ©cifiant une erreur globale Ă  l’identification, par exemple: “le couple mot de passe/identifiant saisi n’est pas correct” ou “Erreur d'identification Merci de vĂ©rifier votre email et votre mot de passe”.

Un modÚle de page de création de connexion avec bloc alerte erreur est à disposition dans le DSFR.

Bonnes pratiques

RÚgles de sécurisation du mot de passe :

Changement de mot de passe :

  • Certains services peuvent parfois demander Ă  leurs utilisateurs de changer de mots de passe tous les trimestres, il faut Ă©viter cette pratique car cela rend compliquĂ© la mĂ©morisation pour l’utilisateur et donc l’accĂšs Ă  votre service. Cette recommandation est Ă  adapter selon les contraintes de sĂ©curitĂ© auxquelles votre service est soumis.
  • Si un systĂšme de rĂ©cupĂ©ration de mot de passe est mis en place, veillez Ă  ne jamais envoyer de mot de passe en clair par courriel ou autre: diriger l’utilisateur vers un formulaire temporaire lui permettant de mettre Ă  jour son mot de passe.

Accessibilité