74 lines
5.7 KiB
Twig
74 lines
5.7 KiB
Twig
{% 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 %}
|