DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

UX: change submit disabled state

Browse source
This commit is contained in:
simon lehericey 2024-11-22 16:54:21 +01:00
parent 016e9357e1
commit 4cd6e08a3d
No known key found for this signature in database
GPG key ID: CDE670D827C7B3C5
2 changed files with 49 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
app/javascript/controllers/email_france_connect_controller.ts
View file

@ -1,29 +1,43 @@
import { ApplicationController } from './application_controller'; import { ApplicationController } from './application_controller';
export class EmailFranceConnectController extends ApplicationController { export class EmailFranceConnectController extends ApplicationController {
static targets = ['useFranceConnectEmail', 'emailField']; static targets = ['useFranceConnectEmail', 'emailField', 'submit', 'emailInput'];
emailFieldTarget!: HTMLElement; emailFieldTarget!: HTMLElement;
useFranceConnectEmailTargets!: HTMLInputElement[]; useFranceConnectEmailTargets!: HTMLInputElement[];
submitTarget!: HTMLButtonElement;
emailInputTarget!: HTMLInputElement;
triggerEmailField() { triggerEmailField() {
const checkedTarget = this.useFranceConnectEmailTargets.find( if (this.useFCEmail()) {
(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 {
this.emailFieldTarget.classList.add('hidden'); this.emailFieldTarget.classList.add('hidden');
this.emailFieldTarget.setAttribute('aria-hidden', 'true'); 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;
}
} }

24
app/views/france_connect/particulier/choose_email.html.haml
View file

@ -23,7 +23,8 @@
id: 'use_france_connect_email_yes', id: 'use_france_connect_email_yes',
class: 'fr-radio', class: 'fr-radio',
required: true, 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' } %label.fr-label.fr-text--wrap{ for: 'use_france_connect_email_yes' }
= t('.keep_fc_email_html', email: h(@fci.email_france_connect)) = t('.keep_fc_email_html', email: h(@fci.email_france_connect))
@ -33,14 +34,24 @@
id: 'use_france_connect_email_no', id: 'use_france_connect_email_no',
class: 'fr-radio', class: 'fr-radio',
required: true, 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' } %label.fr-label.fr-text--wrap{ for: 'use_france_connect_email_no' }
= t('.use_another_email') = 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" = f.label :email, t('.alternative_email'), class: "fr-label"
%span.fr-hint-text.mb-1= t('activerecord.attributes.user.hints.email') %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' } } .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| = 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 = button_tag type: 'button', class: 'fr-btn fr-btn--sm', data: { action: 'click->email-input#discard'} do
= t('utils.no') = t('utils.no')
%div %div
= f.submit t('.confirm'), class: 'fr-btn' = f.submit t('.confirm'),
class: 'fr-btn',
data: { email_france_connect_target: "submit" },
disabled: true