feat(france_connect#choose_email): prevent bad email

app/views/france_connect/particulier/choose_email.html.haml

@@ -15,18 +15,29 @@
         .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{ for: 'use_france_connect_email_yes' }
-            = t('.yes')
+            = t('utils.yes')
       .fr-fieldset__element.fr-fieldset__element--inline
         .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{ for: 'use_france_connect_email_no' }
-            = t('.no')
+            = t('utils.no')
 
     .fr-fieldset.fr-w-30v
-      .fr-fieldset__element.fr-fieldset__element--inline.fr-hidden{ data: { email_france_connect_target: "emailField" } }
+      .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 :alternative_email, t('.alternative_email'), class: "fr-label"
         %span.fr-hint-text.mb-1= t('activerecord.attributes.user.hints.email')
-        = f.email_field :alternative_email, class: "fr-input"
+        = f.email_field :alternative_email, class: "fr-input", data: { action: "blur->email-input#checkEmail", 'email-input-target': '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'

config/locales/en.yml

@@ -47,6 +47,9 @@ en:
   utils:
     'yes': 'Yes'
     'no': 'No'
+    email_suggest:
+      wanna_say: 'Do you mean to say ?'
+
     deconnexion: "Log out"
     pj: "Attachments"
     asterisk_html: "Fields marked by an asterisk ( <svg aria-label='required' class='icon mandatory' height='10' role='img' viewBox='0 0 1200 1200' width='10' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><desc>required</desc><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'></path></svg> ) are mandatory."
@@ -884,8 +887,6 @@ en:
       choose_email:
         intro_html: "Your FranceConnect account uses <b class='bold'>%{email}</b>r as the contact email."
         use_email_for_notifications: "Would you like to use it to receive notifications regarding the progress of your cases?"
-        'yes': "Yes"
-        'no': "No"
         confirm: "Confirm"
         choose_email_contact: "Choose your contact email"
         alternative_email: "Please provide the email to use for contacting you."

config/locales/fr.yml

@@ -37,6 +37,9 @@ fr:
   utils:
     'yes': Oui
     'no': Non
+    email_suggest:
+      wanna_say: 'Voulez-vous dire ?'
+
     i_dont_know: Je ne sais pas
     deconnexion: "Déconnexion"
     pj: "Pièces jointes"
@@ -938,12 +941,12 @@ fr:
       choose_email:
         intro_html: "Votre compte FranceConnect utilise <b class='bold'>%{email}</b> comme email de contact."
         use_email_for_notifications: Souhaitez-vous l'utiliser pour recevoir les notifications concernant l'avancement de vos dossiers ?
-        'yes': Oui
-        'no': Non
         confirm: Confirmer
         choose_email_contact: Choisissez votre e-mail de contact
         alternative_email: Veuillez nous fournir l'email à utiliser pour vous contacter.
         greetings: Bonjour,
+        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}