diff --git a/app/components/dsfr/input_component.rb b/app/components/dsfr/input_component.rb index aa724a775..42113167b 100644 --- a/app/components/dsfr/input_component.rb +++ b/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? diff --git a/app/components/dsfr/input_component/input_component.html.haml b/app/components/dsfr/input_component/input_component.html.haml index a56c7fff8..8fc5324a3 100644 --- a/app/components/dsfr/input_component/input_component.html.haml +++ b/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' } } diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml index 46d33dd55..e30dbf1d9 100644 --- a/app/views/devise/passwords/edit.html.haml +++ b/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') } diff --git a/config/locales/en.yml b/config/locales/en.yml index 05d56ed0d..f2f481aee 100644 --- a/config/locales/en.yml +++ b/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. diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 4e22a7f01..efd7db901 100644 --- a/config/locales/fr.yml +++ b/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 %{email}." click_link_to_reset_password: "Cliquez sur le lien contenu dans l’email pour changer votre mot de passe."