DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Fix #410: new sign in page design
This commit is contained in:
gregoirenovel 2017-06-19 18:29:28 +02:00 committed by GitHub
commit 5bafc077d2
23 changed files with 344 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/images/flag_of_europe.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 917 B

1
app/assets/images/login-with-fc-hover.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

1
app/assets/images/login-with-fc.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

50
app/assets/stylesheets/new_design/buttons.scss Normal file
View file

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

5
app/assets/stylesheets/new_design/common.scss
View file

@ -5,3 +5,8 @@ body {
font-size: 16px;
line-height: 1.42857143;
}
h1 {
font-size: 36px;
font-weight: bold;
}

27
app/assets/stylesheets/new_design/forms.scss Normal file
View file

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

137
app/assets/stylesheets/new_design/login.scss Normal file
View file

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

9
app/assets/stylesheets/new_design/patron.scss Normal file
View file

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

4
app/assets/stylesheets/new_design/utils.scss
View file

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

7
app/controllers/root_controller.rb
View file

@ -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

2
app/controllers/users/sessions_controller.rb
View file

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

3
app/views/layouts/_new_header.haml
View file

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

27
app/views/root/patron.html.haml Normal file
View file

@ -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"

72
app/views/users/sessions/new.html.haml
View file

@ -1,28 +1,58 @@
#form-login.user_connexion_page
%br
= render partial: 'users/sessions/resume_procedure'
.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
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
= t('dynamics.users.connexion_title')
%h2.procedure-title
= @dossier.procedure.libelle
%p.procedure-description
= h @dossier.procedure.description.html_safe
%a.btn-fc#btn-fcp{ href: '/france_connect/particulier' }
= image_tag 'franceconnect_logo.png'
.login-form
%h1.center Connectez-vous
%br
%a.text-info{ href: 'https://fcp.integ01.dev-franceconnect.fr/a-propos', target: '_blank' }
Qu’est-ce que FranceConnect ?
= form_for @user, url: user_session_path, html: { class: "form" } do |f|
= f.label :email, "Email"
= 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'
.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"

2
config/routes.rb
View file

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

4
spec/features/admin/connection_spec.rb
View file

@ -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

2
spec/features/description_page/upload_piece_justificative_spec.rb
View file

@ -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'

10
spec/features/france_connect/france_connect_particulier_spec.rb
View file

@ -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

8
spec/features/users/complete_demande_spec.rb
View file

@ -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'

4
spec/features/users/drawing_a_zone_with_freedraw_spec.rb
View file

@ -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'

2
spec/features/users/list_dossiers_spec.rb
View file

@ -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'

4
spec/features/users/start_demande_spec.rb
View file

@ -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'

5
spec/views/users/sessions/new.html.haml_spec.rb
View file

@ -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