diff --git a/app/javascript/controllers/email_france_connect_controller.ts b/app/javascript/controllers/email_france_connect_controller.ts index 6512c4982..1321baea0 100644 --- a/app/javascript/controllers/email_france_connect_controller.ts +++ b/app/javascript/controllers/email_france_connect_controller.ts @@ -3,7 +3,7 @@ import { ApplicationController } from './application_controller'; export class EmailFranceConnectController extends ApplicationController { static targets = ['useFranceConnectEmail', 'emailField']; - emailFieldTarget!: HTMLInputElement; + emailFieldTarget!: HTMLElement; useFranceConnectEmailTargets!: HTMLInputElement[]; connect() { @@ -16,13 +16,12 @@ export class EmailFranceConnectController extends ApplicationController { ); const inputElement = this.emailFieldTarget.querySelector( - 'input' + 'input[type="email"]' ) as HTMLInputElement; if (checkedTarget && checkedTarget.value === 'false') { this.emailFieldTarget.classList.remove('fr-hidden'); inputElement.setAttribute('required', ''); - this.emailFieldTarget.required = true; } else { this.emailFieldTarget.classList.add('fr-hidden'); inputElement.removeAttribute('required'); diff --git a/app/views/france_connect/particulier/choose_email.html.haml b/app/views/france_connect/particulier/choose_email.html.haml index 2ef702263..5ca731009 100644 --- a/app/views/france_connect/particulier/choose_email.html.haml +++ b/app/views/france_connect/particulier/choose_email.html.haml @@ -1,26 +1,31 @@ .fr-container %h1.text-center.mt-1= t('.choose_email_contact') - %p= t('.greetings') - %p= t('.intro_html', email: @fci.email_france_connect) %p= t('.use_email_for_notifications') - = button_to t('utils.yes'), - france_connect_particulier_merge_using_fc_email_path, - params: { merge_token: @fci.merge_token }, - class: 'fr-btn', - id: 'use_fc_email' - .fr-fieldset.fr-w-30v.fr-mt-2w - = form_with url: france_connect_particulier_send_email_merge_request_path do |f| + = 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{ data: { email_france_connect_target: "emailField", controller: 'email-input', email_input_url_value: show_email_suggestions_path } } + %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: @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') + + .fr-fieldset__element.fr-fieldset__element--inline.fr-hidden{ 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", data: { action: "blur->email-input#checkEmail", 'email-input-target': 'input' } + = 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| diff --git a/app/views/france_connect/particulier/confirmation_sent.html.haml b/app/views/france_connect/particulier/confirmation_sent.html.haml index 23ef74732..dcd907b61 100644 --- a/app/views/france_connect/particulier/confirmation_sent.html.haml +++ b/app/views/france_connect/particulier/confirmation_sent.html.haml @@ -6,7 +6,7 @@ = render Dsfr::AlertComponent.new(title: '', state: :info, heading_level: 'h2', extra_class_names: 'fr-mt-6w fr-mb-3w') do |c| - c.with_body do - %p= t('.intro', email: email) + %p= t('.intro_html', email: email).html_safe %p= t('.click_the_link_in_the_email') %p.center= link_to t('.continue'), destination_path, class: 'fr-btn' diff --git a/config/locales/en.yml b/config/locales/en.yml index e1fe7e4c6..7ff258eb5 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -886,15 +886,16 @@ en: france_connect: particulier: choose_email: - intro_html: "Your FranceConnect account uses %{email}r 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" alternative_email: "Please provide the email to use for contacting you." - greetings: "Hello," + keep_fc_email_html: Yes, use %{email} as contact email. + use_another_email: No, use another address. confirmation_sent: - confirmation_sent_by_email: "Confirmation sent by email" - intro: "A confirmation email has been sent to your address %{email}" + confirmation_sent_by_email: "Confirm your 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 34e1f9bd7..f51fbe328 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -939,17 +939,18 @@ 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 e-mail de contact + choose_email_contact: Choisissez votre email de contact pour finaliser votre connexion alternative_email: Veuillez nous fournir l'email à utiliser pour vous contacter. - greetings: Bonjour, + keep_fc_email_html: "Oui, utiliser %{email} comme email de contact." + use_another_email: Non, utiliser une autre adresse. email_suggest: wanna_say: 'Voulez-vous dire ?' confirmation_sent: - confirmation_sent_by_email: Confirmation envoyée par mail - intro: Un mail de confirmation a été envoyé à votre adresse %{email} + confirmation_sent_by_email: Confirmez votre 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: