Redesign the login form

app/assets/stylesheets/new_design/buttons.scss

@@ -44,3 +44,7 @@
     width: 100%;
   }
 }
+
+.link {
+  color: $blue;
+}

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

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

app/assets/stylesheets/new_design/utils.scss

@@ -14,6 +14,10 @@
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .hidden {
   display: none;
 }

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
 

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"

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

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'

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

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'

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'

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'

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'

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