refactor(admin): migrate password form to DSFR components

app/components/dsfr/input_component.rb

@@ -6,7 +6,7 @@ class Dsfr::InputComponent < ApplicationComponent
   # it uses aria-describedby on input and link it to yielded content
   renders_one :describedby
 
-  def initialize(form:, attribute:, input_type:, opts: {}, required: true)
+  def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: true)
     @form = form
     @attribute = attribute
     @input_type = input_type

app/views/administrateurs/activate/new.html.haml

@@ -1,21 +1,26 @@
-- content_for(:title, "Choix du mot de passe")
+- content_for(:title, t('.title'))
 
 - content_for :footer do
   = render partial: "root/footer"
 
-.container.devise-container
-  .one-column-centered
-    = form_for @administrateur, url: { controller: 'administrateurs/activate', action: :create }, html: { class: "form" } do |f|
-      %br
-      %h1
-        Choix du mot de passe
+.fr-container.fr-my-5w
+  .fr-grid-row.fr-grid-row--center
+    .fr-col-lg-6
+      = form_for @administrateur, url: { controller: 'administrateurs/activate', action: :create } do |f|
+        = f.hidden_field :reset_password_token, value: @token
 
-      = f.hidden_field :reset_password_token, value: @token
-      = f.label :email, "Email"
-      = f.text_field :email, disabled: true
+        %fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'edit-password-legend' } }
+          %legend.fr-fieldset__legend#edit-password-legend
+            %h1.fr-h2= t('.title')
 
-      = f.label :password do
-        Mot de passe
-      = render 'password_complexity/field', { form: f, test_complexity: true }
+          .fr-fieldset__element
+            = render Dsfr::InputComponent.new(form: f, attribute: :email, opts: { disabled: true })
 
-      = f.submit 'Continuer', 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: 'turbo-input', turbo_input_url_value: show_password_complexity_path }})
+
+            #password_complexity
+              = render PasswordComplexityComponent.new
+
+        = f.submit t('.continue'), 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

@@ -580,6 +580,11 @@ en:
     deleted:
       one: Deleted
       other: Deleted
+  administrateurs:
+    activate:
+      new:
+        title: Pick a password
+        continue: Continue
   users:
     dossiers:
       test_procedure: "This file is submitted on a test procedure. Any modification of the procedure by the administrator (addition of a field, publication of the procedure, etc.) will result in the removal of the file."

config/locales/fr.yml

@@ -629,6 +629,10 @@ fr:
         to_follow: à suivre
         total: dossiers
   administrateurs:
+    activate:
+      new:
+        title: Choix du mot de passe
+        continue: Continuer
     index:
       restored: La démarche %{procedure_id} a été restaurée
     dropdown_actions: