Spaces:

blackmistcode
/

polysignal_hackaton

Sleeping

App Files Files Community

Jose Salazar commited on May 18

Commit

de370c8

unverified ·

2 Parent(s): 71925de c677cde

Merge pull request #33 from josesalazar2025/feature/header-user-logout

Browse files

Files changed (4) hide show

frontend/index.html +26 -46
frontend/src/api.js +20 -4
frontend/src/app.js +150 -26
frontend/src/style.css +177 -1

frontend/index.html CHANGED Viewed

@@ -7,6 +7,12 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 </head>
 <body>
   <!-- Auth Page (shown when unauthenticated) -->
   <div id="view-auth" class="auth-view hidden">
     <div class="auth-card">
@@ -176,7 +182,27 @@
         <button class="icon-btn mobile-only" id="btn-watchlist-mobile" title="Seguimiento">☆</button>
         <button class="icon-btn mobile-only" id="btn-alerts-mobile" title="Alertas">⚡</button>
         <button class="icon-btn mobile-only" id="btn-prefs" title="Modelo IA">⚙</button>
         <button class="btn-ghost desktop-only" id="btn-auth">Entrar</button>
         <button class="icon-btn auth-indicator mobile-only" id="btn-auth-mobile" title="Entrar"></button>
       </div>
     </header>
@@ -482,52 +508,6 @@
     </div>
   </div>
-  <!-- Auth Modal -->
-  <div class="modal-overlay hidden" id="auth-modal">
-    <div class="modal">
-      <div class="modal-header">
-        <div class="modal-tabs">
-          <button class="modal-tab active" data-tab="login">Iniciar sesión</button>
-          <button class="modal-tab" data-tab="register">Registrarse</button>
-        </div>
-        <button class="modal-close" id="modal-close" title="Cerrar">✕</button>
-      </div>
-      <div class="modal-body">
-        <!-- Login Form -->
-        <form class="modal-form active" id="form-login">
-          <div class="form-group">
-            <label for="login-email">Correo electrónico</label>
-            <input type="email" id="login-email" placeholder="usuario@ejemplo.com" required />
-          </div>
-          <div class="form-group">
-            <label for="login-password">Contraseña</label>
-            <input type="password" id="login-password" placeholder="••••••••" required />
-          </div>
-          <div class="form-error" id="login-error"></div>
-          <button type="submit" class="modal-submit">Entrar</button>
-        </form>
-        <!-- Register Form -->
-        <form class="modal-form" id="form-register">
-          <div class="form-group">
-            <label for="register-email">Correo electrónico</label>
-            <input type="email" id="register-email" placeholder="usuario@ejemplo.com" required />
-          </div>
-          <div class="form-group">
-            <label for="register-password">Contraseña</label>
-            <input type="password" id="register-password" placeholder="Mínimo 8 caracteres" required minlength="8" />
-          </div>
-          <div class="form-group">
-            <label for="register-password-confirm">Confirmar contraseña</label>
-            <input type="password" id="register-password-confirm" placeholder="Repite la contraseña" required />
-          </div>
-          <div class="form-error" id="register-error"></div>
-          <button type="submit" class="modal-submit">Crear cuenta</button>
-        </form>
-      </div>
-    </div>
-  </div>
 <script type="module" src="/src/main.js"></script>
 </body>

   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 </head>
 <body>
+  <!-- Global loader: visible por defecto (sin JS) hasta que bootstrap lo oculte -->
+  <div id="global-loader" class="global-loader" role="status" aria-live="polite" aria-busy="true">
+    <div class="global-loader__spinner"></div>
+    <span class="global-loader__label" id="global-loader-label">Cargando…</span>
+  </div>
   <!-- Auth Page (shown when unauthenticated) -->
   <div id="view-auth" class="auth-view hidden">
     <div class="auth-card">
         <button class="icon-btn mobile-only" id="btn-watchlist-mobile" title="Seguimiento">☆</button>
         <button class="icon-btn mobile-only" id="btn-alerts-mobile" title="Alertas">⚡</button>
         <button class="icon-btn mobile-only" id="btn-prefs" title="Modelo IA">⚙</button>
+        <!-- Desktop: unauthenticated -->
         <button class="btn-ghost desktop-only" id="btn-auth">Entrar</button>
+        <!-- Desktop: authenticated dropdown -->
+        <div class="user-menu" id="user-menu" hidden aria-haspopup="true">
+          <button class="user-menu-trigger" id="user-menu-trigger" aria-expanded="false" aria-controls="user-menu-panel">
+            <span class="user-avatar" id="user-avatar" aria-hidden="true">?</span>
+            <span class="user-email-short" id="user-email-short"></span>
+            <span class="user-chevron" aria-hidden="true">▾</span>
+          </button>
+          <div class="user-menu-panel" id="user-menu-panel" role="menu" hidden>
+            <div class="user-menu-info">
+              <span class="user-menu-label">Sesión iniciada como</span>
+              <span class="user-menu-email" id="user-menu-email"></span>
+            </div>
+            <hr class="user-menu-divider" />
+            <button class="user-menu-item" id="btn-logout" role="menuitem">
+              Cerrar sesión
+            </button>
+          </div>
+        </div>
+        <!-- Mobile: auth indicator (comportamiento sin cambios) -->
         <button class="icon-btn auth-indicator mobile-only" id="btn-auth-mobile" title="Entrar"></button>
       </div>
     </header>
     </div>
   </div>
 <script type="module" src="/src/main.js"></script>
 </body>

frontend/src/api.js CHANGED Viewed

@@ -123,6 +123,8 @@ export async function updateTelegramConfig({ botToken, chatId, enabled }) {
   return body
 }
 /* ─── Core fetch ─── */
 async function fetchJson(url, opts = {}) {
   const headers = { 'Content-Type': 'application/json', ...opts.headers }
@@ -134,10 +136,24 @@ async function fetchJson(url, opts = {}) {
     }
   }
-  const res = await fetch(url, {
-    headers,
-    ...opts,
-  })
   if (!res.ok) {
     if (res.status === 401) clearToken()

   return body
 }
+const FETCH_TIMEOUT_MS = 15_000
 /* ─── Core fetch ─── */
 async function fetchJson(url, opts = {}) {
   const headers = { 'Content-Type': 'application/json', ...opts.headers }
     }
   }
+  const controller = new AbortController()
+  const timerId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS)
+  let res
+  try {
+    res = await fetch(url, {
+      headers,
+      ...opts,
+      signal: controller.signal,
+    })
+  } catch (err) {
+    if (err.name === 'AbortError') {
+      throw new Error('El servidor tarda en responder. Inténtalo de nuevo.')
+    }
+    throw err
+  } finally {
+    clearTimeout(timerId)
+  }
   if (!res.ok) {
     if (res.status === 401) clearToken()

frontend/src/app.js CHANGED Viewed

@@ -62,6 +62,37 @@ function focusFirstInvalid(form) {
   if (invalid) invalid.focus()
 }
 /* ─── Estado global ─── */
 let state = {
   view: 'dashboard',
@@ -469,22 +500,95 @@ function handleTelegramTest() {
     })
 }
 function updateAuthButton() {
   const btn = document.getElementById('btn-auth')
   const indicator = document.getElementById('btn-auth-mobile')
   const authed = api.isAuthenticated()
   if (btn) {
-    if (authed) {
-      btn.textContent = 'Salir'
-      btn.onclick = async () => {
-        await api.logout()
-        updateAuthButton()
-        showAuthView()
-      }
-    } else {
-      btn.textContent = 'Entrar'
-      btn.onclick = showAuthView
     }
   }
@@ -492,11 +596,7 @@ function updateAuthButton() {
     indicator.classList.toggle('logged-in', authed)
     indicator.title = authed ? 'Salir' : 'Entrar'
     indicator.onclick = authed
-      ? async () => {
-          await api.logout()
-          updateAuthButton()
-          showAuthView()
-        }
       : showAuthView
   }
 }
@@ -528,13 +628,22 @@ async function handleLogin(e) {
     return
   }
   try {
-    await api.login(email, password)
     showDashboardView()
     updateAuthButton()
     await initAppData()
   } catch (err) {
     errorEl.textContent = 'Credenciales incorrectas. Inténtalo de nuevo.'
   }
 }
@@ -582,8 +691,15 @@ async function handleRegister(e) {
     return
   }
   try {
-    await api.register(email, password)
     showDashboardView()
     updateAuthButton()
     await initAppData()
@@ -595,6 +711,8 @@ async function handleRegister(e) {
     } else {
       errorEl.textContent = 'Error al registrar. Inténtalo de nuevo.'
     }
   }
 }
@@ -605,13 +723,13 @@ function attachRegisterInputListeners() {
 }
 async function ensureAuth() {
-  if (!api.isAuthenticated()) return false
   try {
-    await api.getMe()
-    return true
-  } catch (e) {
     // Token inválido o expirado — ya fue borrado por fetchJson
-    return false
   }
 }
@@ -1491,6 +1609,9 @@ export async function init() {
   document.getElementById('form-telegram')?.addEventListener('submit', handleTelegramSave)
   document.getElementById('btn-test-telegram')?.addEventListener('click', handleTelegramTest)
   // Auth page events
   document.getElementById('btn-auth')?.addEventListener('click', showAuthView)
   document.querySelectorAll('#view-auth .modal-tab').forEach((tab) => {
@@ -1501,15 +1622,18 @@ export async function init() {
   document.getElementById('form-register')?.addEventListener('submit', handleRegister)
   attachRegisterInputListeners()
-  updateAuthButton()
   // Si hay token, carga datos; si no, muestra la página de auth
-  const authed = await ensureAuth()
-  if (authed) {
     showDashboardView()
     await initAppData()
     initFilters()
   } else {
     showAuthView()
   }

   if (invalid) invalid.focus()
 }
+/* ─── Loader global ─── */
+let _pendingRequests = 0
+function showLoader(label = 'Cargando…') {
+  _pendingRequests++
+  const el = document.getElementById('global-loader')
+  const labelEl = document.getElementById('global-loader-label')
+  if (!el) return
+  if (labelEl) labelEl.textContent = label
+  el.setAttribute('aria-busy', 'true')
+  el.classList.remove('hidden')
+}
+function hideLoader() {
+  _pendingRequests = Math.max(0, _pendingRequests - 1)
+  if (_pendingRequests > 0) return
+  const el = document.getElementById('global-loader')
+  if (!el) return
+  el.setAttribute('aria-busy', 'false')
+  el.classList.add('hidden')
+}
+async function withLoader(asyncFn, label = 'Cargando…') {
+  showLoader(label)
+  try {
+    return await asyncFn()
+  } finally {
+    hideLoader()
+  }
+}
 /* ─── Estado global ─── */
 let state = {
   view: 'dashboard',
     })
 }
+let _currentUser = null
+async function performLogout(triggerEl) {
+  if (triggerEl) triggerEl.disabled = true
+  try {
+    await withLoader(() => api.logout(), 'Cerrando sesión…')
+  } finally {
+    _currentUser = null
+    if (triggerEl) triggerEl.disabled = false
+    updateAuthButton()
+    showAuthView()
+  }
+}
+function initUserMenu() {
+  const trigger = document.getElementById('user-menu-trigger')
+  const panel = document.getElementById('user-menu-panel')
+  const logoutBtn = document.getElementById('btn-logout')
+  if (!trigger || !panel) return
+  function openMenu() {
+    panel.hidden = false
+    trigger.setAttribute('aria-expanded', 'true')
+    logoutBtn?.focus()
+  }
+  function closeMenu() {
+    panel.hidden = true
+    trigger.setAttribute('aria-expanded', 'false')
+  }
+  trigger.addEventListener('click', (e) => {
+    e.stopPropagation()
+    panel.hidden ? openMenu() : closeMenu()
+  })
+  document.addEventListener('click', (e) => {
+    if (!document.getElementById('user-menu')?.contains(e.target)) closeMenu()
+  })
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !panel.hidden) {
+      closeMenu()
+      trigger.focus()
+    }
+  })
+  logoutBtn?.addEventListener('click', () => {
+    closeMenu()
+    performLogout(logoutBtn)
+  })
+}
+async function loadCurrentUser() {
+  if (!api.isAuthenticated()) { _currentUser = null; return }
+  try {
+    const data = await api.getMe()
+    _currentUser = data.user ?? data
+  } catch {
+    _currentUser = null
+  }
+}
 function updateAuthButton() {
   const btn = document.getElementById('btn-auth')
+  const userMenu = document.getElementById('user-menu')
   const indicator = document.getElementById('btn-auth-mobile')
   const authed = api.isAuthenticated()
   if (btn) {
+    btn.style.display = authed ? 'none' : ''
+    btn.onclick = showAuthView
+  }
+  if (userMenu) {
+    userMenu.hidden = !authed
+    if (authed && _currentUser) {
+      const email = _currentUser.email ?? ''
+      const initial = email.charAt(0).toUpperCase() || '?'
+      const shortEmail = email.length > 18 ? email.slice(0, 16) + '…' : email
+      const avatarEl = document.getElementById('user-avatar')
+      const shortEl = document.getElementById('user-email-short')
+      const fullEl = document.getElementById('user-menu-email')
+      if (avatarEl) avatarEl.textContent = initial
+      if (shortEl) shortEl.textContent = shortEmail
+      if (fullEl) fullEl.textContent = email
     }
   }
     indicator.classList.toggle('logged-in', authed)
     indicator.title = authed ? 'Salir' : 'Entrar'
     indicator.onclick = authed
+      ? () => performLogout(indicator)
       : showAuthView
   }
 }
     return
   }
