set front
This commit is contained in:
73
templates/user/edit.html.twig
Normal file
73
templates/user/edit.html.twig
Normal 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 %}
|
||||
56
templates/user/index.html.twig
Normal file
56
templates/user/index.html.twig
Normal 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 %}
|
||||
67
templates/user/reset_password.html.twig
Normal file
67
templates/user/reset_password.html.twig
Normal 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 %}
|
||||
Reference in New Issue
Block a user