Merge pull request #3739 from betagouv/dev

2019-04-03-01
This commit is contained in:
LeSim 2019-04-03 17:51:29 +02:00 committed by GitHub
commit 22e1e7d2be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 161 additions and 59 deletions

View file

@ -3,6 +3,19 @@
@import "placeholders"; @import "placeholders";
@import "mixins"; @import "mixins";
#auth {
// On small screens, hide the procedure description text on auth pages.
// It avoids pushing the sign-in/sign-up form out of the viewport.
//
// The procedure description can still be read from the /commencer
// pages.
@media (max-width: $two-columns-breakpoint) {
.procedure-description {
display: none;
}
}
}
.auth-form { .auth-form {
.auth-options { .auth-options {
display: flex; display: flex;
@ -15,28 +28,6 @@
margin-bottom: 0; margin-bottom: 0;
} }
.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 { hr {
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;

View file

@ -1,8 +1,10 @@
@import "constants"; @import "constants";
.commencer { .commencer {
.button:first-of-type { @media (min-width: $two-columns-breakpoint) {
margin-top: 4 * $default-spacer; .button:first-of-type {
margin-top: 4 * $default-spacer;
}
} }
.button { .button {

View file

@ -7,7 +7,7 @@
margin-bottom: 20px; margin-bottom: 20px;
@media (max-width: $two-columns-breakpoint) { @media (max-width: $two-columns-breakpoint) {
font-size: 28px; font-size: 26px;
} }
} }

View file

@ -0,0 +1,28 @@
@import "colors";
.france-connect-login {
text-align: center;
}
.france-connect-login-button {
display: inline-block;
height: 52px;
width: 186px;
margin: auto;
margin-bottom: 8px;
background-image: image-url("login-with-fc.svg"), image-url("login-with-fc-hover.svg");
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
font-size: 0;
&:hover {
background-image: image-url("login-with-fc-hover.svg");
}
}
.france-connect-login-separator {
margin: 24px 0;
font-size: 14px;
color: $grey;
}

View file

@ -2,6 +2,7 @@
@import "constants"; @import "constants";
$procedure-context-breakpoint: $two-columns-breakpoint; $procedure-context-breakpoint: $two-columns-breakpoint;
$procedure-description-line-height: 22px;
.procedure-preview { .procedure-preview {
font-size: 24px; font-size: 24px;
@ -25,12 +26,13 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
} }
.procedure-title { .procedure-title {
font-size: 30px; font-size: 26px;
margin: 0 0 20px 0; margin: 0 0 20px 0;
text-align: center; text-align: center;
@media (min-width: $procedure-context-breakpoint) { @media (min-width: $procedure-context-breakpoint) {
margin: 50px 0 32px; margin: 50px 0 32px;
font-size: 30px;
text-align: left; text-align: left;
} }
} }
@ -39,11 +41,40 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
font-size: 16px; font-size: 16px;
p:not(:last-of-type) { p:not(:last-of-type) {
margin-bottom: 2 * $default-spacer; // Space the paragraphs by exactly one line height,
// so that the text always is truncated in the middle of a line,
// regarless of the number of paragraphs.
margin-bottom: 3 * $default-spacer;
} }
}
@media (max-width: $procedure-context-breakpoint) { .read-more-button {
display: none; // TO FIX : make this description available for small devices display: none;
}
@media (max-width: $procedure-context-breakpoint) {
// Truncate description and display the "Read more" UI if the text is too long
.procedure-description-body.read-more-collapsed {
// Setting the description at 25% of the viewport height:
// - displays more text on screens having more vertical space (like small tablets);
// - is enough for the action buttons to be visible on the bottom (even on mobiles).
max-height: 25vh;
// If the text exceeds the max-height,
// truncate it and displays the "Read more" button.
&.read-more-enabled {
overflow: hidden;
border-bottom: 1px solid $border-grey;
+ .read-more-button {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
top: -19px;
margin-bottom: -19px;
}
}
} }
} }

View file

@ -34,6 +34,11 @@ module Users
redirect_to new_user_registration_path redirect_to new_user_registration_path
end end
def france_connect
store_user_location!
redirect_to france_connect_particulier_path
end
def procedure_for_help def procedure_for_help
Procedure.publiees.find_by(path: params[:path]) || Procedure.brouillons.find_by(path: params[:path]) Procedure.publiees.find_by(path: params[:path]) || Procedure.brouillons.find_by(path: params[:path])
end end

View file

@ -0,0 +1,20 @@
import { delegate } from '@utils';
function updateReadMoreVisibility() {
const descBody = document.querySelector('.procedure-description-body');
if (descBody) {
// If the description text overflows, display a "Read more" button.
const isOverflowing = descBody.scrollHeight > descBody.clientHeight;
descBody.classList.toggle('read-more-enabled', isOverflowing);
}
}
function expandProcedureDescription() {
const descBody = document.querySelector('.procedure-description-body');
descBody.classList.remove('read-more-collapsed');
}
addEventListener('turbolinks:load', updateReadMoreVisibility);
addEventListener('resize', updateReadMoreVisibility);
delegate('click', '.read-more-button', expandProcedureDescription);

View file

@ -18,6 +18,7 @@ import '../shared/toggle-target';
import '../new_design/dropdown'; import '../new_design/dropdown';
import '../new_design/form-validation'; import '../new_design/form-validation';
import '../new_design/procedure-context';
import '../new_design/select2'; import '../new_design/select2';
import '../new_design/spinner'; import '../new_design/spinner';
import '../new_design/support'; import '../new_design/support';

View file

@ -8,6 +8,7 @@
%span.optional-on-small-screens %span.optional-on-small-screens
demarches-simplifiees.fr demarches-simplifiees.fr
= link_to 'Jai déjà un compte', commencer_sign_in_path(path: @procedure.path), class: ['button large expand'] = link_to 'Jai déjà un compte', commencer_sign_in_path(path: @procedure.path), class: ['button large expand']
= render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path) }
- else - else
- dossiers = current_user.dossiers.where(procedure: @procedure) - dossiers = current_user.dossiers.where(procedure: @procedure)

View file

@ -23,7 +23,7 @@
- if Rails.env.development? - if Rails.env.development?
= stylesheet_link_tag :xray = stylesheet_link_tag :xray
%body{ class: browser.platform.ios? ? 'ios' : nil } %body{ id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil }
.page-wrapper .page-wrapper
= render partial: "layouts/outdated_browser_banner" = render partial: "layouts/outdated_browser_banner"
= render partial: 'layouts/pre_maintenance' = render partial: 'layouts/pre_maintenance'

View file

@ -5,4 +5,6 @@
%h2.procedure-title %h2.procedure-title
= procedure.libelle = procedure.libelle
.procedure-description .procedure-description
= h string_to_html(procedure.description) .procedure-description-body.read-more-enabled.read-more-collapsed
= h string_to_html(procedure.description)
= button_tag "Afficher la description complète", class: 'button read-more-button'

View file

@ -43,12 +43,12 @@
= f.label :horaires do = f.label :horaires do
Horaires Horaires
%span.mandatory * %span.mandatory *
= f.text_area :horaires, placeholder: "Du lundi au vendredi de 9 h 30 à 17 h 30\nLe samedi de 9 h 30 à 12 h", required: true = f.text_area :horaires, placeholder: "Du lundi au vendredi de 9 h 30 à 17 h 30. Le samedi de 9 h 30 à 12 h.", required: true
= f.label :adresse do = f.label :adresse do
Adresse Adresse
%span.mandatory * %span.mandatory *
= f.text_area :adresse, placeholder: "20 avenue de Ségur\n75007 Paris", required: true = f.text_area :adresse, placeholder: "20 avenue de Ségur, 75007 Paris", required: true
- if procedure_id.present? - if procedure_id.present?
= hidden_field_tag :procedure_id, procedure_id = hidden_field_tag :procedure_id, procedure_id

View file

@ -0,0 +1,7 @@
.france-connect-login
.france-connect-login-separator
ou
.france-connect-login-buttons
= link_to "Sidentifier avec FranceConnect", url, class: "france-connect-login-button"
.france-connect-help-link
= link_to "Quest-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link"

View file

@ -1,3 +1,5 @@
= content_for(:page_id, 'auth')
.auth-form .auth-form
= devise_error_messages! = devise_error_messages!
= form_for resource, url: user_registration_path, html: { class: "form" } do |f| = form_for resource, url: user_registration_path, html: { class: "form" } do |f|
@ -11,12 +13,4 @@
= f.submit "Créer un compte", class: "button large primary expand" = f.submit "Créer un compte", class: "button large primary expand"
.separation.center = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
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 "Quest-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link"

View file

@ -1,3 +1,5 @@
= content_for(:page_id, 'auth')
.auth-form.sign-in-form .auth-form.sign-in-form
- if resource_name == :user - if resource_name == :user
%p.register %p.register
@ -28,12 +30,4 @@
= f.submit "Se connecter", class: "button large primary expand" = f.submit "Se connecter", class: "button large primary expand"
.separation.center = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
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 "Quest-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link"

View file

@ -270,6 +270,7 @@ Rails.application.routes.draw do
get '/:path', action: 'commencer' get '/:path', action: 'commencer'
get '/:path/sign_in', action: 'sign_in', as: :sign_in get '/:path/sign_in', action: 'sign_in', as: :sign_in
get '/:path/sign_up', action: 'sign_up', as: :sign_up get '/:path/sign_up', action: 'sign_up', as: :sign_up
get '/:path/france_connect', action: 'france_connect', as: :france_connect
end end
resources :dossiers, only: [:index, :show, :new] do resources :dossiers, only: [:index, :show, :new] do

View file

@ -9,6 +9,8 @@
"@turf/area": "^6.0.1", "@turf/area": "^6.0.1",
"activestorage": "^5.2.2", "activestorage": "^5.2.2",
"autocomplete.js": "^0.36.0", "autocomplete.js": "^0.36.0",
"babel-plugin-macros": "^2.5.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"chartkick": "^3.0.1", "chartkick": "^3.0.1",
"debounce": "^1.2.0", "debounce": "^1.2.0",
"dom4": "^2.1.3", "dom4": "^2.1.3",
@ -29,8 +31,6 @@
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"babel-plugin-macros": "^2.5.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"eclint": "^2.8.0", "eclint": "^2.8.0",
"eslint": "^5.9.0", "eslint": "^5.9.0",
"eslint-config-prettier": "^3.3.0", "eslint-config-prettier": "^3.3.0",

View file

@ -112,4 +112,28 @@ describe Users::CommencerController, type: :controller do
it { expect(subject).to redirect_to(new_user_registration_path) } it { expect(subject).to redirect_to(new_user_registration_path) }
end end
end end
describe '#france_connect' do
context 'for a published procedure' do
subject { get :france_connect, params: { path: published_procedure.path } }
it 'set the path to return after sign-up to the procedure start page' do
subject
expect(controller.stored_location_for(:user)).to eq(commencer_path(path: published_procedure.path))
end
it { expect(subject).to redirect_to(france_connect_particulier_path) }
end
context 'for a draft procedure' do
subject { get :france_connect, params: { path: draft_procedure.path } }
it 'set the path to return after sign-up to the draft procedure start page' do
subject
expect(controller.stored_location_for(:user)).to eq(commencer_test_path(path: draft_procedure.path))
end
it { expect(subject).to redirect_to(france_connect_particulier_path) }
end
end
end end

View file

@ -1,6 +1,6 @@
require 'spec_helper' require 'spec_helper'
feature 'France Connect Particulier Connexion' do feature 'France Connect Particulier Connexion' do
let(:code) { 'plop' } let(:code) { 'plop' }
let(:given_name) { 'titi' } let(:given_name) { 'titi' }
let(:family_name) { 'toto' } let(:family_name) { 'toto' }
@ -28,7 +28,7 @@ feature 'France Connect Particulier Connexion' do
end end
scenario 'link to France Connect is present' do scenario 'link to France Connect is present' do
expect(page).to have_css('a.login-with-fc') expect(page).to have_css('.france-connect-login-button')
end end
context 'and click on france connect link' do context 'and click on france connect link' do
@ -53,7 +53,7 @@ feature 'France Connect Particulier Connexion' do
context 'when is the first connexion' do context 'when is the first connexion' do
before do before do
page.find('.login-with-fc').click page.find('.france-connect-login-button').click
end end
scenario 'he is redirected to user dossiers page' do scenario 'he is redirected to user dossiers page' do
@ -64,7 +64,7 @@ feature 'France Connect Particulier Connexion' do
context 'when is not the first connexion' do context 'when is not the first connexion' do
before do before do
create(:user, france_connect_information: france_connect_information) create(:user, france_connect_information: france_connect_information)
page.find('.login-with-fc').click page.find('.france-connect-login-button').click
end end
scenario 'he is redirected to user dossiers page' do scenario 'he is redirected to user dossiers page' do
@ -77,11 +77,11 @@ feature 'France Connect Particulier Connexion' do
before do before do
allow_any_instance_of(FranceConnectParticulierClient).to receive(:authorization_uri).and_return(france_connect_particulier_callback_path(code: code)) 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') } allow(FranceConnectService).to receive(:retrieve_user_informations_particulier) { raise Rack::OAuth2::Client::Error.new(500, error: 'Unknown') }
page.find('.login-with-fc').click page.find('.france-connect-login-button').click
end end
scenario 'he is redirected to login page' do scenario 'he is redirected to login page' do
expect(page).to have_css('a.login-with-fc') expect(page).to have_css('.france-connect-login-button')
end end
scenario 'error message is displayed' do scenario 'error message is displayed' do

View file

@ -21,6 +21,7 @@ RSpec.describe 'commencer/show.html.haml', type: :view do
subject subject
expect(rendered).to have_link('Créer un compte') expect(rendered).to have_link('Créer un compte')
expect(rendered).to have_link('Jai déjà un compte') expect(rendered).to have_link('Jai déjà un compte')
expect(rendered).to have_link('Sidentifier avec FranceConnect')
end end
end end