From d9265d96868ef0ffa71126f53c42f26c50251b82 Mon Sep 17 00:00:00 2001
From: Mathieu Magnin <mathieu.magnin@gmail.com>
Date: Thu, 8 Feb 2018 17:13:15 +0100
Subject: [PATCH] [Fix #1409] Display identite form with new design

---
 .../stylesheets/new_design/_constants.scss    |  4 ++
 app/assets/stylesheets/new_design/auth.scss   | 41 ++++++++---------
 app/assets/stylesheets/new_design/forms.scss  | 33 +++++++++++++-
 .../stylesheets/new_design/helpers.scss       |  5 +++
 .../stylesheets/new_design/layouts.scss       | 25 ++++++++---
 .../new_user/dossiers_controller.rb           |  7 ++-
 app/controllers/new_user/user_controller.rb   |  2 +
 .../new_user/dossiers/identite.html.haml      | 45 +++++++++++++++++++
 config/locales/models/individual/fr.yml       |  1 +
 config/routes.rb                              |  3 ++
 10 files changed, 137 insertions(+), 29 deletions(-)
 create mode 100644 app/assets/stylesheets/new_design/helpers.scss
 create mode 100644 app/views/new_user/dossiers/identite.html.haml

diff --git a/app/assets/stylesheets/new_design/_constants.scss b/app/assets/stylesheets/new_design/_constants.scss
index 1bbcb6b3d..f652937cc 100644
--- a/app/assets/stylesheets/new_design/_constants.scss
+++ b/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);
diff --git a/app/assets/stylesheets/new_design/auth.scss b/app/assets/stylesheets/new_design/auth.scss
index 87f29d6ea..2ad56545b 100644
--- a/app/assets/stylesheets/new_design/auth.scss
+++ b/app/assets/stylesheets/new_design/auth.scss
@@ -3,24 +3,7 @@
 @import "placeholders";
 @import "mixins";
 
-$auth-breakpoint: 820px;
-
-@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;
-  }
-}
+$auth-breakpoint: $two-columns-breakpoint;
 
 .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;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index 288dad0c0..13486ec9f 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/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;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/new_design/helpers.scss b/app/assets/stylesheets/new_design/helpers.scss
new file mode 100644
index 000000000..976e4c0d1
--- /dev/null
+++ b/app/assets/stylesheets/new_design/helpers.scss
@@ -0,0 +1,5 @@
+@import "constants";
+
+.mb-1 {
+  margin-bottom: $default-spacer;
+}
diff --git a/app/assets/stylesheets/new_design/layouts.scss b/app/assets/stylesheets/new_design/layouts.scss
index 467f18ff0..af089682b 100644
--- a/app/assets/stylesheets/new_design/layouts.scss
+++ b/app/assets/stylesheets/new_design/layouts.scss
@@ -3,23 +3,34 @@
 @import "constants";
 
 .two-columns {
-  $column-padding: 60px;
-  $two-columns-breakpoint: $page-width + (2 * $column-padding);
+  background-color: #FFFFFF;
 
-  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;
-    align-items: center;
+    flex-direction: column;
+
+    @media (min-width: $two-columns-breakpoint) {
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   .column {
-    width: 50%;
-    padding: $column-padding;
+    padding: $two-columns-padding 0 0;
+    width: 100%;
+    max-width: 500px;
+    margin: auto;
 
     @media (min-width: $two-columns-breakpoint) {
+      padding: $two-columns-padding;
+      width: 50%;
+
       &:first-child {
         padding-left: 0;
       }
diff --git a/app/controllers/new_user/dossiers_controller.rb b/app/controllers/new_user/dossiers_controller.rb
index bc7df485d..345ea666a 100644
--- a/app/controllers/new_user/dossiers_controller.rb
+++ b/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!
diff --git a/app/controllers/new_user/user_controller.rb b/app/controllers/new_user/user_controller.rb
index 5cd85ae0f..566424ecf 100644
--- a/app/controllers/new_user/user_controller.rb
+++ b/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
diff --git a/app/views/new_user/dossiers/identite.html.haml b/app/views/new_user/dossiers/identite.html.haml
new file mode 100644
index 000000000..b3633165f
--- /dev/null
+++ b/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"
diff --git a/config/locales/models/individual/fr.yml b/config/locales/models/individual/fr.yml
index 60c02a37c..186e27a65 100644
--- a/config/locales/models/individual/fr.yml
+++ b/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
diff --git a/config/routes.rb b/config/routes.rb
index c29bbe3b7..694215ddd 100644
--- a/config/routes.rb
+++ b/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