179 lines
11 KiB
Twig
179 lines
11 KiB
Twig
|
{% extends 'base.twig' %}
|
||
|
|
|
||
|
|
{# --- METADATA --- #}
|
||
|
|
{% block title %}{{ 'profils_title'|trans }}{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<div class="min-h-screen bg-[#fbfbfb] py-8 md:py-16 px-4 italic">
|
||
|
|
<div class="max-w-6xl mx-auto">
|
||
|
|
|
||
|
|
<div class="flex flex-col lg:flex-row gap-8 md:gap-12">
|
||
|
|
|
||
|
|
{# --- NAVIGATION TAGS (SIDEBAR) --- #}
|
||
|
|
<aside class="lg:w-1/4">
|
||
|
|
<nav class="flex flex-col gap-3 sticky top-8">
|
||
|
|
|
||
|
|
{# --- SECTION NAVIGATION STANDARD --- #}
|
||
|
|
|
||
|
|
{# Item: Profils #}
|
||
|
|
<a href="#general" class="group relative inline-block w-full">
|
||
|
|
<div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>
|
||
|
|
<div class="relative bg-indigo-600 text-white px-4 py-3 font-black uppercase text-sm border-2 border-black flex items-center gap-3">
|
||
|
|
<i class="fas fa-user-circle"></i> {{ 'nav.profile'|trans|default('Profils') }}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
|
||
|
|
{# Item: Epage #}
|
||
|
|
<a href="#" class="group relative inline-block w-full">
|
||
|
|
<div class="absolute inset-0 bg-black translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-all"></div>
|
||
|
|
<div class="relative bg-white text-black px-4 py-3 font-black uppercase text-sm border-2 border-black flex items-center gap-3">
|
||
|
|
<i class="fas fa-globe"></i> {{ 'nav.epage'|trans|default('Epage') }}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{# Item: Organisateur #}
|
||
|
|
<a href="#" class="group relative inline-block w-full">
|
||
|
|
<div class="absolute inset-0 bg-black translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-all"></div>
|
||
|
|
<div class="relative bg-white text-black px-4 py-3 font-black uppercase text-sm border-2 border-black flex items-center gap-3">
|
||
|
|
<i class="fas fa-calendar-star"></i> {{ 'nav.event'|trans|default('Organisateur') }}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{# --- SECTION ADMINISTRATION (Conditionnelle) --- #}
|
||
|
|
{% if is_granted('ROLE_ADMIN') %}
|
||
|
|
<div class="mt-4 pt-4 border-t-2 border-dashed border-gray-300">
|
||
|
|
<a href="{{ path('admin_dashboard') }}"
|
||
|
|
data-turbo="false"
|
||
|
|
class="group relative inline-block w-full">
|
||
|
|
<div class="absolute inset-0 bg-black translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-all"></div>
|
||
|
|
<div class="relative bg-yellow-400 text-black px-4 py-3 font-black uppercase text-sm border-2 border-black flex items-center gap-3">
|
||
|
|
<i class="fas fa-user-shield"></i> {{ 'nav.admin'|trans|default('Administration') }}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{# --- SECTION ACTIONS COMPTE --- #}
|
||
|
|
<div class="mt-8 space-y-3">
|
||
|
|
{# Logout #}
|
||
|
|
<a href="{{ path('app_logout') }}" class="group relative inline-block w-full">
|
||
|
|
<div class="absolute inset-0 bg-black translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-all"></div>
|
||
|
|
<div class="relative bg-gray-200 text-black px-4 py-3 font-black uppercase text-sm border-2 border-black flex items-center gap-3">
|
||
|
|
<i class="fas fa-sign-out-alt"></i> {{ 'nav.logout'|trans|default('Déconnexion') }}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{# Suppression (Alerte) #}
|
||
|
|
<a href="#" class="group relative inline-block w-full">
|
||
|
|
<div class="absolute inset-0 bg-red-600 translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-all"></div>
|
||
|
|
<div class="relative bg-white text-red-600 px-4 py-3 font-black uppercase text-[10px] border-2 border-black flex items-center gap-3">
|
||
|
|
<i class="fas fa-trash-alt"></i> {{ 'nav.delete'|trans|default('Supprimer mon compte') }}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
{# --- CONTENU PRINCIPAL --- #}
|
||
|
|
<main class="lg:w-3/4 space-y-12">
|
||
|
|
|
||
|
|
{# Section Profils #}
|
||
|
|
<section id="general" class="scroll-mt-8">
|
||
|
|
<div class="bg-white border-4 border-black p-6 md:p-10 shadow-[12px_12px_0px_#4f46e5]">
|
||
|
|
<h2 class="text-3xl font-black uppercase italic mb-8 border-b-4 border-gray-100 pb-4">
|
||
|
|
{{ 'form.section.general'|trans|default('Informations Profil') }}
|
||
|
|
</h2>
|
||
|
|
{% if app.request.query.has('updateProfils') %}
|
||
|
|
<div class="mb-8 animate-in fade-in slide-in-from-top-4 duration-300">
|
||
|
|
<div class="relative inline-block w-full">
|
||
|
|
{# L'ombre rigide en arrière-plan #}
|
||
|
|
<div class="absolute inset-0 bg-black translate-x-2 translate-y-2"></div>
|
||
|
|
|
||
|
|
{# Le contenu du message #}
|
||
|
|
<div class="relative bg-green-400 border-4 border-black p-4 flex items-center gap-4">
|
||
|
|
{# Icône de succès avec un petit effet de rebond #}
|
||
|
|
<div class="bg-black text-green-400 w-10 h-10 flex items-center justify-center shrink-0">
|
||
|
|
<i class="fas fa-check-double text-xl"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-[10px] font-black uppercase tracking-[0.2em] text-black/60 leading-none mb-1">
|
||
|
|
System.Notification
|
||
|
|
</span>
|
||
|
|
<span class="font-black uppercase italic text-gray-900 leading-tight">
|
||
|
|
{{ 'form.section.update_profils_complete'|trans }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Bouton pour fermer (optionnel) #}
|
||
|
|
<button onclick="this.parentElement.parentElement.remove()" class="ml-auto hover:scale-110 transition-transform">
|
||
|
|
<i class="fas fa-times text-black"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
{{ form_start(formProfils, {'attr': {'class': 'space-y-6'}}) }}
|
||
|
|
{{ form_row(formProfils.username) }}
|
||
|
|
{{ form_row(formProfils.email) }}
|
||
|
|
<button type="submit" class="bg-indigo-600 text-white px-8 py-3 font-black uppercase border-2 border-black shadow-[4px_4px_0px_#000] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
|
||
|
|
{{ 'form.button.save'|trans|default('Sauvegarder') }}
|
||
|
|
</button>
|
||
|
|
{{ form_end(formProfils) }}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{# Section Sécurité #}
|
||
|
|
<section id="security" class="scroll-mt-8">
|
||
|
|
<div class="bg-white border-4 border-black p-6 md:p-10 shadow-[12px_12px_0px_#eab308]">
|
||
|
|
<h2 class="text-3xl font-black uppercase italic mb-8 border-b-4 border-gray-100 pb-4">
|
||
|
|
{{ 'form.section.security'|trans }}
|
||
|
|
</h2>
|
||
|
|
{% if app.request.query.has('updatePassword') %}
|
||
|
|
<div class="mb-8 animate-in fade-in slide-in-from-top-4 duration-300">
|
||
|
|
<div class="relative inline-block w-full">
|
||
|
|
{# L'ombre rigide en arrière-plan #}
|
||
|
|
<div class="absolute inset-0 bg-black translate-x-2 translate-y-2"></div>
|
||
|
|
|
||
|
|
{# Le contenu du message #}
|
||
|
|
<div class="relative bg-green-400 border-4 border-black p-4 flex items-center gap-4">
|
||
|
|
{# Icône de succès avec un petit effet de rebond #}
|
||
|
|
<div class="bg-black text-green-400 w-10 h-10 flex items-center justify-center shrink-0">
|
||
|
|
<i class="fas fa-check-double text-xl"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-[10px] font-black uppercase tracking-[0.2em] text-black/60 leading-none mb-1">
|
||
|
|
System.Notification
|
||
|
|
</span>
|
||
|
|
<span class="font-black uppercase italic text-gray-900 leading-tight">
|
||
|
|
{{ 'form.section.update_password_complete'|trans }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Bouton pour fermer (optionnel) #}
|
||
|
|
<button onclick="this.parentElement.parentElement.remove()" class="ml-auto hover:scale-110 transition-transform">
|
||
|
|
<i class="fas fa-times text-black"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
{{ form_start(formPassword, {'attr': {'class': 'space-y-6'}}) }}
|
||
|
|
{{ form_row(formPassword.password.first) }}
|
||
|
|
{{ form_row(formPassword.password.second) }}
|
||
|
|
<button type="submit" class="bg-yellow-400 text-black px-8 py-3 font-black uppercase border-2 border-black shadow-[4px_4px_0px_#000] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
|
||
|
|
{{ 'form.button.password'|trans|default('Mettre à jour le mot de passe') }}
|
||
|
|
</button>
|
||
|
|
{{ form_end(formPassword) }}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|