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