From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 29 Apr 2024 16:04:17 +0000 (+0200)
Subject: wip #6882 @6:00 inscription
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1a42d476fbf878be0d7418960963c798ca569c87;p=bastide-resah.git

wip #6882 @6:00 inscription
---

diff --git a/app/Http/Controllers/FluidbookController.php b/app/Http/Controllers/FluidbookController.php
index f80ff64..4804399 100644
--- a/app/Http/Controllers/FluidbookController.php
+++ b/app/Http/Controllers/FluidbookController.php
@@ -38,7 +38,7 @@ class FluidbookController extends Controller
         if ($validator->fails()) {
             return response()->json(['errors' => $validator->errors()])->setStatusCode(422);
         } else {
-            $ignore = ['email_confirmation', 'password_confirmation', 'accept'];
+            $ignore = ['email_confirmation', 'password_confirmation', 'accept', '_token'];
             $client = new Client();
             foreach ($validator->valid() as $k => $v) {
                 if (in_array($k, $ignore)) {
diff --git a/resources/webflow/css/custom.css b/resources/webflow/css/custom.css
index 8818ac3..6c7401a 100644
--- a/resources/webflow/css/custom.css
+++ b/resources/webflow/css/custom.css
@@ -1,3 +1,226 @@
 .errors-container p {
     color: #CC0132;
 }
+
+#viewOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 41;
+    cursor: pointer;
+    background-color: rgba(59, 74, 153, 0.44);
+    transition: opacity 400ms;
+    opacity: 0;
+    visibility: hidden;
+}
+
+#viewOverlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+#view {
+    position: absolute;
+    top: 0;
+    z-index: 42;
+    display: none;
+    overflow: hidden;
+    background-size: 100% 100%;
+    max-width: 600px;
+    width: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 400ms, top 400ms;
+}
+
+#view.active {
+    top: 103.101px;
+    opacity: 1;
+    transform: translate(-50%, 0);
+    display: block;
+}
+
+#Bastide_cart {
+    background-color: #fff;
+    color: #000;
+    height: 100%;
+    width: 100%;
+    min-height: 25vh;
+    min-width: 320px;
+    max-width: 336px;
+    margin: 0 auto;
+}
+
+#Bastide_cart * {
+    font-family: "Roboto Condensed", sans-serif;
+    font-size: 12px;
+}
+
+#Bastide_cart[data-content="register"] {
+    max-width: 600px !important;
+}
+
+#Bastide_cart[data-content="register_ok"] {
+    min-height: auto;
+}
+
+#Bastide_cart .caption {
+    padding: 25px 30px 35px;
+    height: auto;
+    position: relative;
+}
+
+#Bastide_cart .caption h2 {
+    margin: 0;
+}
+
+#Bastide_cart #mview-dialog-title {
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+a.back {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60px;
+    height: 60px;
+    padding: 22px;
+    line-height: 1;
+    z-index: 1;
+    background-color: transparent;
+}
+
+.form-header {
+    width: 100%;
+    padding: 4px 10px;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    color: #fff;
+    font-weight: 700;
+}
+
+#Bastide_cart #Bastide_auth_form .form-group,
+#Bastide_cart #Bastide_auth_form .form-controls.condition {
+    margin-bottom: 30px;
+}
+
+.cta {
+    width: 100%;
+    height: 40px;
+    max-width: 220px;
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 14px !important;
+    border: 1px solid rgba(59, 74, 153);
+    margin: 0 auto;
+    cursor: pointer;
+    font-weight: 700;
+}
+
+#register, .form-header {
+    background-color: rgba(59, 74, 153);
+    color: #ffffff;
+}
+
+#create-account {
+    text-align: center;
+}
+
+.error input {
+    border-color: #CC0132;
+}
+.error .errors-container {
+    margin-top: 5px;
+    color: #CC0132;
+}
+
+label {
+    font-weight: normal !important;
+    line-height: normal;
+}
+
+input {
+    border: 1px solid #000000;
+}
+
+#Bastide_auth_form {
+    padding: 0 58px 50px;
+}
+
+#Bastide_register_form {
+    text-align: right;
+}
+
+#Bastide_register_form *:not(#forgot-password):not(.underbar):not(.cta) {
+    text-align: left;
+}
+#Bastide_register_form .title {
+    margin-bottom: 1em;
+    font-weight: bold;
+}
+#Bastide_register_form form {
+    display: flex;
+    flex-direction: column;
+}
+#Bastide_register_form .form-controls {
+    margin-bottom: 1.25em;
+    display: flex;
+    flex-direction: column;
+}
+#Bastide_register_form .form-controls label {
+    margin-bottom: .625em;
+    text-transform: uppercase;
+}
+#Bastide_register_form .form-controls input {
+    height: 30px;
+}
+#Bastide_register_form a {
+    text-decoration: underline;
+    color: rgba(59, 74, 153);
+}
+#Bastide_register_form input[type=checkbox] {
+    width: 16px;
+    height: 16px;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fff;
+    margin: 0 10px 0 0;
+    position: relative;
+    flex-shrink: 0;
+}
+#Bastide_register_form input[type=checkbox]:checked::before {
+    content: url('../images/valid.svg');
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+#Bastide_register_form .form-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 40px;
+}
+#Bastide_register_form .form-controls {
+    width: calc(50% - 40px);
+    flex: auto;
+    position: relative;
+}
+#Bastide_register_form .form-controls.condition {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+}
+#Bastide_register_form .form-controls.condition .errors-container {
+    position: absolute;
+    bottom: -2px;
+    transform: translateY(100%);
+    left: 25px;
+}
+#Bastide_register_form .form-controls.condition label {
+    text-transform: initial;
+}
diff --git a/resources/webflow/js/custom.js b/resources/webflow/js/custom.js
index 397a0ca..c432d3f 100644
--- a/resources/webflow/js/custom.js
+++ b/resources/webflow/js/custom.js
@@ -1,12 +1,86 @@
+function getCaption(title) {
+    $('#Bastide_cart .caption').remove()
+    return `<div class="caption "><a href="#/closeview" role="button" aria-label="Fermer" aria-keyshortcuts="Escape" class="back"><svg viewBox="0 0 512 512" class="interface-close nav-icon svg-icon" aria-hidden="true"><use xlink:href="#interface-close"></use></svg></a><h2 id="mview-dialog-title">${title}</h2></div>`
+}
+
 $(function () {
     console.log($('meta[name="csrf-token"]'));
     $('#wf-form-login').attr('action', '/landing/login');
     $("#wf-form-login").append('<input type="hidden" name="_token" value="' + $('meta[name="csrf-token"]').attr('content') + '" />');
 
+    var mview = `<div id="view"></div>`;
+    var registerForm = `<div id="Bastide_cart" data-content="register"><div id="Bastide_auth_form"><form id="Bastide_register_form" class="" data-content="register" action="/fluidbook/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" name="hospital" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Numéro de finess de l’établissement</label>
+                            <input type="text" name="finess" />
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="form-header">
+                            Contact
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Votre nom</label>
+                            <input type="text" name="name" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Votre prénom</label>
+                            <input type="text" name="firstname" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">Votre fonction</label>
+                            <input type="text" name="function" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">votre Numéro de téléphone</label>
+                            <input type="text" name="phone" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">votre adresse email pro</label>
+                            <input type="email" name="email" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">confirmer votre adresse email PRO</label>
+                            <input type="text" name="email_confirmation" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">définir votre mot de passe</label>
+                            <input type="password" name="password" />
+                        </div>
+                        <div class="form-controls">
+                            <label for="">confirmer votre mot de passe</label>
+                            <input type="password" name="password_confirmation" />
+                        </div>
+                    </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-donnees-personnelles.html">charte de protection des
+                        données personnelles</a>.
+                        </label>
+                    </div>
+                    <input type="hidden" name="_token" value="${$('meta[name="csrf-token"]').attr('content')}" />
+                    <button id="register" class="cta" type="submit">Valider</button>
+               </form></div></div></div>`
+
+    $(document).on("click", "#create-account", function() {
+        $("#viewOverlay").addClass("active")
+        $("section.main").append(mview)
+        $("section.main #view").addClass("active").append(registerForm)
+        $("#Bastide_cart").prepend(getCaption('Créer un compte'))
+    })
 
-    $(document).on("submit", '#wf-form-login', function (e) {
+    $(document).on("submit", "#wf-form-login", function(e) {
         e.preventDefault()
-        console.log(window.location.href+'/catalogue')
         let formData = $(this).serialize()
         var $this = this
         $.ajax({
@@ -24,4 +98,48 @@ $(function () {
         });
     });
 
+    $(document).on("submit", "#Bastide_register_form", function(e) {
+        e.preventDefault()
+        var $this = this
+        let formData = $(this).serialize()
+
+        $.ajax({
+            url: '/fluidbook/signin',
+            type: 'POST',
+            data: formData,
+            success: function(data) {
+                $("#Bastide_cart").attr("data-content","").prepend(getCaption('Merci !'))
+                $("#Bastide_auth_form").html(`<div id="Bastide_notif_form" data-content="register_ok"><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>`)
+            },
+            error: function(xhr, status, error) {
+                let errors = JSON.parse(xhr.responseText);
+                $("#Bastide_register_form .errors-container").remove()
+                $(".error").removeClass("error")
+                for(let k in errors['errors']) {
+                    $("#Bastide_register_form [name="+k+"]").parent().append('<div class="errors-container"></div>')
+                    $(".errors-container").parent().addClass("error")
+                    for(let i in errors['errors'][k]) {
+                        $("#Bastide_register_form [name="+k+"]").parent().find('.errors-container').append(`<div>${errors['errors'][k][i]}</div>`)
+                    }
+                }
+            }
+        });
+    })
+
+    $(document).mouseup(function(e)
+    {
+        var container = $("#Bastide_cart");
+
+        // if the target of the click isn't the container nor a descendant of the container
+        if (!container.is(e.target) && container.has(e.target).length === 0)
+        {
+            $("#viewOverlay").removeClass("active")
+            $("#view").remove()
+        }
+    });
+
 });