{% extends 'security/layout.html.twig' %}
{% block title %}Authentification{% endblock %}
{% block fos_user_width %}login-bloc{% endblock %}
{% block fos_user_title %}Identifiez-vous{% endblock %}
{% block fos_user_content %}
{% if error %}<div class="alert alert-danger" role="alert">Connexion impossible. Vérifiez vos identifiants et l’accès à votre compte.</div>{% endif %}
<form method="post" action="{{ path('fos_user_security_check') }}">
<p style="color:#224764"><strong>Entrez votre @mail &amp; mot de passe</strong></p>
<div class="mb-3"><label for="username">Identifiant ou e-mail</label><input class="form-control" id="username" name="_username" value="{{ last_username }}" autocomplete="username" required></div>
<div class="mb-3"><label for="password">Mot de passe</label><div class="input-group"><input class="form-control" id="password" name="_password" type="password" autocomplete="current-password" required><button class="btn btn-outline-primary" type="button" id="toggle-password" aria-label="Afficher le mot de passe" aria-pressed="false"><i class="fas fa-eye" aria-hidden="true"></i></button></div></div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
<button class="btn btn-primary w-100" type="submit">Se connecter</button>
<div class="mt-3 text-center"><a href="{{ path('fos_user_resetting_request') }}">Mot de passe oublié ?</a></div>
</form>
<script>
document.getElementById('toggle-password').addEventListener('click', function () {
const input = document.getElementById('password'); const visible = input.type === 'password'; input.type = visible ? 'text' : 'password'; this.setAttribute('aria-pressed', String(visible)); this.setAttribute('aria-label', visible ? 'Masquer le mot de passe' : 'Afficher le mot de passe');
});
</script>
{% endblock %}