Password fields (Champs de mot de passe)

Les champs mot de passe sont des champs de texte où les caractères sont utilisés comme moyens d’authentification. L’objectif est de prouver l’identité de l’utilisateur lorsqu’il désire accéder à un service dont l’accès est limité et/ou protégé. Ce composant regroupe les mots de passe pour la connexion (mot de passe simple) et pour la création d’un compte (création du mot de passe obéissant aux règles de sécurité de SIPA).

Usage

• Un champ mot de passe se trouve généralement dans un formulaire de connexion ou de création de compte.
• Sa spécificité par rapport à un champ de texte standard est que les caractères saisis sont par défaut masqués (généralement remplacés par des « • » ou des « * »).

Visibilité / masquage du texte

Les icônes “voir” et “masquer” sont visibles lorsque au moins un caractère est saisi.

Icône “voir”

• Cette icône permet d’afficher les caractères saisis.
• La visibilité du mot de passe permet de réduire les erreurs.

Icône "masquer"

• Cette icône permet de ne plus rendre visible les caractères saisis en affichant les symboles standards.

Règles de conformité

• Elles informent l’utilisateur des consignes obligatoires.
• Ces règles apparaissent uniquement dans un formulaire de création d’un compte et dès que le champ mot de passe est en focus.
• Puis, les règles restent affichées : perte de focus, retour du formulaire ko…
• Chaque règle se valide dès que le caractère saisi le permet.

Gestion des erreurs

• Contrairement au système de respect de conformité, le contrôle du mot de passe s’effectue suite à la validation de l’ensemble de la page.

Lors d’une connexion

• Lorsqu’aucun caractère n’est renseigné, le message est : « Veuillez renseigner votre mot de passe. ».

Lors d’une inscription

• Liste de messages d’erreur possibles :
  • « Ce mot de passe n’est pas conforme aux exigences minimales. » (Toutes les règles de conformité ne sont pas validées),
  • « Votre mot de passe doit contenir moins de 16 caractères. »,
  • « Votre mot de passe ne doit pas contenir de caractères accentués, ex. : À, é, ï . »,
  • « Votre mot de passe ne doit pas contenir votre e-mail. ».
  • …
• Les messages d’erreurs sont cumulables.

Bonnes pratiques

• L’enregistrement et la saisie automatique facilitent l’usage.
• Autoriser les copier/coller lors de la connexion et création de mot de passe.
• Les caractères de retour chariot ne sont pas autorisés. Ils ne sont pas pris en compte lors de la saisie.

Style & code

Standard (connexion)

Le mot de passe simple est utilisé dans les formulaires de connexion. Il sert à récupérer le mot de passe de l’utilisateur pour le comparer à celui stocké en base et vérifier l’identité. Ce composant ne vérifie pas la structure du mot de passe pour s’assurer de sa conformité avec les règles de sécurité SIPA. Pour des raisons de sécurité, ce composant ne doit pas utiliser de placeholder.

Le style visuel est celui appliqué par défaut sur les inputs de type texte dans un site SipaUI (dépendance au composant Text-fields (champs texte)), auquel est ajouté un bouton pour afficher en clair le texte du mot de passe ou le masquer.

Pour les labels (obligatoires), prendre le composant Labels (labels).

<label for="input1">Label</label>
<div class="su-password su-input-actions-1">
    <input id="input1" name="input1" type="password" required>
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action su-password-toggle">
            <i class="su-icon">montrer</i>
        </button>
    </div>
</div>

Readonly

Mot de passe standard en readonly. Attention, si le readonly suffit à l’input pour changer son opacité, il faut une classe su-disabled sur le label pour le changer aussi. Cette classe est dépendante des Helpers (classes d’aide).

<label for="input2" class="su-disabled">Label</label>
<div class="su-password su-input-actions-1">
    <input id="input2" name="input2" type="password" required readonly aria-readonly="true">
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action su-password-toggle">
            <i class="su-icon">montrer</i>
        </button>
    </div>
</div>

Avec gestion des règles de sécurité (création de compte)

Ce composant est utilisé dans les formulaires de création d’un compte. Il sert à l’utilisateur pour enregistrer son mot de passe en base. Contrairement à la version « connexion », ce composant vérifie la structure du mot de passe pour s’assurer de sa conformité avec les règles de sécurité SIPA.

Il est identique à celui ci-dessus, mais on lui a ajouté la liste des règles à respecter. Quand l’utilisateur saisi son mot de passe, il y a une vérification dynamique qui coche les règles respectées au fur et à mesure. Vous avez alors 2 choix possibles :

• le comportement standard, où le bloc de texte des conditions attendues apparaît lorsque le champ à le focus,
• le comportement optionnel, où le bloc de texte des conditions attendues est toujours visible. Pour arriver à ce résultat, ajoutez la classe su-block issue des Helpers à côté de su-conditions.

