Merge pull request #434 from sgmap/410-sign-in-new-design

Fix #410: new sign in page design

app/assets/images/flag_of_europe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="810" height="540"><desc>European flag</desc><defs><g id="d"><g id="b"><path id="a" d="M0 0v1h.5z" transform="rotate(18 3.157 -.5)"/><use xlink:href="#a" transform="scale(-1 1)"/></g><g id="c"><use xlink:href="#b" transform="rotate(72)"/><use xlink:href="#b" transform="rotate(144)"/></g><use xlink:href="#c" transform="scale(-1 1)"/></g></defs><path fill="#039" d="M0 0h810v540H0z"/><g fill="#fc0" transform="matrix(30 0 0 30 405 270)"><use xlink:href="#d" y="-6"/><use xlink:href="#d" y="6"/><g id="e"><use xlink:href="#d" x="-6"/><use xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use xlink:href="#e" transform="scale(-1 1)"/></g></svg>

app/assets/stylesheets/new_design/buttons.scss

@@ -0,0 +1,50 @@
+@import "colors";
+
+.button {
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 30px;
+  border: 1px solid $border-grey;
+  font-size: 14px;
+  background-color: #FFFFFF;
+  color: $black;
+  cursor: pointer;
+
+  &:hover {
+    background: $light-grey;
+    text-decoration: none;
+  }
+
+  &.primary {
+    color: #FFFFFF;
+    border-color: $blue;
+    background-color: $blue;
+
+    &:hover {
+      background: $light-blue;
+    }
+  }
+
+  &.secondary {
+    color: $blue;
+    border-color: $blue;
+    background-color: #FFFFFF;
+
+    &:hover {
+      background: $light-blue;
+    }
+  }
+
+  &.large {
+    font-size: 18px;
+    padding: 15px 32px;
+  }
+
+  &.expand {
+    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/forms.scss

@@ -0,0 +1,27 @@
+@import "colors";
+
+.form {
+  label,
+  input {
+    font-size: 14px;
+  }
+
+  label,
+  input[type=submit] {
+    margin-top: 24px;
+  }
+
+  label {
+    margin-bottom: 8px;
+    display: inline-block;
+  }
+
+  input[type=text],
+  input[type=password] {
+    display: block;
+    width: 100%;
+    border-radius: 4px;
+    border: solid 1px $border-grey;
+    padding: 16px;
+  }
+}

app/assets/stylesheets/new_design/login.scss

@@ -0,0 +1,137 @@
+@import "colors";
+@import "placeholders";
+@import "mixins";
+
+$login-breakpoint: 820px;
+
+.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 (max-width: $login-breakpoint) {
+  .preview {
+    display: none;
+  }
+
+  .login-form {
+    @include horizontal-padding(0);
+    width: 100%;
+  }
+}
+
+@media (min-width: $login-breakpoint) {
+  .two-columns {
+    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+  }
+}
+
+@media (min-width: $page-width + (2 * $login-padding)) {
+  .preview {
+    padding-left: 0;
+  }
+
+  .login-form {
+    padding-right: 0;
+  }
+}
+
+.preview {
+  font-size: 24px;
+
+  .paperless-logo {
+    width: 100%;
+    margin-bottom: 60px;
+  }
+
+  h3 {
+    color: $blue;
+    font-weight: bold;
+  }
+
+  .close-procedure {
+    font-size: 12px;
+  }
+
+  .procedure-title {
+    font-size: 30px;
+    margin: 50px 0 32px;
+  }
+
+  .procedure-description {
+    font-size: 14px;
+  }
+
+  .procedure-logos {
+    display: flex;
+    justify-content: space-around;
+
+    img {
+      max-height: 130px;
+      margin: 0 10px;
+    }
+  }
+}
+
+.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/patron.scss

@@ -0,0 +1,9 @@
+@import "placeholders";
+
+.patron {
+  @extend %page-width-container;
+
+  p {
+    margin-bottom: 20px;
+  }
+}

app/assets/stylesheets/new_design/utils.scss

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

app/controllers/root_controller.rb

@@ -1,4 +1,6 @@
 class RootController < ApplicationController
+  layout 'new_application'
+
   def index
     if administrateur_signed_in?
       return redirect_to admin_procedures_path
@@ -26,6 +28,9 @@ class RootController < ApplicationController
       return redirect_to administrations_path
     end
 
-    render 'landing', :layout => 'new_application'
+    render 'landing'
+  end
+
+  def patron
   end
 end

app/controllers/users/sessions_controller.rb

@@ -1,4 +1,6 @@
 class Users::SessionsController < Sessions::SessionsController
+  layout "new_application"
+
   # before_action :configure_sign_in_params, only: [:create]
 
   def demo

app/views/layouts/_new_header.haml

@@ -3,4 +3,5 @@
     = link_to root_path do
       %img.header-logo{ src: image_url("header/logo-tps.svg") }
 
+    - unless request.path == new_user_session_path
       = link_to "Connexion", new_user_session_path, class: "header-login-button"

app/views/root/patron.html.haml

@@ -0,0 +1,27 @@
+.patron
+  %h1 Patron
+
+  %h2 Formulaires
+
+  %form.form
+    %label Nom
+    %input{ type: "text" }
+    %label Prénom
+    %input{ type: "text", placeholder: "ex : Ivan" }
+    %label Mot de passe
+    %input{ type: "password", value: "12345678" }
+    %input.button{ type: "submit", value: "Envoyer" }
+
+  %h2 Boutons
+
+  %p
+    = link_to ".button", "#", class: "button"
+
+    = link_to ".button.primary", "#", class: "button primary"
+
+    = link_to ".button.large", "#", class: "button large"
+
+    = link_to ".button.large.primary", "#", class: "button large primary"
+
+  %p
+    = link_to ".button.primary.expand", "#", class: "button primary expand"

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

@@ -1,28 +1,58 @@
-#form-login.user_connexion_page
+.two-columns
+  .login-wrapper
+    .preview
+      - unless @dossier
+        = image_tag "landing/hero/dematerialiser.svg", class: "paperless-logo"
+        .baseline.center
+          %h3 Un outil simple
+          %p
+            pour gérer les formulaires
             %br
-  = render partial: 'users/sessions/resume_procedure'
+            administratifs dématérialisés.
+      - else
+        .text-right
+          = link_to "Fermer", users_no_procedure_url, class: "link close-procedure"
+        .procedure-logos
+          = image_tag @dossier.procedure.decorate.logo_img
+          - if @dossier.procedure.euro_flag
+            = image_tag "flag_of_europe.svg"
 
-  %h2#login-user
+        %h2.procedure-title
-    = t('dynamics.users.connexion_title')
+          = @dossier.procedure.libelle
+        %p.procedure-description
+          = h @dossier.procedure.description.html_safe
 
-  %a.btn-fc#btn-fcp{ href: '/france_connect/particulier' }
+    .login-form
-    = image_tag 'franceconnect_logo.png'
+      %h1.center Connectez-vous
 
-  %br
+      = form_for @user, url: user_session_path, html: { class: "form" } do |f|
-  %a.text-info{ href: 'https://fcp.integ01.dev-franceconnect.fr/a-propos', target: '_blank' }
+        = f.label :email, "Email"
-    Qu’est-ce que FranceConnect ?
+        = f.text_field :email
 
-  %hr
+        = 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"
 
-  .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'
+          = f.check_box :remember_me, as: :boolean
-        .text-center
+          = f.label :remember_me, "Se souvenir de moi"
-          = f.submit "Se connecter", class: 'btn btn-primary'
 
-  - if @user.email != DemoEmails[:gestionnaire] && @user.email != DemoEmails[:admin]
+        = f.submit "Se connecter", class: "button large primary expand"
-    = render "users/shared/links"
+
+      .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"

config/routes.rb

@@ -227,5 +227,7 @@ Rails.application.routes.draw do
     get '/:procedure_path' => '/users/dossiers#commencer'
   end
 
+  get "patron" => "root#patron"
+
   apipie
 end

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
+  scenario 'administrator is on sign in page' do
-    expect(page).to have_css('#form-login.user_connexion_page')
+    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('#new_user')
-      expect(page).to have_css('#logo_procedure')
+      expect(page).to have_css('.procedure-logos')
-      expect(page).to have_css('#titre-procedure')
+      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('.procedure-logos') }
-    it { expect(rendered).to have_selector('#form-login #titre-procedure') }
     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