Etat Pur Design System

Login 

<div class="container">
    <nav class="flex items-center min-h-10" aria-label="Fil d'ariane">
        <ol class="flex items-center gap-1 flex-wrap text-body-xs text-black/40">
            <li>
                <a href="#" class="
        
         link-sm
         link-neutral 
        
        
    ">

                    Accueil

                </a>

            </li>

            <li aria-hidden="true" class="text-neutral-500">
                •
            </li>

            <li>
                <span class="font-bold text-black tracking-[0.3px]" aria-current="page">Connexion</span>
            </li>

        </ol>
    </nav>
</div>

<section class="container grid-layout gap-y-6 adjusted-marg-b-md">
    <div class="col-span-4 sm:col-span-10 xl:col-span-6 sm:col-start-2 xl:col-start-4">
        <div class="mb-6 md:mb-8 2xl:mb-10">
            <div class="tab-wrapper tab-wrapper-lg flex items-start flex-row justify-center" x-data="{ tab: 1}">
                <a href="./login.html">

                    <div class="tab-item " :class="tab === 1 ? 'current-tab' : ''" @click="tab = 1">

                        <span>Se connecter</span>

                    </div>

                </a>
                <a href="./register.html">

                    <div class="tab-item " :class="tab === 2 ? 'current-tab' : ''" @click="tab = 2">

                        <span>Créer un compte</span>

                    </div>

                </a>
            </div>
        </div>

        <form class="form form-login" action="#" method="post" x-data="Object.assign(hyva.formValidation($el),initCustomerLoginForm())" @submit.prevent="submitForm()" id="customer-login-form">
            <fieldset class="fieldset login flex flex-col gap-4">
                <div class="field field-reserved">

                    <div class="flex flex-col w-full gap-y-1">
                        <div class="input-wrapper flex flex-col relative w-full  floating-label">

                            <input type="email" name="username" id="username" class="form-input w-full peer
                required
                " placeholder="" required @input.debounce="onChange">

                            <div class="label-wrapper ">
                                <label for="username" class="flex flex-row items-center gap-2">

                                    <span class="flex-grow">E-mail</span>

                                    <div class="required text-error">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
                                        </svg>
                                    </div>

                                </label>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="field field-reserved">

                    <div class="flex flex-col w-full gap-y-1">
                        <div x-data="{showPassword: false}" class="input-wrapper flex flex-col relative w-full  floating-label">

                            <div class="sr-only" aria-live="polite">
                                <template x-if="!showPassword">
                                    <span>Password hidden</span>
                                </template>
                                <template x-if="showPassword">
                                    <span>Password shown</span>
                                </template>
                            </div>
                            <!-- Keep input verification if Magento has one -->
                            <input type="password" class="form-input w-full peer required" required placeholder="" :type="showPassword ? 'text' : 'password'" name="password" id="password" @input.debounce="onChange">

                            <div class="input-svg password">
                                <button type="button" :aria-pressed="showPassword" x-on:click="showPassword = !showPassword" :aria-label="showPassword ? 'Hide Password' : 'Show Password'">
                                    <template x-if="showPassword">
                                        <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" fill="none" />
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill="none" />

                                        </svg> </template>
                                    <template x-if="!showPassword">
                                        <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                            <path d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" stroke="currentColor" stroke-width="1.5" fill="none" />

                                        </svg> </template>
                                </button>
                            </div>

                            <div class="label-wrapper ">
                                <label for="password" class="flex flex-row items-center gap-2">

                                    <span class="flex-grow">Password</span>

                                    <div class="required text-error">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
                                        </svg>
                                    </div>
                                </label>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="flex justify-between items-center">
                    <span class="text-body-xs">
                        Champs obligatoires<span class="text-error">*</span>
                    </span>

                    <a href="#" class="
         underline 
         link-sm
         link-dark
        
        
    ">

                        Mot de passe oublié ?

                    </a>
                </div>

                <div class="flex flex-col gap-y-4 mx-auto w-full md:w-[360px] 2xl:w-[304px] 3xl:w-[392px]">
                    <div class="flex justify-center items-center">
                        <button type="submit" class="w-full justify-center  btn  btn-dark  btn-solid  btn-size-lg">
                            Se connecter

                        </button>
                    </div>
                    <div class="flex justify-center items-center">
                        <button type="button" class="w-full justify-center !bg-[#1A77F3]  btn  btn-dark  btn-solid  btn-size-lg btn-icons">
                            <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z" fill="currentColor" />

                            </svg> Se connecter via Facebook

                        </button>
                    </div>
                </div>

                <div class="mt-4 text-body-xs text-black/64 text-center">
                    NAOS France (Etat Pur, Bioderma, Institut Esthederm) collecte les données personnelles ci-dessus
                    afin de créer votre compte Etat Pur, vous permettre de bénéficier des services associés et vous
                    permettre de participer à notre programme de fidélité. Pour en savoir plus sur l’utilisation de
                    vos données et sur vos droits, cliquez-ici
                </div>
            </fieldset>
        </form>
    </div>
