69 lines
3.4 KiB
Twig
69 lines
3.4 KiB
Twig
{% extends 'revervation/base.twig' %}
|
|
|
|
{% block title %}Configuration de votre compte - Ludikevent{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="min-h-screen flex items-center justify-center p-6 bg-slate-50">
|
|
<div class="max-w-md w-full bg-white p-10 rounded-[2.5rem] shadow-xl shadow-slate-200/50 border border-slate-100">
|
|
|
|
<div class="text-center mb-10">
|
|
<span class="inline-block px-4 py-1.5 bg-blue-50 text-blue-600 text-[10px] font-black uppercase tracking-[0.2em] rounded-full mb-6">
|
|
Étape de sécurité
|
|
</span>
|
|
|
|
<h1 class="text-3xl font-black italic uppercase text-slate-900 leading-tight">
|
|
Activez votre <br><span class="text-blue-600">Espace Client</span>
|
|
</h1>
|
|
<p class="text-slate-500 text-sm mt-4 italic">
|
|
Ravi de vous revoir, {{ customer.surname }}. <br>
|
|
Un code vient de vous être envoyé par e-mail.
|
|
</p>
|
|
</div>
|
|
|
|
<form data-turbo="false" method="POST" class="space-y-8">
|
|
|
|
<div class="space-y-3">
|
|
<label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 ml-2">
|
|
Code de vérification (6 chiffres)
|
|
</label>
|
|
<input type="text"
|
|
name="verification_code"
|
|
maxlength="6"
|
|
placeholder="000000"
|
|
required
|
|
class="w-full px-6 py-5 bg-blue-50/30 border-2 border-blue-100 focus:border-blue-500 focus:bg-white text-center text-3xl font-black tracking-[0.5em] text-blue-600 rounded-2xl transition-all outline-none placeholder:text-blue-100">
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 ml-2">
|
|
Choisissez votre mot de passe
|
|
</label>
|
|
<div class="relative">
|
|
<input type="password"
|
|
name="password"
|
|
required
|
|
placeholder="••••••••••••"
|
|
class="w-full px-6 py-5 bg-slate-50 border border-slate-100 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 rounded-2xl transition-all outline-none font-medium">
|
|
</div>
|
|
<p class="text-[10px] text-slate-400 italic ml-2">
|
|
Minimum 8 caractères conseillés.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button type="submit" class="w-full py-5 bg-blue-600 hover:bg-blue-700 text-white font-black uppercase tracking-widest rounded-2xl transition-all shadow-lg shadow-blue-200 transform active:scale-[0.98]">
|
|
Activer mon accès
|
|
</button>
|
|
</div>
|
|
|
|
<div class="text-center space-y-4">
|
|
<p class="text-[10px] text-slate-400 font-medium px-4 leading-relaxed">
|
|
En activant votre compte, vous pourrez signer vos contrats et consulter vos factures en ligne.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|