Alertas AJAX

2025-05-15 11:33:04 -06:00
parent 1020e39da9
commit c44cfda3d8
5 changed files with 315 additions and 75 deletions
--- a/views/login/cambiar_password.php
+++ b/views/login/cambiar_password.php
@@ -6,6 +6,11 @@ $color1        = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')
 $color2        = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')[1];
 $mantenimiento = $config['modo_mantenimiento'] ?? 0;
 $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encuentra en mantenimiento temporal. Por favor, vuelve más tarde.';
+
+if (!isset($_SESSION['recuperacion_autorizada'])) {
+    header('Location: /IMPORTADORES/login');
+    exit;
+}
 ?>

 <!DOCTYPE html>
@@ -119,31 +124,46 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue

  <!-- Formulario de cambio de contraseña -->
  <div class="login-container">
-        <h4 class="mb-4 text-center" style="color:<?= $color1 ?>">Cambiar contraseña</h4>
+    <h4 class="mb-4 text-center" style="color:<?= $color1 ?>">Cambiar contraseña</h4>
+    <form id="formNueva" action="/IMPORTADORES/login/cambiarPassword" method="POST">
+      <div class="mb-3">
+        <label class="form-label">Nueva contraseña:</label>
+        <input type="password" name="password" required class="form-control" minlength="6" autocomplete="new-password">
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Confirmar contraseña:</label>
+        <input type="password" name="confirmar" required class="form-control">
+      </div>
+      <button type="submit" class="btn btn-warning w-100">Actualizar contraseña</button>
+    </form>

-        <form action="/IMPORTADORES/login/cambiarPassword" method="POST">
-        <div class="mb-3">
-            <label class="form-label">Nueva contraseña:</label>
-            <input type="password" name="password" required class="form-control">
-        </div>
+    <?php if (isset($_SESSION['cambio_error'])): ?>
+      <div class="text-danger mt-3"><?= $_SESSION['cambio_error'] ?></div>
+      <?php unset($_SESSION['cambio_error']); ?>
+    <?php endif; ?>

-        <div class="mb-3">
-            <label class="form-label">Confirmar contraseña:</label>
-            <input type="password" name="confirmar" required class="form-control">
-        </div>
-
-        <button type="submit" class="btn btn-warning w-100">Cambiar contraseña</button>
-
-        <?php if (isset($_SESSION['cambiar_error'])): ?>
-            <div class="text-danger mt-2"><?= $_SESSION['cambiar_error'] ?></div>
-            <?php unset($_SESSION['cambiar_error']); endif; ?>
-        </form>
-    </div>
+    <?php if (isset($_SESSION['cambio_exito'])): ?>
+      <div class="text-success mt-3"><?= $_SESSION['cambio_exito'] ?></div>
+      <?php unset($_SESSION['cambio_exito']); ?>
+    <?php endif; ?>
+  </div>

  <!-- FOOTER -->
  <footer class="fixed-bottom">
    &copy; <?= date('Y') ?> <?= htmlspecialchars($siglas) ?> · <?= htmlspecialchars($nombre) ?>
  </footer>

+  <script>
+    document.getElementById('formNueva').addEventListener('submit', function(e) {
+      const pass = this.password.value;
+      const confirm = this.confirmar.value;
+
+      if (pass !== confirm) {
+        e.preventDefault();
+        alert('❌ Las contraseñas no coinciden.');
+      }
+    });
+  </script>
+
 </body>
 </html>
--- a/views/login/recuperar.php
+++ b/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>
--- a/views/login/verificar_codigo.php
+++ b/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>