Standard

<label for="input3">Label</label>
<div class="su-password su-input-actions-1">
    <input id="input3" name="input3" type="password" required>
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action su-password-toggle">
            <i class="su-icon">montrer</i>
        </button>
    </div>
    <div class="su-error-message">Ce mot de passe n’est pas conforme aux exigences minimales.</div>
    <div class="su-conditions">
        <span class="su-condition-character-length"><i class="su-icon">valid</i>Au moins 8 caractères</span>    
        <span class="su-condition-uppercase"><i class="su-icon">valid</i>Au moins 1 majuscule</span>    
        <span class="su-condition-lowercase"><i class="su-icon">valid</i>Au moins 1 minuscule</span>    
        <span class="su-condition-number"><i class="su-icon">valid</i>Au moins 1 chiffre</span> 
    </div>
</div>

Avec conditions visibles

<label for="input4">Label</label>
<div class="su-password su-input-actions-1">
    <input id="input4" name="input4" type="password" required>
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action su-password-toggle">
            <i class="su-icon">montrer</i>
        </button>
    </div>
    <div class="su-error-message">Ce mot de passe n’est pas conforme aux exigences minimales.</div>
    <div class="su-conditions su-block">
        <span class="su-condition-character-length"><i class="su-icon">valid</i>Au moins 8 caractères</span>    
        <span class="su-condition-uppercase"><i class="su-icon">valid</i>Au moins 1 majuscule</span>    
        <span class="su-condition-lowercase"><i class="su-icon">valid</i>Au moins 1 minuscule</span>    
        <span class="su-condition-number"><i class="su-icon">valid</i>Au moins 1 chiffre</span> 
    </div>
</div>

Surcharge de regexp

Afin de pouvoir gérer soit même les conditions de validations il faut ajouter à une condition l’attribut data-su-regexp="..." avec la valeur souhaitée respectant la syntaxe des expressions régulières.

<label for="input5">Label</label>
<div class="su-password su-input-actions-1">
    <input id="input5" name="input5" type="password" required>
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action su-password-toggle">
            <i class="su-icon">montrer</i>
        </button>
    </div>
    <div class="su-error-message">Ce mot de passe n’est pas conforme aux exigences minimales.</div>
    <div class="su-conditions su-block">
        <span class="su-condition-character-length" data-su-regexp=".{10,}"><i class="su-icon">valid</i>Au moins 10 caractères</span>
        <span class="su-condition-uppercase"><i class="su-icon">invalid</i>Au moins 1 majuscule</span>
        <span class="su-condition-lowercase"><i class="su-icon">invalid</i>Au moins 1 minuscule</span>
        <span class="su-condition-number"><i class="su-icon">invalid</i>Au moins 1 chiffre</span>
    </div>
</div>

Gestion des erreurs

Nous mettons à disposition les classes nécessaires à l’affichage des erreurs : su-error (dépendance au composant Errors (erreurs)) et su-conditions-error. Par contre, la méthode de remontée de ces erreurs est au choix de chacun.

Sur mot de passe de connexion

Si le mot de passe n’est pas reconnu, ajoutez la classe su-error à côté de su-password.

<label for="input6">Label</label>
<div class="su-password su-input-actions-1 su-error">
    <input id="input6" name="input6" type="password" required value="Erreur">
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action su-password-toggle">
            <i class="su-icon">montrer</i>
        </button>
    </div>
    <div class="su-error-message">Message d’erreur</div>
</div>

Sur mot de passe de création de compte

Si, malgré les indications, l’utilisateur valide le formulaire avec un champ mal renseigné, ajoutez là-aussi su-error à côté de su-password. Cela affichera le message d’erreur et passera en rouge avec une croix à la place de la coche les conditions non-remplies.

<label for="input7">Label</label>
<div class="su-password su-input-actions-1 su-error">
    <input id="input7" name="input7" type="password" required value="Erreur">
    <div class="su-input-actions-area">
        <button type="button" class="su-input-action su-password-toggle">
            <i class="su-icon">montrer</i>
        </button>
    </div>
    <div class="su-error-message">Ce mot de passe n’est pas conforme aux exigences minimales.</div>
    <div class="su-conditions">
        <span class="su-condition-character-length su-conditions-error"><i class="su-icon">invalid</i>Au moins 8 caractères</span>  
        <span class="su-condition-uppercase su-conditions-success"><i class="su-icon">valid</i>Au moins 1 majuscule</span>  
        <span class="su-condition-lowercase su-conditions-success"><i class="su-icon">valid</i>Au moins 1 minuscule</span>  
        <span class="su-condition-number su-conditions-error"><i class="su-icon">invalid</i>Au moins 1 chiffre</span>   
    </div>
</div>

Accessibilité

Les règles d’accessibilités sont les mêmes que pour le composant Text-fields (champs texte).