rappaurio-sae501_502/app-rappaurio/views/contains/inscription.hbs

<section class="relative overflow-hidden z-10 pt-[180px] pb-[120px]">
    <div class="container">
        <div class="flex flex-wrap mx-[-16px]">
            <div class="w-full px-4">
                <div class="max-w-[500px] mx-auto bg-dark bg-opacity-15 dark:bg-dark rounded-md p-12 sm:p-[60px]">
                    <h3 class="font-bold text-white dark:text-white text-2xl mb-6 sm:text-3xl text-center">
                        Créez votre compte
                    </h3>
                    <form method="POST" action="/auth/inscription">
                        <div class="mb-8">
                            <label for="name" class="block text-sm font-medium text-white dark:text-white mb-3">
                                Nom <sup class="text-body-color">*</sup>
                            </label>
                            <input type="text" name="name" id="name" placeholder="Entrer votre nom..."
                                required="required"
                                class="w-full border border-transparent bg-primary bg-opacity-10 dark:bg-[#242B51] rounded-md shadow-one dark:shadow-signUp py-3 px-6 text-body-color text-base placeholder-body-color outline-none focus-visible:shadow-none focus:border-primary" />
                        </div>
                        <div class="mb-8">
                            <label for="email" class="block text-sm font-medium text-white dark:text-white mb-3">
                                Email <sup class="text-body-color">*</sup>
                            </label>
                            <input type="email" name="email" id="email" placeholder="Entrer votre Email..."
                                required="required"
                                class="w-full border border-transparent bg-primary bg-opacity-10 dark:bg-[#242B51] rounded-md shadow-one dark:shadow-signUp py-3 px-6 text-body-color text-base placeholder-body-color outline-none focus-visible:shadow-none focus:border-primary" />
                        </div>
                        <div class="mb-12">
                            <label for="password" class="block text-sm font-medium text-white dark:text-white mb-3">
                                Mot de passe <sup class="text-body-color">*</sup>
                            </label>
                            <input type="password" name="password" id="password"
                                placeholder="Entrer votre mot de passe..." required="required"
                                class="w-full border border-transparent bg-primary bg-opacity-10 dark:bg-[#242B51] rounded-md shadow-one dark:shadow-signUp py-3 px-6 text-body-color text-base placeholder-body-color outline-none focus-visible:shadow-none focus:border-primary" />
                        </div>

                        <div class="mb-8">
                            <sup class="text-body-color">* champs obligatoires</sup>
                        </div>



                        <!-- CONDITIONS D'UTILISATION

                            <div class="flex mb-8">
                                <label for="checkboxLabel"
                                    class="flex cursor-pointer text-body-color text-sm font-medium select-none">
                                    <div class="relative">
                                        <input type="checkbox" id="checkboxLabel" class="sr-only" />
                                        <div
                                            class="box flex items-center justify-center w-5 h-5 rounded border border-body-color border-opacity-20 dark:border-white dark:border-opacity-10 mr-4 mt-1">
                                            <span class="opacity-0">
                                                <svg width="11" height="8" viewBox="0 0 11 8" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
                                                        fill="#3056D3" stroke="#3056D3" stroke-width="0.4" />
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                    <span>
                                        By creating account means you agree to the
                                        <a href="javascript:void(0)" class="text-primary hover:underline"> Terms and
                                            Conditions </a>
                                        , and our
                                        <a href="javascript:void(0)" class="text-primary hover:underline"> Privacy
                                            Policy </a>
                                    </span>
                                </label>
                            </div>

                            -->

                        <div class="mb-6">
                            <button type="submit"
                                class="w-full flex items-center justify-center text-base font-medium text-white bg-primary py-4 px-9 hover:shadow-signUp hover:bg-opacity-80 transition duration-300 ease-in-out rounded-md">
                                Inscription
                            </button>
                        </div>

                    </form>
                    <p class="font-medium text-base text-body-color text-center">
                        Déjà un compte?
                        <a href="/connexion" class="text-primary hover:underline"> Connexion </a>
                    </p>

                    {{#if message }}
                    <h4 class="text-center mt-6 border text-alert px-4 py-3 rounded relative">{{message}}</h4>
                    {{/if}}

                </div>
            </div>
        </div>
    </div>
</section>