</section>

<script>
    function initCustomerLoginForm() {
        return {
            errors: 0,
            hasCaptchaToken: 0,
            displayErrorMessage: false,
            errorMessages: [],
            setErrorMessages(messages) {
                this.errorMessages = [messages]
                this.displayErrorMessage = this.errorMessages.length
            },
            submitForm() {
                this.validate()
                    .then(() => {
                        // do not rename $form, the variable is the expected name in the recaptcha output
                        const $form = document.querySelector('#customer-login-form');
                        if (this.errors === 0) {
                            $form.submit();
                        }
                    })
                    .catch((invalid) => {
                        if (invalid.length > 0) {
                            invalid[0].focus();
                        }
                    });
            }
        }
    }
</script>
 
<div class="container">
    {% render "@breadcrumbs" with {
        links: [
            {
                label: 'Connexion',
                href: '#'
            }
        ]
    } %}
</div>

<section class="container grid-layout gap-y-6 adjusted-marg-b-md">
    <div class="col-span-4 sm:col-span-10 xl:col-span-6 sm:col-start-2 xl:col-start-4">
        <div class="mb-6 md:mb-8 2xl:mb-10">
            {% include "@tabs" with {
                size: 'lg',
                direction: 'horizontal',
                tabsClass: 'justify-center',
                defaultTab: 1,
                tabs: [
                    {
                        id: 1,
                        label: 'Se connecter',
                        href: './login.html',
                    },
                    {
                        id: 2,
                        label: 'Créer un compte',
                        href: './register.html',
                    },
                ]
            } %}
        </div>

        <form class="form form-login"
              action="#"
              method="post"
              x-data="Object.assign(hyva.formValidation($el),initCustomerLoginForm())"
              @submit.prevent="submitForm()"
              id="customer-login-form"
        >
            <fieldset class="fieldset login flex flex-col gap-4">
                <div class="field field-reserved">
                    {% include "@template-input" with {
                        id: 'username',
                        name: 'username',
                        type: 'email',
                        label: 'E-mail',
                        required: true,
                        label_floating: true,
                    } %}
                </div>

                <div class="field field-reserved">
                    {% include "@template-input-password" with {
                        id: 'password',
                        name: 'password',
                        type: 'password',
                        label: 'Password',
                        required: true,
                        label_floating: true,
                    } %}
                </div>

                <div class="flex justify-between items-center">
                    <span class="text-body-xs">
                        Champs obligatoires<span class="text-error">*</span>
                    </span>

                    {% render "@template-link" with {
                        label: "Mot de passe oublié ?",
                        href: "#",
                        type: "dark",
                        size: 'sm',
                        underlined: true,
                    } %}
                </div>

                <div class="flex flex-col gap-y-4 mx-auto w-full md:w-[360px] 2xl:w-[304px] 3xl:w-[392px]">
                    <div class="flex justify-center items-center">
                        {% render "@template-button" with {
                            label: "Se connecter",
                            color: "dark",
                            size: "lg",
                            buttonType: 'submit',
                            button_class: 'w-full justify-center',
                        } %}
                    </div>
                    <div class="flex justify-center items-center">
                        {% render "@template-button" with {
                            label: "Se connecter via Facebook",
                            color: "dark",
                            size: "lg",
                            button_class: 'w-full justify-center !bg-[#1A77F3]',
                            icon_type: "leading-icon",
                            icon: {
                                name: "social--facebook",
                            },
                        } %}
                    </div>
                </div>

                <div class="mt-4 text-body-xs text-black/64 text-center">
                    NAOS France (Etat Pur, Bioderma, Institut Esthederm) collecte les données personnelles ci-dessus
                    afin de créer votre compte Etat Pur, vous permettre de bénéficier des services associés et vous
                    permettre de participer à notre programme de fidélité. Pour en savoir plus sur l’utilisation de
                    vos données et sur vos droits, cliquez-ici
                </div>
            </fieldset>
        </form>
    </div>
</section>

<script>
    function initCustomerLoginForm() {
        return {
            errors: 0,
            hasCaptchaToken: 0,
            displayErrorMessage: false,
            errorMessages: [],
            setErrorMessages(messages) {
                this.errorMessages = [messages]
                this.displayErrorMessage = this.errorMessages.length
            },
            submitForm() {
                this.validate()
                    .then(() => {
                        // do not rename $form, the variable is the expected name in the recaptcha output
                        const $form = document.querySelector('#customer-login-form');

                        if (this.errors === 0) {
                            $form.submit();
                        }
                    })
                    .catch((invalid) => {
                        if (invalid.length > 0) {
                            invalid[0].focus();
                        }
                    });
            }
        }
    }
</script>
 
/* No context defined. */

No notes defined.