Cambio de contraseña desde dashboard de cualquier tipo de usuario
This commit is contained in:
@@ -33,15 +33,19 @@ $dos_factores_estado = obtenerEstadoDosFactores();
|
||||
.card { border-radius: 12px; }
|
||||
.btn i { font-family: "Font Awesome 6 Free", sans-serif; margin-right: 0.5rem; }
|
||||
.btn { font-family: 'Segoe UI', sans-serif; }
|
||||
.modal-header.bg-primary { background: linear-gradient(135deg, #003366, #0055A5) !important; color: white; }
|
||||
.modal-header.bg-success { background: linear-gradient(135deg, #28a745, #20c997) !important; color: white; }
|
||||
.codigo-input { text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; font-weight: bold; }
|
||||
.intentos-restantes { color: #dc3545; font-weight: bold; }
|
||||
.password-strength { height: 4px; border-radius: 2px; margin-top: 5px; transition: all 0.3s ease; }
|
||||
.strength-weak { background-color: #dc3545; }
|
||||
.strength-medium { background-color: #ffc107; }
|
||||
.strength-strong { background-color: #28a745; }
|
||||
.btn-loading { pointer-events: none; opacity: 0.6; }
|
||||
/* Fix para z-index del modal */
|
||||
.modal { z-index: 9999 !important; }
|
||||
.modal-backdrop { z-index: 9998 !important; }
|
||||
/* Estilos adicionales para mejorar la apariencia del modal */
|
||||
.modal-content { border: none; border-radius: 15px; overflow: hidden; }
|
||||
.modal-header { border-bottom: none; padding: 20px 25px 15px; }
|
||||
.modal-body { padding: 25px; }
|
||||
.modal-footer { border-top: none; padding: 15px 25px 25px; }
|
||||
.btn { border-radius: 8px; padding: 10px 20px; font-weight: 500; }
|
||||
.alert-info { background-color: #e3f2fd; border-color: #bbdefb; color: #1565c0; border-radius: 8px; }
|
||||
/* Animación suave para el modal */
|
||||
.modal.fade .modal-dialog { transform: translate(0, -50px); transition: transform 0.3s ease-out; }
|
||||
.modal.show .modal-dialog { transform: translate(0, 0); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -68,7 +72,18 @@ $dos_factores_estado = obtenerEstadoDosFactores();
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 hide"></div>
|
||||
<!-- Cambiar contraseña -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm p-3">
|
||||
<h4 class="mb-4 text-dark">Cambiar contraseña</h4>
|
||||
<p>Al actualizar tu contraseña, refuerzas la seguridad de tu cuenta. Te recomendamos usar una combinación de letras, números y símbolos para mayor seguridad.</p><br>
|
||||
<form>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalConfirmarCambio">
|
||||
<i class="fas fa-key"></i>Cambiar contraseña
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Correo adicional (extra) -->
|
||||
<div class="col-md-6">
|
||||
@@ -137,69 +152,95 @@ $dos_factores_estado = obtenerEstadoDosFactores();
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal de confirmación -->
|
||||
<div class="modal fade" id="modalConfirmarCambio" tabindex="-1" aria-labelledby="modalConfirmarCambioLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-primary text-white">
|
||||
<h5 class="modal-title" id="modalConfirmarCambioLabel">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||
Confirmar cambio de contraseña
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<div class="mb-3">
|
||||
<i class="fas fa-shield-alt text-warning" style="font-size: 3rem;"></i>
|
||||
</div>
|
||||
<h5 class="mb-3">¿Estás seguro de cambiar tu contraseña?</h5>
|
||||
<p class="text-muted">
|
||||
Se enviará un código de verificación a tu correo electrónico para confirmar el cambio de contraseña.
|
||||
</p>
|
||||
<div class="alert alert-info">
|
||||
<small>
|
||||
<i class="fas fa-info-circle me-1"></i>
|
||||
El código expirará en 10 minutos
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-center">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
<i class="fas fa-times me-1"></i>
|
||||
Cancelar
|
||||
</button>
|
||||
<form method="POST" action="/IMPORTADORES/reset/enviarCodigoInterno" style="display: inline;">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-check me-1"></i>
|
||||
Sí, estoy seguro
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const chk = document.getElementById('dos_factores');
|
||||
const label = document.querySelector('label[for="dos_factores"]');
|
||||
|
||||
chk.addEventListener('change', () => {
|
||||
label.textContent = chk.checked ? 'Activo' : 'Inactivo';
|
||||
});
|
||||
|
||||
chk.addEventListener('change', () => { label.textContent = chk.checked ? 'Activo' : 'Inactivo'; });
|
||||
// Función para confirmar eliminación con SweetAlert
|
||||
function confirmarEliminacion(tipo) {
|
||||
const mensajes = {
|
||||
'extra': {
|
||||
titulo: '¿Eliminar correo adicional?',
|
||||
texto: 'No podrás recibir notificaciones en este correo.',
|
||||
confirmado: 'Correo adicional eliminado',
|
||||
form: 'form-eliminar-extra'
|
||||
},
|
||||
'respaldo': {
|
||||
titulo: '¿Eliminar correo de respaldo?',
|
||||
texto: 'No podrás recuperar tu cuenta con este correo.',
|
||||
confirmado: 'Correo de respaldo eliminado',
|
||||
form: 'form-eliminar-respaldo'
|
||||
}
|
||||
'extra': { titulo: '¿Eliminar correo adicional?', texto: 'No podrás recibir notificaciones en este correo.', confirmado: 'Correo adicional eliminado', form: 'form-eliminar-extra' },
|
||||
'respaldo': { titulo: '¿Eliminar correo de respaldo?', texto: 'No podrás recuperar tu cuenta con este correo.', confirmado: 'Correo de respaldo eliminado', form: 'form-eliminar-respaldo' }
|
||||
};
|
||||
|
||||
const config = mensajes[tipo];
|
||||
|
||||
swal({
|
||||
title: config.titulo,
|
||||
text: config.texto,
|
||||
icon: "warning",
|
||||
buttons: {
|
||||
cancel: {
|
||||
text: "Cancelar",
|
||||
visible: true,
|
||||
className: "btn-secondary"
|
||||
},
|
||||
confirm: {
|
||||
text: "Sí, eliminar",
|
||||
className: "btn-danger"
|
||||
}
|
||||
},
|
||||
dangerMode: true,
|
||||
swal({ title: config.titulo, text: config.texto, icon: "warning", buttons: {
|
||||
cancel: { text: "Cancelar", visible: true, className: "btn-secondary" },
|
||||
confirm: { text: "Sí, eliminar", className: "btn-danger" }
|
||||
}, dangerMode: true,
|
||||
})
|
||||
.then((eliminar) => {
|
||||
if (eliminar) {
|
||||
// Mostrar mensaje de éxito y enviar formulario
|
||||
swal({
|
||||
title: "¡Eliminado!",
|
||||
text: config.confirmado,
|
||||
icon: "success",
|
||||
timer: 1500,
|
||||
buttons: false
|
||||
});
|
||||
|
||||
swal({ title: "¡Eliminado!", text: config.confirmado, icon: "success", timer: 1500, buttons: false });
|
||||
// Enviar el formulario después de un pequeño delay
|
||||
setTimeout(() => {
|
||||
document.getElementById(config.form).submit();
|
||||
}, 1500);
|
||||
setTimeout(() => { document.getElementById(config.form).submit(); }, 1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.querySelector('#modalConfirmarCambio form');
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
const modal = document.getElementById('modalConfirmarCambio');
|
||||
|
||||
// Agregar efecto de carga al botón de confirmación
|
||||
form.addEventListener('submit', function() {
|
||||
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Enviando...';
|
||||
submitBtn.disabled = true;
|
||||
});
|
||||
|
||||
// Resetear el botón cuando se cierra el modal
|
||||
modal.addEventListener('hidden.bs.modal', function() {
|
||||
submitBtn.innerHTML = '<i class="fas fa-check me-1"></i> Sí, estoy seguro';
|
||||
submitBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user