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.

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.

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 :

• Bien s’assurer que le niveau de contrainte suit le besoin de sécurité de votre service pour ne pas rendre la saisie difficile si cela ne le nécessite pas
• Guide des règles de sécurisation de mot de passe de l’ANSSI
  

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é

• Reprendre les éléments d'accessibilité liés au composant champ de saisie
• Utiliser l’attribut autocomplete="new-password" pour la création et autocomplete="current-password" pour la connexion.