diff --git a/app/assets/stylesheets/confirmations.scss b/app/assets/stylesheets/confirmations.scss
deleted file mode 100644
index b028d4419..000000000
--- a/app/assets/stylesheets/confirmations.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@import "colors";
-@import "constants";
-
-.devise-confirmations {
- .one-column-centered {
- max-width: 600px;
- }
-
- .confirmation-icon,
- .confirmation-preamble,
- .confirmation-instructions,
- .confirmation-separator {
- font-size: 1.15em;
- margin-bottom: $default-padding * 3;
- }
-
- .confirmation-icon {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
-
- .confirmation-instructions {
- color: #000000;
- background-color: $yellow;
- margin-left: -15px;
- margin-right: -15px;
- padding: 15px 20px 17px 20px;
- }
-
- .confirmation-separator {
- height: 1px;
- margin-left: -12px;
- margin-right: -12px;
- border: none;
- border-top: 1px solid #DDDDDD;
- }
-
- .confirmation-resend {
-
- p,
- label {
- margin-bottom: $default-padding;
- }
-
- .form {
- display: flex;
- flex-wrap: wrap;
-
- label {
- flex-basis: 100%;
- }
-
- input,
- button {
- margin-bottom: $default-spacer;
- }
-
- input[type=email] {
- width: auto;
- flex-grow: 1;
- margin-right: $default-spacer;
- }
- }
- }
-}
diff --git a/app/views/users/confirmations/new.html.haml b/app/views/users/confirmations/new.html.haml
index b705c45a2..587531801 100644
--- a/app/views/users/confirmations/new.html.haml
+++ b/app/views/users/confirmations/new.html.haml
@@ -3,31 +3,21 @@
- content_for :footer do
= render partial: 'root/footer'
-.container.devise-container.devise-confirmations
- .one-column-centered
+
+.fr-container
+ .fr-col-12.fr-col-md-6.fr-col-offset-md-3
= devise_error_messages!
- %h1.center= t('views.confirmation.new.title')
+ %h1.fr-mt-6w.fr-h2.center
+ = t('views.confirmation.new.title')
- %img.confirmation-icon{ src: image_url("user/confirmation-email.svg"), alt: t('views.confirmation.new.image_alt') }
+ %p.center{ aria: { hidden: true } }= image_tag("user/confirmation-email.svg", alt: t('views.confirmation.new.image_alt'))
- %h2.confirmation-preamble
- = succeed '.' do
- = t('views.confirmation.new.email_cta')
- - if resource.email.present?
- %strong= resource.email
+ = render Dsfr::AlertComponent.new(title: '', state: :info, heading_level: 'h2', extra_class_names: 'fr-mt-6w fr-mb-3w') do |c|
+ - c.with_body do
+ %p= t('views.confirmation.new.email_cta_html', email: resource.email)
+ %p= t('views.confirmation.new.email_guidelines_html')
- %p.confirmation-instructions= t('views.confirmation.new.email_guidelines_html')
-
- %hr.confirmation-separator
-
- .confirmation-resend
- %p= t('views.confirmation.new.email_missing')
-
- = form_for(resource, as: resource_name, url: confirmation_path(resource_name)) do |f|
- = render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autofocus: true })
- = f.submit t('views.confirmation.new.resent'), class: 'fr-btn'
-
- %p.fr-mt-3w
- = t('views.confirmation.new.faq')
- = link_to(t("links.common.faq.label"), t("links.common.faq.email_non_recu_url"), title: new_tab_suffix(t("links.common.faq.title")), **external_link_attributes)
- \.
+ = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { class: 'fr-mb-6w'}) do |f|
+ %legend.fr-hint-text.fr-mb-3w= t('views.confirmation.new.email_missing')
+ = f.hidden_field :email
+ = f.submit t('views.confirmation.new.resent'), class: 'fr-btn fr-btn--secondary'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8c05912c6..ef825e954 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -305,11 +305,10 @@ en:
new:
title: 'Confirm your email address'
image_alt: "Email sent"
- email_cta: "Before filling your file, we have to validate your email address"
+ email_cta_html: "Before filling your file, we have to validate your email address %{email}."
email_guidelines_html: "Open your mailbox and click on the activation link within the mail we just sent you."
email_missing: "If you have not received our email (have you checked your spam ?), we can resend it."
resent: 'Resend the confirmation email'
- faq: 'Also, you can check our'
invites:
dropdown:
invite_to_edit: Invite someone to edit this file
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index f66e2567d..299bedafc 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -301,11 +301,10 @@ fr:
new:
title: 'Confirmez votre adresse email'
image_alt: "Email envoyé"
- email_cta: "Avant d’effectuer votre démarche, nous avons besoin de vérifier votre adresse"
+ email_cta_html: "Avant d’effectuer votre démarche, nous avons besoin de vérifier votre adresse électronique %{email}."
email_guidelines_html: "Ouvrez votre boîte email, et cliquez sur le lien d’activation dans le message que vous avez reçu."
email_missing: "Si vous n’avez pas reçu notre message (avez-vous vérifié les indésirables ?), nous pouvons vous le renvoyer."
resent: 'Renvoyer un email de confirmation'
- faq: 'Vous pouvez également consulter notre'
invites:
dropdown:
invite_to_edit: Inviter une personne à modifier ce dossier
diff --git a/spec/system/users/dossier_prefill_get_spec.rb b/spec/system/users/dossier_prefill_get_spec.rb
index a642504ba..317135555 100644
--- a/spec/system/users/dossier_prefill_get_spec.rb
+++ b/spec/system/users/dossier_prefill_get_spec.rb
@@ -152,7 +152,7 @@ describe 'Prefilling a dossier (with a GET request):', js: true do
click_on "Créer un compte #{APPLICATION_NAME}"
sign_up_with user_email, password
- expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+ expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
click_confirmation_link_for user_email
expect(page).to have_content('Votre compte a bien été confirmé.')
diff --git a/spec/system/users/dossier_prefill_post_spec.rb b/spec/system/users/dossier_prefill_post_spec.rb
index ef8102f48..ec8660eb0 100644
--- a/spec/system/users/dossier_prefill_post_spec.rb
+++ b/spec/system/users/dossier_prefill_post_spec.rb
@@ -103,7 +103,7 @@ describe 'Prefilling a dossier (with a POST request):', js: true do
click_on "Créer un compte #{APPLICATION_NAME}"
sign_up_with user_email, password
- expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+ expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
click_confirmation_link_for user_email
expect(page).to have_content('Votre compte a bien été confirmé.')
diff --git a/spec/system/users/sign_up_spec.rb b/spec/system/users/sign_up_spec.rb
index d1d0aa815..0fbf1c8e3 100644
--- a/spec/system/users/sign_up_spec.rb
+++ b/spec/system/users/sign_up_spec.rb
@@ -7,7 +7,7 @@ describe 'Signing up:' do
visit new_user_registration_path
sign_up_with user_email, user_password
- expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+ expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
click_confirmation_link_for user_email
expect(page).to have_content('Votre compte a bien été confirmé.')
@@ -59,7 +59,7 @@ describe 'Signing up:' do
# Then with a good password
sign_up_with user_email, user_password
expect(page).to have_current_path new_user_confirmation_path user: { email: user_email }
- expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+ expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
end
context 'when visiting a procedure' do
@@ -72,7 +72,7 @@ describe 'Signing up:' do
expect(page).to have_current_path new_user_registration_path
sign_up_with user_email, user_password
- expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+ expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
click_confirmation_link_for(user_email, in_another_browser: true)
@@ -100,7 +100,7 @@ describe 'Signing up:' do
# The same page than for initial sign-ups is displayed, to avoid leaking informations
# about the account existence.
- expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+ expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
# The confirmation email is sent again
confirmation_email = open_email(user_email)
@@ -129,7 +129,7 @@ describe 'Signing up:' do
# The same page than for initial sign-ups is displayed, to avoid leaking informations
# about the accound existence.
- expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+ expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
# A warning email is sent
warning_email = open_email(user_email)