set front

This commit is contained in:
jleroy2023
2024-11-18 14:41:52 +01:00
parent 9bdde39dde
commit 8f75b8a125
30 changed files with 2650 additions and 18 deletions

View File

@@ -0,0 +1,73 @@
{% extends 'base.html.twig' %}
{% block title %}Modifier son profil | {{ parent() }}{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/dynamicPicture.js') }}" defer></script>
{% endblock %}
{% block body %}
<div class="max-w-xl mx-auto my-10 rounded-lg shadow-md p-5 text-light-primary dark:text-light-font dynamic-picture-container bg-light-card dark:bg-dark-card">
<img src="{{ asset((user.profilePicture) ? 'uploads/' ~ user.profilePicture : 'profilDefault.png') | imagine_filter('profile') }}"
class="w-56 h-56 rounded-full mx-auto" id="profilePicture"
alt="Photo de profil de {{ user.pseudo }}">
<p class="text-center my-2 text-2xl">@{{ user.pseudo }}</p>
{{ form_start(form) }}
<div class="my-2">
<label for="UserSchool"
class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
<span class="text-xs font-medium">Campus</span>
{{ form_widget(form.site, { id:'UserSchool', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
</label>
</div>
<div class="my-2">
<label for="firstname"
class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
<span class="text-xs font-medium">Prénom</span>
{{ form_widget(form.firstname, { id:'firstname', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
</label>
</div>
<div class="my-2">
<label for="lastname"
class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
<span class="text-xs font-medium">Nom</span>
{{ form_widget(form.lastname, { id:'lastname', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
</label>
</div>
<div class="my-2">
<label for="UserEmail"
class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
<span class="text-xs font-medium">Email</span>
{{ form_widget(form.email, { id:'UserEmail', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
</label>
</div>
<div class="my-2">
<label for="UserTel"
class="block overflow-hidden rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
<span class="text-xs font-medium">Téléphone</span>
{{ form_widget(form.phone, { id:'UserTel', attr: { class: 'mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm'}}) }}
</label>
</div>
<div class="my-2">
<div class="relative h-32 rounded-md border border-light-secondary/50 px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
{{ form_widget(form.profilePicture, { id:'file-upload', attr: { class: 'hidden'}}) }}
<label for="file-upload"
class="z-20 flex flex-col-reverse items-center justify-center w-full h-full cursor-pointer">
<p class="z-10 text-m font-light text-center text-light-primary dark:text-light-font">Glisser
déposer votre photo de profil</p>
<svg class="z-10 w-8 h-8 text-light-primary dark:text-dark-primary" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
</svg>
</label>
</div>
</div>
<div class="my-5 flex justify-center text-center">
<button type="submit"
class="px-4 py-2 mx-4 text-white dark:text-light-font dark:hover:text-dark-primary uppercase bg-light-primary dark:bg-dark-primary border-2 border-transparent rounded-lg text-md hover:bg-light-secondary dark:hover:bg-dark-secondary">
Valider
</button>
</div>
{{ form_end(form) }}
</div>
{% endblock %}

View File

@@ -0,0 +1,56 @@
{% extends 'base.html.twig' %}
{% block title %}{% if user == app.user %}Mon profil{% else %}Profil de {{ user.pseudo }}{% endif %} | {{ parent() }}{% endblock %}
{% block body %}
<div class="max-w-xl mx-auto my-10 rounded-lg shadow-md p-5 text-light-primary dark:text-light-font bg-light-card dark:bg-dark-card">
<img src="{{ asset((user.profilePicture) ? 'uploads/' ~ user.profilePicture : 'profilDefault.png') | imagine_filter('profile') }}"
class="w-56 h-56 rounded-full mx-auto dark:border-4 dark:border-dark-primary shadow-sm"
alt="Photo de profil de {{ user.pseudo }}">
<h2 class="text-center text-2xl font-semibold mt-3">{{ user.firstname|capitalize }} {{ user.lastname|upper }}</h2>
<p class="text-center mt-1">@{{ user.pseudo }}</p>
<div class="my-2">
<label for="UserSchool"
class="block overflow-hidden rounded-md border px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
<span class="text-xs font-medium">Campus</span>
<input type="text" id="UserSchool" value="{{ user.site }}"
class="mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
disabled/>
</label>
</div>
{% if user == app.user %}
<div class="my-2">
<label for="UserTel"
class="block overflow-hidden rounded-md border px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
<span class="text-xs font-medium">Téléphone</span>
<input type="tel" id="UserTel" value="{{ user.phone }}"
class="mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
disabled/>
</label>
</div>
<div class="my-2">
<label for="UserEmail"
class="block overflow-hidden rounded-md border px-3 py-2 shadow-sm border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300">
<span class="text-xs font-medium">Email</span>
<input type="email" id="UserEmail" value="{{ user.email }}"
class="mt-1 w-full border-none p-0 bg-transparent focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
disabled/>
</label>
</div>
<div class="my-5 flex justify-center text-center align-content-center align-middle">
<a href="{{ path('app_logout') }}"
class="px-4 py-2 mx-4 text-white uppercase rounded-lg hover:bg-light-danger/75 dark:hover:bg-dark-danger/75 bg-light-danger dark:bg-dark-danger text-md flex items-center">
Déconnexion
</a>
<a href="{{ path('user_change_password') }}"
class="px-4 py-2 mx-4 text-light-primary dark:text-white hover:text-light-font uppercase rounded-lg hover:bg-light-info/75 dark:hover:bg-dark-info/75 bg-light-info dark:bg-dark-info text-md flex items-center">
Modifier mon mot de passe
</a>
<a href="{{ path('user_edit') }}"
class="px-4 py-2 mx-4 text-white dark:text-light-font dark:hover:text-dark-primary uppercase bg-light-primary dark:bg-dark-primary border-2 border-transparent rounded-lg text-md hover:bg-light-secondary dark:hover:bg-dark-secondary flex items-center">
Modifier mon profil
</a>
</div>
{% endif %}
</div>
{% endblock %}

View File

@@ -0,0 +1,67 @@
{% extends 'base.html.twig' %}
{% block title %}Nouveau mot de passe | {{ parent() }}{% endblock %}
{% block body %}
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div class="mx-auto max-w-lg">
<h1 class="text-center text-2xl font-bold text-light-primary dark:text-light-font sm:text-3xl">Nouveau mot
de passe 😊</h1>
{{ form_start(form) }}
<div class="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-light-card dark:bg-dark-card">
<p class="text-center text-lg font-medium text-light-primary dark:text-light-font">Votre nouveau mot
de passe</p>
<div>
<label for="oldPassword" class="sr-only">Mot de passe actuel</label>
<div class="relative">
{{ form_widget(form.oldPassword, { id:'firstPassword', attr: { class: 'w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary', placeholder: 'Mot de passe actuel' } } ) }}
<span class="absolute inset-y-0 end-0 grid place-content-center px-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
</span>
</div>
</div>
<div>
<label for="firstPassword" class="sr-only">Nouveau mot de passe</label>
<div class="relative">
{{ form_widget(form.plainPassword.first, { id:'firstPassword', attr: { class: 'w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary', placeholder: 'Entrer votre nouveau mot de passe' } } ) }}
<span class="absolute inset-y-0 end-0 grid place-content-center px-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
</span>
</div>
</div>
<div>
<label for="secondPassword" class="sr-only">Confirmation du mot de passe</label>
<div class="relative">
{{ form_widget(form.plainPassword.second, { id:'secondPassword', attr: { class: 'w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary', placeholder: 'Confirmer votre nouveau mot de passe' } } ) }}
<span class="absolute inset-y-0 end-0 grid place-content-center px-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
</span>
</div>
</div>
<button type="submit"
class="block w-full rounded-lg bg-light-primary dark:bg-dark-primary px-5 py-3 text-sm font-medium text-white">
Valider
</button>
</div>
{{ form_end(form) }}
</div>
</div>
{% endblock %}