templates/reset_password/request.html.twig line 1

Open in your IDE?
  1. {# templates/reset_password/request.html.twig #}
  3. {% extends 'base.html.twig' %}
  5. {% block body %}
  6.     <div class="reset-password-container">
  7.         <h1>Réinitialisation de Mot de Passe</h1>
  9.         <p>
  10.             Entrez votre adresse e-mail ci-dessous pour recevoir un lien de réinitialisation de mot de passe. 
  11.             Veuillez vérifier également votre dossier spam si vous ne recevez pas l'email dans les minutes qui suivent.
  12.         </p>
  14.         {{ form_start(requestForm, {'attr': {'class': 'reset-password-form'}}) }}
  15.             {{ form_row(requestForm.email, {
  16.                 'attr': {
  17.                     'class': 'form-control',
  18.                     'placeholder': 'Votre adresse e-mail'
  19.                 }
  20.             }) }}
  21.              {% for label, messages in app.flashes %}
  22.                     {% for message in messages %}
  23.                         <div class="alert alert-{{ label }}">
  24.                             {{ message }}
  25.                         </div>
  26.                             {% endfor %}
  27.                                 {% endfor %}
  28.              <div class="form-group mb-3">
  29.                 <div class="g-recaptcha" data-sitekey="6LdsZb4qAAAAAKzWURbc-3MZY-DjEXRcm81pFAjs"></div>
  30.             </div>
  31.             <button class="btn btn-primary">Envoyer le lien de réinitialisation</button>
  32.         {{ form_end(requestForm) }}
  33.     </div>
  35.     <style>
  36.         .reset-password-container {
  37.             max-width: 80%;
  38.             margin: 0 auto;
  39.             padding: 2rem;
  40.             border: 1px solid #ccc;
  41.             border-radius: 8px;
  42.             background-color: #f9f9f9;
  43.             margin-top: 30px;
  44.         }
  46.         .reset-password-container h1 {
  47.             font-size: 1.5rem;
  48.             margin-bottom: 1rem;
  49.             color: #333;
  50.         }
  52.         .reset-password-container p {
  53.             font-size: 1rem;
  54.             margin-bottom: 1.5rem;
  55.             color: #666;
  56.         }
  58.         .reset-password-form {
  59.             display: flex;
  60.             flex-direction: column;
  61.         }
  63.         .form-control {
  64.             width: 100%;
  65.             padding: 0.75rem;
  66.             margin-bottom: 1rem;
  67.             border: 1px solid #ccc;
  68.             border-radius: 4px;
  69.         }
  71.         .btn-primary {
  72.             background-color: #007bff;
  73.             color: white;
  74.             border: none;
  75.             padding: 0.75rem;
  76.             border-radius: 4px;
  77.             cursor: pointer;
  78.             font-size: 1rem;
  79.             max-width: 30%;
  80.         }
  82.         .btn-primary:hover {
  83.             background-color: #0056b3;
  84.         }
  85.     </style>
  86. {% endblock %}