From 4cd6e08a3d0ab5ab80fc3589873990838eb3eafa Mon Sep 17 00:00:00 2001
From: simon lehericey <mail@simon.lehericey.net>
Date: Fri, 22 Nov 2024 16:54:21 +0100
Subject: [PATCH] UX: change submit disabled state

---
 .../email_france_connect_controller.ts        | 46 ++++++++++++-------
 .../particulier/choose_email.html.haml        | 24 ++++++++--
 2 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/app/javascript/controllers/email_france_connect_controller.ts b/app/javascript/controllers/email_france_connect_controller.ts
index 173d1798a..7fe74cee5 100644
--- a/app/javascript/controllers/email_france_connect_controller.ts
+++ b/app/javascript/controllers/email_france_connect_controller.ts
@@ -1,29 +1,43 @@
 import { ApplicationController } from './application_controller';
 
 export class EmailFranceConnectController extends ApplicationController {
-  static targets = ['useFranceConnectEmail', 'emailField'];
+  static targets = ['useFranceConnectEmail', 'emailField', 'submit', 'emailInput'];
 
   emailFieldTarget!: HTMLElement;
   useFranceConnectEmailTargets!: HTMLInputElement[];
+  submitTarget!: HTMLButtonElement;
+  emailInputTarget!: HTMLInputElement;
 
   triggerEmailField() {
-    const checkedTarget = this.useFranceConnectEmailTargets.find(
-      (target) => target.checked
-    );
-
-    const inputElement = this.emailFieldTarget.querySelector(
-      'input[type="email"]'
-    ) as HTMLInputElement;
-
-    if (checkedTarget && checkedTarget.value === 'false') {
-      this.emailFieldTarget.classList.remove('hidden');
-      this.emailFieldTarget.setAttribute('aria-hidden', 'false');
-      inputElement.setAttribute('required', '');
-    } else {
+    if (this.useFCEmail()) {
       this.emailFieldTarget.classList.add('hidden');
       this.emailFieldTarget.setAttribute('aria-hidden', 'true');
-      inputElement.removeAttribute('required');
-      inputElement.value = '';
+
+      this.emailInputTarget.removeAttribute('required');
+      this.emailInputTarget.value = '';
+    } else {
+      this.emailFieldTarget.classList.remove('hidden');
+      this.emailFieldTarget.setAttribute('aria-hidden', 'false');
+
+      this.emailInputTarget.setAttribute('required', '');
     }
   }
+
+  triggerSubmitDisabled() {
+    if (this.useFCEmail() || this.isEmailInputFilled()) {
+      this.submitTarget.disabled = false;
+    } else {
+      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
index ab7bca16f..da8ae565f 100644
--- a/app/views/france_connect/particulier/choose_email.html.haml
+++ b/app/views/france_connect/particulier/choose_email.html.haml
@@ -23,7 +23,8 @@
                   id: 'use_france_connect_email_yes',
                   class: 'fr-radio',
                   required: true,
-                  data: { action: "email-france-connect#triggerEmailField", email_france_connect_target: "useFranceConnectEmail" }
+                  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))
 
@@ -33,14 +34,24 @@
                   id: 'use_france_connect_email_no',
                   class: 'fr-radio',
                   required: true,
-                  data: { action: "email-france-connect#triggerEmailField", email_france_connect_target: "useFranceConnectEmail" }
+                  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|
@@ -52,4 +63,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