feat(etl): Add ETL authentication and navigation

Add Keycloak authentication for ETL users.
Configure ETL routes and login/logout functionality.
Integrate ETL with Keycloak SSO.
Update vite.config.js to include etl.js.
Create EtlController with home, login, and logout routes.
Implement EtlAuthenticator for email/password login.
Configure security.yaml for ETL firewall and providers.
Add etl.js and etl.scss for ETL frontend.
Add Keycloak client configuration for ETL.
Update PrestaireController to use absolute URL for login.
This commit is contained in:
Serreau Jovann
2026-02-06 11:43:31 +01:00
parent 919bf7038a
commit 42e33a5908
15 changed files with 538 additions and 37 deletions

56
templates/etl/login.twig Normal file
View File

@@ -0,0 +1,56 @@
{% extends 'etl/base.twig' %}
{% block title %}Connexion{% endblock %}
{% block body %}
<div class="flex flex-col justify-center min-h-[60vh] space-y-8">
<div class="text-center space-y-2">
<h1 class="text-2xl font-black text-slate-900 tracking-tight">Bienvenue</h1>
<p class="text-sm text-slate-500 font-medium">Connectez-vous à votre espace prestataire</p>
</div>
{% if error %}
<div class="p-4 rounded-2xl bg-rose-50 border border-rose-100 text-rose-600 text-xs font-bold uppercase tracking-wide text-center animate-in fade-in zoom-in-95 duration-300">
Identifiants incorrects
</div>
{% endif %}
<form method="post" class="space-y-6">
<div class="space-y-4">
<div>
<label for="username" class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-1">Email</label>
<input type="email" value="{{ last_username }}" name="_username" id="username" class="w-full bg-white border border-slate-200 rounded-2xl px-5 py-4 text-sm font-bold text-slate-800 outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all placeholder:text-slate-300" placeholder="votre@email.com" autocomplete="email" required autofocus>
</div>
<div>
<label for="password" class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-1">Mot de passe</label>
<input type="password" name="_password" id="password" class="w-full bg-white border border-slate-200 rounded-2xl px-5 py-4 text-sm font-bold text-slate-800 outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all placeholder:text-slate-300" placeholder="••••••••" autocomplete="current-password" required>
</div>
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate_etl') }}">
<button type="submit" class="w-full bg-blue-600 text-white font-black text-sm uppercase tracking-widest py-4 rounded-2xl shadow-lg shadow-blue-600/30 active:scale-95 transition-all hover:bg-blue-700">
Se connecter
</button>
</form>
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-slate-200"></div>
</div>
<div class="relative flex justify-center text-xs uppercase">
<span class="bg-slate-50 px-2 text-slate-400 font-bold tracking-widest">Ou</span>
</div>
</div>
<a href="{{ path('connect_keycloak_etl_start') }}" class="flex items-center justify-center w-full bg-slate-900 text-white font-black text-sm uppercase tracking-widest py-4 rounded-2xl shadow-lg hover:bg-slate-800 active:scale-95 transition-all">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
Connexion SSO (Interne)
</a>
<div class="text-center">
<a href="#" class="text-xs font-bold text-slate-400 hover:text-blue-600 transition-colors">Mot de passe oublié ?</a>
</div>
</div>
{% endblock %}