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

68
templates/etl/base.twig Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="fr" class="bg-slate-50">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#ffffff">
<title>{% block title %}Espace Prestataire{% endblock %} - LudikEvent</title>
{{ vite_asset('etl.js', []) }}
{% block stylesheets %}{% endblock %}
</head>
<body class="font-sans antialiased text-slate-900 bg-slate-50 selection:bg-blue-500 selection:text-white h-full">
<div class="mobile-container">
{# HEADER #}
<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-100 px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-blue-600 rounded-xl flex items-center justify-center text-white font-black text-sm shadow-lg shadow-blue-500/30">
L
</div>
<span class="text-sm font-black uppercase tracking-widest text-slate-900">Prestataire</span>
</div>
{% if app.user %}
<a href="{{ path('elt_logout') }}" class="p-2 rounded-full bg-slate-50 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
</a>
{% endif %}
</header>
{# MAIN CONTENT #}
<main class="flex-1 overflow-y-auto px-6 py-8 pb-24">
{% for label, messages in app.flashes %}
{% for message in messages %}
<div class="mb-6 p-4 rounded-2xl text-xs font-bold uppercase tracking-wide
{{ label == 'success' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' : 'bg-rose-50 text-rose-600 border border-rose-100' }}">
{{ message }}
</div>
{% endfor %}
{% endfor %}
{% block body %}{% endblock %}
</main>
{# BOTTOM NAV (Optional, only if logged in) #}
{% if app.user %}
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-100 px-6 py-3 flex justify-around items-center z-40 max-w-md mx-auto">
<a href="{{ path('etl_home') }}" class="flex flex-col items-center gap-1 text-blue-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
<span class="text-[9px] font-bold uppercase tracking-widest">Accueil</span>
</a>
<a href="#" class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>
<span class="text-[9px] font-bold uppercase tracking-widest">Missions</span>
</a>
<a href="{{ path('etl_account') }}" class="flex flex-col items-center gap-1 text-slate-400 hover:text-slate-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
<span class="text-[9px] font-bold uppercase tracking-widest">Compte</span>
</a>
</nav>
{% endif %}
</div>
{% block javascripts %}{% endblock %}
</body>
</html>