Alertas AJAX

views/login/recuperar.php

@@ -120,16 +120,25 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
   <!-- Formulario de recuperación de contraseña -->
   <div class="login-container">
     <h4 class="mb-4 text-center text-dark">Recuperar Contraseña</h4>
-    <form action="/IMPORTADORES/login/enviarCodigo" method="POST">
+    <form id="formRecuperar" novalidate>
       <div class="mb-3">
-        <label class="form-label">Ingresa tu correo</label>
-        <input type="email" name="email" class="form-control" required>
+        <label class="form-label" for="emailInput">Ingresa tu correo</label>
+        <input type="email" id="emailInput" name="email" class="form-control" required>
       </div>
-      <button type="submit" class="btn btn-primary">Enviar código</button>
-      <?php if (isset($_SESSION['recuperar_error'])): ?>
-        <div class="text-danger"><?= $_SESSION['recuperar_error'] ?></div>
-      <?php unset($_SESSION['recuperar_error']); endif; ?>
+      <button type="submit" class="btn btn-primary w-100">Enviar código</button>
     </form>
+
+    <?php if (isset($_SESSION['recuperar_error'])): ?>
+      <div class="text-danger mt-3 text-center"><?= htmlspecialchars($_SESSION['recuperar_error']) ?></div>
+      <?php unset($_SESSION['recuperar_error']); ?>
+    <?php endif; ?>
+
+    <?php if (isset($_SESSION['recuperar_exito'])): ?>
+      <div class="text-success mt-3 text-center"><?= htmlspecialchars($_SESSION['recuperar_exito']) ?></div>
+      <?php unset($_SESSION['recuperar_exito']); ?>
+    <?php endif; ?>
+
+    <div id="mensaje" class="mt-3 text-center fw-bold"></div>
   </div>
 
   <!-- FOOTER -->
@@ -137,5 +146,61 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
     &copy; <?= date('Y') ?> <?= htmlspecialchars($siglas) ?> · <?= htmlspecialchars($nombre) ?>
   </footer>
 
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const form = document.getElementById('formRecuperar');
+      const mensaje = document.getElementById('mensaje');
+      const inputCorreo = form.querySelector('input[name="email"]');
+
+      inputCorreo.addEventListener('input', () => {
+        mensaje.innerHTML = '';
+        mensaje.classList.remove("text-danger", "text-success");
+      });
+
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const emailValue = inputCorreo.value.trim();
+        if (!emailValue) {
+          mensaje.textContent = "❌ Por favor, ingresa un correo válido.";
+          mensaje.classList.add("text-danger");
+          return;
+        }
+
+        const formData = new FormData();
+        formData.append('email', emailValue);
+
+        fetch('/IMPORTADORES/login/enviarCodigo', {
+          method: 'POST',
+          body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+          // Esperamos que el backend devuelva JSON con { success: true/false, message: "..." }
+
+          if (data.success) {
+            mensaje.textContent = data.message;
+            mensaje.classList.remove("text-danger");
+            mensaje.classList.add("text-success");
+
+            // Opcional: redirigir a la vista de verificación de código
+            setTimeout(() => {
+              window.location.href = '/IMPORTADORES/login/verificarCodigoVista';
+            }, 2000);
+          } else {
+            mensaje.textContent = "❌ " + data.message;
+            mensaje.classList.remove("text-success");
+            mensaje.classList.add("text-danger");
+          }
+        })
+        .catch(() => {
+          mensaje.textContent = "❌ Error de red.";
+          mensaje.classList.remove("text-success");
+          mensaje.classList.add("text-danger");
+        });
+      });
+    });
+  </script>
+
 </body>
 </html>