From 804f89f444d95f3d5fd4c8f24f6f09d7a355a3b3 Mon Sep 17 00:00:00 2001 From: Kara Diaby Date: Mon, 15 May 2023 14:54:07 +0200 Subject: [PATCH] =?UTF-8?q?Changements=20sur=20le=20caract=C3=A8re=20oblig?= =?UTF-8?q?atoire=20/=20facultatif=20et=20l'asterisque=20interface=20usage?= =?UTF-8?q?r=20et=20page=20de=20connexion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/assets/stylesheets/forms.scss | 1 + app/assets/stylesheets/icons.scss | 4 ++++ .../input_component/input_component.html.haml | 3 --- .../asterisk_mandatory_component.rb | 2 ++ .../asterisk_mandatory_component.en.yml | 2 ++ .../asterisk_mandatory_component.fr.yml | 2 ++ .../asterisk_mandatory_component.html.haml | 3 +++ .../champ_label_content_component.en.yml | 1 + .../champ_label_content_component.fr.yml | 3 ++- .../champ_label_content_component.html.haml | 9 ++++++--- .../checkbox_component.html.haml | 2 +- app/components/simple_format_component.rb | 4 ++-- app/views/support/index.html.haml | 2 +- app/views/users/registrations/new.html.haml | 2 +- app/views/users/sessions/new.html.haml | 2 +- config/locales/en.yml | 1 + config/locales/fr.yml | 3 ++- spec/system/users/brouillon_spec.rb | 20 +++++++++---------- 18 files changed, 42 insertions(+), 24 deletions(-) create mode 100644 app/components/editable_champ/asterisk_mandatory_component.rb create mode 100644 app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.en.yml create mode 100644 app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.fr.yml create mode 100644 app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.html.haml diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index a2f45af60..274679c69 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -17,6 +17,7 @@ color: $dark-grey; } + .mandatory { color: $dark-red; } diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index 8bf4fb12d..37c0a156a 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -173,4 +173,8 @@ &.move-handle { background-image: image-url("icons/move-handle.svg"); } + + &.mandatory { + width: 10px; + } } diff --git a/app/components/dsfr/input_component/input_component.html.haml b/app/components/dsfr/input_component/input_component.html.haml index 018def6af..5fb6b0615 100644 --- a/app/components/dsfr/input_component/input_component.html.haml +++ b/app/components/dsfr/input_component/input_component.html.haml @@ -2,11 +2,8 @@ = @form.label @attribute, label_opts do - capture do = label - - if @required - %span.mandatory  * - if hint? %span.fr-hint-text= hint - = @form.public_send(@input_type, @attribute, input_opts) - if errors_on_attribute? diff --git a/app/components/editable_champ/asterisk_mandatory_component.rb b/app/components/editable_champ/asterisk_mandatory_component.rb new file mode 100644 index 000000000..d71d395a0 --- /dev/null +++ b/app/components/editable_champ/asterisk_mandatory_component.rb @@ -0,0 +1,2 @@ +class EditableChamp::AsteriskMandatoryComponent < ApplicationComponent +end diff --git a/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.en.yml b/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.en.yml new file mode 100644 index 000000000..907c5b002 --- /dev/null +++ b/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.en.yml @@ -0,0 +1,2 @@ +en: + required: required diff --git a/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.fr.yml b/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.fr.yml new file mode 100644 index 000000000..7b0e090ee --- /dev/null +++ b/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.fr.yml @@ -0,0 +1,2 @@ +fr: + required: obligatoire diff --git a/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.html.haml b/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.html.haml new file mode 100644 index 000000000..fbea92374 --- /dev/null +++ b/app/components/editable_champ/asterisk_mandatory_component/asterisk_mandatory_component.html.haml @@ -0,0 +1,3 @@ +%svg.icon.mandatory{ xmlns: "http://www.w3.org/2000/svg", role: "img", 'aria-label': t('.required'), width: 10, height: 10, viewBox: "0 0 1200 1200", "xml:space" => "preserve" } + %desc= t('.required') + %path{ d: "M489.838 29.354v443.603L68.032 335.894 0 545.285l421.829 137.086-260.743 358.876 178.219 129.398L600.048 811.84l260.673 358.806 178.146-129.398-260.766-358.783L1200 545.379l-68.032-209.403-421.899 137.07V29.443H489.84l-.002-.089z" } diff --git a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.en.yml b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.en.yml index 052df2f89..9d642dd72 100644 --- a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.en.yml +++ b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.en.yml @@ -3,3 +3,4 @@ en: changes_to_save: "modifications to submit" modified_at: "modified on %{datetime}" check_content_rebased: The type of this field or its description has been modified by the administration. Check its content. + optional_champ: (optional) diff --git a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.fr.yml b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.fr.yml index 8ae8a9d06..0201f6140 100644 --- a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.fr.yml +++ b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.fr.yml @@ -2,4 +2,5 @@ fr: changes_to_save: "modification à déposer" modified_at: "modifié le %{datetime}" - check_content_rebased: Le type de ce champ ou sa description ont été modifiés par l’administration. Vérifier son contenu. + check_content_rebased: Le type de ce champ ou sa description ont été modifiés par l'administration. Vérifier son contenu. + optional_champ: (facultatif) diff --git a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml index 298c3a867..5aeff2c6b 100644 --- a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml +++ b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml @@ -1,6 +1,8 @@ -#{@champ.libelle} -- if @champ.mandatory? - %span.mandatory * += @champ.libelle +- if @champ.mandatory? && @champ.type_champ != "checkbox" + = render EditableChamp::AsteriskMandatoryComponent.new +- elsif !@champ.mandatory? + = "#{t('.optional_champ')}" - if @champ.forked_with_changes? %span.updated-at.highlighted @@ -9,6 +11,7 @@ %span.updated-at{ class: highlight_if_unseen_class } = t('.modified_at', datetime: try_format_datetime(@champ.updated_at)) + - if @champ.rebased_at.present? && @champ.rebased_at > (@seen_at || @champ.updated_at) && current_user.owns_or_invite?(@champ.dossier) %span.updated-at.highlighted = t('.check_content_rebased') diff --git a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml index a1e3b5e94..34e6a0a5a 100644 --- a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml +++ b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml @@ -1,4 +1,4 @@ = @form.check_box :value, - { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id } }, + { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, class: class_names('required' => @champ.required?)}, 'true', 'false' diff --git a/app/components/simple_format_component.rb b/app/components/simple_format_component.rb index 74819a002..ac3a061c6 100644 --- a/app/components/simple_format_component.rb +++ b/app/components/simple_format_component.rb @@ -28,8 +28,8 @@ class SimpleFormatComponent < ApplicationComponent @allow_a = allow_a @text = (text || "").gsub(/\R/, "\n\n") # force double \n otherwise a single one won't split paragraph - .split("\n\n") # - .map(&:lstrip) # this block prevent redcarpet to consider " text" as block code by lstriping + .split("\n\n") + .map(&:lstrip) # this block prevent redcarpet to consider " text" as block code by lstriping .join("\n\n") .gsub(EMAIL_IN_TEXT_REGEX) { _1.gsub('_', '\\_') } # Workaround for redcarpet bug on autolink email having _. Cf tests diff --git a/app/views/support/index.html.haml b/app/views/support/index.html.haml index e8101b974..01c05c156 100644 --- a/app/views/support/index.html.haml +++ b/app/views/support/index.html.haml @@ -13,7 +13,7 @@ .recommandations %h2 = t('.intro_html') - %p.mandatory-explanation= t('asterisk_html', scope: [:utils]) + %p.mandatory-explanation= t('mandatory_champs', scope: [:utils]) - if !user_signed_in? .fr-input-group diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml index e86419ad2..ac584b92c 100644 --- a/app/views/users/registrations/new.html.haml +++ b/app/views/users/registrations/new.html.haml @@ -13,7 +13,7 @@ %h2.fr-h6= I18n.t('views.registrations.new.subtitle') .fr-fieldset__element - %p.fr-text--sm= t('utils.asterisk_html') + %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 }) diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index 85247fc5e..2b33d5437 100644 --- a/app/views/users/sessions/new.html.haml +++ b/app/views/users/sessions/new.html.haml @@ -14,7 +14,7 @@ %h2.fr-h6= I18n.t('views.users.sessions.new.subtitle') .fr-fieldset__element - %p.fr-text--sm= t('utils.asterisk_html') + %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 }) diff --git a/config/locales/en.yml b/config/locales/en.yml index ad5e60bf4..e002d01d9 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -50,6 +50,7 @@ en: deconnexion: "Log out" pj: "Attachments" asterisk_html: Fields marked by an asterisk ( * ) are mandatory. + mandatory_champs: All fields are mandatory. file_number: File number subject: Subject message: Message diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 5b92f2555..869158552 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -40,7 +40,8 @@ fr: i_dont_know: Je ne sais pas deconnexion: "Déconnexion" pj: "Pièces jointes" - asterisk_html: Les champs suivis d’un astérisque ( * ) sont obligatoires. + asterisk_html: Les champs suivis d’un astérisque ( * ) sont obligatoires. + mandatory_champs: Tous les champs sont obligatoires. file_number: Numéro de dossier subject: Sujet message: Message diff --git a/spec/system/users/brouillon_spec.rb b/spec/system/users/brouillon_spec.rb index f5a8a89d1..bdddc6797 100644 --- a/spec/system/users/brouillon_spec.rb +++ b/spec/system/users/brouillon_spec.rb @@ -12,9 +12,9 @@ describe 'The user' do fill_individual # fill data - fill_in('text *', with: 'super texte') + fill_in('text', with: 'super texte', match: :first) fill_in('textarea', with: 'super textarea') - fill_in('date *', with: '12-12-2012') + fill_in('date', with: '12-12-2012', match: :first) fill_in('datetime', with: Time.zone.parse('2023-01-06T07:05')) find("input[type=datetime-local]").send_keys(:arrow_up).send_keys(:arrow_down) # triggers onChange fill_in('number', with: '42') @@ -329,7 +329,7 @@ describe 'The user' do fill_individual - fill_in('age', with: 10) + fill_in('age (facultatif)', with: 10) click_on 'Déposer le dossier' expect(page).to have_current_path(merci_dossier_path(user_dossier)) end @@ -400,9 +400,9 @@ describe 'The user' do fill_individual - fill_in('age', with: '18') - expect(page).to have_css('label', text: 'nom *', visible: :visible) - + fill_in('age (facultatif)', with: '18') + expect(page).to have_css('label', text: 'nom', visible: :visible) + expect(page).to have_css('.icon.mandatory') click_on 'Déposer le dossier' expect(page).to have_current_path(brouillon_dossier_path(user_dossier)) end @@ -437,7 +437,7 @@ describe 'The user' do expect(page).to have_no_css('legend h2', text: 'info voiture', visible: true) expect(page).to have_no_css('label', text: 'tonnage', visible: true) - fill_in('age', with: '18') + fill_in('age (facultatif)', with: '18') expect(page).to have_css('label', text: 'permis de conduire', visible: true) expect(page).to have_css('legend h2', text: 'info voiture', visible: true) expect(page).to have_no_css('label', text: 'tonnage', visible: true) @@ -450,10 +450,10 @@ describe 'The user' do expect(page).to have_css('label', text: 'parking', visible: true) # try to fill with invalid data - fill_in('tonnage', with: 'a') + fill_in('tonnage (facultatif)', with: 'a') expect(page).to have_no_css('label', text: 'parking', visible: true) - fill_in('age', with: '2') + fill_in('age (facultatif)', with: '2') expect(page).to have_no_css('label', text: 'permis de conduire', visible: true) expect(page).to have_no_css('label', text: 'tonnage', visible: true) @@ -465,7 +465,7 @@ describe 'The user' do expect(page).to have_no_css('label', text: 'permis de conduire', visible: true) expect(page).to have_no_css('label', text: 'tonnage', visible: true) - fill_in('age', with: '18') + fill_in('age (facultatif)', with: '18') wait_for_autosave(false) # the champ keeps their previous value so they are all displayed