From 28dcbcb85b7250c40f6fbaa3819fec3116a4582c Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 2 Apr 2019 15:03:26 +0200 Subject: [PATCH] auth: move the FranceConnect button to a partial --- app/assets/stylesheets/new_design/auth.scss | 22 --------------- .../new_design/france-connect-login.scss | 28 +++++++++++++++++++ .../shared/_france_connect_login.html.haml | 7 +++++ app/views/users/registrations/new.html.haml | 10 +------ app/views/users/sessions/new.html.haml | 10 +------ .../france_connect_particulier_spec.rb | 12 ++++---- 6 files changed, 43 insertions(+), 46 deletions(-) create mode 100644 app/assets/stylesheets/new_design/france-connect-login.scss create mode 100644 app/views/shared/_france_connect_login.html.haml diff --git a/app/assets/stylesheets/new_design/auth.scss b/app/assets/stylesheets/new_design/auth.scss index 9196f0fa1..b67a98935 100644 --- a/app/assets/stylesheets/new_design/auth.scss +++ b/app/assets/stylesheets/new_design/auth.scss @@ -15,28 +15,6 @@ margin-bottom: 0; } - .separation { - font-size: 14px; - color: $grey; - margin: 24px 0; - } - - .login-with-fc { - display: inline-block; - height: 52px; - width: 186px; - margin: auto; - margin-bottom: 8px; - background-image: image-url("login-with-fc.svg"); - background-repeat: no-repeat; - background-size: cover; - cursor: pointer; - - &:hover { - background-image: image-url("login-with-fc-hover.svg"); - } - } - hr { margin-top: 30px; margin-bottom: 30px; diff --git a/app/assets/stylesheets/new_design/france-connect-login.scss b/app/assets/stylesheets/new_design/france-connect-login.scss new file mode 100644 index 000000000..020352b09 --- /dev/null +++ b/app/assets/stylesheets/new_design/france-connect-login.scss @@ -0,0 +1,28 @@ +@import "colors"; + +.france-connect-login { + text-align: center; +} + +.france-connect-login-button { + display: inline-block; + height: 52px; + width: 186px; + margin: auto; + margin-bottom: 8px; + background-image: image-url("login-with-fc.svg"), image-url("login-with-fc-hover.svg"); + background-repeat: no-repeat; + background-size: cover; + cursor: pointer; + font-size: 0; + + &:hover { + background-image: image-url("login-with-fc-hover.svg"); + } +} + +.france-connect-login-separator { + margin: 24px 0; + font-size: 14px; + color: $grey; +} diff --git a/app/views/shared/_france_connect_login.html.haml b/app/views/shared/_france_connect_login.html.haml new file mode 100644 index 000000000..4bd33221c --- /dev/null +++ b/app/views/shared/_france_connect_login.html.haml @@ -0,0 +1,7 @@ +.france-connect-login + .france-connect-login-separator + ou + .france-connect-login-buttons + = link_to "S’identifier avec FranceConnect", url, class: "france-connect-login-button" + .france-connect-help-link + = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link" diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml index 083f8fb59..fa3c1755a 100644 --- a/app/views/users/registrations/new.html.haml +++ b/app/views/users/registrations/new.html.haml @@ -11,12 +11,4 @@ = f.submit "Créer un compte", class: "button large primary expand" - .separation.center - ou - - .center - = image_tag "login-with-fc-hover.svg", style: "display: none" - = link_to "", france_connect_particulier_path, class: "login-with-fc" - - .center - = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link" + = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path } diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index 302217ffe..0a2d49af9 100644 --- a/app/views/users/sessions/new.html.haml +++ b/app/views/users/sessions/new.html.haml @@ -28,12 +28,4 @@ = f.submit "Se connecter", class: "button large primary expand" - .separation.center - ou - - .center - = image_tag "login-with-fc-hover.svg", style: "display: none" - = link_to "", france_connect_particulier_path, class: "login-with-fc" - - .center - = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link" + = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path } diff --git a/spec/features/france_connect/france_connect_particulier_spec.rb b/spec/features/france_connect/france_connect_particulier_spec.rb index dd221153e..ac26aa26a 100644 --- a/spec/features/france_connect/france_connect_particulier_spec.rb +++ b/spec/features/france_connect/france_connect_particulier_spec.rb @@ -1,6 +1,6 @@ require 'spec_helper' -feature 'France Connect Particulier Connexion' do +feature 'France Connect Particulier Connexion' do let(:code) { 'plop' } let(:given_name) { 'titi' } let(:family_name) { 'toto' } @@ -28,7 +28,7 @@ feature 'France Connect Particulier Connexion' do end scenario 'link to France Connect is present' do - expect(page).to have_css('a.login-with-fc') + expect(page).to have_css('.france-connect-login-button') end context 'and click on france connect link' do @@ -53,7 +53,7 @@ feature 'France Connect Particulier Connexion' do context 'when is the first connexion' do before do - page.find('.login-with-fc').click + page.find('.france-connect-login-button').click end scenario 'he is redirected to user dossiers page' do @@ -64,7 +64,7 @@ feature 'France Connect Particulier Connexion' do context 'when is not the first connexion' do before do create(:user, france_connect_information: france_connect_information) - page.find('.login-with-fc').click + page.find('.france-connect-login-button').click end scenario 'he is redirected to user dossiers page' do @@ -77,11 +77,11 @@ feature 'France Connect Particulier Connexion' do before do allow_any_instance_of(FranceConnectParticulierClient).to receive(:authorization_uri).and_return(france_connect_particulier_callback_path(code: code)) allow(FranceConnectService).to receive(:retrieve_user_informations_particulier) { raise Rack::OAuth2::Client::Error.new(500, error: 'Unknown') } - page.find('.login-with-fc').click + page.find('.france-connect-login-button').click end scenario 'he is redirected to login page' do - expect(page).to have_css('a.login-with-fc') + expect(page).to have_css('.france-connect-login-button') end scenario 'error message is displayed' do