Reset Password

<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">Reinitialisation de votre mot de passe</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-12 xl:col-span-6 xl:col-start-4">
        <div class="flex flex-col gap-2 adjusted-marg-y-xs">
            <h1 class="text-center h6">Demande de réinitialisation de votre mot de passe</h1>
            <p class="text-black/64 text-body-sm">Indiquez l'adresse e-mail associée à votre compte pour recevoir un e-mail permettant de réinitialiser votre mot de passe.</p>
        </div>
        <form action="#" method="post" id="user_forgotpassword" x-data="Object.assign(hyva.formValidation($el),initPasswordForm())" @submit.prevent="submitForm();">

            <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="email" id="email_address" class="form-input w-full peer
                required
                " placeholder="" required @input.debounce="onChange">

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

                                    <span class="flex-grow">Email</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>
                </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">
                            Envoyer

                        </button>
                    </div>
                    <div class="flex flex-row justify-center gap-1">
                        <a href="#" class="link-dark link-base underline">Se connecter</a>
                        /
                        <a href="#" class="link-dark link-base underline">Créer un compte</a>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</section>

<script>
    function initPasswordForm() {
        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('#user_forgotpassword');
                        if (this.errors === 0) {
                            $form.submit();
                        }
                    })
                    .catch((invalid) => {
                        if (invalid.length > 0) {
                            invalid[0].focus();
                        }
                    });
            }
        }
    }
</script>