Validate logout flow whit backend

frontend/index.html

@@ -345,32 +345,37 @@
       </div>
       <div class="modal-body">
         <!-- Login Form -->
-        <form class="modal-form active" id="form-login">
+        <form class="modal-form active" id="form-login" novalidate>
           <div class="form-group">
             <label for="login-email">Correo electrónico</label>
-            <input type="email" id="login-email" placeholder="usuario@ejemplo.com" required />
+            <input type="text" id="login-email" placeholder="usuario@ejemplo.com" autocomplete="email" />
+            <small class="field-error" id="login-email-error"></small>
           </div>
           <div class="form-group">
             <label for="login-password">Contraseña</label>
-            <input type="password" id="login-password" placeholder="••••••••" required />
+            <input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password" />
+            <small class="field-error" id="login-password-error"></small>
           </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">
+        <form class="modal-form" id="form-register" novalidate>
           <div class="form-group">
             <label for="register-email">Correo electrónico</label>
-            <input type="email" id="register-email" placeholder="usuario@ejemplo.com" required />
+            <input type="text" id="register-email" placeholder="usuario@ejemplo.com" autocomplete="email" />
+            <small class="field-error" id="register-email-error"></small>
           </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" />
+            <input type="password" id="register-password" placeholder="Mínimo 8 caracteres" autocomplete="new-password" />
+            <small class="field-error" id="register-password-error"></small>
           </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 />
+            <input type="password" id="register-password-confirm" placeholder="Repite la contraseña" autocomplete="new-password" />
+            <small class="field-error" id="register-password-confirm-error"></small>
           </div>
           <div class="form-error" id="register-error"></div>
           <button type="submit" class="modal-submit">Crear cuenta</button>

frontend/src/api.js

@@ -65,8 +65,21 @@ export async function register(email, password) {
   return body
 }
 
