templates/forgot_password/request.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     <link href="{{ asset('css/utilities.css') }}?v={{ random() }}" rel="stylesheet">
  6.     <link href="{{ asset('css/auth-shared.css') }}?v={{ random() }}" rel="stylesheet">
  7. {% endblock %}
  9. {% block body %}
  10. <div class="auth-container">
  11.     <div class="login-card">
  12.         <div class="login-form-section">
  13.             <div class="login-header">
  14.                 <img src="{{ asset('uploads/img/media/logo-naturamedicatrix-pro-v2.png') }}" alt="NaturaMedicatrix" class="login-brand">
  15.                 <h2 class="login-title">Mot de passe oublié</h2>
  16.                 <p class="login-description">Saisissez votre adresse e-mail et nous vous enverrons un lien pour réinitialiser votre mot de passe.</p>
  17.                 <hr class="login-divider">
  18.             </div>
  20.             {% if sent %}
  21.                 <div class="success-message" style="background:#e8f5e9;border:1px solid #a5d6a7;border-radius:8px;padding:16px 20px;color:#2e7d32;display:flex;align-items:center;gap:10px;margin-bottom:20px;">
  22.                     <i class="fas fa-check-circle" style="font-size:1.2rem;"></i>
  23.                     <span>Si cette adresse e-mail est associée à un compte, vous recevrez un lien de réinitialisation dans quelques instants. Pensez à vérifier vos spams.</span>
  24.                 </div>
  25.                 <div class="login-footer" style="text-align:center;margin-top:16px;">
  26.                     <a href="{{ path('app_login') }}" class="register-link">
  27.                         <i class="fas fa-arrow-left" style="margin-right:6px;"></i>Retour à la connexion
  28.                     </a>
  29.                 </div>
  30.             {% else %}
  31.                 <form action="{{ path('app_forgot_password') }}" method="post" class="login-form" id="forgotForm">
  32.                     <div class="input-group">
  33.                         <div class="input-wrapper">
  34.                             <input
  35.                                 type="email"
  36.                                 id="email"
  37.                                 name="email"
  38.                                 required
  39.                                 autocomplete="email"
  40.                                 class="form-input"
  41.                             >
  42.                             <label for="email" class="form-label">Adresse e-mail</label>
  43.                             <div class="input-border"></div>
  44.                         </div>
  45.                     </div>
  47.                     <button type="submit" class="login-btn">
  48.                         <span class="btn-content">
  49.                             <i class="fas fa-paper-plane btn-icon"></i>
  50.                             <span class="btn-text">Envoyer le lien</span>
  51.                         </span>
  52.                         <div class="btn-loading">
  53.                             <div class="spinner"></div>
  54.                         </div>
  55.                     </button>
  57.                     <div class="login-footer">
  58.                         <p><a href="{{ path('app_login') }}" class="register-link">
  59.                             <i class="fas fa-arrow-left" style="margin-right:6px;"></i>Retour à la connexion
  60.                         </a></p>
  61.                     </div>
  62.                 </form>
  63.             {% endif %}
  64.         </div>
  66.         <div class="login-contact-section">
  67.             <h3 class="contact-title">Nous contacter</h3>
  68.             <div class="contact-country">
  69.                 <h3 class="country-title">France</h3>
  70.                 <div class="contact-info">
  71.                     <i class="fas fa-phone"></i>
  72.                     <span class="contact-info-label">Tél</span>
  73.                     <span class="contact-info-value">+33 9 77 42 37 05</span>
  74.                 </div>
  75.                 <div class="contact-info">
  76.                     <i class="fas fa-envelope"></i>
  77.                     <span class="contact-info-label">Email</span>
  78.                     <span class="contact-info-value">commande@naturamedicatrix.fr</span>
  79.                 </div>
  80.             </div>
  81.             <div class="contact-country">
  82.                 <h3 class="country-title">Luxembourg</h3>
  83.                 <div class="contact-info">
  84.                     <i class="fas fa-phone"></i>
  85.                     <span class="contact-info-label">Tél</span>
  86.                     <span class="contact-info-value">+352 20 88 11 95</span>
  87.                 </div>
  88.                 <div class="contact-info">
  89.                     <i class="fas fa-envelope"></i>
  90.                     <span class="contact-info-label">Email</span>
  91.                     <span class="contact-info-value">commande@naturamedicatrix.lu</span>
  92.                 </div>
  93.             </div>
  94.             <div class="contact-country">
  95.                 <h3 class="country-title">Belgique</h3>
  96.                 <div class="contact-info">
  97.                     <i class="fas fa-phone"></i>
  98.                     <span class="contact-info-label">Tél</span>
  99.                     <span class="contact-info-value">+32 4 268 18 41 / +32 4 349 03 03</span>
  100.                 </div>
  101.                 <div class="contact-info">
  102.                     <i class="fas fa-envelope"></i>
  103.                     <span class="contact-info-label">Email</span>
  104.                     <span class="contact-info-value">commande@naturamedicatrix.be</span>
  105.                 </div>
  106.             </div>
  107.         </div>
  108.     </div>
  110.     <div class="login-bg">
  111.         <div class="bg-pattern"></div>
  112.         <div class="floating-elements">
  113.             <div class="floating-circle circle-1"></div>
  114.             <div class="floating-circle circle-2"></div>
  115.             <div class="floating-circle circle-3"></div>
  116.             <div class="floating-circle circle-4"></div>
  117.             <div class="floating-circle circle-5"></div>
  118.             <div class="floating-circle circle-6"></div>
  119.         </div>
  120.     </div>
  121. </div>
  122. {% endblock %}
  124. {% block javascripts %}
  125. <script>
  126.     $(document).ready(function() {
  127.         $('.form-input').on('focus', function() {
  128.             $(this).closest('.input-wrapper').addClass('focused');
  129.         }).on('blur', function() {
  130.             if (!$(this).val()) {
  131.                 $(this).closest('.input-wrapper').removeClass('focused');
  132.             }
  133.         }).on('input', function() {
  134.             if ($(this).val()) {
  135.                 $(this).closest('.input-wrapper').addClass('has-value');
  136.             } else {
  137.                 $(this).closest('.input-wrapper').removeClass('has-value');
  138.             }
  139.         });
  141.         $('#forgotForm').on('submit', function() {
  142.             const submitBtn = $('.login-btn');
  143.             submitBtn.addClass('loading');
  144.             submitBtn.prop('disabled', true);
  145.         });
  146.     });
  147. </script>
  148. {% endblock %}