Merge pull request #9433 from colinux/fix-dsfr-forms

ETQ usager: fix layout de 3 forms de gestion de compte

app/components/dsfr/input_component.rb

@@ -7,6 +7,7 @@ class Dsfr::InputComponent < ApplicationComponent
   # use it to indicate detailed about the inputs, ex: https://www.systeme-de-design.gouv.fr/elements-d-interface/modeles-et-blocs-fonctionnels/demande-de-mot-de-passe
   # it uses aria-describedby on input and link it to yielded content
   renders_one :describedby
+  renders_one :label
 
   def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: true)
     @form = form
@@ -46,7 +47,7 @@ class Dsfr::InputComponent < ApplicationComponent
 
   # i18n lookups
   def label
-    object.class.human_attribute_name(@attribute)
+    get_slot(:label).presence || default_label
   end
 
   # kind of input helpers
@@ -63,4 +64,8 @@ class Dsfr::InputComponent < ApplicationComponent
   end
 
   private
+
+  def default_label
+    object.class.human_attribute_name(@attribute)
+  end
 end

app/views/agent_connect/agent/index.html.haml

@@ -14,7 +14,7 @@
           = link_to t('.citizen_page'), new_user_session_path, class: "fr-btn fr-btn--secondary"
 
       .column
-        %h1.fr-my-2
+        %h1.fr-my-2w
           = t('.connect')
 
         .fr-connect-group.fr-my-2w
@@ -29,20 +29,30 @@
         %p.fr-hr-or= t('views.shared.france_connect_login.separator')
 
         #session-new.auth-form.sign-in-form
-          = form_for User.new, url: user_session_path, html: { class: "form" } do |f|
-            = f.label :email, t('.pro_email')
-            = f.text_field :email, type: :email, autocomplete: 'username', autofocus: true
+          = form_for User.new, url: user_session_path do |f|
 
-            = f.label :password, t('views.users.sessions.new.password', min_length: PASSWORD_MIN_LENGTH)
-            = f.password_field :password, autocomplete: 'current-password'
+            %fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'new-account-legend' } }
+              %legend.fr-fieldset__legend#new-account-legend
+                %h2.fr-h6= I18n.t('views.users.sessions.new.subtitle')
 
+              .fr-fieldset__element
+                %p.fr-text--sm= t('utils.mandatory_champs')
+
+              .fr-fieldset__element
+                = render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true }) do |c|
+                  - c.with_label { t('.pro_email') }
+
+              .fr-fieldset__element
+                = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password' })
+
+                %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "link"
+
+              .fr-fieldset__element
                 .auth-options
                   .flex-no-shrink
                     = f.check_box :remember_me
                     = f.label :remember_me, t('views.users.sessions.new.remember_me'), class: 'remember-me'
 
-              .text-right
-                = link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "link"
 
             = f.submit t('views.users.sessions.new.connection'), class: "fr-btn fr-btn--lg"
 

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

@@ -3,17 +3,20 @@
 - content_for :footer do
   = render partial: 'root/footer'
 
-.container.devise-container
-  .one-column-centered
+.fr-container.fr-my-5w
+  .fr-grid-row.fr-grid-row--center
+    .fr-col-lg-6
       = devise_error_messages!
 
-    = form_for(resource, as: resource_name, url: password_path(resource_name), html: { class: 'form' }) do |f|
+      = form_for(resource, as: resource_name, url: password_path(resource_name)) do |f|
+        %fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'new-password-legend' } }
+          %legend.fr-fieldset__legend#new-password-legend
+            %h1.fr-h2= t('devise.passwords.new.forgot_your_password')
 
-      %h1= t('devise.passwords.new.forgot_your_password')
+          .fr-fieldset__element
+            %p.fr-text--sm= t('devise.passwords.new.send_me_reset_password_instructions')
 
-      %p.notice= t('devise.passwords.new.send_me_reset_password_instructions')
+          .fr-fieldset__element
+            = render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true })
 
-      = f.label :email, 'Email'
-      = f.email_field :email, autofocus: true
-
-      = f.submit t('devise.passwords.new.request_new_password'), class: 'fr-btn fr-btn--lg'
+        = f.submit t('devise.passwords.new.request_new_password'), class: 'fr-btn fr-btn--lg fr-mt-4w'

app/views/super_admins/sessions/new.html.haml

@@ -1,20 +1,22 @@
-.super-admin.flex.justify-center
-  %div
-    %h2.huge-title Espace Manager
-    .auth-form.sign-in-form
+.fr-container.fr-my-5w
+  .fr-grid-row.fr-grid-row--center
+    .fr-col-lg-6
+      %h1.fr-h2 Espace Manager
+      = devise_error_messages!
 
