SIB/frontend/src/views/AuthView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { defineAsyncComponent } from 'vue'
const LoginForm = defineAsyncComponent(() => import('@/components/auth/LoginForm.vue'))
const RegisterForm = defineAsyncComponent(() => import('@/components/auth/RegisterForm.vue'))

const isLogin = ref(true)
const toggleAuth = () => { isLogin.value = !isLogin.value }
const router = useRouter()
const route = useRoute()
const sessionExpiredMessage = ref('')

// Detectar si fue redirigido por sesión expirada
onMounted(() => {
  if (route.query.reason === 'session_expired') {
    sessionExpiredMessage.value = 'Tu sesión ha expirado. Por favor, inicia sesión nuevamente.'
  }
})
</script>


<template>
  <div class="auth-page">
    <!-- Fondo con glow SIBU -->
    <div class="auth-glow" aria-hidden="true"></div>

    <div class="auth-wrapper">
      <!-- Botón volver al mapa -->
      <button class="back-to-map" @click="router.push('/map')">
        <span class="material-icons">arrow_back</span>
        Volver
      </button>

      <!-- Branding -->
      <div class="auth-brand">
        <h1 class="brand-title">SIBU</h1>
        <p class="brand-subtitle">Sistema de Transporte Público</p>
      </div>

      <!-- Card principal -->
      <div class="auth-card">
        <!-- Tabs Login / Registro -->
        <div class="auth-tabs">
          <button
            class="auth-tab"
            :class="{ 'auth-tab--active': isLogin }"
            @click="isLogin = true"
          >
            Iniciar Sesión
          </button>
          <button
            class="auth-tab"
            :class="{ 'auth-tab--active': !isLogin }"
            @click="isLogin = false"
          >
            Crear Cuenta
          </button>
        </div>

        <!-- Alerta de sesión expirada -->
        <div v-if="sessionExpiredMessage" class="redirect-error" style="background: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.2); color: #eab308;">
          <span class="material-icons">lock_clock</span>
          {{ sessionExpiredMessage }}
        </div>

        <!-- Formularios con transición -->
        <Transition name="auth-slide" mode="out-in">
          <LoginForm v-if="isLogin" @toggle="toggleAuth" />
          <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
        </Transition>
      </div>

      <!-- Footer -->
      <p class="auth-footer">SIBU © 2026 • Sistema de Transporte de Chiriquí</p>
    </div>
  </div>
</template>

<style scoped>
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  font-family: var(--font-family);
}

/* Glow decorativo SIBU amarillo */
.auth-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 231, 21, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.auth-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ─── Branding ─── */
.auth-brand {
  text-align: center;
}

.brand-title {
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--active-color);
  margin: 0;
  line-height: 1;
}

.brand-subtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0.375rem 0 0;
  letter-spacing: 0.02em;
}

/* ─── Card ─── */
.auth-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* ─── Tabs ─── */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-color);
}

.auth-tab {
  padding: 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.auth-tab:hover {
  color: var(--text-primary);
}

.auth-tab--active {
  color: var(--active-color);
  border-bottom-color: var(--active-color);
}

/* ─── Errores de Redirección ─── */
.redirect-error {
  margin: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.75rem;
  color: #ef4444;
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.redirect-error .material-icons {
  font-size: 1.125rem;
}

/* ─── Transición entre formularios ─── */
.auth-slide-enter-active,
.auth-slide-leave-active {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.auth-slide-enter-from {
  opacity: 0;
  transform: translateX(16px);
}

.auth-slide-leave-to {
  opacity: 0;
  transform: translateX(-16px);
}

/* ─── Botón volver ─── */
.back-to-map {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.back-to-map:hover {
  color: var(--active-color);
  border-color: var(--active-color);
  background: rgba(254, 231, 21, 0.06);
}

.back-to-map .material-icons {
  font-size: 18px;
}

/* ─── Footer ─── */
.auth-footer {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.5;
  margin: 0;
  letter-spacing: 0.03em;
}
</style>