+  const submitBtn = e.target.querySelector('button[type="submit"]')
+  const originalText = submitBtn?.textContent
+  if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Entrando…' }
   try {
+    await withLoader(async () => {
+      await api.login(email, password)
+      await loadCurrentUser()
+    }, 'Iniciando sesión…')
     showDashboardView()
     updateAuthButton()
     await initAppData()
   } catch (err) {
     errorEl.textContent = 'Credenciales incorrectas. Inténtalo de nuevo.'
+  } finally {
+    if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = originalText }
   }
 }
     return
   }
+  const submitBtn = e.target.querySelector('button[type="submit"]')
+  const originalText = submitBtn?.textContent
+  if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Creando cuenta…' }
   try {
+    await withLoader(async () => {
+      await api.register(email, password)
+      await loadCurrentUser()
+    }, 'Creando cuenta…')
     showDashboardView()
     updateAuthButton()
     await initAppData()
     } else {
       errorEl.textContent = 'Error al registrar. Inténtalo de nuevo.'
     }
+  } finally {
+    if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = originalText }
   }
 }
 }
 async function ensureAuth() {
+  if (!api.isAuthenticated()) return null
   try {
+    const data = await api.getMe()
+    return data.user ?? data
+  } catch {
     // Token inválido o expirado — ya fue borrado por fetchJson
+    return null
   }
 }
   document.getElementById('form-telegram')?.addEventListener('submit', handleTelegramSave)
   document.getElementById('btn-test-telegram')?.addEventListener('click', handleTelegramTest)
