templates/security/forgot_password.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Mot de passe oublié | {{ parent() }}{% endblock %}
  5. {% block body %}
  6. <!-- ==================== MESSAGES ==================== -->
  7. <div class="container mx-auto px-4 mb-6 max-w-md">
  8.     {% include 'partials/_flash_messages.html.twig' %}
  9. </div>
  11. <!-- ==================== FORMULAIRE ==================== -->
  12. <div class="container mx-auto px-4 pb-16">
  13.     <div class="max-w-md mx-auto">
  14.         <div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
  15.             
  16.             <!-- Titre -->
  17.             <div class="px-6 pt-8 pb-2 text-center">
  18.                 <h2 class="text-2xl font-bold text-slate-800 mb-1">
  19.                     {% if step == 1 %}Mot de passe oublié{% else %}Nouveau mot de passe{% endif %}
  20.                 </h2>
  21.                 <p class="text-sm text-slate-500">
  22.                     {% if step == 1 %}Vérifiez votre identité pour réinitialiser{% else %}Créez un nouveau mot de passe{% endif %}
  23.                 </p>
  24.             </div>
  26.             <div class="p-6 md:p-8 pt-2">
  27.                 {% if step == 1 %}
  28.                 <!-- ========== ÉTAPE 1 : Vérification ========== -->
  29.                 <form method="post" class="space-y-6">
  30.                     <!-- Identifiant (email ou téléphone) -->
  31.                     <div>
  32.                         <label for="identifier" class="block text-sm font-medium text-slate-700 mb-2">
  33.                             E-mail ou numéro de téléphone
  34.                         </label>
  35.                         <input type="text" 
  36.                                name="identifier" 
  37.                                id="identifier" 
  38.                                class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition"
  39.                                placeholder="exemple@email.com ou 0123456789"
  40.                                required 
  41.                                autofocus>
  42.                         <p class="text-xs text-slate-400 mt-1">Entrez l'email ou le numéro de téléphone utilisé lors de l'inscription</p>
  43.                     </div>
  45.                     <!-- 4 derniers chiffres du téléphone -->
  46.                     <div>
  47.                         <label for="lastFourDigits" class="block text-sm font-medium text-slate-700 mb-2">
  48.                             4 derniers chiffres du numéro de téléphone
  49.                         </label>
  50.                         <input type="text" 
  51.                                name="last_four_digits" 
  52.                                id="lastFourDigits" 
  53.                                class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition"
  54.                                placeholder="Ex: 6789"
  55.                                maxlength="4"
  56.                                pattern="[0-9]{4}"
  57.                                required>
  58.                         <p class="text-xs text-slate-400 mt-1">Entrez les 4 derniers chiffres de votre numéro de téléphone</p>
  59.                     </div>
  61.                     <!-- Bouton -->
  62.                     <button type="submit" 
  63.                             name="verify_user"
  64.                             class="w-full py-3 px-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition transform hover:scale-[1.02] shadow-lg flex items-center justify-center">
  65.                         <i class="fas fa-check mr-2"></i>
  66.                         Vérifier
  67.                     </button>
  68.                 </form>
  70.                 {% else %}
  71.                 <!-- ========== ÉTAPE 2 : Nouveau mot de passe ========== -->
  72.                 <form method="post" class="space-y-6">
  73.                     <!-- Info utilisateur -->
  74.                     <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-4 text-center">
  75.                         <p class="text-sm text-indigo-700">
  76.                             <i class="fas fa-user-check mr-2"></i>
  77.                             Identité vérifiée pour <strong>{{ identifier }}</strong>
  78.                         </p>
  79.                     </div>
  81.                     <!-- Nouveau mot de passe -->
  82.                     <div>
  83.                         <label for="newPassword" class="block text-sm font-medium text-slate-700 mb-2">
  84.                             Nouveau mot de passe
  85.                         </label>
  86.                         <div class="relative">
  87.                             <input type="password" 
  88.                                    name="new_password" 
  89.                                    id="newPassword" 
  90.                                    class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition"
  91.                                    placeholder="••••••••"
  92.                                    minlength="6"
  93.                                    required>
  94.                             <button type="button" 
  95.                                     onclick="togglePassword('newPassword', 'toggleNewIcon')" 
  96.                                     class="absolute inset-y-0 right-0 pr-4 flex items-center">
  97.                                 <i class="fas fa-eye text-slate-400 hover:text-indigo-600 transition" id="toggleNewIcon"></i>
  98.                             </button>
  99.                         </div>
  100.                         <p class="text-xs text-slate-400 mt-1">Minimum 6 caractères</p>
  101.                     </div>
  103.                     <!-- Confirmation mot de passe -->
  104.                     <div>
  105.                         <label for="confirmPassword" class="block text-sm font-medium text-slate-700 mb-2">
  106.                             Confirmer le mot de passe
  107.                         </label>
  108.                         <div class="relative">
  109.                             <input type="password" 
  110.                                    name="confirm_password" 
  111.                                    id="confirmPassword" 
  112.                                    class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition"
  113.                                    placeholder="••••••••"
  114.                                    minlength="6"
  115.                                    required>
  116.                             <button type="button" 
  117.                                     onclick="togglePassword('confirmPassword', 'toggleConfirmIcon')" 
  118.                                     class="absolute inset-y-0 right-0 pr-4 flex items-center">
  119.                                 <i class="fas fa-eye text-slate-400 hover:text-indigo-600 transition" id="toggleConfirmIcon"></i>
  120.                             </button>
  121.                         </div>
  122.                     </div>
  124.                     <!-- Bouton -->
  125.                     <button type="submit" 
  126.                             name="reset_password"
  127.                             class="w-full py-3 px-4 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition transform hover:scale-[1.02] shadow-lg flex items-center justify-center">
  128.                         <i class="fas fa-save mr-2"></i>
  129.                         Enregistrer le mot de passe
  130.                     </button>
  131.                 </form>
  132.                 {% endif %}
  134.                 <!-- Lien retour -->
  135.                 <div class="mt-6 pt-6 border-t border-slate-200 text-center">
  136.                     <a href="{{ path('app_login') }}" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
  137.                         <i class="fas fa-arrow-left mr-1"></i>
  138.                         Retour à la connexion
  139.                     </a>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.     </div>
  144. </div>
  146. <!-- ==================== JAVASCRIPT ==================== -->
  147. <script>
  148. function togglePassword(inputId, iconId) {
  149.     const passwordInput = document.getElementById(inputId);
  150.     const toggleIcon = document.getElementById(iconId);
  151.     
  152.     if (passwordInput.type === 'password') {
  153.         passwordInput.type = 'text';
  154.         toggleIcon.classList.remove('fa-eye');
  155.         toggleIcon.classList.add('fa-eye-slash');
  156.     } else {
  157.         passwordInput.type = 'password';
  158.         toggleIcon.classList.remove('fa-eye-slash');
  159.         toggleIcon.classList.add('fa-eye');
  160.     }
  161. }
  162. </script>
  163. {% endblock %}