From c07ce374a8cf8490e7623874094c221bcbc0b690 Mon Sep 17 00:00:00 2001 From: clemkeirua Date: Mon, 27 Jul 2020 16:35:05 +0200 Subject: [PATCH 1/2] france connect avant les boutons de login/signup --- .../new_design/france-connect-login.scss | 37 +++++++++++++++++-- app/views/commencer/show.html.haml | 2 +- .../shared/_france_connect_login.html.haml | 8 +++- app/views/users/registrations/new.html.haml | 4 +- app/views/users/sessions/new.html.haml | 4 +- 5 files changed, 46 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/new_design/france-connect-login.scss b/app/assets/stylesheets/new_design/france-connect-login.scss index 779b800fc..f54289631 100644 --- a/app/assets/stylesheets/new_design/france-connect-login.scss +++ b/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; - font-size: 14px; - color: $dark-grey; + display: flex; + flex-basis: 100%; + 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; + } } diff --git a/app/views/commencer/show.html.haml b/app/views/commencer/show.html.haml index 75e2b9470..c08c940ea 100644 --- a/app/views/commencer/show.html.haml +++ b/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) diff --git a/app/views/shared/_france_connect_login.html.haml b/app/views/shared/_france_connect_login.html.haml index 4bd33221c..0e752ceee 100644 --- a/app/views/shared/_france_connect_login.html.haml +++ b/app/views/shared/_france_connect_login.html.haml @@ -1,7 +1,11 @@ .france-connect-login - .france-connect-login-separator - ou + %h2 + Avec FranceConnect + %p + France connect est la solution proposée par l'État pour sécuriser et simplifier la connexion aux services en ligne. .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" + .france-connect-login-separator + ou diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml index c7755ad54..ec7b91c30 100644 --- a/app/views/users/registrations/new.html.haml +++ b/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 } + diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index a00021620..fe57eb71f 100644 --- a/app/views/users/sessions/new.html.haml +++ b/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 ? From b8eea0516374e1c185332285127195bd1b9ce467 Mon Sep 17 00:00:00 2001 From: clemkeirua Date: Wed, 29 Jul 2020 09:27:16 +0200 Subject: [PATCH 2/2] ajout de traductions --- app/views/shared/_france_connect_login.html.haml | 10 +++++----- config/locales/views/shared/fr.yml | 6 ++++++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/app/views/shared/_france_connect_login.html.haml b/app/views/shared/_france_connect_login.html.haml index 0e752ceee..9f4a33646 100644 --- a/app/views/shared/_france_connect_login.html.haml +++ b/app/views/shared/_france_connect_login.html.haml @@ -1,11 +1,11 @@ .france-connect-login %h2 - Avec FranceConnect + = t('views.shared.france_connect_login.title') %p - France connect est la solution proposée par l'État pour sécuriser et simplifier la connexion aux services en ligne. + = 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 - ou + = t('views.shared.france_connect_login.separator') diff --git a/config/locales/views/shared/fr.yml b/config/locales/views/shared/fr.yml index d1c7e15ea..963f7f1ba 100644 --- a/config/locales/views/shared/fr.yml +++ b/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'