feat: amélioration de la gestion des profils utilisateurs (suppression de profil_infos.html.twig, mise à jour des formulaires, meilleur affichage des quotas et permissions, et support des fichiers GIF)
This commit is contained in:
@@ -1,41 +1,61 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{# @var userData \App\Entity\User #}
|
||||
{# @var form \Symfony\Component\Form\FormView #}
|
||||
{# @var isEditMode bool #}
|
||||
|
||||
{% block title %}Ma page de profil | {{ parent() }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen bg-bg-primaire py-8 w-full font-sora">
|
||||
{# Affichage du formulaire (seulement en mode édition) #}
|
||||
{% if isEditMode %}
|
||||
{{ form_start(form, {'attr': {'class': 'max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-3 gap-8'}}) }}
|
||||
{% else %}
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-3 gap-8">
|
||||
{% if isEditMode %}
|
||||
{{ form_start(form, {'attr': {'class': 'contents'}}) }}
|
||||
{% endif %}
|
||||
|
||||
{# Colonne Photo #}
|
||||
<div class="flex flex-col text-text items-center">
|
||||
<div class="w-full md:w-64 flex-shrink-0 mt-20">
|
||||
<div class="border-2 border-black p-1 bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
|
||||
{% if userData.image %}
|
||||
<img src="{{ asset('uploads/images/' ~ userData.image) }}" alt="Photo de profil"
|
||||
class="w-full aspect-[4/3] object-cover">
|
||||
{% else %}
|
||||
<div class="w-full aspect-[4/3] bg-gray-50 flex items-center justify-center text-6xl">👤
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mt-16 flex-shrink-0">
|
||||
{% if userData.image %}
|
||||
{# Design avec photo #}
|
||||
<img src="{{ asset('uploads/images/' ~ userData.image) }}"
|
||||
alt="Photo de profil"
|
||||
class="w-48 h-48 md:w-56 md:h-56 p-1 rounded-full ring-2 ring-gris-clair object-cover">
|
||||
{% else %}
|
||||
{# Design sans photo #}
|
||||
<div
|
||||
class="relative w-48 h-48 md:w-56 md:h-56 overflow-hidden bg-neutral-200 rounded-full flex items-end justify-center shadow-sm">
|
||||
<svg class="w-5/6 h-5/6 text-neutral-500" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<p class="text-2xl text-title font-caveat mt-4"> Ma photo</p>
|
||||
<p class="text-2xl text-title font-caveat mt-6"> Ma photo</p>
|
||||
|
||||
{# Affichage du champs "choisir en fichier" (seulement en mode édition) #}
|
||||
{# Gestion du dépôt d'un fichier image (Uniquement en mode édition) #}
|
||||
{% if isEditMode %}
|
||||
<div class="w-full mt-2">
|
||||
{{ form_label(form.image, 'Choisir un fichier', {'label_attr': {'class': 'block mb-2.5 text-sm font-medium text-gris-fonce'}}) }}
|
||||
{{ form_widget(form.image, {
|
||||
'attr': {'class': 'cursor-pointer bg-white border border-gris-clair text-text text-sm rounded-lg focus:outline-none focus:ring-1 focus:ring-bouton focus:border-bouton block w-full shadow-sm placeholder-gris-moyen file:mr-4 file:py-2.5 file:px-4 file:border-0 file:border-r file:border-gris-clair file:bg-gris-clair file:text-gris-fonce hover:file:bg-gris-moyen transition-colors'}
|
||||
<div class="w-full mt-4">
|
||||
{{ form_label(form.image, 'Choisir un fichier', {
|
||||
'label_attr': {'class': 'block mb-2.5 text-sm font-medium text-gris-fonce'}
|
||||
}) }}
|
||||
<p class="mt-1 text-sm text-gris-moyen">JPG, JPEG ou PNG (Taille max : 2Mo).</p>
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">{{ form_errors(form.image) }}</div>
|
||||
{{ form_widget(form.image, {
|
||||
'attr': {
|
||||
'class': 'cursor-pointer bg-white border border-gris-clair text-text text-sm rounded-lg focus:outline-none focus:ring-1 focus:ring-bouton focus:border-bouton block w-full shadow-sm placeholder-gris-moyen file:mr-4 file:py-2.5 file:px-4 file:border-0 file:border-r file:border-gris-clair file:bg-gris-clair file:text-gris-fonce hover:file:bg-gris-moyen transition-colors',
|
||||
'aria-describedby': 'file_input_help'
|
||||
}
|
||||
}) }}
|
||||
<p class="mt-1 text-sm text-gris-moyen" id="file_input_help">
|
||||
JPG, JPEG, GIF ou PNG (Taille max : 8Mo).
|
||||
</p>
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.image) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -64,16 +84,20 @@
|
||||
|
||||
<h2 class="text-2xl font-caveat text-text mb-6 text-center">Mes informations personnelles</h2>
|
||||
|
||||
{# --- Gestion de l'affichage des informations personnelles --- #}
|
||||
<div class="flex flex-col gap-6">
|
||||
{# Identifiant #}
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-semibold text-text">Identifiant KAZ:</label>
|
||||
<label class="block text-base font-semibold text-text">
|
||||
Identifiant Kaz :
|
||||
</label>
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.identifiantKaz, {'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
|
||||
<div class="text-red-500 text-xs mt-1 italic">{{ form_errors(form.identifiantKaz) }}</div>
|
||||
{{ form_widget(form.identifiantKaz, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
|
||||
{% else %}
|
||||
<div
|
||||
class="w-full px-4 py-3 bg-gray-50 border border-gris-clair rounded-lg text-text">{{ userData.identifiantKaz ?? 'Non renseigné' }}</div>
|
||||
class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
|
||||
{{ userData.identifiantKaz ?? 'Non défini' }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -81,73 +105,167 @@
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{# NOM #}
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-semibold text-text">NOM :</label>
|
||||
<label class="block text-base font-semibold text-text">
|
||||
NOM :
|
||||
</label>
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.lastName, {'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
|
||||
<div
|
||||
class="text-red-500 text-xs mt-1 italic font-sora">{{ form_errors(form.lastName) }}</div>
|
||||
{{ form_widget(form.lastName, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.lastName) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div
|
||||
class="w-full px-4 py-3 bg-gray-50 border border-gris-clair rounded-lg text-text">{{ userData.lastName }}</div>
|
||||
class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
|
||||
{{ userData.lastName }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Prénom #}
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-semibold text-text">Prénom :</label>
|
||||
<label class="block text-base font-semibold text-text">
|
||||
Prénom :
|
||||
</label>
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.firstName, {'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
|
||||
<div
|
||||
class="text-red-500 text-xs mt-1 italic font-sora">{{ form_errors(form.firstName) }}</div>
|
||||
{{ form_widget(form.firstName, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.firstName) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div
|
||||
class="w-full px-4 py-3 bg-gray-50 border border-gris-clair rounded-lg text-text">{{ userData.firstName }}</div>
|
||||
class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
|
||||
{{ userData.firstName }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Téléphone #}
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-semibold text-text">Numéro de téléphone :</label>
|
||||
<label class="block text-base font-semibold text-text">
|
||||
Numéro de téléphone :
|
||||
</label>
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.telephone, {'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
|
||||
<div class="text-red-500 text-xs mt-1 italic">{{ form_errors(form.telephone) }}</div>
|
||||
{{ form_widget(form.telephone, {'attr': {'class': 'w-full px-4 py-3 text-base bg-white border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
|
||||
<div class="text-red-500 text-xs mt-1 italic">
|
||||
{{ form_errors(form.telephone) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div
|
||||
class="w-full px-4 py-3 bg-gray-50 border border-gris-clair rounded-lg text-text">{{ userData.telephone ?? 'Non renseigné' }}</div>
|
||||
class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
|
||||
{{ userData.telephone ?? 'Non renseigné' }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# E-mail #}
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-semibold text-text">E-mail :</label>
|
||||
<label class="block text-base font-semibold text-text">
|
||||
E-mail :
|
||||
</label>
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.email, {'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">{{ form_errors(form.email) }}</div>
|
||||
{{ form_widget(form.email, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.email) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div
|
||||
class="w-full px-4 py-3 bg-gray-50 border border-gris-clair rounded-lg text-text">{{ userData.email }}</div>
|
||||
class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
|
||||
{{ userData.email }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# E-mail de secours #}
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-semibold text-text">E-mail de secours :</label>
|
||||
<label class="block text-base font-semibold text-text">
|
||||
E-mail de secours :
|
||||
</label>
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.alternateEmail, {'attr': {'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
|
||||
<div
|
||||
class="text-red-500 text-xs mt-1 italic font-sora">{{ form_errors(form.alternateEmail) }}</div>
|
||||
{{ form_widget(form.alternateEmail, {'attr': {'class': 'w-full px-4 py-3 text-base bg-white border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow'}}) }}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.alternateEmail) }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div
|
||||
class="w-full px-4 py-3 bg-gray-50 border border-gris-clair rounded-lg text-text">{{ userData.alternateEmail ?? 'Non renseigné' }}</div>
|
||||
class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
|
||||
{{ userData.alternateEmail ?? 'Non renseigné' }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Quota Email #}
|
||||
<div class="space-y-1">
|
||||
<label class="block text-base font-semibold text-text">
|
||||
Espace disponible dans votre boîte mail :
|
||||
</label>
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.emailQuota, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
|
||||
{% else %}
|
||||
<div
|
||||
class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
|
||||
{{ userData.emailQuota ?? 'Non défini' }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Quota Nextcloud #}
|
||||
<div class="space-y-1 sm:col-span-2">
|
||||
<label class="block text-base font-semibold text-text">
|
||||
Quota Nextcloud :
|
||||
</label>
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.nextcloudQuota, {'attr': {'class': 'w-full px-4 py-3 text-base bg-gray-100 border border-gris-clair rounded-lg text-gray-500 cursor-not-allowed'}}) }}
|
||||
{% else %}
|
||||
<div
|
||||
class="w-full px-4 py-3 text-base bg-gray-50 border border-gris-clair rounded-lg text-text">
|
||||
{{ userData.nextcloudQuota ?? 'Non défini' }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# --- Gestion de l'affichage des checkbox des différents accès --- #}
|
||||
<div class="sm:col-span-2 grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-gris-clair">
|
||||
|
||||
{# Accès Nextcloud #}
|
||||
<div class="flex items-center gap-3">
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.hasNextcloudAccess, {'attr': {'class': 'w-5 h-5 text-bouton border-gris-clair rounded focus:ring-bouton cursor-not-allowed opacity-60'}}) }}
|
||||
{{ form_label(form.hasNextcloudAccess, null, {'label_attr': {'class': 'text-base font-medium text-text'}}) }}
|
||||
{% else %}
|
||||
<span class="text-l">{% if userData.hasNextcloudAccess %}✅{% else %}❌{% endif %}</span>
|
||||
<span class="text-base font-medium text-text">Accès Nextcloud</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Accès Mobilizon #}
|
||||
<div class="flex items-center gap-3">
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.hasMobilizon, {'attr': {'class': 'w-5 h-5 text-bouton border-gris-clair rounded focus:ring-bouton cursor-not-allowed opacity-60'}}) }}
|
||||
{{ form_label(form.hasMobilizon, null, {'label_attr': {'class': 'text-base font-medium text-text'}}) }}
|
||||
{% else %}
|
||||
<span class="text-l">{% if userData.hasMobilizon %}✅{% else %}❌{% endif %}</span>
|
||||
<span class="text-base font-medium text-text">Accès Mobilizon</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Accès Agora #}
|
||||
<div class="flex items-center gap-3">
|
||||
{% if isEditMode %}
|
||||
{{ form_widget(form.hasAgoraAccess, {'attr': {'class': 'w-5 h-5 text-bouton border-gris-clair rounded focus:ring-bouton cursor-not-allowed opacity-60'}}) }}
|
||||
{{ form_label(form.hasAgoraAccess, null, {'label_attr': {'class': 'text-base font-medium text-text'}}) }}
|
||||
{% else %}
|
||||
<span class="text-l">{% if userData.hasAgoraAccess %}✅{% else %}❌{% endif %}</span>
|
||||
<span class="text-base font-medium text-text">Accès Agora</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Affichage du bouton "Valider" (seulement en mode édition) #}
|
||||
{% if isEditMode %}
|
||||
<div class="flex flex-col sm:flex-row gap-4 pt-2">
|
||||
<div class="flex justify-center pt-8 pb-4">
|
||||
<button type="submit"
|
||||
class="flex-1 py-3 bg-bouton hover:bg-bouton-hover text-text font-bold rounded-lg shadow transition-colors">
|
||||
class="px-8 py-2.5 bg-bouton hover:bg-bouton-hover text-text text-sm font-bold rounded-lg shadow transition-colors">
|
||||
Enregistrer les modifications
|
||||
</button>
|
||||
</div>
|
||||
@@ -157,9 +275,9 @@
|
||||
|
||||
{# Fermuture du formulaire (seulement en mode édition) #}
|
||||
{% if isEditMode %}
|
||||
{{ form_end(form) }}
|
||||
{% else %}
|
||||
{{ form_end(form) }}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user