From fb55c76829f3a04e77f6672874646f75ed9927ca Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Thu, 22 Apr 2021 12:07:13 +0200 Subject: [PATCH 1/3] views: cleanup link_sent HTML and CSS This prepares for re-using the CSS in the reset_link_sent page. --- app/assets/stylesheets/link-sent.scss | 44 +++++++++++++------- app/views/users/sessions/link_sent.html.haml | 24 +++++------ 2 files changed, 40 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/link-sent.scss b/app/assets/stylesheets/link-sent.scss index 778d330b1..3671aa07c 100644 --- a/app/assets/stylesheets/link-sent.scss +++ b/app/assets/stylesheets/link-sent.scss @@ -7,24 +7,36 @@ text-align: center; max-width: 600px; - b { + section { + text-align: left; + margin: 3 * $default-padding auto; + } + + p, + ol { + margin-top: $default-padding; + margin-bottom: $default-padding; + } + + .link-sent-info { + color: #000000; + background-color: $yellow; + padding: 0 $default-padding; + border: 1px solid transparent; // prevent margin collapse of first paragraph + } + + .link-sent-help { + border-top: 1px solid $grey; + padding-top: $default-padding; + margin-bottom: $default-padding; + } + + .link-sent-help-title { font-weight: bold; } - p { - text-align: left; - margin: 6 * $default-spacer auto; - } - - p.mail { - color: #000000; - background-color: $yellow; - padding: $default-padding; - } - - p.help { - border-top: 1px solid $grey; - padding-top: 6 * $default-spacer; - margin-bottom: 2 * $default-spacer; + .link-sent-help-list { + list-style-position: outside; + padding-left: $default-padding; } } diff --git a/app/views/users/sessions/link_sent.html.haml b/app/views/users/sessions/link_sent.html.haml index 37961886c..7e2babdf2 100644 --- a/app/views/users/sessions/link_sent.html.haml +++ b/app/views/users/sessions/link_sent.html.haml @@ -7,16 +7,16 @@ = image_tag('user/confirmation-email.svg') %h1 Encore une petite étape :) - %p.mail - Ouvrez votre boite email #{@email} puis cliquez sur le lien d'activation du message Connexion sécurisée à #{APPLICATION_NAME}. - %br - %br - Attention, ce message peut mettre jusqu'à 15 minutes pour arriver. + %section.link-sent-info + %p + Ouvrez votre boite email #{@email} puis cliquez sur le lien d’activation du message Connexion sécurisée à #{APPLICATION_NAME}. + %p + Attention, ce message peut mettre jusqu’à 15 minutes pour arriver. - %p.help - Si vous voyez cette page trop souvent, consultez notre aide : #{link_to FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, target: '_blank', rel: 'noopener' } - %br - %br - En cas de difficultés, nous restons joignables - = succeed '.' do - = link_to("via ce formulaire", contact_admin_url) + %section.link-sent-help + %p + Si vous voyez cette page trop souvent, consultez notre aide : #{link_to FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, target: '_blank', rel: 'noopener' } + %p + En cas de difficultés, nous restons joignables + = succeed '.' do + = link_to("via ce formulaire", contact_admin_url) From d530b272a185dd3df0fad802066c056bcaf8f424 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Thu, 22 Apr 2021 10:07:35 +0000 Subject: [PATCH 2/3] password: add specific page for reset instructions --- app/assets/stylesheets/_typography.scss | 6 ++++ app/assets/stylesheets/link-sent.scss | 2 +- app/controllers/users/passwords_controller.rb | 9 ++++++ .../users/passwords/reset_link_sent.html.haml | 32 +++++++++++++++++++ app/views/users/sessions/link_sent.html.haml | 6 ++-- config/locales/fr.yml | 15 +++++++++ config/routes.rb | 1 + .../users/passwords_controller_spec.rb | 12 +++++++ spec/features/users/managing_password_spec.rb | 6 ++-- 9 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 app/views/users/passwords/reset_link_sent.html.haml diff --git a/app/assets/stylesheets/_typography.scss b/app/assets/stylesheets/_typography.scss index da7c458df..3113dfbaf 100644 --- a/app/assets/stylesheets/_typography.scss +++ b/app/assets/stylesheets/_typography.scss @@ -4,3 +4,9 @@ font-family: "Muli", system-ui, -apple-system, sans-serif; color: $black; } + +ol { + line-height: 28px; + list-style-type: decimal; + list-style-position: inside; +} diff --git a/app/assets/stylesheets/link-sent.scss b/app/assets/stylesheets/link-sent.scss index 3671aa07c..c22d6d6f4 100644 --- a/app/assets/stylesheets/link-sent.scss +++ b/app/assets/stylesheets/link-sent.scss @@ -5,7 +5,7 @@ padding-top: 2 * $default-padding; padding-bottom: 2 * $default-padding; text-align: center; - max-width: 600px; + max-width: 700px; section { text-align: left; diff --git a/app/controllers/users/passwords_controller.rb b/app/controllers/users/passwords_controller.rb index 47d1c75e0..b756cc17e 100644 --- a/app/controllers/users/passwords_controller.rb +++ b/app/controllers/users/passwords_controller.rb @@ -33,6 +33,10 @@ class Users::PasswordsController < Devise::PasswordsController # super # end + def reset_link_sent + @email = params[:email] + end + # protected # def after_resetting_password_path_for(resource) @@ -74,4 +78,9 @@ class Users::PasswordsController < Devise::PasswordsController def password_params params.require(:user).permit(:reset_password_token, :password) end + + def after_sending_reset_password_instructions_path_for(resource_name) + flash.discard(:notice) + users_password_reset_link_sent_path(email: resource.email) + end end diff --git a/app/views/users/passwords/reset_link_sent.html.haml b/app/views/users/passwords/reset_link_sent.html.haml new file mode 100644 index 000000000..a5771b1bb --- /dev/null +++ b/app/views/users/passwords/reset_link_sent.html.haml @@ -0,0 +1,32 @@ +- content_for(:title, t('views.users.passwords.reset_link_sent.title')) + +- content_for :footer do + = render partial: 'root/footer' + +#link-sent.container + = image_tag('user/confirmation-email.svg') + %h1 + = t('views.users.passwords.reset_link_sent.got_it') + %br + = t('views.users.passwords.reset_link_sent.open_your_mailbox') + + %section.link-sent-info + %p + = t('views.users.passwords.reset_link_sent.email_sent_html', email: @email) + %p + = t('views.users.passwords.reset_link_sent.click_link_to_reset_password') + %p + = t('views.users.shared.email_can_take_a_while_html') + + %section.link-sent-help + %h2.link-sent-help-title= t('views.users.passwords.reset_link_sent.no_mail') + %ol.link-sent-help-list + %li + = t('views.users.passwords.reset_link_sent.check_spams') + %li + = t('views.users.passwords.reset_link_sent.check_account', email: @email, application_name: APPLICATION_NAME) + - if FranceConnectService.enabled? + %li + = t('views.users.passwords.reset_link_sent.check_france_connect_html', href: france_connect_particulier_path) + %p + = t('views.users.shared.contact_us_if_any_trouble_html', href: contact_url) diff --git a/app/views/users/sessions/link_sent.html.haml b/app/views/users/sessions/link_sent.html.haml index 7e2babdf2..52f463592 100644 --- a/app/views/users/sessions/link_sent.html.haml +++ b/app/views/users/sessions/link_sent.html.haml @@ -11,12 +11,10 @@ %p Ouvrez votre boite email #{@email} puis cliquez sur le lien d’activation du message Connexion sécurisée à #{APPLICATION_NAME}. %p - Attention, ce message peut mettre jusqu’à 15 minutes pour arriver. + = t('views.users.shared.email_can_take_a_while') %section.link-sent-help %p Si vous voyez cette page trop souvent, consultez notre aide : #{link_to FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, FAQ_CONFIRMER_COMPTE_CHAQUE_CONNEXION_URL, target: '_blank', rel: 'noopener' } %p - En cas de difficultés, nous restons joignables - = succeed '.' do - = link_to("via ce formulaire", contact_admin_url) + = t('views.users.shared.contact_us_if_any_trouble_html', href: contact_admin_url) diff --git a/config/locales/fr.yml b/config/locales/fr.yml index bc54faca2..7d61251a6 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -53,6 +53,21 @@ fr: passwords: new: send_me_reset_password_instructions: "Indiquez l’email de votre compte, et nous vous enverrons un lien pour créer un nouveau mot de passe." + users: + passwords: + reset_link_sent: + email_sent_html: "Nous vous avons envoyé un email à l’adresse %{email}." + click_link_to_reset_password: "Cliquez sur le lien contenu dans l’email pour changer votre mot de passe." + no_mail: "Vous n’avez pas reçu l’email ?" + check_spams: "Vérifiez la boite Indésirables ou Spam de votre boite email." + check_account: "Avez-vous bien créé un compte %{application_name} avec l’adresse %{email} ? Si aucun compte n’existe avec cette adresse, vous ne recevrez pas de message." + check_france_connect_html: "Vous êtes-vous connecté avec France Connect par le passé ? Dans ce cas essayez à nouveau avec France Connect." + got_it: "Bien reçu !" + open_your_mailbox: "Maintenant ouvrez votre boite email." + title: "Lien de réinitialisation du mot de passe envoyé" + shared: + email_can_take_a_while_html: "Attention, ce message peut mettre jusqu’à 15 minutes pour arriver." + contact_us_if_any_trouble_html: "En cas de difficultés, nous restons joignables via ce formulaire." modal: publish: title: diff --git a/config/routes.rb b/config/routes.rb index 20f39cb4e..bb953ffa4 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -106,6 +106,7 @@ Rails.application.routes.draw do get '/users/no_procedure' => 'users/sessions#no_procedure' get 'connexion-par-jeton/:id' => 'users/sessions#sign_in_by_link', as: 'sign_in_by_link' get 'lien-envoye/:email' => 'users/sessions#link_sent', constraints: { email: /.*/ }, as: 'link_sent' + get '/users/password/reset-link-sent' => 'users/passwords#reset_link_sent' end devise_scope :administrateur do diff --git a/spec/controllers/users/passwords_controller_spec.rb b/spec/controllers/users/passwords_controller_spec.rb index f52ebc65f..8d3769cf5 100644 --- a/spec/controllers/users/passwords_controller_spec.rb +++ b/spec/controllers/users/passwords_controller_spec.rb @@ -38,4 +38,16 @@ describe Users::PasswordsController, type: :controller do end end end + + describe '#reset_link_sent' do + let(:email) { 'test@example.com' } + + it 'displays the page' do + get 'reset_link_sent', params: { email: email } + + expect(response).to have_http_status(:ok) + expect(response).to render_template('reset_link_sent') + expect(assigns(:email)).to eq email + end + end end diff --git a/spec/features/users/managing_password_spec.rb b/spec/features/users/managing_password_spec.rb index bbe89c7d6..16d16fe10 100644 --- a/spec/features/users/managing_password_spec.rb +++ b/spec/features/users/managing_password_spec.rb @@ -13,7 +13,8 @@ feature 'Managing password:' do perform_enqueued_jobs do click_on 'Demander un nouveau mot de passe' end - expect(page).to have_content('Si votre courriel existe dans notre base de données, vous recevrez un lien vous permettant de récupérer votre mot de passe.') + expect(page).to have_text 'Nous vous avons envoyé un email' + expect(page).to have_text user.email click_reset_password_link_for user.email expect(page).to have_content 'Changement de mot de passe' @@ -40,7 +41,8 @@ feature 'Managing password:' do perform_enqueued_jobs do click_on 'Demander un nouveau mot de passe' end - expect(page).to have_content('Si votre courriel existe dans notre base de données, vous recevrez un lien vous permettant de récupérer votre mot de passe.') + expect(page).to have_text 'Nous vous avons envoyé un email' + expect(page).to have_text user.email click_reset_password_link_for user.email From 360f4be4c9a3feaccdd832c9d86c921b4c900482 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Thu, 22 Apr 2021 12:34:41 +0200 Subject: [PATCH 3/3] views: replace link by a round_button in the password reset email --- app/mailers/devise_user_mailer.rb | 1 + .../devise_mailer/reset_password_instructions.html.haml | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/mailers/devise_user_mailer.rb b/app/mailers/devise_user_mailer.rb index 9377e9f10..bc548c166 100644 --- a/app/mailers/devise_user_mailer.rb +++ b/app/mailers/devise_user_mailer.rb @@ -1,6 +1,7 @@ # Preview all emails at http://localhost:3000/rails/mailers/devise_user_mailer class DeviseUserMailer < Devise::Mailer helper :application # gives access to all helpers defined within `application_helper`. + helper MailerHelper include Devise::Controllers::UrlHelpers # Optional. eg. `confirmation_url` layout 'mailers/layout' diff --git a/app/views/devise_mailer/reset_password_instructions.html.haml b/app/views/devise_mailer/reset_password_instructions.html.haml index 765ce037d..32afd3ee0 100644 --- a/app/views/devise_mailer/reset_password_instructions.html.haml +++ b/app/views/devise_mailer/reset_password_instructions.html.haml @@ -2,9 +2,9 @@ Bonjour, %p - Vous avez demandé à regénérer votre mot de passe sur #{APPLICATION_BASE_URL}. Pour ceci, merci de suivre le lien suivant : - %br - = link_to edit_password_url(@resource, reset_password_token: @token), edit_password_url(@resource, reset_password_token: @token) + Vous avez demandé à changer votre mot de passe sur #{APPLICATION_NAME}. Pour ceci, merci de cliquer sur le lien suivant : + += round_button 'Changer mon mot de passe', edit_password_url(@resource, reset_password_token: @token), :primary %p Si vous n'avez pas effectué une telle demande, merci d'ignorer cet email. Votre mot de passe ne sera pas changé.