Alertas AJAX

views/login/verificar_codigo.php

@@ -24,7 +24,7 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
       background-color: #f4f6f9;
       font-family: 'Segoe UI', sans-serif;
       position: relative;
-      height: 100vh;
+      min-height: 100vh;
     }
 
     .navbar {
@@ -67,13 +67,22 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
 
     /* Contenedor de fondo semitransparente para las vistas */
     .overlay {
-      position: absolute;
+      position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.5);
       z-index: 5;
+      pointer-events: none; /* Para que no interfiera con los clics */
+    }
+    #mensaje {
+      transition: opacity 0.3s ease;
+    }
+    @media (max-height: 600px) {
+      footer {
+        position: static !important;
+      }
     }
   </style>
 </head>
@@ -119,26 +128,95 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
 
   <!-- Formulario de validación de código -->
   <div class="login-container">
-        <h4 class="mb-4 text-center" style="color:<?= $color1 ?>">Verificar código</h4>
+    <h4 class="mb-4 text-center text-dark">Verifica tu código</h4>
 
-        <form action="/IMPORTADORES/login/verificarCodigo" method="POST">
-        <div class="mb-3">
-            <label class="form-label">Ingresa el código recibido:</label>
-            <input type="text" name="codigo" required class="form-control">
-        </div>
+    <?php
+      if (!isset($_SESSION['email_recuperacion'])) {
+        // Si no hay correo en sesión, redirige a solicitar código
+        header('Location: /IMPORTADORES/login/recuperar');
+        exit;
+      }
+    ?>
+    <!-- Formulario para verificar el código -->
+    <form id="formCodigo" action="/IMPORTADORES/login/verificarCodigo" method="POST">
+      <div class="mb-3">
+        <label class="form-label" for="codigo">Código recibido por correo</label>
+        <input type="text" id="codigo" name="codigo" class="form-control" required pattern="\d{6}" maxlength="6" placeholder="Ej. 123456">
+      </div>
+      <button type="submit" class="btn btn-primary w-100">Verificar código</button>
+    </form>
 
-        <button type="submit" class="btn btn-success w-100">Verificar</button>
-
-        <?php if (isset($_SESSION['codigo_error'])): ?>
-            <div class="text-danger mt-2"><?= $_SESSION['codigo_error'] ?></div>
-            <?php unset($_SESSION['codigo_error']); endif; ?>
-        </form>
+    <!-- Mostrar mensajes -->
+    <div id="mensaje" class="mt-3 text-center fw-bold">
+      <?php if (isset($_SESSION['codigo_error'])): ?>
+        <div class="text-danger"><?= $_SESSION['codigo_error'] ?></div>
+        <?php unset($_SESSION['codigo_error']); ?>
+      <?php elseif (isset($_SESSION['codigo_exito'])): ?>
+        <div class="text-success"><?= $_SESSION['codigo_exito'] ?></div>
+        <?php unset($_SESSION['codigo_exito']); ?>
+      <?php endif; ?>
     </div>
+  </div>
 
   <!-- FOOTER -->
   <footer class="fixed-bottom">
     &copy; <?= date('Y') ?> <?= htmlspecialchars($siglas) ?> · <?= htmlspecialchars($nombre) ?>
   </footer>
 
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const form = document.getElementById('formCodigo');
+      const mensaje = document.getElementById('mensaje');
+      const inputCodigo = form.querySelector('input[name="codigo"]');
+
+      inputCodigo.addEventListener('input', () => {
+        mensaje.innerHTML = '';
+        mensaje.classList.remove("text-danger", "text-success");
+      });
+
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const codigo = inputCodigo.value.trim();
+        if (!codigo || codigo.length !== 6) {
+          mensaje.textContent = "❌ Ingresa un código de 6 dígitos.";
+          mensaje.classList.add("text-danger");
+          return;
+        }
+
+        const formData = new FormData();
+        formData.append('codigo', codigo);
+
+        fetch('/IMPORTADORES/login/verificarCodigo', {
+          method: 'POST',
+          body: formData,
+          credentials: 'same-origin' // ✅ Importante para mantener sesión
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            mensaje.textContent = data.message;
+            mensaje.classList.remove("text-danger");
+            mensaje.classList.add("text-success");
+
+            // Redirigir al formulario de cambio de contraseña
+            setTimeout(() => {
+              window.location.href = '/IMPORTADORES/login/cambiarPasswordVista';
+            }, 1500);
+          } else {
+            mensaje.textContent = "❌ " + data.message;
+            mensaje.classList.remove("text-success");
+            mensaje.classList.add("text-danger");
+          }
+        })
+        .catch(() => {
+          mensaje.textContent = "❌ Error al verificar el código.";
+          mensaje.classList.remove("text-success");
+          mensaje.classList.add("text-danger");
+        });
+      });
+    });
+  </script>
+
 </body>
 </html>