Fix choose email screen

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');

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|

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'

config/locales/en.yml

@@ -886,15 +886,16 @@ en:
   france_connect:
     particulier:
       choose_email:
-        intro_html: "Your FranceConnect account uses <b class='bold'>%{email}</b>r as the contact email."
+        intro_html: "Your FranceConnect account uses <span class='fr-badge fr-badge--info fr-badge--sm'>%{email}</span> 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 <b class='bold'>%{email}</b> as contact email.
+        use_another_email: No, use another address.
       confirmation_sent:
-        confirmation_sent_by_email: "Confirmation sent by email"
+        confirmation_sent_by_email: "Confirm your email"
-        intro: "A confirmation email has been sent to your address %{email}"
+        intro_html: "A confirmation email has been sent to your address <span class='fr-badge fr-badge--info fr-badge--sm'>%{email}</span>"
         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:

config/locales/fr.yml

@@ -939,17 +939,18 @@ fr:
   france_connect:
     particulier:
       choose_email:
-        intro_html: "Votre compte FranceConnect utilise <b class='bold'>%{email}</b> comme email de contact."
+        intro_html: "Votre compte FranceConnect utilise <span class='fr-badge fr-badge--info fr-badge--sm'>%{email}</span> 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
+        confirmation_sent_by_email: Confirmez votre email
-        intro: Un mail de confirmation a été envoyé à votre adresse %{email}
+        intro_html: Un mail de confirmation a été envoyé à votre adresse <span class='fr-badge fr-badge--info fr-badge--sm'>%{email}</span>
         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: