Login

<div class="md:max-w-[415px] md:ml-auto"

    x-data="initLoginModal()"

>

    <div class="text-lg md:text-xl font-semibold tracking-tightened mb-5 md:min-h-[60px]">

        <div x-show="loginStep === 1 || loginStep === 4">Connexion / Inscription</div>



        <div x-show="loginStep === 2">

            <div>Créez votre compte</div>

            <div class="text-sm md:text-smaller text-text-light">Déjà un compte ? <button class="link text-primary-accent hover:text-secondary" @click="$dispatch('booking-form-next-step', { main: 1, subStep: 3, skipCheck: true })">Identifiez-vous</button></div>

        </div>



        <div x-show="loginStep === 3">Identifiez-vous</div>



        <div x-show="loginStep === 5">Saisissez le code reçu</div>



        <div x-show="loginStep === 6">Créez votre mot de passe</div>



        <div x-show="loginStep === 7">

            <div>Complétez vos informations</div>

            <div class="text-sm md:text-smaller font-medium text-text-light">Important pour mieux vous servir</div>

        </div>

    </div>

    <div class="booking-steps bg-white border border-ui rounded-button p-5 md:p-7 text-text-light tracking-tightened font-medium">

        

        <?php /* Création/Login (détection adresse mail) */ ?>

        <div x-show="loginStep === 1">

            <p class="text-base">Saisissez votre adresse e-mail ou votre numéro de téléphone mobile, nous nous connaissons peut être déjà 👋</p>

            <div class="py-7.5">

                <div class="form-element text mb-2.5 w-full" :class="hasError.email_login_create && 'error'">

                    <input name="email"

                           class="form-input w-full"

                           id="email_login_create"

                           type="text"

                           title="Email"

                           placeholder=" "

                           pattern="\S+"

                           required

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="email_login_create">

                        <span class="hidden md:block">Adresse e-mail ou numéro de tél.</span>

                        <span class="md:hidden">E-mail ou numéro de tél.</span>

                    </label>

                    <div class="error-message" :class="hasError.email_login_create_required && 'flex'"><?= icon('label-error-colored'); ?> <span>Ce champs est requis</span></div>

                    <div class="error-message" :class="hasError.email_login_create_wrong_format && 'flex'"><?= icon('label-error-colored'); ?> <span>Merci de remplir un format d'email valide.</span></div>

                </div>

                <button class="btn btn-primary btn-full-width" x-data @click="nextStepLogin()">M'identifier</button>

            </div>

            <p>ℹ️ Si vous êtes déjà client des concessions Tressol Chabrier, nous pourrons rapatrier vos informations, documents dans votre garage en ligne</p>

        </div>



        <?php /* Création (compte inexistant et adresse non reconnue) */ ?>

        <div x-cloak x-show="loginStep === 2">

            <p class="text-base">Vous n’avez pas encore de compte, créez le votre gratuitement 👇</p>

            <div class="flex flex-col gap-2.5 py-8">

                <div class="skeleton h-[43px] w-full" x-data="{isLoaded : false}" x-init="isLoaded = true" x-show="!isLoaded"></div>

                <div class="form-element form-box-radio-slider form-box-radio-slider--full-double"

                     x-data="boxCheckboxSlider()"

                     x-cloak>

                    <div x-ref="controler" class="controler"></div>

                    <div class="label-wrapper" x-ref="wrapper">

                        <label for="particulier">

                            <input @click="changeInput()" type="radio" value="particulier" name="type_create" id="particulier" checked>

                            <span>Particulier</span>

                        </label>

                        <label for="pro">

                            <input @click="changeInput()" type="radio" value="professionnel" name="type_create" id="pro">

                            <span>Professionnel</span>

                        </label>

                    </div>

                </div>



                <div class="form-element text w-full" :class="hasError.email_create_required && 'error'">

                    <input name="email"

                           class="form-input w-full"

                           :class="hasError.email_create_required && 'error'"

                           id="email_create"

                           type="text"

                           title="Email"

                           placeholder=" " pattern="\S+" required value="test@gmail.com"

                           x-model="datas.email"

                           @focus="delete hasError.email_create_required"

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="email_create">

                        <span>Votre e-mail</span>

                    </label>

                    <div class="error-message" :class="hasError.email_create_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                </div>

                <div class="flex flex-col md:flex-row gap-2.5">

                    <div class="form-element text md:w-1/2" :class="hasError.firstname_create_required && 'error'">

                        <input name="firstname"

                               class="form-input w-full"

                               id="firstname_create"

                               type="text"

                               title="Prénom"

                               placeholder=" " pattern="\S+" required

                               @focus="delete hasError.firstname_create_required"

                               @keydown.enter="nextStepLogin()"

                        >

                        <label class="label" for="firstname_create">

                            <span>Prénom</span>

                        </label>

                        <div class="error-message" :class="hasError.firstname_create_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                    </div>

                    <div class="form-element text md:w-1/2" :class="hasError.lastname_create_required && 'error'">

                        <input name="lastname"

                               class="form-input w-full"

                               id="lastname_create"

                               type="text"

                               title="Nom"

                               placeholder=" " pattern="\S+" required

                               @focus="delete hasError.lastname_create_required"

                               @keydown.enter="nextStepLogin()"

                        >

                        <label class="label" for="lastname_create">

                            <span>Nom</span>

                        </label>

                        <div class="error-message" :class="hasError.lastname_create_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                    </div>

                </div>

                <div class="form-element text w-full" :class="hasError.phone_create_required && 'error'">

                    <input name="phone"

                           class="form-input w-full"

                           id="phone_create"

                           type="text"

                           title="Nom"

                           placeholder=" " pattern="\S+" required

                           @focus="delete hasError.phone_create_required"

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="phone_create">

                        <span>Votre téléphone mobile</span>

                    </label>

                    <div class="error-message" :class="hasError.phone_create_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                </div>

            </div>



            <div x-show="Object.keys(hasError).length > 0" class="rounded-button border-2 flex gap-2.5 py-2.5 px-4.25 border-error bg-error-light mb-2.5">

                <?= icon('label-suppress-colored'); ?>

                <span>Il y a <span x-text="Object.keys(hasError).length"></span> erreur<span x-show="Object.keys(hasError).length > 1">s</span> dans le formulaire</span>

            </div>



            <button class="btn btn-primary btn-full-width" x-data @click="nextStepLogin()">Créer mon compte</button>



            <div class="form-element form-checkbox pt-5 pb-7.5">

                <label for="cgu_create">

                    <input class="checkbox"

                           type="checkbox"

                           value="cgu_create"

                           id="cgu_create"

                           @change="$event.target.checked && delete hasError.cgu_create"

                    >

                    <span class="controler"></span>

                    <span>J’accepte les CGU de Tressol Chabrier</span>

                </label>

                <div class="error-message" :class="hasError.cgu_create && 'flex'"><?= icon('label-error-colored'); ?><span>Veuillez accepter les CGU pour continuer.</span></div>

            </div>



            <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat sit amet enim id iaculis. Donec ac orci consequat orci feugiat cursus id sit amet nunc. Quisque rutrum ornare sem, sed convallis sem mollis sit amet. </p>

        </div>



        <?php /* Login (compte existant) (mdp pour test validation : azertY6!) */ ?>

        <div x-cloak x-show="loginStep === 3">

            <p class="text-base">Vous avez un compte, 
saisissez votre mot de passe 🔒</p>

            <div class="flex flex-col gap-2.5 py-8">

                <div class="form-element text w-full" :class="hasError.email_login_required && 'error'">

                    <input name="email"

                           class="form-input w-full"

                           id="email_login"

                           type="text" title="Nom"

                           placeholder=" " pattern="\S+" required

                           x-model="datas.email"

                           @focus="delete hasError.email_login_required"

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="email_login_required">

                        <span>Votre e-mail</span>

                    </label>

                    <div class="error-message" :class="hasError.email_login_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                </div>

                <div class="form-element password w-full" x-data="{ show: false }" :class="hasError.password_login_required && 'error'">

                    <input name="password"

                           class="form-input w-full"

                           id="password_login"

                           type="password"

                           :type="show ? 'text' : 'password'"

                           title="Nom" placeholder=" " pattern="\S+" required

                           @focus="delete hasError.password_login"

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="password_login">

                        <span>Votre de passe</span>

                    </label>

                    <span @click="show = !show">

                        <span :class="{'hidden' : show}" >

                            <?= icon('password-see', 'text-icon'); ?>

                        </span>

                        <span :class="{'hidden' : !show}" class="hidden">

                            <?= icon('password-unsee', 'text-icon'); ?>

                        </span>

                    </span>

                </div>

                <div class="error-message pt-0" :class="hasError.password_login_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                <div class="error-message pt-0" :class="hasError.password_login_wrong && 'flex'"><?= icon('label-error-colored'); ?><span>Mot de passe incorrect</span></div>

            </div>



            <button class="btn btn-primary btn-full-width" @click="nextStepLogin()">M'identifier</button>



            <a href="#" class="link block text-center underline text-text-light hover:text-primary-accent mt-7.5">Mot de passe oublié ?</a>

        </div>



        <?php /* Création (adresse reconnue, compte non existant) */ ?>

        <div x-cloak x-show="loginStep === 4">

            <p class="text-base">Nous nous connaissons déjà 😊 
Renseignez quelques informations complémentaires pour récupérer vos informations et documents</p>

            <div class="flex flex-col gap-2.5 py-8">



                <div class="form-element text w-full" :class="hasError.email_know_required && 'error'">

                    <input name="email"

                           class="form-input w-full"

                           id="email_know"

                           type="text"

                           title="Email"

                           placeholder=" " pattern="\S+" value="test@gmail.com" required

                           x-model="datas.email"

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="email_know">

                        <span>Votre e-mail</span>

                    </label>

                    <div class="error-message" :class="hasError.email_know_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                </div>

                <div class="form-element text w-full" :class="hasError.phone_email_know_required && 'error'">

                    <input name="phone" x-data x-init="new Cleave('#phone_email_know', { phone: true, phoneRegionCode: 'FR' });"

                           class="form-input w-full"

                           id="phone_email_know"

                           type="text"

                           title="Téléphone"

                           placeholder=" " pattern="\S+" required

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="phone_email_know">

                        <span>Votre téléphone mobile</span>

                    </label>

                    <div class="error-message" :class="hasError.phone_email_know_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                    <div class="error-message" :class="hasError.phone_email_know_wrong_format && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                </div>

                <div class="form-element text w-full" :class="hasError.postal_code_email_know_required && 'error'">

                    <input name="postal_code" x-data x-init="new Cleave('#postal_code_email_know', { blocks: [2,3] });"

                           class="form-input w-full"

                           id="postal_code_email_know"

                           type="text"

                           title="Code postal"

                           placeholder=" " pattern="\S+" required

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="postal_code_email_know">

                        <span>Votre code postal</span>

                    </label>

                    <div class="error-message" :class="hasError.postal_code_email_know_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                </div>

            </div>



            <button class="btn btn-primary btn-full-width" x-data @click="nextStepLogin()">M'identifier</button>



            <p class="text-sm mt-7.5 text-center px-2.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat sit amet enim id iaculis. Donec ac orci consequat orci feugiat cursus id sit amet nunc. Quisque rutrum ornare sem, sed convallis sem mollis sit amet. </p>

        </div>



        <?php /* Confirmation code (envoyé par SMS/Email) (nb code test pour validation : 123456) */ ?>

        <div x-cloak x-show="loginStep === 5">

            <p class="text-base">Merci, nous vous avons envoyé un [SMS] / [Email] pour valider votre [Medium], merci de saisir le code reçu ci-dessous</p>

            <div class="flex flex-col gap-2.5 py-8">

                <div class="form-element text w-full">

                    <input name="code_confirm"

                           class="form-input w-full"

                           id="code_confirm"

                           type="text"

                           title="Nom"

                           placeholder=" " pattern="\S+" required

                           @keydown.enter="nextStepLogin()"

                    >

                    <label class="label" for="code_confirm">

                        <span>Saisissez votre code reçu par SMS</span>

                    </label>

                    <div class="error-message" :class="hasError.code_confirm_required && 'flex'"><?= icon('label-error-colored'); ?><span>Ce champ est obligatoire.</span></div>

                    <div class="error-message" :class="hasError.wrongCode && 'flex'"><?= icon('label-error-colored'); ?><span>Le code est incorrect.</span></div>

                </div>

            </div>



            <button class="btn btn-primary btn-full-width" x-data @click="nextStepLogin()">Créer mon compte</button>



            <div class="form-element form-checkbox pt-5 pb-7.5">

                <label for="cgu_code">

                    <input class="checkbox"

                           type="checkbox"

                           value="cgu_code"

                           id="cgu_code"

                           @change="$event.target.checked && delete hasError.cgu_code"

                           @keydown.enter="nextStepLogin()"

                    >

                    <span class="controler"></span>

                    <span class="text-sm">J’accepte les CGU de Tressol Chabrier</span>

                </label>

                <div class="error-message" :class="hasError.cgu_code && 'flex'"><?= icon('label-error-colored'); ?><span>Veuillez accepter les CGU pour continuer.</span></div>

            </div>



            <p class="text-sm">La validation de votre numéro de téléphone permettra de vous identifier pour associer toutes vos informations sur votre compte Garage en ligne</p>

        </div>



        <?php /* Création mot de passe */ ?>

        <div x-cloak x-show="loginStep === 6">

            <p class="text-base">Merci, votre [E-mail] / [Numéro de téléphone] est validé. Merci de saisir votre mot de passe pour finaliser la création de votre compte</p>



            <?php include renderTemplate('molecule/form/password-check'); ?>



            <button x-data class="btn btn-primary btn-full-width" @click="$dispatch('check-password-validity');nextStepLogin()">Créer mon compte</button>

        </div>

    </div>

