```
✨ feat(profils): Ajoute la page de gestion de profil avec formulaires d'édition.
```
This commit is contained in:
Serreau Jovann
@@ -123,9 +123,18 @@
|
||||
</button>
|
||||
|
||||
<div class="relative group">
|
||||
<a href="{{ path('app_login') }}" class="p-2 border-2 border-gray-900 hover:bg-gray-900 hover:text-white transition-colors">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</a>
|
||||
{% if app.user %}
|
||||
<a href="{{ path('app_profile') }}"
|
||||
class="p-2 border-2 border-gray-900 bg-indigo-600 text-white shadow-[3px_3px_0px_#000] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all flex items-center justify-center">
|
||||
<i class="fas fa-user-check"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
{# État DÉCONNECTÉ : Style neutre d'origine #}
|
||||
<a href="{{ path('app_login') }}"
|
||||
class="p-2 border-2 border-gray-900 bg-white text-gray-900 hover:bg-gray-900 hover:text-white transition-all flex items-center justify-center">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<button id="mobileMenuButton" class="lg:hidden p-2 border-2 border-gray-900 bg-yellow-400">
|
||||
|
||||
81
templates/error/forbidden.twig
Normal file
81
templates/error/forbidden.twig
Normal file
@@ -0,0 +1,81 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{# --- METADATA --- #}
|
||||
{% block title %}{{ 'error.forbidden'|trans }}{% endblock %}
|
||||
|
||||
{# --- BODY --- #}
|
||||
{% block body %}
|
||||
<div class="min-h-screen bg-[#f0f0f0] flex items-center justify-center p-4 italic overflow-hidden relative">
|
||||
|
||||
{# Éléments de décorations en arrière-plan (Style Interface de jeu) #}
|
||||
<div class="absolute top-10 left-10 text-gray-200 text-9xl font-black select-none pointer-events-none opacity-50">403</div>
|
||||
<div class="absolute bottom-10 right-10 text-gray-200 text-9xl font-black select-none pointer-events-none opacity-50">ERROR</div>
|
||||
|
||||
<div class="max-w-2xl w-full relative z-10">
|
||||
<div class="bg-white border-8 border-gray-900 p-8 md:p-12 shadow-[16px_16px_0px_#ef4444] relative">
|
||||
|
||||
{# Badge d'alerte #}
|
||||
<div class="absolute -top-6 left-6 bg-red-600 text-white px-6 py-2 font-black uppercase tracking-tighter border-4 border-gray-900 skew-x-[-15deg] shadow-[4px_4px_0px_#000]">
|
||||
{{ 'error.forbidden.alert'|trans|default('CRITICAL_ACCESS_ERROR') }}
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h1 class="text-6xl md:text-8xl font-black text-gray-900 uppercase leading-none tracking-tighter mb-6">
|
||||
{{ 'error.forbidden.title'|trans|default('403') }}<span class="text-red-600">.</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl md:text-2xl font-bold text-gray-800 uppercase italic mb-8 border-l-8 border-red-600 pl-6 leading-tight">
|
||||
{{ 'error.forbidden.description'|trans|default('Accès refusé. Vous tentez d\'entrer dans une zone sécurisée.') }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-6">
|
||||
{# Bouton Retour Accueil #}
|
||||
<a href="{{ path('app_home') }}" class="group relative inline-block">
|
||||
<div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
|
||||
<div class="relative bg-indigo-600 text-white px-8 py-4 font-black uppercase italic tracking-widest border-4 border-gray-900 flex items-center justify-center gap-3">
|
||||
<i class="fas fa-home"></i>
|
||||
{{ 'error.go_home'|trans|default('RETOUR_HOME') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{# Bouton Login (si déconnecté) #}
|
||||
{% if not app.user %}
|
||||
<a href="{{ path('app_login') }}" class="group relative inline-block">
|
||||
<div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
|
||||
<div class="relative bg-yellow-400 text-black px-8 py-4 font-black uppercase italic tracking-widest border-4 border-gray-900 flex items-center justify-center gap-3">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
{{ 'login.title'|trans|default('CONNEXION') }}
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Footer technique #}
|
||||
<div class="mt-12 pt-6 border-t-4 border-gray-100 flex justify-between items-center">
|
||||
<span class="text-[10px] font-black uppercase text-gray-400 tracking-[0.2em] italic">// SYSTEM_LOG: FORBIDDEN_ENTRY</span>
|
||||
<div class="flex gap-2">
|
||||
<div class="w-3 h-3 bg-red-500 border-2 border-black"></div>
|
||||
<div class="w-3 h-3 bg-gray-900 border-2 border-black"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Petit effet de glitch sur le titre au survol */
|
||||
h1:hover {
|
||||
animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% { transform: translate(0) }
|
||||
20% { transform: translate(-3px, 3px) }
|
||||
40% { transform: translate(-3px, -3px) }
|
||||
60% { transform: translate(3px, 3px) }
|
||||
80% { transform: translate(3px, -3px) }
|
||||
100% { transform: translate(0) }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
178
templates/profis/index.twig
Normal file
178
templates/profis/index.twig
Normal file
@@ -0,0 +1,178 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user