26c3dfd3a1
✨ feat(security): Ajoute l'authentification à deux facteurs (2FA) avec Google Authenticator.
```
91 lines
4.8 KiB
Twig
91 lines
4.8 KiB
Twig
{% extends 'base.twig' %}
|
|
|
|
{% block title %}Configuration Sécurité 2FA - Ludikevent{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="min-h-screen flex items-center justify-center bg-[#F8FAFC] py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-md w-full bg-white rounded-[2.5rem] p-10 shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-gray-100">
|
|
|
|
{# Logo et En-tête #}
|
|
<div class="flex flex-col items-center mb-10">
|
|
<img src="{{ asset('provider/images/logo.png') }}" class="h-12 w-auto mb-8" alt="Ludikevent"/>
|
|
|
|
<div class="inline-flex items-center space-x-2 px-3 py-1 bg-indigo-50 rounded-full mb-4">
|
|
<span class="w-2 h-2 bg-indigo-500 rounded-full animate-pulse"></span>
|
|
<span class="text-[10px] font-bold text-indigo-600 uppercase tracking-widest">Sécurisation en cours</span>
|
|
</div>
|
|
|
|
<h1 class="text-2xl font-black text-slate-900 uppercase tracking-tight text-center">
|
|
Double Authentification
|
|
</h1>
|
|
<p class="text-slate-400 text-sm text-center mt-2 px-4">
|
|
Scannez le code QR pour lier votre compte à une application de sécurité.
|
|
</p>
|
|
</div>
|
|
|
|
{# Zone QR Code #}
|
|
<div class="flex flex-col items-center justify-center mb-10">
|
|
<div class="relative p-6 bg-white border-2 border-dashed border-gray-100 rounded-[2rem]">
|
|
<img src="{{ qrCodeUrl }}" class="w-44 h-44" alt="QR Code 2FA"/>
|
|
|
|
{# Petits coins décoratifs pour simuler un scanner #}
|
|
<div class="absolute top-4 left-4 w-4 h-4 border-t-2 border-l-2 border-indigo-500 rounded-tl-lg"></div>
|
|
<div class="absolute top-4 right-4 w-4 h-4 border-t-2 border-r-2 border-indigo-500 rounded-tr-lg"></div>
|
|
<div class="absolute bottom-4 left-4 w-4 h-4 border-b-2 border-l-2 border-indigo-500 rounded-bl-lg"></div>
|
|
<div class="absolute bottom-4 right-4 w-4 h-4 border-b-2 border-r-2 border-indigo-500 rounded-br-lg"></div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex items-center space-x-2 text-slate-400">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
|
</svg>
|
|
<span class="text-[11px] font-medium italic">Ouvrez Google Authenticator ou FreeOTP</span>
|
|
</div>
|
|
</div>
|
|
|
|
{# Formulaire de Validation #}
|
|
<form data-turbo="false" method="post" class="space-y-6">
|
|
{% for message in app.flashes('error') %}
|
|
<div class="p-4 bg-rose-50 text-rose-600 text-xs font-bold rounded-2xl border border-rose-100 text-center animate-shake">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div>
|
|
<label class="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 text-center mb-4">
|
|
Saisissez le code à 6 chiffres
|
|
</label>
|
|
<input type="text"
|
|
name="_check_code"
|
|
maxlength="6"
|
|
required
|
|
placeholder="· · · · · ·"
|
|
inputmode="numeric"
|
|
pattern="[0-9]*"
|
|
autocomplete="one-time-code"
|
|
class="w-full bg-slate-50 border-2 border-transparent focus:border-indigo-500 focus:bg-white focus:ring-0 rounded-2xl py-4 text-center text-3xl font-mono tracking-[0.3em] text-slate-800 transition-all outline-none">
|
|
</div>
|
|
|
|
<button type="submit" class="w-full py-4 bg-slate-900 hover:bg-indigo-600 text-white rounded-2xl font-bold uppercase text-xs tracking-[0.2em] shadow-xl shadow-slate-200 transition-all transform hover:scale-[1.02] active:scale-[0.98]">
|
|
Confirmer l'activation
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-8 text-center">
|
|
<a href="{{ path('app_home') }}" class="text-xs font-bold text-slate-300 hover:text-slate-500 transition-colors uppercase tracking-widest">
|
|
Annuler la configuration
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
.animate-shake { animation: shake 0.2s ease-in-out 0s 2; }
|
|
</style>
|
|
{% endblock %}
|