-export function logout() {
-  clearToken()
+export async function logout() {
+  const token = getToken()
+  try {
+    if (token) {
+      await fetch(`${BASE}/auth/logout`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+    }
+  } finally {
+    clearToken()
+  }
 }
 
 export async function getMe() {

frontend/src/app.js

@@ -32,6 +32,36 @@ import * as map from './map.js'
 import * as simulator from './simulator.js'
 import { extractFilterOptions, filterMarkets } from './filters.js'
 
+/* ─── Helpers de validación de formularios ─── */
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function isValidEmail(value) {
+  return EMAIL_RE.test(value.trim())
+}
+
+function showFieldError(inputId, msg) {
+  const input = document.getElementById(inputId)
+  const errorEl = document.getElementById(`${inputId}-error`)
+  if (input) input.classList.add('input-invalid')
+  if (errorEl) errorEl.textContent = msg
+}
+
+function clearFieldError(inputId) {
+  const input = document.getElementById(inputId)
+  const errorEl = document.getElementById(`${inputId}-error`)
+  if (input) input.classList.remove('input-invalid')
+  if (errorEl) errorEl.textContent = ''
+}
+
+function clearAllFieldErrors(...inputIds) {
+  inputIds.forEach(clearFieldError)
+}
+
+function focusFirstInvalid(form) {
+  const invalid = form.querySelector('.input-invalid')
+  if (invalid) invalid.focus()
+}
+
 /* ─── Estado global ─── */
 let state = {
   view: 'dashboard',
@@ -361,8 +391,8 @@ function updateAuthButton() {
   if (btn) {
     if (authed) {
       btn.textContent = 'Salir'
-      btn.onclick = () => {
-        api.logout()
+      btn.onclick = async () => {
+        await api.logout()
         updateAuthButton()
         location.reload()
       }
@@ -376,8 +406,8 @@ function updateAuthButton() {
     indicator.classList.toggle('logged-in', authed)
     indicator.title = authed ? 'Salir' : 'Entrar'
     indicator.onclick = authed
-      ? () => {
-          api.logout()
+      ? async () => {
+          await api.logout()
           updateAuthButton()
           location.reload()
         }
@@ -390,6 +420,28 @@ async function handleLogin(e) {
   const email = document.getElementById('login-email').value.trim()
   const password = document.getElementById('login-password').value
   const errorEl = document.getElementById('login-error')
+
+  clearAllFieldErrors('login-email', 'login-password')
+  errorEl.textContent = ''
+
+  let valid = true
+  if (!email) {
+    showFieldError('login-email', 'Introduce tu correo electrónico.')
+    valid = false
+  } else if (!isValidEmail(email)) {
+    showFieldError('login-email', 'El formato del correo no es válido.')
+    valid = false
+  }
+  if (!password) {
+    showFieldError('login-password', 'Introduce tu contraseña.')
+    valid = false
+  }
+
+  if (!valid) {
+    focusFirstInvalid(e.target)
+    return
+  }
+
   try {
     await api.login(email, password)
     closeAuthModal()
@@ -400,6 +452,12 @@ async function handleLogin(e) {
   }
 }
 
+function attachLoginInputListeners() {
+  ;['login-email', 'login-password'].forEach((id) => {
+    document.getElementById(id)?.addEventListener('input', () => clearFieldError(id))
+  })
+}
+
 async function handleRegister(e) {
   e.preventDefault()
   const email = document.getElementById('register-email').value.trim()
@@ -407,12 +465,34 @@ async function handleRegister(e) {
   const confirm = document.getElementById('register-password-confirm').value
   const errorEl = document.getElementById('register-error')
 
-  if (password !== confirm) {
-    errorEl.textContent = 'Las contraseñas no coinciden.'
-    return
+  clearAllFieldErrors('register-email', 'register-password', 'register-password-confirm')
+  errorEl.textContent = ''
+
+  let valid = true
+  if (!email) {
+    showFieldError('register-email', 'Introduce tu correo electrónico.')
+    valid = false
+  } else if (!isValidEmail(email)) {
+    showFieldError('register-email', 'El formato del correo no es válido.')
+    valid = false
   }
-  if (password.length < 8) {
-    errorEl.textContent = 'La contraseña debe tener al menos 8 caracteres.'
+  if (!password) {
+    showFieldError('register-password', 'Introduce una contraseña.')
+    valid = false
+  } else if (password.length < 8) {
+    showFieldError('register-password', 'La contraseña debe tener al menos 8 caracteres.')
+    valid = false
+  }
+  if (!confirm) {
+    showFieldError('register-password-confirm', 'Confirma tu contraseña.')
+    valid = false
+  } else if (confirm !== password) {
+    showFieldError('register-password-confirm', 'Las contraseñas no coinciden.')
+    valid = false
+  }
+
+  if (!valid) {
+    focusFirstInvalid(e.target)
     return
   }
 
@@ -422,10 +502,22 @@ async function handleRegister(e) {
     updateAuthButton()
     await initAppData()
   } catch (err) {
-    errorEl.textContent = 'Error al registrar. El correo podría estar en uso.'
+    const isEmailTaken = err.message?.includes('EMAIL_EXISTS') || err.message?.includes('409')
+    if (isEmailTaken) {
+      showFieldError('register-email', 'Este correo ya está registrado.')
+      focusFirstInvalid(e.target)
+    } else {
+      errorEl.textContent = 'Error al registrar. Inténtalo de nuevo.'
+    }
   }
 }
 
+function attachRegisterInputListeners() {
+  ;['register-email', 'register-password', 'register-password-confirm'].forEach((id) => {
+    document.getElementById(id)?.addEventListener('input', () => clearFieldError(id))
+  })
+}
+
 async function ensureAuth() {
   if (!api.isAuthenticated()) return false
   try {
@@ -1187,7 +1279,9 @@ export async function init() {
     tab.addEventListener('click', () => switchAuthTab(tab.dataset.tab))
   })
   document.getElementById('form-login')?.addEventListener('submit', handleLogin)
+  attachLoginInputListeners()
   document.getElementById('form-register')?.addEventListener('submit', handleRegister)
+  attachRegisterInputListeners()
   document.getElementById('auth-modal')?.addEventListener('click', (e) => {
     if (e.target.id === 'auth-modal') closeAuthModal()
   })

frontend/src/style.css

@@ -1367,6 +1367,22 @@ td {
   min-height: 18px;
 }
 
+.field-error {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--red);
+  margin-top: 4px;
+  min-height: 16px;
+}
+
+.form-group input.input-invalid {
+  border-color: var(--red);
+}
+
+.form-group input.input-invalid:focus {
+  border-color: var(--red);
+}
+
 .modal-submit {
   background: #2563eb;
   border: none;