From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 15 Jul 2019 18:55:55 +0000 (+0200)
Subject: wip #2782 @6
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f73dba194bbd77bdd76cc28091179f18c66c2b73;p=pmi.git

wip #2782 @6
---

diff --git a/.env.production b/.env.production
index 3ed8c90..2c23c5b 100644
--- a/.env.production
+++ b/.env.production
@@ -26,8 +26,8 @@ REDIS_PORT=6379
 MAIL_DRIVER=smtp
 MAIL_HOST=in-v3.mailjet.com
 MAIL_PORT=587
-MAIL_USERNAME=a0efe78a914ae9b7b972618c6c3e1803
-MAIL_PASSWORD=b4d51c4c1d0193f9b0963c2c374dd882
+MAIL_USERNAME=ca110b35f8735c223d69c9987c2ac47d
+MAIL_PASSWORD=b289d0acb08e0fe56ce98ccf0dd1ed8b
 MAIL_ENCRYPTION=tls
 MAIL_FROM_ADDRESS=web@pm-instrumentation.com
 MAIL_FROM_NAME="PM-Instrumentation"
diff --git a/.env.staging b/.env.staging
index 254719a..04aff2b 100644
--- a/.env.staging
+++ b/.env.staging
@@ -25,8 +25,8 @@ REDIS_PORT=6379
 MAIL_DRIVER=smtp
 MAIL_HOST=in-v3.mailjet.com
 MAIL_PORT=587
-MAIL_USERNAME=a0efe78a914ae9b7b972618c6c3e1803
-MAIL_PASSWORD=b4d51c4c1d0193f9b0963c2c374dd882
+MAIL_USERNAME=ca110b35f8735c223d69c9987c2ac47d
+MAIL_PASSWORD=b289d0acb08e0fe56ce98ccf0dd1ed8b
 MAIL_ENCRYPTION=tls
 MAIL_FROM_ADDRESS=web@pm-instrumentation.com
 MAIL_FROM_NAME="PM-Instrumentation"
diff --git a/app/Http/Controllers/AjaxController.php b/app/Http/Controllers/AjaxController.php
index d875771..8e8084b 100644
--- a/app/Http/Controllers/AjaxController.php
+++ b/app/Http/Controllers/AjaxController.php
@@ -9,48 +9,63 @@ use Cubist\Backpack\app\Http\Controllers\CubistFrontController;
 use Cubist\Backpack\app\Magic\PageData;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Mail;
