2405fcc2da
- Install knpuniversity/oauth2-client-bundle and stevenmaguire/oauth2-keycloak - Register KnpUOAuth2ClientBundle in bundles.php - Configure Keycloak OIDC client (realm e-cosplay, auth.esy-web.dev) - Add keycloakId field to User entity with migration - Create KeycloakAuthenticator with group-to-role mapping (/superadmin -> ROLE_ROOT) - Create OAuthController with SSO routes (/connection/sso/login, logout, check) - Add custom_authenticator to security firewall with form_login entry point - Add auth.esy-web.dev to nelmio external_redirects whitelist and CSP form-action - Add SSO button and error flash messages to login page - Make navbar active state dynamic based on current route (desktop + mobile) - Add Keycloak env vars to .env, .env.local, and ansible/env.local.j2 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
69 lines
3.6 KiB
Twig
69 lines
3.6 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Connexion - E-Ticket{% endblock %}
|
|
{% block description %}Connectez-vous a votre compte E-Ticket pour gerer vos evenements et billets{% endblock %}
|
|
|
|
{% block body %}
|
|
<div style="max-width:28rem;margin:0 auto;padding:3rem 1rem;">
|
|
<h1 class="text-3xl font-black uppercase tracking-tighter italic" style="border-bottom:4px solid #111827;display:inline-block;margin-bottom:0.5rem;">Connexion</h1>
|
|
<p class="font-bold text-gray-600 italic" style="margin-bottom:2rem;">Accedez a votre espace.</p>
|
|
|
|
{% if error %}
|
|
<div style="border:4px solid #111827;padding:1rem 1.5rem;margin-bottom:2rem;background:#fee2e2;box-shadow:4px 4px 0 rgba(0,0,0,1);">
|
|
<p class="font-black text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for message in app.flashes('error') %}
|
|
<div style="border:4px solid #111827;padding:1rem 1.5rem;margin-bottom:2rem;background:#fee2e2;box-shadow:4px 4px 0 rgba(0,0,0,1);">
|
|
<p class="font-black text-sm">{{ message }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<form method="post" action="{{ path('app_login') }}" style="display:flex;flex-direction:column;gap:1.5rem;">
|
|
<div>
|
|
<label for="login_email" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Email</label>
|
|
<input type="email" id="login_email" name="_username" required autofocus
|
|
value="{{ last_username }}"
|
|
style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
|
|
class="focus:border-indigo-600"
|
|
placeholder="jean.dupont@exemple.fr">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="login_password" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Mot de passe</label>
|
|
<input type="password" id="login_password" name="_password" required
|
|
style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
|
|
class="focus:border-indigo-600"
|
|
placeholder="••••••••">
|
|
</div>
|
|
|
|
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
|
|
|
<div>
|
|
<button type="submit"
|
|
style="width:100%;padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);cursor:pointer;"
|
|
class="bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
|
|
Se connecter
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div style="display:flex;align-items:center;gap:1rem;margin-top:2rem;">
|
|
<div style="flex:1;height:3px;background:#111827;"></div>
|
|
<span class="text-xs font-black uppercase tracking-widest text-gray-500">ou</span>
|
|
<div style="flex:1;height:3px;background:#111827;"></div>
|
|
</div>
|
|
|
|
<a href="{{ path('app_oauth_keycloak') }}"
|
|
style="display:block;width:100%;padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);text-align:center;text-decoration:none;margin-top:1.5rem;"
|
|
class="bg-gray-900 text-white font-black uppercase text-sm tracking-widest hover:bg-indigo-600 transition-all">
|
|
Se connecter avec E-Cosplay
|
|
</a>
|
|
|
|
<div style="margin-top:2rem;text-align:center;">
|
|
<p class="text-sm font-bold text-gray-600">Pas encore de compte ? <a href="{{ path('app_register') }}" class="text-indigo-600 hover:underline font-black">Inscription</a></p>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|