auth: move the FranceConnect button to a partial

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;

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;
+}

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"

app/views/users/registrations/new.html.haml

@@ -11,12 +11,4 @@
 
     = f.submit "Créer un compte", class: "button large primary expand"
 
-  .separation.center
+  = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
-    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"

app/views/users/sessions/new.html.haml

@@ -28,12 +28,4 @@
 
     = f.submit "Se connecter", class: "button large primary expand"
 
-  .separation.center
+  = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
-    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"

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