feat(user): can show password when editing password

app/components/dsfr/input_component.rb

@@ -89,6 +89,10 @@ class Dsfr::InputComponent < ApplicationComponent
     @input_type == :email_field
   end
 
+  def show_password_id
+    dom_id(object, "#{@attribute}_show_password")
+  end
+
   private
 
   def hint?

app/components/dsfr/input_component/input_component.html.haml

@@ -23,8 +23,8 @@
 
   - if password?
     .fr-password__checkbox.fr-checkbox-group.fr-checkbox-group--sm
-      %input#show_password{ "aria-label" => t('.show_password.aria_label'), type: "checkbox" }/
-      %label.fr--password__checkbox.fr-label{ for: "show_password" }= t('.show_password.label')
+      %input{ id: show_password_id, "aria-label" => t('.show_password.aria_label'), type: "checkbox" }/
+      %label.fr--password__checkbox.fr-label{ for: show_password_id }= t('.show_password.label')
 
   - if email?
     .suspect-email.hidden{ data: { "email-input-target": 'ariaRegion'}, aria: { live: 'off' } }

app/views/devise/passwords/edit.html.haml

@@ -7,16 +7,21 @@
   .one-column-centered
     = devise_error_messages!
 
-    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :patch, class: 'form' }) do |f|
-
-      %h1 Changement de mot de passe
-
+    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :patch, class: '' }) do |f|
       = f.hidden_field :reset_password_token
 
-      = f.label 'Nouveau mot de passe'
-      = render 'password_complexity/field', { form: f, test_complexity: populated_resource.validate_password_complexity? }
 
-      = f.label 'Confirmez le nouveau mot de passe'
-      = f.password_field :password_confirmation, autocomplete: 'off'
+      %fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'edit-password-legend' } }
+        %legend.fr-fieldset__legend#edit-password-legend
+          %h1.fr-h2= I18n.t('views.users.passwords.edit.subtitle')
 
-      = f.submit 'Changer le mot de passe', class: 'button large primary expand', id: "submit-password", data: { disable_with: "Envoi…" }
+        .fr-fieldset__element
+          = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
+            opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: populated_resource.validate_password_complexity? ? 'turbo-input' : false, turbo_input_url_value: show_password_complexity_path }})
+
+          = render 'password_complexity/field', { form: f, test_complexity: populated_resource.validate_password_complexity? }
+
+        .fr-fieldset__element
+          = render Dsfr::InputComponent.new(form: f, attribute: :password_confirmation, input_type: :password_field, opts: { autocomplete: 'new-password' })
+
+      = f.submit t('views.users.passwords.edit.submit'), id: 'submit-password', class: "fr-btn fr-btn--lg fr-mt-2w", data: { disable_with: t('views.users.passwords.edit.submit_loading') }

config/locales/en.yml

@@ -351,6 +351,10 @@ en:
           connect_with_agent_connect: Visit our dedicated page
           subtitle: "Sign in with my account"
       passwords:
+        edit:
+          subtitle: Change password
+          submit: Change password
+          submit_loading: Sending…
         reset_link_sent:
           got_it: Got it!
           open_your_mailbox: Now open your mailbox.

config/locales/fr.yml

@@ -347,6 +347,10 @@ fr:
           connect_with_agent_connect: Accédez à notre page dédiée
           subtitle: "Se connecter avec son compte"
       passwords:
+        edit:
+          subtitle: Changement de mot de passe
+          submit: Changer le mot de passe
+          submit_loading: Envoi…
         reset_link_sent:
           email_sent_html: "Nous vous avons envoyé un email à l’adresse <strong>%{email}</strong>."
           click_link_to_reset_password: "Cliquez sur le lien contenu dans l’email pour changer votre mot de passe."