feat(ui): rediseñar pantalla de login con mascota bot de soporte animada y acceso rapido
This commit is contained in:
+201
-38
@@ -1,50 +1,213 @@
|
||||
<%- include('../partials/header') %>
|
||||
<% title = 'Iniciar Sesión'; %>
|
||||
|
||||
<% if (success_msg && success_msg.length > 0) { %>
|
||||
<% success_msg.forEach(msg => { %>
|
||||
<div class="alert alert-success alert-dismissible fade show mt-3">
|
||||
<%= msg %>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<% if (error_msg && error_msg.length > 0) { %>
|
||||
<% error_msg.forEach(msg => { %>
|
||||
<div class="alert alert-danger alert-dismissible fade show mt-3">
|
||||
<%= msg %>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<div class="row justify-content-center mt-5">
|
||||
<div class="col-md-5">
|
||||
<div class="card shadow">
|
||||
<div class="card-header bg-primary text-white text-center py-3">
|
||||
<img src="/img/logo.svg" alt="Help Desk" width="48" height="48" class="mb-2 shadow-sm rounded-3">
|
||||
<h4 class="mb-0 fw-bold">Help Desk</h4>
|
||||
<small class="text-white-50">Iniciar Sesión</small>
|
||||
<div class="login-container">
|
||||
<div class="login-card-wrapper row g-0">
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- Columna Izquierda: Hero & Bot de Soporte -->
|
||||
<!-- ========================================== -->
|
||||
<div class="col-lg-5 login-hero-side">
|
||||
<div>
|
||||
<div class="d-flex align-items-center gap-2 mb-3">
|
||||
<span class="badge bg-primary bg-opacity-25 text-info border border-info border-opacity-25 px-2.5 py-1.5 rounded-pill">
|
||||
<i class="fas fa-shield-alt me-1"></i> Ecosistema Telcotronics
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="fw-bold text-white mb-2">Help Desk & FSM</h3>
|
||||
<p class="text-white-50 small mb-0">Gestión inteligente de incidencias y visitas técnicas de campo en terreno.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/login" method="POST">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" name="email" class="form-control" required>
|
||||
|
||||
<!-- Mascota Bot de Soporte con Animación -->
|
||||
<div class="bot-avatar-wrapper text-center my-4">
|
||||
<img src="/img/bot-soporte.svg" alt="Bot de Soporte Help Desk" class="bot-avatar-img mb-3">
|
||||
<div>
|
||||
<div class="bot-status-pill">
|
||||
<span class="bot-status-dot"></span>
|
||||
<span>Asistente Activo • 24/7 en línea</span>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Contraseña</label>
|
||||
<input type="password" name="password" class="form-control" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Ingresar</button>
|
||||
</form>
|
||||
<div class="text-center mt-3">
|
||||
<a href="/register">¿No tienes cuenta? Regístrate</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Características Clave del Sistema -->
|
||||
<div>
|
||||
<div class="login-feature-item">
|
||||
<div class="login-feature-icon">
|
||||
<i class="fas fa-bolt"></i>
|
||||
</div>
|
||||
<div>Triaje digital y tickets en tiempo real</div>
|
||||
</div>
|
||||
<div class="login-feature-item">
|
||||
<div class="login-feature-icon">
|
||||
<i class="fas fa-map-marked-alt"></i>
|
||||
</div>
|
||||
<div>Despacho FSM con GPS, evidencias y firma</div>
|
||||
</div>
|
||||
<div class="login-feature-item">
|
||||
<div class="login-feature-icon">
|
||||
<i class="fas fa-building"></i>
|
||||
</div>
|
||||
<div>Aislamiento multi-tenant 100% seguro</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-3 border-top border-white border-opacity-10 d-flex justify-content-between align-items-center text-white-50" style="font-size: 0.75rem;">
|
||||
<span>soporte.sigmac.app</span>
|
||||
<span>v2.0 • SIGMA Cloud</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- Columna Derecha: Formulario de Login -->
|
||||
<!-- ========================================== -->
|
||||
<div class="col-lg-7 login-form-side">
|
||||
|
||||
<!-- Mensajes Flash de Notificación -->
|
||||
<% if (success_msg && success_msg.length > 0) { %>
|
||||
<% success_msg.forEach(msg => { %>
|
||||
<div class="alert alert-success alert-dismissible fade show rounded-3 shadow-sm border-0 mb-4" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-check-circle me-2 fs-5"></i>
|
||||
<div><%= msg %></div>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<% if (error_msg && error_msg.length > 0) { %>
|
||||
<% error_msg.forEach(msg => { %>
|
||||
<div class="alert alert-danger alert-dismissible fade show rounded-3 shadow-sm border-0 mb-4" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-exclamation-triangle me-2 fs-5"></i>
|
||||
<div><%= msg %></div>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% } %>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<img src="/img/logo.svg" alt="Help Desk" width="32" height="32" class="rounded-2 shadow-sm">
|
||||
<h4 class="fw-bold text-dark mb-0">¡Bienvenido de vuelta!</h4>
|
||||
</div>
|
||||
<p class="text-muted small">Ingresa tus credenciales autorizadas para acceder a la plataforma.</p>
|
||||
</div>
|
||||
|
||||
<form action="/login" method="POST" id="loginForm">
|
||||
|
||||
<!-- Campo de Correo Electrónico -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-secondary small fw-semibold">Correo Electrónico</label>
|
||||
<div class="input-group login-input-group">
|
||||
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
||||
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="ejemplo@helpdesk.com" required autocomplete="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Campo de Contraseña -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<label class="form-label text-secondary small fw-semibold">Contraseña</label>
|
||||
</div>
|
||||
<div class="input-group login-input-group">
|
||||
<span class="input-group-text"><i class="fas fa-lock"></i></span>
|
||||
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="••••••••" required autocomplete="current-password" style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
|
||||
<button class="btn btn-outline-secondary password-toggle-btn px-3" type="button" id="togglePasswordBtn" title="Mostrar/Ocultar contraseña">
|
||||
<i class="fas fa-eye" id="togglePasswordIcon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Opciones Adicionales -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="rememberMe">
|
||||
<label class="form-check-label text-muted small" for="rememberMe">Recordar credenciales</label>
|
||||
</div>
|
||||
<a href="/register" class="text-decoration-none small text-primary fw-semibold">Registrar empresa</a>
|
||||
</div>
|
||||
|
||||
<!-- Botón Principal de Acceso -->
|
||||
<button type="submit" class="btn btn-login w-100 d-flex justify-content-center align-items-center shadow-sm">
|
||||
<span>Ingresar a la Plataforma</span>
|
||||
<i class="fas fa-arrow-right ms-2"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Acceso Rápido / Credenciales Demo del Ecosistema -->
|
||||
<div class="mt-4 pt-3 border-top">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-muted fw-semibold" style="font-size: 0.76rem;">
|
||||
<i class="fas fa-key me-1 text-primary"></i> Acceso Rápido Demo:
|
||||
</span>
|
||||
<small class="text-muted" style="font-size: 0.72rem;">(1 clic para rellenar)</small>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="demo-account-chip" onclick="fillCredentials('super@helpdesk.com', '123456')">
|
||||
<i class="fas fa-crown text-warning me-1"></i> Superadmin
|
||||
</span>
|
||||
<span class="demo-account-chip" onclick="fillCredentials('admin@helpdesk.com', '123456')">
|
||||
<i class="fas fa-user-shield text-info me-1"></i> Admin
|
||||
</span>
|
||||
<span class="demo-account-chip" onclick="fillCredentials('agent@helpdesk.com', '123456')">
|
||||
<i class="fas fa-headset text-primary me-1"></i> Agente
|
||||
</span>
|
||||
<span class="demo-account-chip" onclick="fillCredentials('client@helpdesk.com', '123456')">
|
||||
<i class="fas fa-user text-secondary me-1"></i> Cliente
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pie del Formulario -->
|
||||
<div class="text-center mt-4">
|
||||
<small class="text-muted">
|
||||
¿Problemas de acceso? Contacta a <a href="mailto:soporte@telcotronics.com" class="text-decoration-none text-secondary fw-semibold">Soporte Telcotronics</a>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toggle de visibilidad de contraseña
|
||||
const togglePasswordBtn = document.getElementById('togglePasswordBtn');
|
||||
const inputPassword = document.getElementById('inputPassword');
|
||||
const togglePasswordIcon = document.getElementById('togglePasswordIcon');
|
||||
|
||||
if (togglePasswordBtn && inputPassword && togglePasswordIcon) {
|
||||
togglePasswordBtn.addEventListener('click', function() {
|
||||
if (inputPassword.type === 'password') {
|
||||
inputPassword.type = 'text';
|
||||
togglePasswordIcon.classList.remove('fa-eye');
|
||||
togglePasswordIcon.classList.add('fa-eye-slash');
|
||||
} else {
|
||||
inputPassword.type = 'password';
|
||||
togglePasswordIcon.classList.remove('fa-eye-slash');
|
||||
togglePasswordIcon.classList.add('fa-eye');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Función para autocompletar credenciales demo
|
||||
function fillCredentials(email, password) {
|
||||
const emailInput = document.getElementById('inputEmail');
|
||||
const passInput = document.getElementById('inputPassword');
|
||||
if (emailInput && passInput) {
|
||||
emailInput.value = email;
|
||||
passInput.value = password;
|
||||
|
||||
// Efecto visual de feedback
|
||||
emailInput.classList.add('is-valid');
|
||||
passInput.classList.add('is-valid');
|
||||
setTimeout(() => {
|
||||
emailInput.classList.remove('is-valid');
|
||||
passInput.classList.remove('is-valid');
|
||||
}, 1200);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<%- include('../partials/footer') %>
|
||||
|
||||
Reference in New Issue
Block a user