From c51cf7e04896c857f63c0cc4ae2c95de5197f88a Mon Sep 17 00:00:00 2001 From: Kara Diaby Date: Mon, 1 Jul 2024 14:38:47 +0000 Subject: [PATCH] Layout : ajoute les vues pour confirmer le mail fc ou en choisir un autre --- .../email_france_connect_controller.ts | 32 +++++++++++++++++ .../particulier/choose_email.html.haml | 34 +++++++++++++++++++ .../particulier/confirmation_sent.html.haml | 8 +++++ .../particulier/merge.html.haml | 27 ++++++++------- .../particulier/resend_confirmation.html.haml | 11 ++++++ ...custom_confirmation_instructions.html.haml | 22 ++++++++++++ 6 files changed, 121 insertions(+), 13 deletions(-) create mode 100644 app/javascript/controllers/email_france_connect_controller.ts create mode 100644 app/views/france_connect/particulier/choose_email.html.haml create mode 100644 app/views/france_connect/particulier/confirmation_sent.html.haml create mode 100644 app/views/france_connect/particulier/resend_confirmation.html.haml create mode 100644 app/views/user_mailer/custom_confirmation_instructions.html.haml diff --git a/app/javascript/controllers/email_france_connect_controller.ts b/app/javascript/controllers/email_france_connect_controller.ts new file mode 100644 index 000000000..6512c4982 --- /dev/null +++ b/app/javascript/controllers/email_france_connect_controller.ts @@ -0,0 +1,32 @@ +import { ApplicationController } from './application_controller'; + +export class EmailFranceConnectController extends ApplicationController { + static targets = ['useFranceConnectEmail', 'emailField']; + + emailFieldTarget!: HTMLInputElement; + useFranceConnectEmailTargets!: HTMLInputElement[]; + + connect() { + this.triggerEmailField(); + } + + triggerEmailField() { + const checkedTarget = this.useFranceConnectEmailTargets.find( + (target) => target.checked + ); + + const inputElement = this.emailFieldTarget.querySelector( + 'input' + ) 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'); + inputElement.value = ''; + } + } +} diff --git a/app/views/france_connect/particulier/choose_email.html.haml b/app/views/france_connect/particulier/choose_email.html.haml new file mode 100644 index 000000000..f72f970dc --- /dev/null +++ b/app/views/france_connect/particulier/choose_email.html.haml @@ -0,0 +1,34 @@ +.fr-container + %h1.text-center.mt-1= t('.choose_email_contact') + + %p= t('.greetings') + + %p= t('.intro_html', email: france_connect_email) + + %p= t('.use_email_for_notifications') + + = form_with url: france_connect_particulier_associate_user_path, method: :post, data: { controller: "email-france-connect" } do |f| + = hidden_field_tag :france_connect_email, france_connect_email + = hidden_field_tag :merge_token, merge_token + + %fieldset.fr-fieldset + %legend.fr-fieldset__legend + .fr-fieldset__element.fr-fieldset__element--inline + .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') + .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') + + .fr-fieldset.fr-w-30v + .fr-fieldset__element.fr-fieldset__element--inline.fr-hidden{ data: { email_france_connect_target: "emailField" } } + = 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" + + %div + = f.submit t('.confirm'), class: 'fr-btn' diff --git a/app/views/france_connect/particulier/confirmation_sent.html.haml b/app/views/france_connect/particulier/confirmation_sent.html.haml new file mode 100644 index 000000000..d167d2b01 --- /dev/null +++ b/app/views/france_connect/particulier/confirmation_sent.html.haml @@ -0,0 +1,8 @@ +.fr-container + %h1.text-center.mt-1= t('.confirmation_sent_by_email') + + %p= t('.intro', email: email) + + %p= t('.click_the_link_in_the_email') + + = link_to t('.continue'), destination_path, class: 'fr-btn' diff --git a/app/views/france_connect/particulier/merge.html.haml b/app/views/france_connect/particulier/merge.html.haml index 0d7b98f3a..b7dcd4b40 100644 --- a/app/views/france_connect/particulier/merge.html.haml +++ b/app/views/france_connect/particulier/merge.html.haml @@ -1,20 +1,21 @@ = content_for :title, "Fusion des comptes FC et #{Current.application_name}" -.container +.fr-container %h1.page-title= t('.title', application_name: Current.application_name) %p= t('.subtitle_html', email: @fci.email_france_connect, application_name: Current.application_name) - .form.mt-2 - %label= t('.label_select_merge_flow', email: @fci.email_france_connect) - %fieldset.radios - %label{ onclick: "DS.showFusion(event);" } - = radio_button_tag :value, true, false, autocomplete: "off", id: 'it-is-mine' - = t('utils.yes') + %fieldset.fr-fieldset + %legend.fr-fieldset__legend= t('.label_select_merge_flow', email: @fci.email_france_connect) + .fr-fieldset__element.fr-fieldset__element--inline + .fr-radio-group + %input{ type: 'radio', id: 'it-is-mine', name: 'value', value: 'true', autocomplete: "off", onclick: "DS.showFusion(event);" } + %label{ for: 'it-is-mine' }= t('utils.yes') + .fr-fieldset__element.fr-fieldset__element--inline + .fr-radio-group + %input{ type: 'radio', id: 'it-is-not-mine', name: 'value', value: 'false', autocomplete: "off", onclick: "DS.showNewAccount(event);" } + %label{ for: 'it-is-not-mine' }= t('utils.no') - %label{ onclick: "DS.showNewAccount(event);" } - = radio_button_tag :value, false, false, autocomplete: "off", id: 'it-is-not-mine' - = t('utils.no') .fusion.hidden %p= t('.title_fill_in_password') @@ -38,9 +39,9 @@ = form_tag france_connect_particulier_merge_with_new_account_path, data: { turbo: true }, class: 'mt-2 form' do = hidden_field_tag :merge_token, @fci.merge_token, id: dom_id(@fci, :new_account_merge_token) - = label_tag :email, t('views.registrations.new.email_label'), for: dom_id(@fci, :new_account_email) - = email_field_tag :email, "", required: true, id: dom_id(@fci, :new_account_email) - = submit_tag t('.button_use_this_email'), class: 'button primary' + = label_tag :email, t('views.registrations.new.email_label'), for: dom_id(@fci, :new_account_email), class: 'fr-label' + = email_field_tag :email, "", required: true, id: dom_id(@fci, :new_account_email), class: 'mb-1 fr-input' + = submit_tag t('.button_use_this_email'), class: 'fr-btn' #new-account-password-confirmation.hidden diff --git a/app/views/france_connect/particulier/resend_confirmation.html.haml b/app/views/france_connect/particulier/resend_confirmation.html.haml new file mode 100644 index 000000000..bc03ca5c7 --- /dev/null +++ b/app/views/france_connect/particulier/resend_confirmation.html.haml @@ -0,0 +1,11 @@ +.fr-container + %h1.text-center.mt-1 Renvoyer le lien de confirmation + + %p Bonjour #{@user.email} + + %p Cliquez sur le bouton ci-dessous pour recevoir un nouveau lien de confirmation à votre adresse email. + + = form_with url: france_connect_post_resend_confirmation_path, method: :post, local: true do |form| + = form.hidden_field :token, value: @user.confirmation_token + .form-group + = form.submit "Renvoyer le lien de confirmation", class: 'fr-btn' diff --git a/app/views/user_mailer/custom_confirmation_instructions.html.haml b/app/views/user_mailer/custom_confirmation_instructions.html.haml new file mode 100644 index 000000000..c9ac6a792 --- /dev/null +++ b/app/views/user_mailer/custom_confirmation_instructions.html.haml @@ -0,0 +1,22 @@ +- content_for(:title, 'Confirmez votre email') +%p + Bonjour + = @user.email + ! + +%p + Veuillez confirmer votre email en cliquant sur le lien ci-dessous: + = round_button 'Je confirme', france_connect_confirm_email_url(@token), :primary + + +%p Ce lien est valide #{distance_of_time_in_words(FranceConnectInformation::CONFIRMATION_EMAIL_VALIDITY)}. + +%p + Tant que vous n'aurez pas confirmé votre email, vous ne recevrez aucune notification sur l'avancement de vos dossiers. + +%p + Si vous n’êtes pas à l’origine de cette demande, vous pouvez ignorer ce message. Et si vous avez besoin d’assistance, n’hésitez pas à nous contacter à + = succeed '.' do + = mail_to CONTACT_EMAIL + += render partial: "layouts/mailers/signature"