+use Illuminate\Support\Facades\Validator;
 
 class AjaxController extends CubistFrontController
 {
     public function mailform(Request $request)
     {
+        $response = [];
+
         $data = $request->all();
         /** @var PageData $page */
         $page = Page::find($data['page'])->getPageData();
 
         $validation = [];
+        $messages = [];
+
+        $labels = ['firstname' => 'Prénom', 'name' => 'Nom', 'company' => 'Société', 'sku' => 'Numéro de série', 'ref' => 'Reference', 'email' => 'Adresse e-mail', 'subject' => 'Sujet', 'message' => 'Message'];
 
         foreach ($page->get('form') as $field) {
             $v = [];
             if ($field['mandatory']) {
                 $v[] = 'required';
+                $messages[$field['type'] . '.required'] = sprintf(__('Champ obligatoire'), $labels[$field['type']]);
             }
             if ($field['type'] == 'email') {
                 $v[] = 'email';
+                $messages[$field['type'] . '.email'] = __('Adresse e-mail invalide');
             }
             if (count($v)) {
                 $validation[$field['type']] = implode('|', $v);
             }
         }
 
-        $validatedData = $request->validate($validation);
+        $validator = Validator::make($request->all(), $validation, $messages);
+        $validator->validate();
 
-        $labels = ['firstname' => 'Prénom', 'name' => 'Nom', 'company' => 'Société', 'sku' => 'Numéro de série', 'ref' => 'Reference', 'email' => 'Adresse e-mail', 'message' => 'Message'];
+        $validatedData = $validator->validated();
         $contents = [];
         foreach ($labels as $key => $label) {
-
             if (isset($validatedData[$key])) {
                 $contents[] = $label . ' : ' . $validatedData[$key];
             }
         }
 
-        Mail::raw(implode("\r\n", $contents), function ($message) use ($validatedData) {
+        Mail::raw(implode("\r\n", $contents), function ($message) use ($validatedData, $page) {
             $message->from(config('mail.from.address'), config('mail.from.name'));
             $message->sender(config('mail.from.address'), config('mail.from.name'));
+            foreach ($page->form_destination as $item) {
+                $message->to($item);
+            }
+            $subject = '';
+            if ($page->form_prefix) {
+                $subject = '[' . $page->form_prefix . '] ';
+            }
+
             $message->replyTo($validatedData['email']);
-            $message->subject($validatedData['subject']);
+            $message->subject($subject . $validatedData['subject']);
         });
 
-        echo 'ok :)';
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 240ac9d..fded0ae 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -64,3 +64,4 @@ const app = new Vue({
 
 
 });
+
diff --git a/resources/js/components/Form.vue b/resources/js/components/Form.vue
deleted file mode 100644
index f615714..0000000
--- a/resources/js/components/Form.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-
-</template>
-
-<script>
-    export default {
-        name: 'Form',
-        props:['required_fields','send','page_id','fields'],
-        methods: {
-            submit() {
-                this.errors = {};
-                axios.post('/mailform', this.fields).then(response => {
-                    alert('Message sent!');
-                }).catch(error => {
-                    if (error.response.status === 422) {
-                        this.errors = error.response.data.errors || {};
-                    }
-                });
-            },
-        }
-    }
-
-
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/mailform.js b/resources/js/mailform.js
index 28b3950..7a772a2 100644
--- a/resources/js/mailform.js
+++ b/resources/js/mailform.js
@@ -1,25 +1,47 @@
 $(function () {
-    console.log('mailform.js loaded');
+
+    $('form.mailform').each(function () {
+        inputs = $(this).find('label input,select');
+        var nb_fields = inputs.length;
+        var nb_to_divide = Math.floor(nb_fields / 2) * 2;
+        $(inputs).slice(0, nb_to_divide).closest('label').addClass('half');
+    });
+
     $.ajaxSetup({
         headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         }
     });
 
+    $(document).on('keydown', 'form.mailform input,textarea', function () {
+        $(this).removeClass('error');
+        $(this).prevAll('.errormessage').remove();
+    });
+
     $(document).on('submit', 'form.mailform', function () {
         var form = $(this);
         var button = $(this).find('button[type="submit"]');
-        button.text(button.data('sending'));
+        button.attr('data-text', button.text()).prop('disabled', true).text(button.data('sending'));
         $.ajax({
             url: $(this).attr('action'),
             type: $(this).attr('method'),
             data: $(this).serialize(),
-            success: function (response) {
-                $(form).closest('#contact-form').html('<p>' + $(form).data('confirmation') + '</p>');
-            },
+        }).done(function (response) {
+            $(form).find('.error').removeClass('error');
+            $(form).closest('#contact-form').html('<p class="center text-2xl text-center p-8" >' + $(form).data('confirmation') + '</p>');
+        }).fail(function (response) {
+            button.text(button.data('text')).prop('disabled', false);
+            $(form).find('.error').removeClass('error');
+            $(form).find('.errormessage').remove();
+            $.each(response.responseJSON.errors, function (k, v) {
+                if (v.length > 0) {
+                    var field = $(form).find('[name="' + k + '"]');
+                    $(field).addClass('error');
+                    $('<span class="errormessage">' + v[0] + '</span>').insertBefore(field);
+                }
+            });
         });
         return false;
     });
-
 });
 
diff --git a/resources/styles/components/form.styl b/resources/styles/components/form.styl
index 4557974..930ef71 100644
--- a/resources/styles/components/form.styl
+++ b/resources/styles/components/form.styl
@@ -10,25 +10,50 @@ $verylightgrey = #E7E9F3
 
 #contact-form
   .form
+
+    .fields
+      grid-column-gap: 30px
+      grid-template-columns: repeat(auto-fit, minmax(270px, 2fr));
+
+    .errormessage
+      color: #cc0000;
+      font-weight: 300
+      position: absolute
+      right: 0
+      top: 15px
+      text-align: right
+
     input, textarea
       border-radius 3px
       color: $dark
       padding 12px 10px
+      border 1px solid #fff
+      display: block
+      width: 100%
+
+      &.error
+        border-color: #cc0000
 
     label
       font-family: $barlow
+      position: relative
+      padding-top: 15px
+      display: block
+      grid-column 1 / span 2
+      &.half
+        grid-column auto
 
     .textarea
       height 144px
+      display: block
 
     &-endmessage
       font-size: 14px
+      margin-bottom: 20px;
 
     .btn-custom
       padding 1.125rem 5.375rem
 
-    .mr-form
-      margin-right: 2.5vw
 
     *:focus
       outline-color $verylightgrey
diff --git a/resources/views/partials/form.blade.php b/resources/views/partials/form.blade.php
index a6e6a9a..487b74d 100644
--- a/resources/views/partials/form.blade.php
+++ b/resources/views/partials/form.blade.php
@@ -4,54 +4,62 @@
 
 <div id="contact-form">
     <div class="form flex flex-col">
-        <p class="form-info text-navy">{{$page->get('form_intro')}}</p>
-        <form class="flex flex-col text-navy mailform" action="/ajax/mailform" method="post"
-              data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}">
-            {{ csrf_field() }}
+        @if($page->get('form_intro'))
+            <p class="form-info text-navy">{{$page->get('form_intro')}}</p>
+        @endif
+        <form class="text-navy mailform" action="/ajax/mailform" method="post"
+              data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}" novalidate>
             <input type="hidden" value="{{$page->get('id')}}" name="page">
-            @foreach($page->get('form') as $field)
-                @php
-                    $required=$field['mandatory']?' required':'';
-                    $asx=$field['mandatory']?' *':'';
-                @endphp
-                <label class="form-input flex flex-col mr-form">
+            <div class="fields grid" >
+                @foreach($page->get('form') as $field)
+                    @php
+                        $required=$field['mandatory']?' required':'';
+                        $asx=$field['mandatory']?' *':'';
+                    @endphp
+                    <label class="form-input">
+                        @switch($field['type'])
+                            @case('name')
+                            {{__('Nom')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!}  name="name">
+                            @break
 
-                    @switch($field['type'])
-                        @case('name')
-                        {{__('Nom')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!}  name="name">
-                        @break
+                            @case('firstname')
+                            {{__('Prénom')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                            {!! $required !!}  name="firstname">
+                            @break
 
-                        @case('firstname')
-                        {{__('Prénom')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!}  name="firstname">
-                        @break
+                            @case('company')
+                            {{__('Société')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                             {!! $required !!}  name="company">
+                            @break
 
-                        @case('company')
-                        {{__('Société')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!}  name="company">
-                        @break
+                            @case('email')
+                            {{__('E-mail')}}{{$asx}} <input class="py-3 mt-3" type="email"
+                                                            {!! $required !!}  name="email">
+                            @break
 
-                        @case('email')
-                        {{__('E-mail')}}{{$asx}} <input class="py-3 mt-3" type="email" {!! $required !!}  name="email">
-                        @break
+                            @case('ref')
+                            {{__('Référence')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                               {!! $required !!}  name="ref">
+                            @break
 
-                        @case('ref')
-                        {{__('Référence')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!}  name="ref">
-                        @break
+                            @case('sku')
+                            {{__('Numéro de série')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                                     {!! $required !!}  name="sku">
+                            @break
 
-                        @case('sku')
-                        {{__('Numéro de série')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!}  name="sku">
-                        @break
+                            @case('subject')
+                            {{__('Sujet')}}{{$asx}} <input class="py-3 mt-3" type="text"
+                                                           {!! $required !!}  name="subject">
+                            @break
 
-                        @case('subject')
-                        {{__('Sujet')}}{{$asx}} <input class="py-3 mt-3" type="text" {!! $required !!}  name="subject">
-                        @break
-
-                        @case('message')
-                        {{__('Message')}}{{$asx}} <textarea class="py-3 textarea mt-3" type="text"
-                                                    {!! $required !!}  name="message"></textarea>
-                        @break
-                    @endswitch
-                </label>
-            @endforeach
+                            @case('message')
+                            {{__('Message')}}{{$asx}} <textarea class="py-3 textarea mt-3" type="text"
+                                                                {!! $required !!}  name="message"></textarea>
+                            @break
+                        @endswitch
+                    </label>
+                @endforeach
+            </div>
 
             <div class="form-endmessage mt-5 text-grey-dark">
                 @markdown($global->get('form_privacy'))