pablinux/help_desk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): optimización responsiva y mobile-first de la pantalla de login

Browse Source
This commit is contained in:
pablinux
2026-10-20 18:00:48 -05:00
parent f7cfccefa8
commit 46cdf4fd3d
3 changed files with 229 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/auth/login.ejs
+47 -49
View File
@@ -9,22 +9,24 @@
<!-- ========================================== -->
<!-- Columna Izquierda: Hero & Bot de Soporte -->
<!-- En Desktop: Panel lateral vertical con robot y features -->
<!-- En Móvil: Header banner compacto y estilizado -->
<!-- ========================================== -->
<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">
<div class="login-hero-brand">
<div class="d-flex align-items-center gap-2 mb-2 mb-lg-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 hero-badge">
<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 centralizada de soporte, incidencias y operaciones de campo.</p>
<h3 class="fw-bold text-white mb-1 mb-lg-2 hero-title">Help Desk & FSM</h3>
<p class="text-white-50 small mb-0 d-none d-sm-block hero-desc">Gestión centralizada de soporte, incidencias y operaciones de campo.</p>
</div>
<!-- Mascota Bot de Soporte con Animación Flotante -->
<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-avatar-wrapper text-center my-2 my-lg-4">
<img src="/img/bot-soporte.svg" alt="Bot de Soporte Help Desk" class="bot-avatar-img mb-1 mb-lg-3">
<div class="d-none d-lg-block">
<div class="bot-status-pill">
<span class="bot-status-dot"></span>
<span>Asistente Activo • 24/7 en línea</span>
@@ -32,8 +34,8 @@
</div>
</div>
<!-- Características Clave del Sistema -->
<div>
<!-- Características Clave del Sistema (visibles en desktop >= lg) -->
<div class="d-none d-lg-block">
<div class="login-feature-item">
<div class="login-feature-icon">
<i class="fas fa-bolt"></i>
@@ -68,7 +70,7 @@
<!-- 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="alert alert-success alert-dismissible fade show rounded-3 shadow-sm border-0 mb-3" role="alert">
<div class="d-flex align-items-center">
<i class="fas fa-check-circle me-2 fs-5"></i>
<div><%= msg %></div>
@@ -80,7 +82,7 @@
<% 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="alert alert-danger alert-dismissible fade show rounded-3 shadow-sm border-0 mb-3" role="alert">
<div class="d-flex align-items-center">
<i class="fas fa-exclamation-triangle me-2 fs-5"></i>
<div><%= msg %></div>
@@ -93,21 +95,21 @@
<!-- Cabecera de Bienvenida -->
<div class="mb-3">
<div class="d-flex align-items-center gap-2 mb-1">
<img src="/img/logo.svg" alt="Help Desk" width="30" height="30" class="rounded-2 shadow-sm">
<h4 class="fw-bold text-dark mb-0">Acceso al Sistema</h4>
<img src="/img/logo.svg" alt="Help Desk" width="28" height="28" class="rounded-2 shadow-sm">
<h4 class="fw-bold text-dark mb-0 form-title">Acceso al Sistema</h4>
</div>
<p class="text-muted small mb-0">Selecciona tu perfil de usuario para ingresar a la plataforma correspondiente.</p>
<p class="text-muted small mb-0 form-subtitle">Selecciona tu perfil de usuario para ingresar.</p>
</div>
<!-- Segmented Control / Tabs de Selección de Perfil -->
<div class="login-segmented-tabs">
<button type="button" class="login-tab-btn <%= tab !== 'staff' ? 'active' : '' %>" id="tabBtnClient" onclick="switchLoginTab('client')">
<i class="fas fa-user-tag text-primary"></i>
<span>Clientes & Empresas</span>
<span class="tab-label-text">Clientes SIGMA</span>
</button>
<button type="button" class="login-tab-btn <%= tab === 'staff' ? 'active staff-active' : '' %>" id="tabBtnStaff" onclick="switchLoginTab('staff')">
<i class="fas fa-user-shield text-indigo" style="color: #4f46e5;"></i>
<span>Personal Técnico</span>
<span class="tab-label-text">Personal Técnico</span>
</button>
</div>
@@ -115,11 +117,11 @@
<!-- PESTAÑA 1: CLIENTES & EMPRESAS (WebControl + Redes Sociales) -->
<!-- ============================================================= -->
<div id="sectionClient" style="<%= tab === 'staff' ? 'display: none;' : '' %>">
<div class="d-flex align-items-center justify-content-between mb-3 p-2.5 rounded-3 bg-light border border-slate-200">
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 p-2 rounded-3 bg-light border border-slate-200">
<div class="client-badge-pill">
<i class="fas fa-building"></i> Clientes SIGMA
</div>
<small class="text-muted" style="font-size: 0.75rem;">Autenticación vía <strong>SIGMA WebControl</strong></small>
<small class="text-muted" style="font-size: 0.73rem;">Vía <strong>SIGMA WebControl</strong></small>
</div>
<form action="/login" method="POST" id="clientLoginForm">
@@ -144,7 +146,7 @@
</div>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="clientRememberMe">
<label class="form-check-label text-muted small" for="clientRememberMe">Recordarme</label>
@@ -166,7 +168,7 @@
</div>
<!-- Google Identity Services Button -->
<div class="mb-2">
<div class="social-auth-wrapper">
<div id="g_id_onload"
data-client_id="<%= googleClientId %>"
data-context="signin"
@@ -180,17 +182,16 @@
data-theme="outline"
data-text="continue_with"
data-size="large"
data-logo_alignment="left"
data-width="360">
data-logo_alignment="left">
</div>
</div>
<!-- Botón de Facebook OAuth -->
<div class="mt-2">
<button type="button" class="btn btn-social-fb w-100 d-flex align-items-center justify-content-center gap-2 shadow-sm" onclick="handleFacebookLogin()">
<i class="fab fa-facebook fs-5"></i>
<span>Continuar con Facebook</span>
</button>
<!-- Botón de Facebook OAuth -->
<div class="mt-2">
<button type="button" class="btn btn-social-fb w-100 d-flex align-items-center justify-content-center gap-2 shadow-sm" onclick="handleFacebookLogin()">
<i class="fab fa-facebook fs-5"></i>
<span>Continuar con Facebook</span>
</button>
</div>
</div>
<div class="text-center mt-3 pt-2">
@@ -203,18 +204,18 @@
<!-- PESTAÑA 2: PERSONAL TÉCNICO & STAFF (Consola Local MariaDB) -->
<!-- ============================================================= -->
<div id="sectionStaff" style="<%= tab !== 'staff' ? 'display: none;' : '' %>">
<div class="d-flex align-items-center justify-content-between mb-3 p-2.5 rounded-3 bg-light border border-slate-200">
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 p-2 rounded-3 bg-light border border-slate-200">
<div class="staff-badge-pill">
<i class="fas fa-shield-alt"></i> Consola Operativa
</div>
<small class="text-muted" style="font-size: 0.75rem;">Exclusivo <strong>Agentes & Técnicos</strong></small>
<small class="text-muted" style="font-size: 0.73rem;">Exclusivo <strong>Agentes & Staff</strong></small>
</div>
<form action="/login" method="POST" id="staffLoginForm">
<input type="hidden" name="login_type" value="staff">
<div class="mb-3">
<label class="form-label text-secondary small fw-semibold">Correo Corporativo de Operaciones</label>
<label class="form-label text-secondary small fw-semibold">Correo de Operaciones</label>
<div class="input-group login-input-group">
<span class="input-group-text"><i class="fas fa-id-badge"></i></span>
<input type="email" name="email" id="staffEmail" class="form-control" placeholder="agente@helpdesk.com" required autocomplete="email">
@@ -222,7 +223,7 @@
</div>
<div class="mb-3">
<label class="form-label text-secondary small fw-semibold">Contraseña de Acceso Interno</label>
<label class="form-label text-secondary small fw-semibold">Contraseña Interna</label>
<div class="input-group login-input-group">
<span class="input-group-text"><i class="fas fa-key"></i></span>
<input type="password" name="password" id="staffPassword" class="form-control" placeholder="••••••••" required autocomplete="current-password" style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
@@ -232,12 +233,12 @@
</div>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="staffRememberMe">
<label class="form-check-label text-muted small" for="staffRememberMe">Mantener sesión técnica</label>
<label class="form-check-label text-muted small" for="staffRememberMe">Recordarme</label>
</div>
<span class="text-muted small">help_desk.users DB</span>
<span class="text-muted small" style="font-size: 0.75rem;">help_desk.users DB</span>
</div>
<button type="submit" class="btn btn-login w-100 d-flex justify-content-center align-items-center shadow-sm" style="background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);">
@@ -247,12 +248,12 @@
</form>
<!-- Acceso Rápido / Credenciales Demo Exclusivas para Personal Técnico -->
<div class="mt-4 pt-3 border-top">
<div class="mt-3 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-bolt me-1 text-primary"></i> Acceso Rápido Personal de Guardia:
<span class="text-muted fw-semibold" style="font-size: 0.75rem;">
<i class="fas fa-bolt me-1 text-primary"></i> Acceso Rápido Demo:
</span>
<small class="text-muted" style="font-size: 0.72rem;">(1 clic para autocompletar)</small>
<small class="text-muted" style="font-size: 0.70rem;">(1 clic para autocompletar)</small>
</div>
<div class="d-flex flex-wrap gap-2">
<span class="demo-account-chip" onclick="fillStaffCredentials('super@helpdesk.com', '123456')">
@@ -262,16 +263,16 @@
<i class="fas fa-user-shield text-info me-1"></i> Admin
</span>
<span class="demo-account-chip" onclick="fillStaffCredentials('agent@helpdesk.com', '123456')">
<i class="fas fa-headset text-primary me-1"></i> Agente Técnico
<i class="fas fa-headset text-primary me-1"></i> Agente
</span>
</div>
</div>
</div>
<!-- Pie de Soporte -->
<div class="text-center mt-4 pt-2">
<small class="text-muted">
¿Problemas de conectividad? Contacta a <a href="mailto:soporte@telcotronics.com" class="text-decoration-none text-secondary fw-semibold">NOC Telcotronics</a>
<div class="text-center mt-3 pt-2">
<small class="text-muted" style="font-size: 0.78rem;">
¿Problemas de conectividad? <a href="mailto:soporte@telcotronics.com" class="text-decoration-none text-secondary fw-semibold">NOC Telcotronics</a>
</small>
</div>
@@ -358,7 +359,6 @@
// Callback de Facebook Login
window.handleFacebookLogin = function() {
// Si el SDK de Facebook está cargado, invocarlo, o guiar al usuario
if (typeof FB !== 'undefined') {
FB.login(function(response) {
if (response.authResponse && response.authResponse.accessToken) {
@@ -382,8 +382,7 @@
}
}, { scope: 'public_profile,email' });
} else {
// Mensaje amigable si FB SDK aún no tiene APP_ID público configurado
const email = prompt('Inicio con Facebook:\nIngresa tu correo de cuenta para simular el acceso social o usa Google Sign-In:');
const email = prompt('Inicio con Facebook:\nIngresa tu correo para simular el acceso social o usa Google Sign-In:');
if (email && email.includes('@')) {
fetch('/auth/facebook', {
method: 'POST',
@@ -395,7 +394,6 @@
if (data.success) {
window.location.href = data.redirect || '/client/dashboard';
} else {
// Si falla la verificación con Graph API real, informar
alert('Para inicio social directo en este entorno, por favor utiliza "Continuar con Google".');
}
})
views/partials/header.ejs
+1 -1
View File
@@ -21,5 +21,5 @@
<%- include('sidebar') %>
<main class="col-md-9 ms-sm-auto col-lg-10 px-4">
<% } else { %>
<main class="col-12 px-4">
<main class="col-12 px-2 px-sm-3 px-md-4">
<% } %>