templates/security/forgot_password.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Mot de passe oublié - PaySolution{% endblock %}
  5. {% block body %}
  6. <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-50 to-blue-50">
  7.     <div class="max-w-md w-full">
  8.         <div class="bg-white rounded-2xl shadow-2xl overflow-hidden">
  9.             <!-- Header -->
  10.             <div class="bg-gradient-to-r from-primary to-primary-dark px-8 py-10 text-center">
  11.                 <div class="mx-auto h-20 w-20 flex items-center justify-center rounded-full bg-white bg-opacity-20 backdrop-blur-sm mb-4">
  12.                     <svg class="h-12 w-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  13.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
  14.                     </svg>
  15.                 </div>
  16.                 <h2 class="text-3xl font-extrabold text-white">
  17.                     Mot de passe oublié ?
  18.                 </h2>
  19.                 <p class="mt-2 text-blue-100">
  20.                     Pas de problème, nous allons vous aider
  21.                 </p>
  22.             </div>
  24.             <div class="px-8 py-8">
  25.                 {% for message in app.flashes('success') %}
  26.                     <div class="rounded-lg bg-green-50 border-l-4 border-green-500 p-4 mb-6">
  27.                         <div class="flex">
  28.                             <div class="flex-shrink-0">
  29.                                 <svg class="h-6 w-6 text-green-500" fill="currentColor" viewBox="0 0 20 20">
  30.                                     <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
  31.                                 </svg>
  32.                             </div>
  33.                             <div class="ml-3">
  34.                                 <h3 class="text-sm font-medium text-green-800 mb-1">Email envoyé !</h3>
  35.                                 <p class="text-sm text-green-700">{{ message }}</p>
  36.                                 <p class="text-xs text-green-600 mt-2">
  37.                                     💡 Vérifiez également votre dossier spam/courrier indésirable.
  38.                                 </p>
  39.                             </div>
  40.                         </div>
  41.                     </div>
  42.                 {% endfor %}
  44.                 <div class="bg-blue-50 border-l-4 border-primary rounded-lg p-4 mb-6">
  45.                     <div class="flex">
  46.                         <div class="flex-shrink-0">
  47.                             <svg class="h-5 w-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
  48.                                 <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
  49.                             </svg>
  50.                         </div>
  51.                         <div class="ml-3">
  52.                             <p class="text-sm text-blue-700">
  53.                                 Saisissez votre adresse email et nous vous enverrons un lien pour réinitialiser votre mot de passe.
  54.                             </p>
  55.                         </div>
  56.                     </div>
  57.                 </div>
  59.                 {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
  61.                 <div>
  62.                     <label class="block text-sm font-medium text-gray-700 mb-2">
  63.                         <svg class="w-4 h-4 inline-block mr-1 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  64.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
  65.                         </svg>
  66.                         {{ form_label(form.email) }}
  67.                         <span class="text-danger">*</span>
  68.                     </label>
  69.                     {{ form_widget(form.email) }}
  70.                     {{ form_errors(form.email) }}
  71.                 </div>
  73.                 <div class="flex items-center justify-between pt-4">
  74.                     <a href="{{ path('app_login') }}" class="text-sm font-medium text-primary hover:text-primary-dark transition duration-200 flex items-center">
  75.                         <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  76.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
  77.                         </svg>
  78.                         Retour à la connexion
  79.                     </a>
  80.                     <button type="submit" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-primary to-primary-dark hover:from-primary-dark hover:to-primary text-white font-semibold rounded-lg transition duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
  81.                         <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  82.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
  83.                         </svg>
  84.                         Envoyer le lien
  85.                     </button>
  86.                 </div>
  88.                 {{ form_end(form) }}
  89.             </div>
  91.             <div class="bg-gray-50 px-8 py-4 text-center border-t border-gray-200">
  92.                 <p class="text-xs text-gray-500">
  93.                     <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  94.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
  95.                     </svg>
  96.                     Le lien de réinitialisation expirera après 1 heure
  97.                 </p>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </div>
  102. {% endblock %}