diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss index 1423c8086..d05bade9f 100644 --- a/app/assets/stylesheets/dsfr.scss +++ b/app/assets/stylesheets/dsfr.scss @@ -256,3 +256,9 @@ button.fr-tag-bug { .fr-toggle label[data-fr-unchecked-label][data-fr-checked-label]::before { word-wrap: normal; } + +// We use the DSFR badge design to highlight the email in France Connect page +// but we don't want it to be uppercase +.fr-badge--lowercase { + text-transform: lowercase; +} diff --git a/app/views/france_connect/particulier/choose_email.html.haml b/app/views/france_connect/particulier/choose_email.html.haml index d1e6d9467..018d51b39 100644 --- a/app/views/france_connect/particulier/choose_email.html.haml +++ b/app/views/france_connect/particulier/choose_email.html.haml @@ -1,40 +1,43 @@ -.fr-container - %h1.text-center.mt-1= t('.choose_email_contact') +.fr-container.fr-my-5w + .fr-grid-row.fr-col-offset-md-2.fr-col-md-8 + .fr-col-12 - %p= t('.intro_html', email: @fci.email_france_connect) + %h1.text-center.mt-1= t('.choose_email_contact') - %p= t('.use_email_for_notifications') + %p= t('.intro_html', email: @fci.email_france_connect) - .fr-fieldset.fr-w-30v.fr-mt-2w - = form_with url: france_connect_particulier_merge_using_fc_email_path(merge_token: @fci.merge_token), method: :post, data: { controller: 'email-france-connect' } do |f| - = hidden_field_tag :merge_token, @fci.merge_token + %p= t('.use_email_for_notifications') %fieldset.fr-fieldset - %legend.fr-fieldset__legend - .fr-fieldset__element - .fr-radio-group - = f.radio_button :use_france_connect_email, true, id: 'use_france_connect_email_yes', class: 'fr-radio', required: true, data: { action: "email-france-connect#triggerEmailField", email_france_connect_target: "useFranceConnectEmail" } - %label.fr-label.fr-text--wrap{ for: 'use_france_connect_email_yes' } - = t('.keep_fc_email_html', email: h(@fci.email_france_connect)).html_safe - .fr-fieldset__element - .fr-radio-group - = f.radio_button :use_france_connect_email, false, id: 'use_france_connect_email_no', class: 'fr-radio', required: true, data: { action: "email-france-connect#triggerEmailField", email_france_connect_target: "useFranceConnectEmail" } - %label.fr-label.fr-text--wrap{ for: 'use_france_connect_email_no' } - = t('.use_another_email') + = form_with url: france_connect_particulier_merge_using_fc_email_path(merge_token: @fci.merge_token), method: :post, data: { controller: 'email-france-connect' } do |f| + = hidden_field_tag :merge_token, @fci.merge_token - .fr-fieldset__element.fr-fieldset__element--inline.hidden{ aria: { hidden: true }, data: { email_france_connect_target: "emailField", controller: 'email-input', email_input_url_value: show_email_suggestions_path } } - = f.label :email, t('.alternative_email'), class: "fr-label" - %span.fr-hint-text.mb-1= t('activerecord.attributes.user.hints.email') - = f.email_field :email, class: "fr-input" + %fieldset.fr-fieldset + %legend.fr-fieldset__legend + .fr-fieldset__element + .fr-radio-group + = f.radio_button :use_france_connect_email, true, id: 'use_france_connect_email_yes', class: 'fr-radio', required: true, data: { action: "email-france-connect#triggerEmailField", email_france_connect_target: "useFranceConnectEmail" } + %label.fr-label.fr-text--wrap{ for: 'use_france_connect_email_yes' } + = t('.keep_fc_email_html', email: h(@fci.email_france_connect)).html_safe + .fr-fieldset__element + .fr-radio-group + = f.radio_button :use_france_connect_email, false, id: 'use_france_connect_email_no', class: 'fr-radio', required: true, data: { action: "email-france-connect#triggerEmailField", email_france_connect_target: "useFranceConnectEmail" } + %label.fr-label.fr-text--wrap{ for: 'use_france_connect_email_no' } + = t('.use_another_email') - .suspect-email.hidden{ data: { "email-input-target": 'ariaRegion'}, aria: { live: 'off' } } - = render Dsfr::AlertComponent.new(title: t('utils.email_suggest.wanna_say'), state: :info, heading_level: :div) do |c| - - c.with_body do - %p{ data: { "email-input-target": 'suggestion'} } exemple@gmail.com  ? - %p - = button_tag type: 'button', class: 'fr-btn fr-btn--sm fr-mr-3w', data: { action: 'click->email-input#accept'} do - = t('utils.yes') - = button_tag type: 'button', class: 'fr-btn fr-btn--sm', data: { action: 'click->email-input#discard'} do - = t('utils.no') - %div - = f.submit t('.confirm'), class: 'fr-btn' + .fr-fieldset__element.fr-fieldset__element--inline.hidden{ aria: { hidden: true }, data: { email_france_connect_target: "emailField", controller: 'email-input', email_input_url_value: show_email_suggestions_path } } + = f.label :email, t('.alternative_email'), class: "fr-label" + %span.fr-hint-text.mb-1= t('activerecord.attributes.user.hints.email') + = f.email_field :email, class: "fr-input" + + .suspect-email.hidden{ data: { "email-input-target": 'ariaRegion'}, aria: { live: 'off' } } + = render Dsfr::AlertComponent.new(title: t('utils.email_suggest.wanna_say'), state: :info, heading_level: :div) do |c| + - c.with_body do + %p{ data: { "email-input-target": 'suggestion'} } exemple@gmail.com  ? + %p + = button_tag type: 'button', class: 'fr-btn fr-btn--sm fr-mr-3w', data: { action: 'click->email-input#accept'} do + = t('utils.yes') + = button_tag type: 'button', class: 'fr-btn fr-btn--sm', data: { action: 'click->email-input#discard'} do + = t('utils.no') + %div + = f.submit t('.confirm'), class: 'fr-btn' diff --git a/config/locales/en.yml b/config/locales/en.yml index fc854332a..fe4a03eb4 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -883,7 +883,7 @@ en: france_connect: particulier: choose_email: - intro_html: "Your FranceConnect account uses %{email} as the contact email." + intro_html: "Your FranceConnect account uses %{email} as the contact email." use_email_for_notifications: "Would you like to use it to receive notifications regarding the progress of your cases?" confirm: "Confirm" choose_email_contact: "Choose your contact email" @@ -892,7 +892,7 @@ en: use_another_email: No, use another address. confirmation_sent: confirmation_sent_by_email: "Confirm your email" - intro_html: "A confirmation email has been sent to your address %{email}" + intro_html: "A confirmation email has been sent to your address %{email}" click_the_link_in_the_email: "Please click the link in the email to confirm your account and connect with France Connect in the future." continue: "Continue" merge: diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 858771fe1..03ad58968 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -935,7 +935,7 @@ fr: france_connect: particulier: choose_email: - intro_html: "Votre compte FranceConnect utilise %{email} comme email de contact." + intro_html: "Votre compte FranceConnect utilise %{email} comme email de contact." use_email_for_notifications: Souhaitez-vous l'utiliser pour recevoir les notifications concernant l'avancement de vos dossiers ? confirm: Confirmer choose_email_contact: Choisissez votre email de contact pour finaliser votre connexion @@ -946,7 +946,7 @@ fr: wanna_say: 'Voulez-vous dire ?' confirmation_sent: confirmation_sent_by_email: Confirmez votre email - intro_html: "Un mail de confirmation a été envoyé à votre adresse %{email}" + intro_html: "Un mail de confirmation a été envoyé à votre adresse %{email}" click_the_link_in_the_email: Vous devez impérativement cliquer sur le lien du mail pour activer votre adresse et recevoir les notifications sur l'avancement de vos dossiers. continue: Continuer merge: