Merge pull request #473 from sgmap/452_redesign_sign_up

[fix #452] redesign sign up form

app/assets/stylesheets/new_design/auth.scss

@@ -2,21 +2,21 @@
 @import "placeholders";
 @import "mixins";
 
-$login-breakpoint: 820px;
+$auth-breakpoint: 820px;
 
-@media (max-width: $login-breakpoint) {
+@media (max-width: $auth-breakpoint) {
   .preview {
     display: none;
   }
 
-  .two-columns .column.login-form {
+  .two-columns .column.auth-form {
     @include horizontal-padding(0);
     width: 100%;
   }
 }
 
-@media (max-width: $login-breakpoint) {
+@media (max-width: $auth-breakpoint) {
-  .two-columns.login {
+  .two-columns.auth {
     background: #FFFFFF;
   }
 }
@@ -58,7 +58,7 @@ $login-breakpoint: 820px;
   }
 }
 
-.login-form {
+.auth-form {
   font-size: 14px;
 
   .reset-password {

app/controllers/users/registrations_controller.rb

@@ -1,4 +1,6 @@
 class Users::RegistrationsController < Devise::RegistrationsController
+  layout "new_application"
+
   # before_action :configure_sign_up_params, only: [:create]
   # before_action :configure_account_update_params, only: [:update]
 

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

@@ -1,64 +1,33 @@
--# <h2>Sign up</h2>
+.two-columns.auth
--#
+  .columns-container
--# <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+    .column.preview
--#   <%= devise_error_messages! %>
+      = image_tag "landing/hero/dematerialiser.svg", class: "paperless-logo"
--#
+      .baseline.center
--#   <div class="field">
+        %h3 Un outil simple
--#     <%= f.label :email %><br />
+        %p
--#     <%= f.email_field :email, autofocus: true %>
+          pour gérer les formulaires
--#   </div>
+          %br
--#
+          administratifs dématérialisés.
--#   <div class="field">
--#     <%= f.label :password %>
--#     <% if @validatable %>
--#     <em>(<%= @minimum_password_length %> characters minimum)</em>
--#     <% end %><br />
--#     <%= f.password_field :password, autocomplete: "off" %>
--#   </div>
--#
--#   <div class="field">
--#     <%= f.label :password_confirmation %><br />
--#     <%= f.password_field :password_confirmation, autocomplete: "off" %>
--#   </div>
--#
--#   <div class="actions">
--#     <%= f.submit "Sign up" %>
--#   </div>
--# <% end %>
 
-= devise_error_messages!
+    .column.auth-form
+      = devise_error_messages!
+      = form_for User.new, url: user_registration_path, html: { class: "form" } do |f|
+        %h1 Créez-vous un compte
 
-#form-login
+        = f.label :email, "Email"
-  %br
+        = f.text_field :email
-  .flag
-    = image_tag(image_url(LOGO_NAME))
-  %br
-  %h2#gestionnaire_login Inscription
 
-  %br
+        = f.label :password, "Mot de passe"
-  %br
+        = f.password_field :password, value: @user.password, placeholder: "8 caractères minimum"
-  #new-user
+
-    = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+        = f.submit "Créer un compte", class: "button large primary expand"
-      %h4
+
-        = f.label :email
+      .separation.center
-      .input-group
+        ou
-        .input-group-addon
+
-          %span.fa.fa-user
+      .center
-        = f.email_field :email, class: 'form-control', placeholder: 'Email', value: params[:user_email]
+        = image_tag "login-with-fc-hover.svg", style: "display: none"
-      %br
+        = link_to "", france_connect_particulier_path, class: "login-with-fc"
-      %h4
+
-        = f.label :password, 'Mot de passe'
+      .center
-      .input-group
+        = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", class: "link"
-        .input-group-addon
-          %span.fa.fa-asterisk
-        = f.password_field :password, autocomplete: "off", class: 'form-control', placeholder: 'Mot de passe'
-      %br
-      .input-group
-        .input-group-addon
-          %span.fa.fa-asterisk
-        = f.password_field :password_confirmation, autocomplete: "off", class: 'form-control', placeholder: 'Répeter le mot de passe'
-      %br
-      %br
-      .actions
-        = f.submit "S'enregistrer", class: 'btn btn-primary'
-      %br

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

@@ -1,4 +1,4 @@
-.two-columns.login
+.two-columns.auth
   .columns-container
     .column.preview
       - unless @dossier
@@ -22,7 +22,7 @@
         %p.procedure-description
           = h @dossier.procedure.description.html_safe
 
-    .column.login-form
+    .column.auth-form
       = form_for @user, url: user_session_path, html: { class: "form" } do |f|
         %h1 Connectez-vous
 

spec/controllers/france_connect/particulier_controller_spec.rb

@@ -13,7 +13,7 @@ describe FranceConnect::ParticulierController, type: :controller do
 
   let(:user_info) { Hashie::Mash.new(france_connect_particulier_id: france_connect_particulier_id, given_name: given_name, family_name: family_name, birthdate: birthdate, birthplace: birthplace, gender: gender, email: email, password: password) }
 
-  describe '.login' do
+  describe '.auth' do
     it 'redirect to france connect serveur' do
       get :login
       expect(response.status).to eq(302)

spec/controllers/users/registrations_controller_spec.rb

@@ -4,18 +4,16 @@ describe Users::RegistrationsController, type: :controller do
   let(:email) { 'test@octo.com' }
   let(:password) { 'password' }
 
-  let(:user) { {email: email, password: password, password_confirmation: password} }
+  let(:user) { { email: email, password: password } }
 
   before do
     @request.env["devise.mapping"] = Devise.mappings[:user]
   end
 
   describe '.create' do
-    subject { post :create, params: {user: user }}
+    subject { post :create, params: { user: user } }
 
     context 'when user is correct' do
-      it { expect(described_class).to be < Devise::RegistrationsController }
-
       it 'sends welcome email' do
         expect(WelcomeMailer).to receive(:welcome_email).and_return(WelcomeMailer)
         expect(WelcomeMailer).to receive(:deliver_now!)
@@ -38,7 +36,7 @@ describe Users::RegistrationsController, type: :controller do
     end
 
     context 'when user is not correct' do
-      let(:user) { {email: '', password: password, password_confirmation: password} }
+      let(:user) { { email: '', password: password } }
 
       it 'not sends welcome email' do
         expect(WelcomeMailer).not_to receive(:welcome_email)