feat: mise en page de la page "infos perso" et "gérer mes mots de passe"
This commit is contained in:
@@ -3,29 +3,67 @@
|
||||
{% block title %}Modifier mes mots de passe | {{ parent() }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen bg-bg-primary flex items-center justify-center p-4">
|
||||
<div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border-t-4 border-brand-teal">
|
||||
<div class="min-h-screen bg-bg-primaire flex items-center justify-center p-4 font-sora">
|
||||
<div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border-t-4 border-bouton">
|
||||
|
||||
<h1 class="font-title text-4xl text-brand-dark mb-6 text-center">
|
||||
<h1 class="font-caveat text-4xl text-text mb-6 text-center">
|
||||
Sécurité du compte
|
||||
</h1>
|
||||
|
||||
{{ form_start(form) }}
|
||||
<div class="space-y-4">
|
||||
{# Champ Ancien Mot de Passe #}
|
||||
<div>
|
||||
{{ form_label(form.oldPassword, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
|
||||
{{ form_widget(form.oldPassword, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal focus:border-transparent outline-none transition-all'}}) }}
|
||||
{{ form_errors(form.oldPassword) }}
|
||||
<div class="space-y-1">
|
||||
{{ form_label(form.oldPassword, 'Mot de passe actuel', {
|
||||
'label_attr': {'class': 'block text-sm font-semibold text-text'}
|
||||
}) }}
|
||||
{{ form_widget(form.oldPassword, {
|
||||
'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'}
|
||||
}) }}
|
||||
|
||||
{# Affichage message pour les erreurs de saisie de l'ancien mot de passe #}
|
||||
<div class="text-red-500 text-xs mt-1 italic">
|
||||
{{ form_errors(form.oldPassword) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Champs Nouveau Mot de Passe #}
|
||||
<div class="space-y-4">
|
||||
{{ form_row(form.newPassword.first, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal outline-none'}}) }}
|
||||
{{ form_row(form.newPassword.second, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal outline-none'}}) }}
|
||||
<div class="space-y-4 pt-2">
|
||||
{# Affichage de l'erreur si les deux champs ne correspondent pas #}
|
||||
<div class="text-red-500 text-xs italic">
|
||||
{{ form_errors(form.newPassword) }}
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
{{ form_label(form.newPassword.first, 'Nouveau mot de passe', {
|
||||
'label_attr': {'class': 'block text-sm font-semibold text-text'}
|
||||
}) }}
|
||||
{{ form_widget(form.newPassword.first, {
|
||||
'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 transition-shadow'}
|
||||
}) }}
|
||||
|
||||
{# Affichage de l'erreur de longueur (min 8 caractères) #}
|
||||
<div class="text-red-500 text-xs mt-1 italic">
|
||||
{{ form_errors(form.newPassword.first) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
{{ form_label(form.newPassword.second, 'Confirmer le nouveau mot de passe', {
|
||||
'label_attr': {'class': 'block text-sm font-semibold text-text'}
|
||||
}) }}
|
||||
{{ form_widget(form.newPassword.second, {
|
||||
'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 transition-shadow'}
|
||||
}) }}
|
||||
</div>
|
||||
|
||||
<div class="text-red-500 text-xs mt-1">
|
||||
{{ form_errors(form.newPassword) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-brand-teal text-brand-dark font-bold py-3 rounded-lg hover:bg-opacity-90 transition-colors shadow-md mt-6">
|
||||
{# Bouton de validation #}
|
||||
<button type="submit"
|
||||
class="w-full bg-bouton hover:bg-bouton-hover text-text font-bold py-3 rounded-lg shadow-md transition-colors mt-6">
|
||||
Mettre à jour mon mot de passe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,2 +1,135 @@
|
||||
{# templates/hellp.html.twig #}
|
||||
<h1>Hello ! {{ name }}</h1>
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Accueil | {{ parent() }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen bg-bg-primaire py-8 w-full font-sora">
|
||||
|
||||
{{ 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'}}) }}
|
||||
|
||||
{# TODO: voir si c'est pertinent avec l'API et s'il y a l'utilité d'une photo de profil #}
|
||||
{# Gestion de la colone avec le choix de la photo de profil #}
|
||||
<div class="flex flex-col text-text items-center">
|
||||
|
||||
{# Affichage de la photo de profil #}
|
||||
<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.photo %}
|
||||
<img src="{{ asset('uploads/images/' ~ userData.photo) }}"
|
||||
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>
|
||||
|
||||
<p class="text-2xl text-title font-caveat mt-4"> Ma photo</p>
|
||||
|
||||
{# Gestion du dépôt d'un fichier image #}
|
||||
<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 file:cursor-pointer transition-colors',
|
||||
'aria-describedby': 'file_input_help'
|
||||
}
|
||||
}) }}
|
||||
<p class="mt-1 text-sm text-gris-moyen" id="file_input_help">
|
||||
JPG, JPEG ou PNG (Taille max : 2Mo).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Gestion de la colonne avec les "infos persos" #}
|
||||
<div class="md:col-span-2">
|
||||
<h1 class="text-4xl font-caveat text-text mb-6 text-center sm:text-center">Mon profil</h1>
|
||||
<h2 class="text-2xl font-caveat text-text mb-6 text-center sm:text-center">Mes informations personnelles</h2>
|
||||
|
||||
{# Gestion du formulaire qui regroupe toutes les infos perso #}
|
||||
<div class="flex flex-col gap-6">
|
||||
|
||||
{# Champ NOM et Prénom #}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
{{ form_label(form.firstName, 'NOM :', {
|
||||
'label_attr': {'class': 'block text-sm font-semibold text-text'}
|
||||
}) }}
|
||||
{{ 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'}
|
||||
}) }}
|
||||
{# Implémentation d'un message d'errer en cas de problème #}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.firstName) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
{{ form_label(form.lastName, 'Prénom :', {
|
||||
'label_attr': {'class': 'block text-sm font-semibold text-text'}
|
||||
}) }}
|
||||
{{ 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'}
|
||||
}) }}
|
||||
{# Implémentation d'un message d'errer en cas de problème #}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.lastName) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Champ Téléphone #}
|
||||
<div class="space-y-1">
|
||||
{{ form_label(form.telephone, 'Numéro de téléphone', {
|
||||
'label_attr': {'class': 'block text-sm font-semibold text-text'}
|
||||
}) }}
|
||||
{{ form_widget(form.telephone) }}
|
||||
{# Implémentation d'un message d'errer en cas de problème #}
|
||||
<div class="text-red-500 text-xs mt-1 italic">
|
||||
{{ form_errors(form.telephone) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Champ E-mail #}
|
||||
<div class="space-y-1">
|
||||
{{ form_label(form.email, 'E-mail :', {
|
||||
'label_attr': {'class': 'block text-sm font-semibold text-text'}
|
||||
}) }}
|
||||
{{ 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'}
|
||||
}) }}
|
||||
{# Implémentation d'un message d'errer en cas de problème #}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.email) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Champ E-mail de secours #}
|
||||
<div class="space-y-1">
|
||||
{{ form_label(form.emailDeSecours, 'E-mail de secours :', {
|
||||
'label_attr': {'class': 'block text-sm font-semibold text-text'}
|
||||
}) }}
|
||||
{{ form_widget(form.emailDeSecours, {
|
||||
'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'}
|
||||
}) }}
|
||||
{# Implémentation d'un message d'errer en cas de problème #}
|
||||
<div class="text-red-500 text-xs mt-1 italic font-sora">
|
||||
{{ form_errors(form.emailDeSecours) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 pt-2">
|
||||
<button type="submit"
|
||||
class="flex-1 py-3 bg-bouton hover:bg-bouton-hover text-text font-bold rounded-lg shadow transition-colors">
|
||||
Valider
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user