</div>



<script>

  function initLoginModal() {

    return {

      loginStep: 1,

      hasError: [],

      datas: [],

      isExistingAccount: false,

      phoneInput: null,

      init() {

        const current = this;

        document.addEventListener('password-validity', function (e) {

          current.isPasswordValid = e.detail;

        })



        if(document.getElementById('postal_code')) new Cleave('#postal_code', { blocks: [2,3] });

        if(document.getElementById('estimate_postal_code')) new Cleave('#estimate_postal_code', { blocks: [2,3] });

        if(document.getElementById('phone')) this.phoneInput = new Cleave('#phone', { phone: true, phoneRegionCode: 'FR' });

        if(document.getElementById('estimate_phone')) this.phoneInput = new Cleave('#estimate_phone', { phone: true, phoneRegionCode: 'FR' });

      },

      nextStepLogin() {

        if(this.loginStep === 1) {

          this.checkIsEmailExist();

        } else if(this.loginStep === 2) {

          this.createAccount();

        } else if(this.loginStep === 3) {

          this.connectionAccount();

        } else if(this.loginStep === 4) {

          this.completingAccount();

        } else if(this.loginStep === 5) {

          this.checkCode();

        } else if(this.loginStep === 6) {

          this.checkPasswordFormat();

        } else if(this.loginStep === 7) {

          this.setInformations();

        }

      },

      checkIsEmailExist() {

        this.hasError = [];



        this.checkError('email_login_create', 'required');

        this.checkError('email_login_create', 'checkEmailFormat');

        if(Object.keys(this.hasError).length > 0) return false; /* Retourne false s'il y a des erreurs dans le formulaire sinon on continue */



        this.setData('email', 'email_login_create')



        /* Ajax de test de l'adresse email ici qui remplacera le switch */

        let scenario = 2; /* 1 : mail non reconnu, 2 : compte existant, 3 : email reconnu, pas de compte */



        switch (scenario) {

          case 2:

            this.loginStep = 3;

            this.isExistingAccount = true;

            break;

          case 3:

            this.loginStep = 4;

            break;

          default:

            this.loginStep = 2;

        }

      },

      createAccount() {

        this.hasError = [];



        this.checkError('email_create', 'required');

        this.checkError('email_create', 'checkEmailFormat');

        this.checkError('firstname_create', 'required');

        this.checkError('lastname_create', 'required');

        this.checkError('phone_create', 'required');

        this.checkError('cgu_create', 'requiredCheckbox');

        if(Object.keys(this.hasError).length > 0) return false; /* Retourne false s'il y a des erreurs dans le formulaire sinon on continue */



        /* Set datas */

        this.setData('type', 'type_create', 'radio');

        this.setData('email', 'email_create');

        this.setData('firstname', 'firstname_create');

        this.setData('lastname', 'lastname_create');

        this.setData('phone', 'phone_create');



        this.loginStep = 5;

      },

      connectionAccount() {

        this.hasError = [];



        this.checkError('email_login', 'required');

        this.checkError('email_login', 'checkEmailFormat');

        this.checkError('password_login', 'required');



        /* CONDITION A CHANGER AVEC VOTRE VERIF AJAX */

        if(document.getElementById('password_login').value !== "" && document.getElementById('password_login').value !== "azertY6!") {

          this.hasError.password_login_wrong = true;

        }

        if(Object.keys(this.hasError).length > 0) return false; /* Retourne false s'il y a des erreurs dans le formulaire sinon on continue */



        /* === DATAS A INSÉRER AVEC VOTRE RETOUR AJAX */



        this.datas.civility = ["mme", "Mme"];

        this.datas.firstname = "Jeanne";

        this.datas.lastname = "Dupont"

        this.datas.phone = "0622004499";

        this.datas.street= "25 rue de Aiguebelle";

        this.datas.postal_code= "83230";

        this.datas.city= "Bormes les mimosas";

        this.datas.concession = ["no", "Pas de préférence"];

        this.datas.status = ["administrateur-de-compte", "Administrateur de compte"];

        this.isAddressFill = true;

        /* === fin des fakes datas */



        const civilityEvt = new CustomEvent('set-selects-value', {

          detail: {

            id: 'civility',

            value: this.datas.civility[0],

            label: this.datas.civility[1]

          }

        });



        this.$nextTick(() => {

          document.dispatchEvent(civilityEvt);

        })



        const concessionEvt = new CustomEvent('set-selects-value', {

          detail: {

            id: 'concession',

            value: this.datas.concession[0],

            label: this.datas.concession[1]

          }

        });



        this.$nextTick(() => {

          document.dispatchEvent(concessionEvt);

        })

        const statusEvt = new CustomEvent('set-selects-value', {

          detail: {

            id: 'status',

            value: this.datas.status[0],

            label: this.datas.status[1]

          }

        });



        this.$nextTick(() => {

          document.dispatchEvent(statusEvt);

        })



        this.loginStep = 5;

      },

      completingAccount() {

        this.hasError = [];



        this.checkError('email_know', 'required');

        this.checkError('email_know', 'checkEmailFormat');

        this.checkError('phone_email_know', 'required');

        this.checkError('postal_code_email_know', 'required');

        if(Object.keys(this.hasError).length > 0) return false; /* Retourne false s'il y a des erreurs dans le formulaire sinon on continue */



        /* AJAX pour récupérer les infos associées au mail/tel */



        this.setData('email', 'email_know');

        this.setData('phone', 'phone_email_know');

        this.setData('postal_code', 'postal_code_email_know');



        this.loginStep = 5;

      },

      checkCode() {

        this.hasError = [];



        this.checkError('code_confirm', 'required');

        this.checkError('cgu_code', 'requiredCheckbox');

        if(document.getElementById('code_confirm').value !== "123456" && !document.getElementById('code_confirm').validity.valueMissing) { /* CONDITION A CHANGER ICI PAR LA VÉRIF DU CODE */

          this.hasError.wrongCode = true;

        }

        if(Object.keys(this.hasError).length > 0) return false; /* Retourne false s'il y a des erreurs dans le formulaire sinon on continue */



        if(this.isExistingAccount) {

          this.$dispatch('set-datas-user-panel', {

            datas : this.datas

          });

        } else {

          this.loginStep = 6;

        }

      },

      checkPasswordFormat() {

        if(this.isPasswordValid) {



          /* AJAX pour set le password dans le compte client */



          this.$dispatch('set-datas-user-panel', {

            datas : this.datas

          });

        }

      },

      setInformations() {

        this.hasError = [];



        this.checkError('firstname', 'required');

        this.checkError('lastname', 'required');

        this.checkError('phone', 'required');

        this.checkError('street', 'required');

        this.checkError('postal_code', 'required');

        this.checkError('city', 'required');

        if(Object.keys(this.hasError).length > 0) return false; /* Retourne false s'il y a des erreurs dans le formulaire sinon on continue */



        this.setData('civility', 'civility', 'select');

        this.setData('firstname', 'firstname');

        this.setData('lastname', 'lastname');

        this.setData('phone', 'phone', 'phone');

        this.setData('street', 'street');

        this.setData('postal_code', 'postal_code');

        this.setData('city', 'city');



        /* AJAX pour mettre à jour les datas du compte client ici avec le this.data */



        this.$dispatch('set-datas-user-panel', {

          datas : this.datas

        });



      },



      checkError(id, error) {

        if(error === 'required') {

          if(document.getElementById(id).validity.valueMissing) {

            this.hasError[id + '_required'] = true;

            return false;

          }

        }

        if(error === "checkEmailFormat") {

          if(document.getElementById(id).value !== "" && !this.checkEmailFormat(document.getElementById(id).value)) {

            this.hasError[id + '_wrong_format'] = true;

            return false;

          }

        }

        if(error === 'requiredCheckbox') {

          if(!document.getElementById(id).checked) {

            this.hasError[id] = true;

            return false

          }

        }

        return true;

      },

      checkEmailFormat(value) {

        return !!value.match(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g);

      },

      setData(data, id, type = 'input') {

        if(type === 'select') {

          this.datas[data] = document.getElementById(id).nextElementSibling.innerText;

        } else if(type === 'radio') {

          this.datas[data] = document.querySelector('input[name="' + id + '"]').value;

        } else if(type === 'phone') {

          this.datas['phone'] = this.phoneInput.getRawValue()

        }

        else {

          this.datas[data] = document.getElementById(id).value;

        }

      }

    }

  }

</script>