90 lines
5.6 KiB
Handlebars

<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 sm:text-3xl mb-6 text-center">
Connexion à votre compte
</h3>
<!--FORMULAIRE-->
<form method="POST" action="/auth/connexion">
<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-8">
<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-3">
<sup class="text-body-color">* champs obligatoires</sup>
</div>
<!--CASE COCHER POUR SOUVENIR MDP-->
<div class="flex items-center justify-between mb-8">
<!--
<div>
<label for="checkboxLabel"
class="flex items-center 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">
<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>
Rester connecté
</label>
</div>
<div>
<a href="javascript:void(0)" class="text-primary text-sm font-medium hover:underline">
Mot de passe oublié? </a>
</div>
-->
</div>
<!--MDP OUBLIER-->
<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">
Connexion
</button>
</div>
</form>
<p class="font-medium text-base text-body-color text-center">
Vous n'avez pas de compte?
<a href="/inscription" class="text-primary hover:underline"> Inscription </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>