Password input (1.8 changelog)

Created on 27 September 2023, about 1 year ago

Problem/Motivation

According to DSFR 1.8 changelog, new functionalities on password input : checkbox to show/hide, and format instructions.
https://github.com/GouvernementFR/dsfr/releases/tag/v1.8.0
New DSFR component : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mo...

Proposed resolution

Template overrride to add the checkbox : input--password.html.twig
As for the format instructions, it might be too project-dependent to implement directly ?

Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France mh_nichts

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mh_nichts
  • Assigned to musa.thomas
  • 🇫🇷France musa.thomas France 🇫🇷
  • 🇫🇷France musa.thomas France 🇫🇷

    remaining :

    the JS file need to be write (it's Copy past from another module

    the main idea is copy past (replace input password by text) but we don't know if we put the checkbox by JS

    We don't know if we add the checkbox to display the password by the JS or directly inside the twig template

    It would be more clean to not have the checkboxe if the Js is not include or enable

    Also this checkbox (display password) need to be wrap inside div with the information about password

      <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>
    

    the fisrt div need to wrap checboxe and the information password message

    The information password message is added via JS inside core

    Have a look on this file
    web/core/modules/user/user.theme.js
    web/core/themes/claro/js/user.theme.js

  • Issue was unassigned.
  • 🇫🇷France musa.thomas France 🇫🇷
  • 🇫🇷France musa.thomas France 🇫🇷
Production build 0.71.5 2024