-      = form_for SuperAdmin.new, url: super_admin_session_path, html: { class: "form" } do |f|
-        %h1.fr-h2 Connectez-vous
+      = form_for SuperAdmin.new, url: super_admin_session_path do |f|
+        %fieldset.fr-mb-0.fr-fieldset
+          .fr-fieldset__element
+            = render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true })
 
-        = f.label :email, "Email"
-        = f.text_field :email, type: :email, autocomplete: 'username', autofocus: true
-
-        = f.label :password, "Mot de passe (#{PASSWORD_MIN_LENGTH} caractères minimum)"
-        = f.password_field :password, autocomplete: 'current-password'
+          .fr-fieldset__element
+            = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password' })
 
           - if SUPER_ADMIN_OTP_ENABLED
-          = f.label :otp_attempt, 'Code OTP (uniquement si vous avez déjà activé 2FA)'
-          = f.text_field :otp_attempt
+            .fr-fieldset__element
+              = render Dsfr::InputComponent.new(form: f, attribute: :otp_attempt, input_type: :number_field, opts: { inputmode: :numeric }, required: false)
 
-        %p= link_to "Mot de passe oublié ou réinitialisation 2FA ?", new_super_admin_password_path, class: "link"
-        = f.submit "Se connecter", class: "fr-btn fr-btn--lg"
+          .fr-fieldset__element
+            %p= link_to "Mot de passe oublié ou réinitialisation 2FA ?", new_super_admin_password_path, class: "link"
+
+        = f.submit t('views.users.sessions.new.connection'), class: "fr-btn fr-btn--lg"

config/locales/en.yml

@@ -491,7 +491,6 @@ en:
       sessions:
         new:
           sign_in: Sign in on %{application_name}
-          password: Password (minimum length %{min_length} characters)
           remember_me: Remember me
           reset_password: Forgot password?
           connection: Sign in
@@ -548,6 +547,7 @@ en:
         << : *default_attributes
       super_admin:
         << : *default_attributes
+        otp_attempt: 'OTP code (only if you have already activated 2FA)'
       procedure:
         zone: This procedure is run by
       champs:

config/locales/fr.yml

@@ -494,7 +494,6 @@ fr:
       sessions:
         new:
           sign_in: Connexion à %{application_name}
-          password: Mot de passe (%{min_length} caractères minimum)
           remember_me: Se souvenir de moi
           reset_password: Mot de passe oublié ?
           connection: Se connecter
@@ -552,6 +551,7 @@ fr:
         << : *default_attributes
       super_admin:
         << : *default_attributes
+        otp_attempt: 'Code OTP (uniquement si vous avez déjà activé 2FA)'
       procedure:
         zone: La démarche est mise en œuvre par
       champs:

config/locales/views/agent_connect/agent/fr.yml

@@ -18,4 +18,4 @@ fr:
         connect: Connectez-vous
         signin_with: "S’identifier avec"
         whats_agentconnect: 'Quʼest ce quʼAgentConnect ?'
-        pro_email: Email professionnel
+        pro_email: Adresse électronique professionnelle

spec/system/users/brouillon_spec.rb

@@ -163,7 +163,6 @@ describe 'The user' do
 
     # Check a dossier can be submitted when all mandatory fields are filled
     fill_in('texte obligatoire', with: 'super texte')
-    wait_for_autosave
 
     click_on 'Déposer le dossier'
     wait_until { user_dossier.reload.en_construction? }

spec/system/users/managing_password_spec.rb

@@ -11,7 +11,7 @@ describe 'Managing password:', js: true, retry: 3 do
       click_on 'Mot de passe oublié ?'
       expect(page).to have_current_path(new_user_password_path)
 
-      fill_in 'Email', with: user.email
+      fill_in 'Adresse électronique', with: user.email
       perform_enqueued_jobs do
         click_on 'Demander un nouveau mot de passe'
       end
@@ -42,7 +42,7 @@ describe 'Managing password:', js: true, retry: 3 do
       click_on 'Mot de passe oublié ?'
       expect(page).to have_current_path(new_user_password_path)
 
-      fill_in 'Email', with: user.email
+      fill_in 'Adresse électronique', with: user.email
       perform_enqueued_jobs do
         click_on 'Demander un nouveau mot de passe'
       end
@@ -78,7 +78,7 @@ describe 'Managing password:', js: true, retry: 3 do
       click_on 'Mot de passe oublié'
       expect(page).to have_current_path(new_super_admin_password_path)
 
-      fill_in 'Email', with: super_admin.email
+      fill_in 'Adresse électronique', with: super_admin.email
       perform_enqueued_jobs do
         click_on 'Demander un nouveau mot de passe'
       end