wip #6867 @11:00

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js b/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js
index 56abf37a7a39a9213bd04ad6068f95583d160008..be408cd79ad175d136ceac5d39315206b23b8bab 100644 (file)
--- a/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js
@@ -14,9 +14,16 @@ FluidbookCartBastideResahGuest.prototype = {
         });
 
         $(document).on(this.fluidbook.input.clickEvent, '#create-account', function () {
+            $this.updateTitle('Créer un compte')
             $this.updateCart('register')
             $this.updateRegisterClass()
-        })
+        });
+
+        $(document).on("submit", '#Bastide_register_form', function (e) {
+            e.preventDefault()
+            let formData = $(this).serialize()
+            $this.register(formData)
+        });
     },
 
     addToCart: function (reference) {
@@ -36,7 +43,11 @@ FluidbookCartBastideResahGuest.prototype = {
     },
 
     updateRegisterClass: function () {
-      $("#Bastide_cart").toggleClass('register')
+        $("#Bastide_cart").toggleClass('register')
+    },
+
+    updateTitle: function(title = "Connexion") {
+        $("#mview-dialog-title").text(title)
     },
 
     openModal: function (title, content, callback) {
@@ -66,18 +77,18 @@ FluidbookCartBastideResahGuest.prototype = {
         let form = `<div id="Bastide_auth_form" class="container-form">`;
         switch (action) {
             case 'register':
-                form += `<form id="Bastide_register_form" class="" action="">
+                form += `<form id="Bastide_register_form" class="" action="/admin/client/signin">
                     <div class="form-group">
                         <div class="form-header">
                             établissement hospitalier
                         </div>
                         <div class="form-controls">
                             <label for="">Nom de l'établissement</label>
-                            <input type="text" />
+                            <input type="text" name="hospital" />
                         </div>
                         <div class="form-controls">
                             <label for="">Numéro de finess de l’établissement</label>
-                            <input type="text" />
+                            <input type="text" name="finess" />
                         </div>
                     </div>
                     <div class="form-group">
@@ -86,48 +97,53 @@ FluidbookCartBastideResahGuest.prototype = {
                         </div>
                         <div class="form-controls">
                             <label for="">Votre nom</label>
-                            <input type="text" />
+                            <input type="text" name="name" />
                         </div>
                         <div class="form-controls">
                             <label for="">Votre prénom</label>
-                            <input type="text" />
+                            <input type="text" name="firstname" />
                         </div>
                         <div class="form-controls">
                             <label for="">Votre fonction</label>
-                            <input type="text" />
+                            <input type="text" name="function" />
                         </div>
                         <div class="form-controls">
                             <label for="">votre Numéro de téléphone</label>
-                            <input type="text" />
+                            <input type="text" name="phone" />
                         </div>
                         <div class="form-controls">
                             <label for="">votre adresse email pro</label>
-                            <input type="email" />
+                            <input type="email" name="email" />
                         </div>
                         <div class="form-controls">
                             <label for="">confirmer votre adresse email PRO</label>
-                            <input type="text" />
+                            <input type="text" name="email_confirm" />
                         </div>
                         <div class="form-controls">
                             <label for="">définir votre mot de passe</label>
-                            <input type="text" />
+                            <input type="password" name="password" />
                         </div>
                         <div class="form-controls">
                             <label for="">confirmer votre mot de passe</label>
-                            <input type="text" />
+                            <input type="password" name="password_confirm" />
                         </div>
-                        <div class="form-controls condition">
-                            <input type="checkbox" />
-                            <label class="">Je reconnais avoir été informé que les informations recueillies sur ce 
+                    </div>
+                    <div class="form-controls condition" data-valid="/images/valid.svg">
+                            <input id="condition_field" type="checkbox" name="accept" />
+                            <label for="condition_field">Je reconnais avoir été informé que les informations recueillies sur ce 
                             formulaire sont enregistrées dans un fichier informatisé traité par Bastide le Confort 
                             Médical. Pour plus d’informations je peux consulter la <a href="">charte de protection des 
                             données personnelles</a>.
                             </label>
                         </div>
-                    </div>
                     <button id="register" class="cta" type="submit">Valider</button>
                </form>`
                 break;
+            case 'register_ok': `<div id="Bastide_notif_form"><p>Votre demande de création de compte sera examinée dans les plus brefs délais. 
+                    Vous recevrez un email de confirmation dans les 24h (pensez à vérifier votre dossier spam).</p>
+                    <p>Nos équipes commerciales se tiennent à votre disposition : <a href="mailto:resah@bastide-medical.fr">
+                    resah@bastide-medical.fr</a></p>
+                </div>`
             default:
                 form += `<form id="Bastide_login_form" class="" action="">
                     <p class="title">Pour afficher les tarifs, ajouter des produits à votre sélection, et nous envoyer une demande de devis, veuillez vous identifier :</p>
@@ -152,6 +168,50 @@ FluidbookCartBastideResahGuest.prototype = {
         return form;
     },
 
+    register: function(d) {
+        var $this = this
+        var token = document.cookie.match(new RegExp('(^| )XSRF-TOKEN=([^;]+)'));
+        token = token[0].split('=')[1]
+        $.ajaxSetup({
+            headers: {
+                'X-CSRF-TOKEN': token,
+                'Access-Control-Allow-Origin': "*"
+            }
+        });
+
+        $.ajax({
+            url: '/fluidbook/signin',
+            type: 'POST',
+            data: d,
+            success: function(data) {
+                $this.updateTitle('Merci !')
+                $this.updateCart('register_ok')
+            },
+            error: function(xhr, status, error) {
+                console.log(xhr, error)
+                let errorsMessage = JSON.parse(xhr.responseText);
+                $this.displayErrors(errorsMessage)
+            }
+        });
+    },
+
+    displayErrors: function(errors) {
+        console.log(errors['errors'],"ok")
+        $(".errors-container").remove()
+        $(".error").removeClass("error")
+        for(let k in errors['errors']) {
+            $("[name="+k+"]").parent().append('<div class="errors-container"></div>')
+            $(".errors-container").parent().addClass("error")
+            for(let i in errors['errors'][k]) {
+                $("[name="+k+"]").parent().find('.errors-container').append(`<div>${errors['errors'][k][i]}</div>`)
+            }
+        }
+    },
+
+    login: function () {
+
+    },
+
     getMenuWidth: function () {
         return window.location.hash === '#/cart/validate' ? 990 : 1190; // Validate modal is narrower than main cart
     },

diff --git a/style/cart/bastide-resah.less b/style/cart/bastide-resah.less
index 80cb2c8bd9e6c707efcce89924c05318517dc368..db4307b3f4a583fb76e9f83be936398e24e11d44 100644 (file)
--- a/style/cart/bastide-resah.less
+++ b/style/cart/bastide-resah.less
@@ -1,4 +1,5 @@
 @breakpoint_table: ~"(max-width: 700px)";
+@error: #CC0132;
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
 
@@ -40,6 +41,11 @@
   max-width: 336px;
   margin: 0 auto;
 
+  * {
+    font-family: "Roboto Condensed", sans-serif;
+
+  }
+
   &.register {
     max-width: 600px;
   }
@@ -199,7 +205,7 @@
 
   }
 
-  input[type=email], input[type=number], input[type=text], select, textarea {
+  input[type=email], input[type=number], input[type=text], input[type=password], select, textarea {
     -webkit-appearance: none;
     appearance: none;
     border: 2px solid;
@@ -412,6 +418,7 @@
 
     .title {
       margin-bottom: 1em;
+      font-weight: bold;
     }
 
     form {
@@ -430,14 +437,16 @@
       }
 
       input {
-        border: 1px solid #000000;
         height: 30px;
       }
     }
 
+    input {
+      border: 1px solid #000000;
+    }
+
     input[type=submit] {
-      background-color: @menu-background;
-      border: 1px solid @menu-background;
+      background-color: #000000;
       color: #fff;
       white-space: nowrap;
       margin: 0;
@@ -449,15 +458,17 @@
       -webkit-appearance: none;
       appearance: none;
       background-color: #fff;
-      margin: 0;
-      border: 1px solid @menu-background;
+      margin: 0 10px 0 0;
       position: relative;
+      flex-shrink: 0;
 
       &:checked::before {
-        content: url('images/valid.svg');
+        content: url('../images/valid.svg');
         width: 10px;
         height: 10px;
         position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
       }
     }
 
@@ -467,9 +478,12 @@
       color: #fff;
     }
 
+    #create-account, #forgot-password {
+      color: @menu-background;
+    }
+
     #create-account {
       background-color: transparent;
-      border: 1px solid @menu-background;
       margin-top: .625em;
     }
 
@@ -478,6 +492,10 @@
       margin-top: .625em;
     }
 
+    #register {
+      margin-right: 0;
+    }
+
     .underbar {
       padding: 2em 0;
       position: relative;
@@ -515,15 +533,15 @@
       max-width: 220px;
       text-transform: uppercase;
       text-align: center;
-      font-size: 1em;
-      border: 1px solid;
+      font-size: 14px;
+      border: 1px solid @menu-background;
       margin: 0 auto;
       cursor: pointer;
+      font-weight: 700;
     }
 
     #login, #create-account, #forgot-password {
       text-align: center;
-      font-size: .875em;
     }
 
     /* register form */
@@ -534,12 +552,23 @@
       margin-bottom: 20px;
       text-transform: uppercase;
       color: #fff;
+      font-weight: 700;
     }
 
-    .form-group {
+    .form-group, .form-controls.condition {
       margin-bottom: 30px;
     }
 
+    .error {
+      input {
+        border-color: @error
+      }
+      .errors-container {
+        margin-top: 5px;
+        color: @error
+      }
+    }
+
     #Bastide_register_form {
       .form-group {
         display: flex;
@@ -550,11 +579,20 @@
       .form-controls {
         width: calc(50% - 40px);
         flex: auto;
+        position: relative;
 
         &.condition {
+          width: 100%;
           display: flex;
           flex-direction: row;
 
+          .errors-container {
+            position: absolute;
+            bottom: -2px;
+            transform: translateY(100%);
+            left: 25px;
+          }
+
           label {
             text-transform: initial;
           }