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

small design improvement for FC email page

Browse source
This commit is contained in:
Lisa Durand 2024-09-17 15:01:01 +02:00
parent c902061ebf
commit edc4f826f2
No known key found for this signature in database
GPG key ID: 0DF91F2CA1E8B816
4 changed files with 46 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/stylesheets/dsfr.scss
View file

@ -256,3 +256,9 @@ button.fr-tag-bug {
.fr-toggle label[data-fr-unchecked-label][data-fr-checked-label]::before { .fr-toggle label[data-fr-unchecked-label][data-fr-checked-label]::before {
word-wrap: normal; word-wrap: normal;
} }
// We use the DSFR badge design to highlight the email in France Connect page
// but we don't want it to be uppercase
.fr-badge--lowercase {
text-transform: lowercase;
}

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

@ -1,40 +1,43 @@
.fr-container .fr-container.fr-my-5w
%h1.text-center.mt-1= t('.choose_email_contact') .fr-grid-row.fr-col-offset-md-2.fr-col-md-8
.fr-col-12
%p= t('.intro_html', email: @fci.email_france_connect) %h1.text-center.mt-1= t('.choose_email_contact')
%p= t('.use_email_for_notifications') %p= t('.intro_html', email: @fci.email_france_connect)
.fr-fieldset.fr-w-30v.fr-mt-2w %p= t('.use_email_for_notifications')
= 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|
= hidden_field_tag :merge_token, @fci.merge_token
%fieldset.fr-fieldset %fieldset.fr-fieldset
%legend.fr-fieldset__legend = 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|
.fr-fieldset__element = hidden_field_tag :merge_token, @fci.merge_token
.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.fr-text--wrap{ for: 'use_france_connect_email_yes' }
= t('.keep_fc_email_html', email: h(@fci.email_france_connect)).html_safe
.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" }
%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 } } %fieldset.fr-fieldset
= f.label :email, t('.alternative_email'), class: "fr-label" %legend.fr-fieldset__legend
%span.fr-hint-text.mb-1= t('activerecord.attributes.user.hints.email') .fr-fieldset__element
= f.email_field :email, class: "fr-input" .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.fr-text--wrap{ for: 'use_france_connect_email_yes' }
= t('.keep_fc_email_html', email: h(@fci.email_france_connect)).html_safe
.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" }
%label.fr-label.fr-text--wrap{ for: 'use_france_connect_email_no' }
= t('.use_another_email')
.suspect-email.hidden{ data: { "email-input-target": 'ariaRegion'}, aria: { live: 'off' } } .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 } }
= render Dsfr::AlertComponent.new(title: t('utils.email_suggest.wanna_say'), state: :info, heading_level: :div) do |c| = f.label :email, t('.alternative_email'), class: "fr-label"
- c.with_body do %span.fr-hint-text.mb-1= t('activerecord.attributes.user.hints.email')
%p{ data: { "email-input-target": 'suggestion'} } exemple@gmail.com  ? = f.email_field :email, class: "fr-input"
%p
= button_tag type: 'button', class: 'fr-btn fr-btn--sm fr-mr-3w', data: { action: 'click->email-input#accept'} do .suspect-email.hidden{ data: { "email-input-target": 'ariaRegion'}, aria: { live: 'off' } }
= t('utils.yes') = render Dsfr::AlertComponent.new(title: t('utils.email_suggest.wanna_say'), state: :info, heading_level: :div) do |c|
= button_tag type: 'button', class: 'fr-btn fr-btn--sm', data: { action: 'click->email-input#discard'} do - c.with_body do
= t('utils.no') %p{ data: { "email-input-target": 'suggestion'} } exemple@gmail.com  ?
%div %p
= f.submit t('.confirm'), class: 'fr-btn' = 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'

4
config/locales/en.yml
View file

@ -883,7 +883,7 @@ en:
france_connect: france_connect:
particulier: particulier:
choose_email: choose_email:
intro_html: "Your FranceConnect account uses <span class='fr-badge fr-badge--info fr-badge--sm'>%{email}</span> as the contact email." intro_html: "Your FranceConnect account uses <span class='fr-badge fr-badge--info fr-badge--no-icon fr-badge--lowercase'>%{email}</span> as the contact email."
use_email_for_notifications: "Would you like to use it to receive notifications regarding the progress of your cases?" use_email_for_notifications: "Would you like to use it to receive notifications regarding the progress of your cases?"
confirm: "Confirm" confirm: "Confirm"
choose_email_contact: "Choose your contact email" choose_email_contact: "Choose your contact email"
@ -892,7 +892,7 @@ en:
use_another_email: No, use another address. use_another_email: No, use another address.
confirmation_sent: confirmation_sent:
confirmation_sent_by_email: "Confirm your email" 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--sm'>%{email}</span>" 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." 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" continue: "Continue"
merge: merge:

4
config/locales/fr.yml
View file

@ -935,7 +935,7 @@ fr:
france_connect: france_connect:
particulier: particulier:
choose_email: choose_email:
intro_html: "Votre compte FranceConnect utilise <span class='fr-badge fr-badge--info fr-badge--sm'>%{email}</span> comme email de contact." intro_html: "Votre compte FranceConnect utilise <span class='fr-badge fr-badge--info fr-badge--no-icon fr-badge--lowercase'>%{email}</span> comme email de contact."
use_email_for_notifications: Souhaitez-vous l'utiliser pour recevoir les notifications concernant l'avancement de vos dossiers ? use_email_for_notifications: Souhaitez-vous l'utiliser pour recevoir les notifications concernant l'avancement de vos dossiers ?
confirm: Confirmer confirm: Confirmer
choose_email_contact: Choisissez votre email de contact pour finaliser votre connexion choose_email_contact: Choisissez votre email de contact pour finaliser votre connexion
@ -946,7 +946,7 @@ fr:
wanna_say: 'Voulez-vous dire ?' wanna_say: 'Voulez-vous dire ?'
confirmation_sent: confirmation_sent:
confirmation_sent_by_email: Confirmez votre email confirmation_sent_by_email: Confirmez votre email
intro_html: "Un mail de confirmation a été envoyé à votre adresse <span class='fr-badge fr-badge--info fr-badge--sm'>%{email}</span>" intro_html: "Un mail de confirmation a été envoyé à votre adresse <span class='fr-badge fr-badge--info fr-badge--no-icon fr-badge--lowercase'>%{email}</span>"
click_the_link_in_the_email: Vous devez impérativement cliquer sur le lien du mail pour activer votre adresse et recevoir les notifications sur l'avancement de vos dossiers. click_the_link_in_the_email: Vous devez impérativement cliquer sur le lien du mail pour activer votre adresse et recevoir les notifications sur l'avancement de vos dossiers.
continue: Continuer continue: Continuer
merge: merge: