From b68a8b37e8fb34d2d8461384d5545d364a5a6363 Mon Sep 17 00:00:00 2001 From: Mathieu Magnin Date: Tue, 13 Jun 2017 17:46:08 +0200 Subject: [PATCH] Redesign the login form --- app/assets/images/login-with-fc-hover.svg | 1 + app/assets/images/login-with-fc.svg | 1 + .../stylesheets/new_design/buttons.scss | 4 + app/assets/stylesheets/new_design/common.scss | 5 + app/assets/stylesheets/new_design/login.scss | 98 +++++++++++++++++++ app/assets/stylesheets/new_design/utils.scss | 4 + app/views/root/patron.html.haml | 2 +- app/views/users/sessions/new.html.haml | 62 +++++++----- spec/features/admin/connection_spec.rb | 4 +- .../upload_piece_justificative_spec.rb | 2 +- .../france_connect_particulier_spec.rb | 10 +- spec/features/users/complete_demande_spec.rb | 8 +- .../drawing_a_zone_with_freedraw_spec.rb | 4 +- spec/features/users/list_dossiers_spec.rb | 2 +- spec/features/users/start_demande_spec.rb | 4 +- .../users/sessions/new.html.haml_spec.rb | 5 +- 16 files changed, 172 insertions(+), 44 deletions(-) create mode 100644 app/assets/images/login-with-fc-hover.svg create mode 100644 app/assets/images/login-with-fc.svg create mode 100644 app/assets/stylesheets/new_design/login.scss diff --git a/app/assets/images/login-with-fc-hover.svg b/app/assets/images/login-with-fc-hover.svg new file mode 100644 index 000000000..e3e0ef572 --- /dev/null +++ b/app/assets/images/login-with-fc-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/login-with-fc.svg b/app/assets/images/login-with-fc.svg new file mode 100644 index 000000000..258e58174 --- /dev/null +++ b/app/assets/images/login-with-fc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/new_design/buttons.scss b/app/assets/stylesheets/new_design/buttons.scss index 6a7e8b8b9..5e0bf38f3 100644 --- a/app/assets/stylesheets/new_design/buttons.scss +++ b/app/assets/stylesheets/new_design/buttons.scss @@ -44,3 +44,7 @@ width: 100%; } } + +.link { + color: $blue; +} diff --git a/app/assets/stylesheets/new_design/common.scss b/app/assets/stylesheets/new_design/common.scss index bbf87837b..2ee0e05d7 100644 --- a/app/assets/stylesheets/new_design/common.scss +++ b/app/assets/stylesheets/new_design/common.scss @@ -5,3 +5,8 @@ body { font-size: 16px; line-height: 1.42857143; } + +h1 { + font-size: 36px; + font-weight: bold; +} diff --git a/app/assets/stylesheets/new_design/login.scss b/app/assets/stylesheets/new_design/login.scss new file mode 100644 index 000000000..12118cc38 --- /dev/null +++ b/app/assets/stylesheets/new_design/login.scss @@ -0,0 +1,98 @@ +@import "colors"; +@import "placeholders"; + +.two-columns { + background: linear-gradient(to right, white 0%, white 50%, $light-grey 50%, $light-grey 100%); +} + +.login-wrapper { + @extend %page-width-container; + display: flex; + flex-direction: row; + align-items: center; +} + +$login-padding: 60px; + +.preview, +.login-form { + width: 50%; + padding: $login-padding; +} + +@media (min-width: $page-width + (2 * $login-padding)) { + .preview { + padding-left: 0; + } + + .login-form { + padding-right: 0; + } +} + +.preview { + font-size: 24px; + + img { + width: 100%; + margin-bottom: 60px; + } + + h3 { + color: $blue; + font-weight: bold; + } +} + +.login-form { + font-size: 14px; + + h1 { + margin-bottom: 20px; + } + + .reset-password { + margin-top: 8px; + } + + .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: 60px; + margin-bottom: 20px; + background-color: $grey; + border: none; + height: 1px; + } + + .register { + display: flex; + justify-content: space-between; + align-items: center; + + span { + font-size: 18px; + font-weight: bold; + } + } +} diff --git a/app/assets/stylesheets/new_design/utils.scss b/app/assets/stylesheets/new_design/utils.scss index 958f8ff9c..2880cfe30 100644 --- a/app/assets/stylesheets/new_design/utils.scss +++ b/app/assets/stylesheets/new_design/utils.scss @@ -14,6 +14,10 @@ text-align: center; } +.text-right { + text-align: right; +} + .hidden { display: none; } diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index e02b30641..d720e004a 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -10,7 +10,7 @@ %input{ type: "text", placeholder: "ex : Ivan" } %label Mot de passe %input{ type: "password", value: "12345678" } - %input{ type: "submit", value: "Envoyer" } + %input.button{ type: "submit", value: "Envoyer" } %h2 Boutons diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index 51ba7cda6..23b9d295d 100644 --- a/app/views/users/sessions/new.html.haml +++ b/app/views/users/sessions/new.html.haml @@ -1,28 +1,44 @@ -#form-login.user_connexion_page - %br - = render partial: 'users/sessions/resume_procedure' +.two-columns + .login-wrapper + .preview + = image_tag "landing/hero/dematerialiser.svg" + .baseline.center + %h3 Un outil simple + %p + pour gérer les formulaires + %br + administratifs dématérialisés. + .login-form + %h1.center Connectez-vous - %h2#login-user - = t('dynamics.users.connexion_title') + = form_for @user, url: user_session_path, html: { class: "form" } do |f| + = f.label :email, "Email" + = f.text_field :email - %a.btn-fc#btn-fcp{ href: '/france_connect/particulier' } - = image_tag 'franceconnect_logo.png' + = f.label :password, "Mot de passe" + = f.password_field :password, value: @user.password, placeholder: "8 caractères minimum" + .reset-password.text-right + = link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "link" - %br - %a.text-info{ href: 'https://fcp.integ01.dev-franceconnect.fr/a-propos', target: '_blank' } - Qu’est-ce que FranceConnect ? - - %hr - - .text-left - #new-user - = simple_form_for @user, url: user_session_path do |f| - = f.input :email - = f.input :password, label: 'Mot de passe', input_html: { value: @user.password } - if devise_mapping.rememberable? - = f.input :remember_me, as: :boolean, label: 'Se souvenir de moi' - .text-center - = f.submit "Se connecter", class: 'btn btn-primary' + = f.check_box :remember_me, as: :boolean + = f.label :remember_me, "Se souvenir de moi" - - if @user.email != DemoEmails[:gestionnaire] && @user.email != DemoEmails[:admin] - = render "users/shared/links" + = 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", class: "link" + + - if devise_mapping.registerable? + %hr + %p.register + %span + Nouveau sur TPS ? + = link_to "Créer un compte", new_registration_path(resource_name), class: "button" diff --git a/spec/features/admin/connection_spec.rb b/spec/features/admin/connection_spec.rb index 4eb5236e4..bb6205b84 100644 --- a/spec/features/admin/connection_spec.rb +++ b/spec/features/admin/connection_spec.rb @@ -5,8 +5,8 @@ feature 'Administrator connection' do before do visit new_administrateur_session_path end - scenario 'administrator is on admin loggin page' do - expect(page).to have_css('#form-login.user_connexion_page') + scenario 'administrator is on sign in page' do + expect(page).to have_css('#new_user') end context "admin fills form and log in" do diff --git a/spec/features/description_page/upload_piece_justificative_spec.rb b/spec/features/description_page/upload_piece_justificative_spec.rb index bd8cffc8a..25ccf4f75 100644 --- a/spec/features/description_page/upload_piece_justificative_spec.rb +++ b/spec/features/description_page/upload_piece_justificative_spec.rb @@ -9,7 +9,7 @@ feature 'user is on description page' do visit users_dossier_description_path dossier - within('#new-user') do + within('#new_user') do page.find_by_id('user_email').set dossier.user.email page.find_by_id('user_password').set dossier.user.password page.click_on 'Se connecter' diff --git a/spec/features/france_connect/france_connect_particulier_spec.rb b/spec/features/france_connect/france_connect_particulier_spec.rb index 6889ef454..720523714 100644 --- a/spec/features/france_connect/france_connect_particulier_spec.rb +++ b/spec/features/france_connect/france_connect_particulier_spec.rb @@ -25,7 +25,7 @@ feature 'France Connect Particulier Connexion' do end scenario 'link to France Connect is present' do - expect(page).to have_css('a#btn-fcp') + expect(page).to have_css('a.login-with-fc') end context 'and click on france connect link' do @@ -49,7 +49,7 @@ feature 'France Connect Particulier Connexion' do context 'when is the first connexion' do before do - page.find_by_id('btn-fcp').click + page.find('.login-with-fc').click end scenario 'he is redirected to france connect particulier page' do expect(page).to have_content('Nouvelle connexion') @@ -70,7 +70,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_by_id('btn-fcp').click + page.find('.login-with-fc').click end scenario 'he is redirected to user dossiers page' do @@ -83,11 +83,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_by_id('btn-fcp').click + page.find('.login-with-fc').click end scenario 'he is redirected to login page' do - expect(page).to have_css('a#btn-fcp') + expect(page).to have_css('a.login-with-fc') end scenario 'error message is displayed' do diff --git a/spec/features/users/complete_demande_spec.rb b/spec/features/users/complete_demande_spec.rb index 2f1eb1d42..26254c31b 100644 --- a/spec/features/users/complete_demande_spec.rb +++ b/spec/features/users/complete_demande_spec.rb @@ -12,14 +12,14 @@ feature 'user path for dossier creation' do end scenario 'he is redirected on login page' do - expect(page).to have_css('#login-user') - expect(page).to have_css('#logo_procedure') - expect(page).to have_css('#titre-procedure') + expect(page).to have_css('#new_user') + expect(page).to have_css('.procedure-logos') + expect(page).to have_content(procedure.libelle) end context 'user sign_in' do before do - within('#new-user') do + within('#new_user') do page.find_by_id('user_email').set user.email page.find_by_id('user_password').set user.password page.click_on 'Se connecter' diff --git a/spec/features/users/drawing_a_zone_with_freedraw_spec.rb b/spec/features/users/drawing_a_zone_with_freedraw_spec.rb index 1ecc5a0ee..e11c7189b 100644 --- a/spec/features/users/drawing_a_zone_with_freedraw_spec.rb +++ b/spec/features/users/drawing_a_zone_with_freedraw_spec.rb @@ -12,11 +12,11 @@ feature 'drawing a zone with freedraw' do end scenario 'he is redirected to login page' do - expect(page).to have_css('#login-user') + expect(page).to have_css('#new_user') end scenario 'he logs in and he is redirected to carte page', vcr: { cassette_name: 'drawing_a_zone_with_freedraw_redirected_to_carte_page' } do - within('#new-user') do + within('#new_user') do page.find_by_id('user_email').set user.email page.find_by_id('user_password').set user.password page.click_on 'Se connecter' diff --git a/spec/features/users/list_dossiers_spec.rb b/spec/features/users/list_dossiers_spec.rb index 7a5236f12..6acdbfb50 100644 --- a/spec/features/users/list_dossiers_spec.rb +++ b/spec/features/users/list_dossiers_spec.rb @@ -11,7 +11,7 @@ describe 'user access to the list of his dossier' do last_updated_dossier.update_column(:updated_at, "19/07/2052 15:35".to_time) visit new_user_session_path - within('#new-user') do + within('#new_user') do page.find_by_id('user_email').set user.email page.find_by_id('user_password').set user.password page.click_on 'Se connecter' diff --git a/spec/features/users/start_demande_spec.rb b/spec/features/users/start_demande_spec.rb index a908412a8..f91c44214 100644 --- a/spec/features/users/start_demande_spec.rb +++ b/spec/features/users/start_demande_spec.rb @@ -11,11 +11,11 @@ feature 'user arrive on siret page' do visit new_users_dossiers_path(procedure_id: procedure.id) end scenario 'he is redirected to login page' do - expect(page).to have_css('#login-user') + expect(page).to have_css('#new_user') end context 'when he enter login information' do before do - within('#new-user') do + within('#new_user') do page.find_by_id('user_email').set user.email page.find_by_id('user_password').set user.password page.click_on 'Se connecter' diff --git a/spec/views/users/sessions/new.html.haml_spec.rb b/spec/views/users/sessions/new.html.haml_spec.rb index cc7880f45..714817335 100644 --- a/spec/views/users/sessions/new.html.haml_spec.rb +++ b/spec/views/users/sessions/new.html.haml_spec.rb @@ -18,8 +18,7 @@ describe 'users/sessions/new.html.haml', type: :view do render end - it { expect(rendered).to have_selector('#form-login #logo_procedure') } - it { expect(rendered).to have_selector('#form-login #titre-procedure') } + it { expect(rendered).to have_selector('.procedure-logos') } it { expect(rendered).to have_content(dossier.procedure.libelle) } it { expect(rendered).to have_content(dossier.procedure.description) } end @@ -29,6 +28,6 @@ describe 'users/sessions/new.html.haml', type: :view do render end - it { expect(rendered).to have_selector('#form-login #logo_tps') } + it { expect(rendered).to have_content('Un outil simple') } end end