Merge pull request #5418 from betagouv/mise-en-avant-france-connect

#5428 - France connect avant les boutons de login/signup

app/assets/stylesheets/new_design/france-connect-login.scss

@@ -1,6 +1,15 @@
 @import "colors";
+@import "constants";
 
 .france-connect-login {
+  h2 {
+    color: $black;
+    font-size: 24px;
+  }
+}
+
+.france-connect-login-buttons,
+.france-connect-help-link {
   text-align: center;
 }
 
@@ -22,7 +31,29 @@
 }
 
 .france-connect-login-separator {
-  margin: 24px 0;
+  display: flex;
-  font-size: 14px;
+  flex-basis: 100%;
-  color: $dark-grey;
+  align-items: center;
+  color: $black;
+  text-transform: uppercase;
+  padding-bottom: $default-padding;
+  padding-top: $default-padding;
+
+  &::before,
+  &::after {
+    content: "";
+    flex-grow: 1;
+    background: $dark-grey;
+    height: 1px;
+    font-size: 0;
+    line-height: 0;
+  }
+
+  &::before {
+    margin-right: $default-spacer;
+  }
+
+  &::after {
+    margin-left: $default-spacer;
+  }
 }

app/views/commencer/show.html.haml

@@ -3,12 +3,12 @@
 .commencer.form
   - if !user_signed_in?
     %h2.huge-title Commencer la démarche
+    = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path) }
     = link_to commencer_sign_up_path(path: @procedure.path), class: ['button large expand primary'] do
       Créer un compte
       %span.optional-on-small-screens
         #{APPLICATION_NAME}
     = link_to 'J’ai déjà un compte', commencer_sign_in_path(path: @procedure.path), class: ['button large expand']
-    = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path) }
 
   - else
     - dossiers = current_user.dossiers.where(groupe_instructeur: @procedure.groupe_instructeurs)

app/views/shared/_france_connect_login.html.haml

@@ -1,7 +1,11 @@
 .france-connect-login
-  .france-connect-login-separator
+  %h2
-    ou
+    = t('views.shared.france_connect_login.title')
+  %p
+    = t('views.shared.france_connect_login.description')
   .france-connect-login-buttons
-    = link_to "S’identifier avec FranceConnect", url, class: "france-connect-login-button"
+    = link_to t('views.shared.france_connect_login.login_button'), 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"
+    = link_to t('views.shared.france_connect_login.help_link'), "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link"
+  .france-connect-login-separator
+    = t('views.shared.france_connect_login.separator')

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

@@ -5,6 +5,8 @@
   = form_for resource, url: user_registration_path, html: { class: "form" } do |f|
     %h1 Créez-vous un compte #{APPLICATION_NAME}
 
+    = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
+
     = f.label :email, "Email (nom@site.com)", id: :user_email_label
     = f.text_field :email, type: :email, autocomplete: 'email', autofocus: true, placeholder: "Votre adresse email", 'aria-describedby': :user_email_label
 
@@ -24,4 +26,4 @@
 
     = f.submit "Créer un compte", class: "button large primary expand"
 
-  = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
+

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

@@ -5,6 +5,8 @@
   = form_for User.new, url: user_session_path, html: { class: "form" } do |f|
     %h1.huge-title Connectez-vous
 
+    = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
+
     = f.label :email, "Email (nom@site.com)"
     = f.text_field :email, type: :email, autocomplete: 'username', autofocus: true
 
@@ -21,8 +23,6 @@
 
     = f.submit "Se connecter", class: "button large primary expand"
 
-  = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
-
   %hr
   %p.center
     %span Vous êtes nouveau sur demarches‑simplifiees.fr ?

config/locales/views/shared/fr.yml

@@ -9,3 +9,9 @@ fr:
         demande_revoquee_le: "Demande d'avis révoquée le %{date}"
         reponse_donnee_le: "Réponse donnée le %{date}"
         en_attente: "En attente de réponse"
+      france_connect_login:
+        title: 'Avec FranceConnect'
+        description: "France connect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne."
+        login_button: "S’identifier avec FranceConnect"
+        help_link: "Qu’est-ce que FranceConnect ?"
+        separator: 'ou'