[Fix #1409] Display identite form with new design

app/assets/stylesheets/new_design/_constants.scss

@@ -7,3 +7,7 @@ $footer-height: 267px;
 $footer-height-mobile: 531px;
 
 $small-footer-height: 2 * $default-padding;
+
+// layouts
+$two-columns-padding: 60px;
+$two-columns-breakpoint: $page-width + (2 * $two-columns-padding);

app/assets/stylesheets/new_design/auth.scss

@@ -3,24 +3,7 @@
 @import "placeholders";
 @import "mixins";
 
-$auth-breakpoint: 820px;
+$auth-breakpoint: $two-columns-breakpoint;
-
-@media (max-width: $auth-breakpoint) {
-  .preview {
-    display: none;
-  }
-
-  .two-columns .column.auth-form {
-    @include horizontal-padding(0);
-    width: 100%;
-  }
-}
-
-@media (max-width: $auth-breakpoint) {
-  .two-columns.auth {
-    background: #FFFFFF;
-  }
-}
 
 .preview {
   font-size: 24px;
@@ -28,6 +11,10 @@ $auth-breakpoint: 820px;
   .paperless-logo {
     width: 100%;
     margin-bottom: 60px;
+
+    @media (max-width: $auth-breakpoint) {
+      display: none;
+    }
   }
 
   h3 {
@@ -41,11 +28,19 @@ $auth-breakpoint: 820px;
 
   .procedure-title {
     font-size: 30px;
-    margin: 50px 0 32px;
+    margin: 20px 0 0;
+
+    @media (min-width: $auth-breakpoint) {
+      margin: 50px 0 32px;
+    }
   }
 
   .procedure-description {
     font-size: 14px;
+
+    @media (max-width: $auth-breakpoint) {
+      display: none; // TO FIX : make this description available for small devices
+    }
   }
 
   .procedure-logos {
@@ -53,8 +48,14 @@ $auth-breakpoint: 820px;
     justify-content: space-around;
 
     img {
-      max-height: 130px;
+      max-height: 50px;
+      max-width: 100%;
       margin: 0 10px;
+
+      @media (min-width: $auth-breakpoint) {
+        max-height: 130px;
+        max-width: 500px;
+      }
     }
   }
 }

app/assets/stylesheets/new_design/forms.scss

@@ -25,6 +25,13 @@
       display: block;
       margin-top: $default-spacer;
     }
+
+    &.required {
+      &::after {
+        color: $dark-red;
+        content: " *";
+      }
+    }
   }
 
   .editable-champ {
@@ -70,6 +77,10 @@
     &:disabled {
       background-color: $border-grey;
     }
+
+    &.small {
+      padding: $default-padding / 2;
+    }
   }
 
   input[type=text],
@@ -114,11 +125,17 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    background: image-url("icons/chevron-down.svg") no-repeat;
+    background-color: #FFFFFF;
+    background-image: image-url("icons/chevron-down.svg");
+    background-repeat: no-repeat;
     background-size: 14px;
     background-position: right 10px center;
     padding-right: 4 * $default-spacer;
 
+    &.small {
+      padding-right: 3 * $default-spacer;
+    }
+
     // CAUTION: IE hackery ahead
     &::-ms-expand {
       display: none; // remove default arrow in IE 10 and 11 */
@@ -208,4 +225,18 @@
       margin-bottom: $default-padding;
     }
   }
+
+  .inline-champ {
+    margin-left: $default-spacer;
+    margin-right: $default-spacer;
+    width: 100%;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }

app/assets/stylesheets/new_design/helpers.scss

@@ -0,0 +1,5 @@
+@import "constants";
+
+.mb-1 {
+  margin-bottom: $default-spacer;
+}

app/assets/stylesheets/new_design/layouts.scss

@@ -3,23 +3,34 @@
 @import "constants";
 
 .two-columns {
-  $column-padding: 60px;
+  background-color: #FFFFFF;
-  $two-columns-breakpoint: $page-width + (2 * $column-padding);
 
-  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+  @media (min-width: $two-columns-breakpoint) {
+    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+  }
 
   .columns-container {
     @extend .container;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    align-items: center;
+
+    @media (min-width: $two-columns-breakpoint) {
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   .column {
-    width: 50%;
+    padding: $two-columns-padding 0 0;
-    padding: $column-padding;
+    width: 100%;
+    max-width: 500px;
+    margin: auto;
 
     @media (min-width: $two-columns-breakpoint) {
+      padding: $two-columns-padding;
+      width: 50%;
+
       &:first-child {
         padding-left: 0;
       }

app/controllers/new_user/dossiers_controller.rb

@@ -6,10 +6,15 @@ module NewUser
       send_data(dossier.attestation.pdf.read, filename: 'attestation.pdf', type: 'application/pdf')
     end
 
+    def identite
+      @dossier = dossier
+      @user = current_user
+    end
+
     private
 
     def dossier
-      Dossier.find(params[:dossier_id])
+      Dossier.find(params[:id] || params[:dossier_id])
     end
 
     def ensure_ownership!

app/controllers/new_user/user_controller.rb

@@ -1,5 +1,7 @@
 module NewUser
   class UserController < ApplicationController
+    layout "new_application"
+
     before_action :authenticate_user!
   end
 end

app/views/new_user/dossiers/identite.html.haml

@@ -0,0 +1,45 @@
+.two-columns
+  .columns-container
+    .column.preview
+      .procedure-logos
+        = image_tag @dossier.procedure.decorate.logo_img
+        - if @dossier.procedure.euro_flag
+          = image_tag "flag_of_europe.svg"
+
+      %h2.procedure-title
+        = @dossier.procedure.libelle
+      %p.procedure-description
+        = h sanitize(@dossier.procedure.description)
+
+    .column
+      = form_for @dossier.individual, url: update_identite_dossier_path(@dossier), html: { class: "form" } do |f|
+        %h1 Données d'identité
+
+        %p.mb-1 Merci de remplir vos informations personnelles pour accéder à la démarche.
+
+        %label
+          %span.mandatory *
+          champs requis
+
+        = f.label :gender, class: "required"
+        = f.select :gender, ['M.', 'Mme'], {}, class: "small"
+
+        .flex
+          .inline-champ
+            = f.label :prenom, class: "required"
+            = f.text_field :prenom, class: "small", required: true
+          .inline-champ
+            = f.label :nom, class: "required"
+            = f.text_field :nom, class: "small", required: true
+
+        - if @dossier.procedure.ask_birthday?
+          = f.label :birthdate, class: "required"
+          = f.date_field :birthdate, value: @dossier.individual.birthdate, placeholder: 'format : AAAA-MM-JJ', required: true, class: "small"
+
+        = fields_for :dossier, @dossier do |df|
+          = label_tag do
+            = df.check_box :autorisation_donnees, required: true
+            J'accepte
+            = link_to "les CGU", CGU_URL, target: :blank
+
+        = f.submit "Continuer", class: "button large primary expand"

config/locales/models/individual/fr.yml

@@ -2,6 +2,7 @@ fr:
   activerecord:
     attributes:
       individual:
+        gender: Civilité
         nom: Nom
         prenom: Prénom
         birthdate: Date de naissance

config/routes.rb

@@ -202,6 +202,9 @@ Rails.application.routes.draw do
 
   scope module: 'new_user' do
     resources :dossiers, only: [] do
+      member do
+        get 'identite'
+      end
       get 'attestation'
     end
   end