Merge pull request #11073 from demarches-simplifiees/confirm_FC_email

ETQ Usager, mon email est dit fiable lorsque qu'il provient de FC et que je l'ai visuellement vérifié
demarches-simplifiees · Dec 13, 2024 · 3ee386e · 3ee386e
2 parents f839f5a + 7b02aeb
commit 3ee386e
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 125 deletions.
diff --git a/app/controllers/france_connect/particulier_controller.rb b/app/controllers/france_connect/particulier_controller.rb
@@ -59,12 +59,11 @@ def send_email_merge_request
 
   def merge_using_fc_email
     @fci.safely_associate_user!(@fci.email_france_connect)
+    @fci.user.update!(email_verified_at: Time.current)
 
     sign_in(@fci.user)
 
-    @fci.send_custom_confirmation_instructions
-
-    render :confirmation_sent, locals: { email: @fci.email_france_connect, destination_path: destination_path(@fci.user) }
+    redirect_to destination_path(@fci.user), notice: t('france_connect.particulier.flash.connection_done', application_name: Current.application_name)
   end
 
   def merge_using_password

diff --git a/app/javascript/controllers/email_france_connect_controller.ts b/app/javascript/controllers/email_france_connect_controller.ts
@@ -1,33 +1,63 @@
 import { ApplicationController } from './application_controller';
 
 export class EmailFranceConnectController extends ApplicationController {
-  static targets = ['useFranceConnectEmail', 'emailField'];
+  static targets = [
+    'useFranceConnectEmail',
+    'emailField',
+    'submit',
+    'emailInput',
+    'form'
+  ];
 
   emailFieldTarget!: HTMLElement;
   useFranceConnectEmailTargets!: HTMLInputElement[];
+  submitTarget!: HTMLButtonElement;
+  emailInputTarget!: HTMLInputElement;
+  formTarget!: HTMLFormElement;
 
-  connect() {
-    this.triggerEmailField();
-  }
+  fcEmailPathValue!: string;
+  customEmailPathValue!: string;
+
+  static values = {
+    fcEmailPath: String,
+    customEmailPath: String
+  };
 
   triggerEmailField() {
-    const checkedTarget = this.useFranceConnectEmailTargets.find(
-      (target) => target.checked
-    );
+    if (this.useFCEmail()) {
+      this.emailFieldTarget.classList.add('hidden');
+      this.emailFieldTarget.setAttribute('aria-hidden', 'true');
 
-    const inputElement = this.emailFieldTarget.querySelector(
-      'input[type="email"]'
-    ) as HTMLInputElement;
+      this.emailInputTarget.removeAttribute('required');
+      this.emailInputTarget.value = '';
 
-    if (checkedTarget && checkedTarget.value === 'false') {
+      this.formTarget.action = this.fcEmailPathValue;
+    } else {
       this.emailFieldTarget.classList.remove('hidden');
       this.emailFieldTarget.setAttribute('aria-hidden', 'false');
-      inputElement.setAttribute('required', '');
+
+      this.emailInputTarget.setAttribute('required', '');
+
+      this.formTarget.action = this.customEmailPathValue;
+    }
+  }
+
+  triggerSubmitDisabled() {
+    if (this.useFCEmail() || this.isEmailInputFilled()) {
+      this.submitTarget.disabled = false;
     } else {
-      this.emailFieldTarget.classList.add('hidden');
-      this.emailFieldTarget.setAttribute('aria-hidden', 'true');
-      inputElement.removeAttribute('required');
-      inputElement.value = '';
+      this.submitTarget.disabled = true;
     }
   }
+
+  useFCEmail() {
+    return (
+      this.useFranceConnectEmailTargets.find((target) => target.checked)
+        ?.value === 'true' || false
+    );
+  }
+
+  isEmailInputFilled() {
+    return this.emailInputTarget.value.length > 0;
+  }
 }
diff --git a/app/views/france_connect/particulier/choose_email.html.haml b/app/views/france_connect/particulier/choose_email.html.haml
@@ -9,26 +9,52 @@
       %p= t('.use_email_for_notifications')
 
       %fieldset.fr-fieldset
-        = 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|
+        = form_with url: france_connect_particulier_merge_using_fc_email_path,
+          method: :post,
+          data: { controller: 'email-france-connect',
+            email_france_connect_fc_email_path_value: france_connect_particulier_merge_using_fc_email_path,
+            email_france_connect_custom_email_path_value: france_connect_particulier_send_email_merge_request_path,
+            email_france_connect_target: "form" } do |f|
+
           = hidden_field_tag :merge_token, @fci.merge_token
 
           %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" }
+                = 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#triggerSubmitDisabled",
+                  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
+                  = t('.keep_fc_email_html', email: h(@fci.email_france_connect))
+
             .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" }
+                = 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#triggerSubmitDisabled", 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.hidden{ aria: { hidden: true }, data: { email_france_connect_target: "emailField", controller: 'email-input', email_input_url_value: show_email_suggestions_path } }
+            .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"
+              = f.email_field :email,
+                data: { action: "email-france-connect#triggerSubmitDisabled", email_france_connect_target: "emailInput" },
+                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|
@@ -40,4 +66,7 @@
                       = 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'
+            = f.submit t('.confirm'),
+              class: 'fr-btn',
+              data: { email_france_connect_target: "submit" },
+              disabled: true
diff --git a/app/views/france_connect/particulier/confirmation_sent.html.haml b/app/views/france_connect/particulier/confirmation_sent.html.haml
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -888,11 +888,6 @@ en:
         alternative_email: "Please provide the email to use for contacting you."
         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: "Confirm your email"
-        intro_html: "A confirmation email has been sent to your address <span class='fr-badge fr-badge--info fr-badge--no-icon fr-badge--lowercase'>%{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:
         title: "Merge your account FranceConnect and %{application_name}"
         subtitle_html: "Hello,<br /><br />Your account FranceConnect uses <b class='bold'>%{email}</b> as contact email.<br />But there is an existing %{application_name} account using this email."