hegresphere/templates/security/login.html.twig
2024-11-28 14:40:29 +01:00

62 lines
3.0 KiB
Twig

{% extends 'base.html.twig' %}
{% block title %}Connexion{% endblock %}
{% block body %}
<div class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
<h2 class="text-2xl font-bold text-center mb-2">Connexion</h2>
<p class="text-center text-gray-600 mb-6">
Pas encore inscrit ? Inscrivez vous !! <br>
<a href="{{ path('app_register_intern') }}" class="text-teal-600 hover:underline">En tant que Stagiaire</a>
<br>
<a href="{{ path('app_register_employee') }}" class="text-teal-600 hover:underline">En tant qu'Entreprise</a>
</p>
<form method="post">
{# Affiche une erreur si la connexion échoue #}
{% if error %}
<div class="bg-red-100 text-red-800 px-4 py-2 rounded mb-4">
{{ error.messageKey|trans(error.messageData, 'security') }}
</div>
{% endif %}
{# Affiche un message si l'utilisateur est déjà connecté #}
{% if app.user %}
<div class="bg-blue-100 text-blue-800 px-4 py-2 rounded mb-4">
Vous êtes connecté en tant que {{ app.user.userIdentifier }}.
<a href="{{ path('app_logout') }}" class="text-teal-600 hover:underline">Déconnexion</a>
</div>
{% endif %}
{# Champ pour le nom d'utilisateur #}
<div class="mb-4">
<label for="username" class="block text-gray-700 mb-2">Nom d'utilisateur</label>
<input type="text" name="_username" id="username"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500"
value="{{ last_username }}" autocomplete="username" required autofocus>
</div>
{# Champ pour le mot de passe #}
<div class="mb-6">
<label for="password" class="block text-gray-700 mb-2">Mot de passe</label>
<input type="password" name="_password" id="password"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500"
autocomplete="current-password" required>
</div>
{# Jeton CSRF pour protéger le formulaire #}
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
{# Bouton de soumission #}
<div class="text-center">
<button type="submit"
class="bg-teal-600 text-white px-6 py-2 rounded-lg w-full hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
Connexion
</button>
</div>
</form>
</div>
</div>
{% endblock %}