+  // User menu dropdown
+  initUserMenu()
   // Auth page events
   document.getElementById('btn-auth')?.addEventListener('click', showAuthView)
   document.querySelectorAll('#view-auth .modal-tab').forEach((tab) => {
   document.getElementById('form-register')?.addEventListener('submit', handleRegister)
   attachRegisterInputListeners()
   // Si hay token, carga datos; si no, muestra la página de auth
+  const user = await ensureAuth()
+  if (user) {
+    _currentUser = user
+    updateAuthButton()
     showDashboardView()
+    hideLoader()
     await initAppData()
     initFilters()
   } else {
+    updateAuthButton()
+    hideLoader()
     showAuthView()
   }

frontend/src/style.css CHANGED Viewed

@@ -238,8 +238,9 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   padding: 0 16px;
   padding-left: calc(var(--sidebar-width) + var(--panel-gap));
   gap: 16px;
-  overflow: hidden;
   position: relative;
 }
 .layout.collapsed .topbar {
@@ -393,6 +394,123 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   border-color: var(--border2);
 }
 /* ─── Main content ─── */
 .main {
   grid-area: main;
@@ -2096,6 +2214,25 @@ td {
     gap: 10px;
   }
   /* Stats row with infinite scroll */
   .topbar-stats {
     order: 1;
@@ -2362,3 +2499,42 @@ td {
   flex-direction: column;
   gap: 16px;
 }

   padding: 0 16px;
   padding-left: calc(var(--sidebar-width) + var(--panel-gap));
   gap: 16px;
+  overflow: visible;
   position: relative;
+  z-index: 100;
 }
 .layout.collapsed .topbar {
   border-color: var(--border2);
 }
+/* ─── User menu dropdown (desktop) ─── */
+.user-menu {
+  position: relative;
+}
+.user-menu-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg3);
+  border: 0.5px solid var(--border2);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  color: var(--text2);
+  transition: color 0.15s, border-color 0.15s;
+}
+.user-menu-trigger:hover {
+  color: var(--text);
+  border-color: var(--blue2);
+}
+.user-avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--blue3);
+  border: 0.5px solid var(--blue2);
+  color: var(--blue);
+  font-size: 0.75rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+.user-email-short {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.user-chevron {
+  font-size: 0.7rem;
+  color: var(--text3);
+  transition: transform 0.15s;
+}
+.user-menu-trigger[aria-expanded="true"] .user-chevron {
+  transform: rotate(180deg);
+}
+.user-menu-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 200px;
+  background: var(--bg2);
+  border: 0.5px solid var(--border2);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  z-index: 200;
+  padding: 6px 0;
+}
+.user-menu-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.user-menu-label {
+  font-size: 0.7rem;
+  color: var(--text3);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.user-menu-email {
+  font-size: 0.8125rem;
+  color: var(--text);
+  font-weight: 500;
+  word-break: break-all;
+}
+.user-menu-divider {
+  border: none;
+  border-top: 0.5px solid var(--border2);
+  margin: 4px 0;
+}
+.user-menu-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 8px 14px;
+  background: none;
+  border: none;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  color: var(--text2);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.user-menu-item:hover {
+  background: var(--bg3);
+  color: var(--text);
+}
 /* ─── Main content ─── */
 .main {
   grid-area: main;
     gap: 10px;
   }
+  /* En mobile se muestra versión compacta del user-menu (solo avatar) */
+  .user-menu {
+    display: flex !important;
+  }
+  .user-email-short {
+    display: none;
+  }
+  .user-menu-trigger {
+    padding: 4px 8px;
+    gap: 4px;
+  }
+  .user-menu-panel {
+    right: 0;
+    min-width: 180px;
+  }
   /* Stats row with infinite scroll */
   .topbar-stats {
     order: 1;
   flex-direction: column;
   gap: 16px;
 }
+/* ─── Global Loader ─── */
+.global-loader {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  transition: opacity 0.25s ease;
+}
+.global-loader.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.global-loader__spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--border2);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: loader-spin 0.7s linear infinite;
+}
+@keyframes loader-spin {
+  to { transform: rotate(360deg); }
+}
+.global-loader__label {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text2);
+  letter-spacing: 0.04em;
+}