templates/reset_password/request.html.twig line 1

Open in your IDE?
  1. {% extends 'baseLogin.html.twig' %}
  3. {% block title %}Mot de passe oublié — Macssolution{% endblock %}
  5. {% block styles %}
  6. <style>
  7.     .lf-card {
  8.         width: 100%;
  9.         max-width: 420px;
  10.         background: #fff;
  11.         border: 1px solid #e2e8f0;
  12.         border-radius: 20px;
  13.         box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  14.         padding: 2.5rem 2.25rem;
  15.     }
  17.     .lf-header { text-align: center; margin-bottom: 2rem; }
  19.     .lf-header__icon {
  20.         width: 64px; height: 64px;
  21.         border-radius: 16px;
  22.         background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  23.         display: flex; align-items: center; justify-content: center;
  24.         color: #fff; font-size: 1.5rem;
  25.         margin: 0 auto 1.25rem;
  26.         box-shadow: 0 4px 14px rgba(59,130,246,0.35);
  27.     }
  29.     .lf-header__title {
  30.         font-size: 1.5rem; font-weight: 700;
  31.         color: #1f2937; letter-spacing: -0.02em; margin-bottom: 0.375rem;
  32.     }
  34.     .lf-header__sub { font-size: 0.875rem; color: #64748b; line-height: 1.6; }
  36.     .lf-error {
  37.         display: flex; align-items: flex-start; gap: 0.625rem;
  38.         background: #fef2f2; border: 1px solid #fecaca; color: #dc2626;
  39.         border-radius: 10px; padding: 0.75rem 1rem;
  40.         font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem;
  41.     }
  43.     .lf-info {
  44.         display: flex; align-items: flex-start; gap: 0.625rem;
  45.         background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  46.         border-radius: 10px; padding: 0.75rem 1rem;
  47.         font-size: 0.8125rem; margin-bottom: 1.25rem; line-height: 1.5;
  48.     }
  50.     .lf-group { margin-bottom: 1.25rem; }
  52.     .lf-label {
  53.         display: block; font-size: 0.8125rem;
  54.         font-weight: 600; color: #374151; margin-bottom: 0.375rem;
  55.     }
  57.     .lf-input-wrap { position: relative; }
  59.     .lf-input-wrap i {
  60.         position: absolute; left: 0.875rem; top: 50%;
  61.         transform: translateY(-50%); color: #94a3b8;
  62.         font-size: 0.9rem; pointer-events: none;
  63.     }
  65.     .lf-input {
  66.         width: 100%; height: 46px;
  67.         padding: 0 0.875rem 0 2.5rem;
  68.         border: 1px solid #e2e8f0; border-radius: 10px;
  69.         font-size: 0.9375rem; color: #1f2937;
  70.         background: #f8fafc; font-family: inherit;
  71.         transition: all 0.2s ease; outline: none;
  72.     }
  74.     .lf-input:focus {
  75.         border-color: #3b82f6; background: #fff;
  76.         box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
  77.     }
  79.     .lf-actions { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; }
  81.     .lf-submit {
  82.         width: 100%; height: 48px;
  83.         background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  84.         color: #fff; border: none; border-radius: 10px;
  85.         font-size: 0.9375rem; font-weight: 700; font-family: inherit;
  86.         cursor: pointer; display: flex; align-items: center;
  87.         justify-content: center; gap: 0.5rem;
  88.         transition: all 0.2s ease;
  89.     }
  91.     .lf-submit:hover {
  92.         transform: translateY(-1px);
  93.         box-shadow: 0 6px 20px rgba(59,130,246,0.4);
  94.     }
  96.     .lf-back {
  97.         width: 100%; height: 44px;
  98.         background: #f1f5f9; color: #64748b;
  99.         border: none; border-radius: 10px;
  100.         font-size: 0.875rem; font-weight: 600; font-family: inherit;
  101.         cursor: pointer; display: flex; align-items: center;
  102.         justify-content: center; gap: 0.5rem;
  103.         text-decoration: none; transition: all 0.2s ease;
  104.     }
  106.     .lf-back:hover { background: #e2e8f0; color: #1f2937; }
  107. </style>
  108. {% endblock %}
  110. {% block body %}
  111. <div class="lf-card">
  113.     <div class="lf-header">
  114.         <div class="lf-header__icon">
  115.             <i class="fas fa-key"></i>
  116.         </div>
  117.         <h1 class="lf-header__title">Mot de passe oublié ?</h1>
  118.         <p class="lf-header__sub">Saisissez votre email et nous vous enverrons un lien pour réinitialiser votre mot de passe.</p>
  119.     </div>
  121.     {% for flash_error in app.flashes('reset_password_error') %}
  122.         <div class="lf-error">
  123.             <i class="fas fa-exclamation-circle"></i>
  124.             <span>{{ flash_error }}</span>
  125.         </div>
  126.     {% endfor %}
  128.     <div class="lf-info">
  129.         <i class="fas fa-info-circle" style="flex-shrink:0;margin-top:2px;"></i>
  130.         <span>Un lien de réinitialisation sera envoyé à cette adresse si elle est associée à un compte.</span>
  131.     </div>
  133.     {{ form_start(requestForm) }}
  135.         <div class="lf-group">
  136.             <label class="lf-label" for="{{ requestForm.email.vars.id }}">Adresse e-mail</label>
  137.             <div class="lf-input-wrap">
  138.                 {{ form_widget(requestForm.email, {
  139.                     'attr': {'class': 'lf-input', 'placeholder': 'votre@email.com', 'autofocus': true}
  140.                 }) }}
  141.                 <i class="fas fa-envelope"></i>
  142.             </div>
  143.             {{ form_errors(requestForm.email) }}
  144.         </div>
  146.         <div class="lf-actions">
  147.             <button type="submit" class="lf-submit">
  148.                 <i class="fas fa-paper-plane"></i>
  149.                 Envoyer le lien
  150.             </button>
  151.             <a href="{{ path('app_login') }}" class="lf-back">
  152.                 <i class="fas fa-arrow-left"></i>
  153.                 Retour à la connexion
  154.             </a>
  155.         </div>
  157.     {{ form_end(requestForm) }}
  159. </div>
  160. {% endblock %}