templates/security/forgot_password.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Recuperar contraseña{% endblock %}
  4. {% block body_class %}login-page bg-light{% endblock %}
  6. {% block body %}
  7. <style>
  8.     .login-page {
  9.         background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
  10.         background-image: 
  11.             linear-gradient(135deg, rgba(236, 239, 241, 0.7) 0%, transparent 70%),
  12.             linear-gradient(45deg, rgba(207, 216, 220, 0.4) 0%, transparent 70%);
  13.         font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  14.         display:flex;
  15.         align-items: center;
  16.         justify-content: center;
  17.         min-height: 100vh;
  18.     }
  19.     .auth-container {
  20.         width: 100%;
  21.         max-width: 440px;
  22.         margin: 2rem auto;
  23.         padding: 0 15px;
  24.     }
  25.     
  26.     .auth-card {
  27.         background: white;
  28.         border-radius: 12px;
  29.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  30.         padding: 40px;
  31.         position: relative;
  32.         overflow: hidden;
  33.         border: 1px solid #e1e5e9;
  34.     }
  35.     
  36.     .auth-card::before {
  37.         content: '';
  38.         position: absolute;
  39.         top: 0;
  40.         left: 0;
  41.         width: 100%;
  42.         height: 4px;
  43.         background: linear-gradient(135deg, #1a4b8c 0%, #2c6cb0 100%);
  44.     }
  45.     
  46.     .auth-header {
  47.         text-align: center;
  48.         margin-bottom: 30px;
  49.     }
  50.     
  51.     .auth-icon {
  52.         width: 70px;
  53.         height: 70px;
  54.         background: linear-gradient(135deg, #1a4b8c 0%, #2c6cb0 100%);
  55.         border-radius: 50%;
  56.         display: flex;
  57.         align-items: center;
  58.         justify-content: center;
  59.         margin: 0 auto 20px;
  60.         color: white;
  61.         font-size: 28px;
  62.     }
  63.     
  64.     .auth-title {
  65.         color: #2d3748;
  66.         font-weight: 700;
  67.         font-size: 1.75rem;
  68.         margin-bottom: 8px;
  69.     }
  70.     
  71.     .auth-subtitle {
  72.         color: #718096;
  73.         font-size: 0.95rem;
  74.         line-height: 1.5;
  75.     }
  76.     
  77.     .auth-form-label {
  78.         font-weight: 600;
  79.         color: #2d3748;
  80.         margin-bottom: 8px;
  81.         font-size: 0.9rem;
  82.         display: block;
  83.     }
  84.     
  85.     .auth-form-control {
  86.         border: 2px solid #e1e5e9;
  87.         border-radius: 8px;
  88.         padding: 12px 45px 12px 16px;
  89.         font-size: 0.95rem;
  90.         transition: all 0.3s ease;
  91.         background: white;
  92.         width: 100%;
  93.     }
  94.     
  95.     .auth-form-control:focus {
  96.         border-color: #1a4b8c;
  97.         box-shadow: 0 0 0 0.2rem rgba(26, 75, 140, 0.1);
  98.         outline: none;
  99.     }
  100.     
  101.     .auth-input-group {
  102.         position: relative;
  103.         margin-bottom: 1.5rem;
  104.     }
  105.     
  106.     .auth-input-icon {
  107.         position: absolute;
  108.         right: 15px;
  109.         top: 67%;
  110.         transform: translateY(-50%);
  111.         color: #718096;
  112.         z-index: 5;
  113.         font-size: 1rem;
  114.     }
  115.     
  116.     .auth-btn-primary {
  117.         background: linear-gradient(135deg, #1a4b8c 0%, #2c6cb0 100%);
  118.         border: none;
  119.         border-radius: 8px;
  120.         padding: 14px 20px;
  121.         font-weight: 600;
  122.         font-size: 1rem;
  123.         transition: all 0.3s ease;
  124.         color: white;
  125.         width: 100%;
  126.         cursor: pointer;
  127.     }
  128.     
  129.     .auth-btn-primary:hover {
  130.         transform: translateY(-2px);
  131.         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  132.         background: #1a4b8c;
  133.         color: white;
  134.     }
  135.     
  136.     .auth-footer {
  137.         text-align: center;
  138.         margin-top: 25px;
  139.         padding-top: 20px;
  140.         border-top: 1px solid #e1e5e9;
  141.     }
  142.     
  143.     .auth-link {
  144.         color: #1a4b8c;
  145.         text-decoration: none;
  146.         font-weight: 600;
  147.         transition: color 0.3s ease;
  148.     }
  149.     
  150.     .auth-link:hover {
  151.         color: #153a6d;
  152.         text-decoration: underline;
  153.     }
  154.     
  155.     .auth-security-note {
  156.         background: #f7fafc;
  157.         border-radius: 8px;
  158.         padding: 15px;
  159.         margin-top: 20px;
  160.         font-size: 0.85rem;
  161.         color: #718096;
  162.         text-align: center;
  163.         border-left: 3px solid #38b2ac;
  164.         line-height: 1.5;
  165.     }
  166.     
  167.     .auth-security-note i {
  168.         color: #38b2ac;
  169.         margin-right: 8px;
  170.     }
  171.     
  172.     .required::after {
  173.         content: " *";
  174.         color: #e74c3c;
  175.     }
  176.     
  177.     .text-muted {
  178.         color: #718096 !important;
  179.     }
  180.     
  181.     .alert {
  182.         padding: 12px 16px;
  183.         border-radius: 8px;
  184.         margin-bottom: 20px;
  185.     }
  186.     
  187.     .alert-success {
  188.         background-color: #c6f6d5;
  189.         border: 1px solid #9ae6b4;
  190.         color: #2d784d;
  191.     }
  192.     
  193.     .alert-danger {
  194.         background-color: #fed7d7;
  195.         border: 1px solid #feb2b2;
  196.         color: #c53030;
  197.     }
  198. </style>
  200. <div class="auth-container">
  201.     <div class="auth-card">
  202.         <div class="auth-header">
  203.             <div class="auth-icon">
  204.                 <i class="fas fa-key"></i>
  205.             </div>
  206.             <h1 class="auth-title">Recuperar Contraseña</h1>
  207.             <p class="auth-subtitle">Ingresa tu correo para recibir el enlace de recuperación</p>
  208.         </div>
  210.         {% for message in app.flashes('success') %}
  211.             <div class="alert alert-success" role="alert">{{ message }}</div>
  212.         {% endfor %}
  214.         {% for message in app.flashes('error') %}
  215.             <div class="alert alert-danger" role="alert">{{ message }}</div>
  216.         {% endfor %}
  218.         <form method="post" action="{{ path('app_forgot_password_request') }}">
  219.             <div class="auth-input-group">
  220.                 <label for="email" class="auth-form-label required">Correo Electrónico</label>
  221.                 <input type="email" name="email" id="email" class="auth-form-control" 
  222.                        placeholder="tu@correo.com" required>
  223.                 <div class="auth-input-icon">
  224.                     <i class="fas fa-envelope"></i>
  225.                 </div>
  226.             </div>
  228.             <div class="d-grid">
  229.                 <button class="btn auth-btn-primary btn-lg" type="submit">
  230.                     <i class="fas fa-paper-plane me-2"></i>Enviar Enlace de Recuperación
  231.                 </button>
  232.             </div>
  233.         </form>
  235.         <div class="auth-footer">
  236.             <span class="text-muted">¿Recordaste tu contraseña?</span>
  237.             <a href="{{ path('app_login') }}" class="auth-link ms-1">Iniciar Sesión</a>
  238.         </div>
  239.         
  240.         <div class="auth-security-note">
  241.             <i class="fas fa-shield-alt"></i>
  242.             Te enviaremos un enlace seguro para restablecer tu contraseña
  243.         </div>
  244.     </div>
  245. </div>
  247. <!-- Asegurar carga de Font Awesome si no está en base.html.twig -->
  248. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  249. {% endblock %}