fix: redesign auth UI to match SIBU design system, fix login bug
- AuthView: removed Tailwind/HUD aesthetic, uses SIBU CSS variables and Space Grotesk font, tab-based login/register switch - LoginForm: fix critical bug - email now sent lowercase to backend (was causing 401 errors), added show/hide password toggle, human labels replacing sci-fi terminology - RegisterForm: same fixes - lowercase email, human UX, SIBU theme variables - Both forms: removed all hardcoded Tailwind colors, now consistent with dark/light theme system
This commit is contained in:
@ -4,141 +4,175 @@ import LoginForm from '@/components/auth/LoginForm.vue'
|
||||
import RegisterForm from '@/components/auth/RegisterForm.vue'
|
||||
|
||||
const isLogin = ref(true)
|
||||
|
||||
const toggleAuth = () => {
|
||||
isLogin.value = !isLogin.value
|
||||
}
|
||||
const toggleAuth = () => { isLogin.value = !isLogin.value }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-view-hud bg-[#0F1115] min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
|
||||
<!-- HUD Background Elements -->
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div class="scanning-lines"></div>
|
||||
<div class="hud-corner top-left"></div>
|
||||
<div class="hud-corner top-right"></div>
|
||||
<div class="hud-corner bottom-left"></div>
|
||||
<div class="hud-corner bottom-right"></div>
|
||||
|
||||
<!-- Animated HUD Circles -->
|
||||
<div class="hud-circle opacity-10"></div>
|
||||
<div class="hud-circle-inner opacity-5"></div>
|
||||
</div>
|
||||
<div class="auth-page">
|
||||
<!-- Fondo con glow SIBU -->
|
||||
<div class="auth-glow" aria-hidden="true"></div>
|
||||
|
||||
<div class="auth-container relative z-10 w-full max-w-md">
|
||||
<!-- SIBU Branding -->
|
||||
<div class="text-center mb-10">
|
||||
<h1 class="text-5xl font-black italic tracking-tighter text-primary mb-2">SIBU</h1>
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<span class="h-px w-8 bg-primary/30"></span>
|
||||
<p class="text-[10px] font-bold text-primary tracking-[0.3em] uppercase">Auth System v2.0</p>
|
||||
<span class="h-px w-8 bg-primary/30"></span>
|
||||
<div class="auth-wrapper">
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Auth Box -->
|
||||
<div class="bg-[#1C1F26]/60 backdrop-blur-xl rounded-[2.5rem] p-8 border border-white/5 shadow-2xl relative">
|
||||
<!-- Floating HUD bracket -->
|
||||
<div class="absolute -top-4 -left-4 size-12 border-t-2 border-l-2 border-primary/40 rounded-tl-2xl"></div>
|
||||
<div class="absolute -bottom-4 -right-4 size-12 border-b-2 border-r-2 border-primary/40 rounded-br-2xl"></div>
|
||||
|
||||
<transition name="hud-fade" mode="out-in">
|
||||
<div :key="isLogin ? 'login' : 'register'">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-black text-white mb-1">
|
||||
{{ isLogin ? 'SNC: INICIAR SESIÓN' : 'SNC: REGISTRO' }}
|
||||
</h2>
|
||||
<p class="text-xs text-slate-500 font-bold uppercase tracking-wider">
|
||||
{{ isLogin ? 'Acceso autorizado requerido' : 'Crear nuevas credenciales de acceso' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<LoginForm v-if="isLogin" @toggle="toggleAuth" />
|
||||
<RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- Footer Help -->
|
||||
<div class="mt-8 text-center">
|
||||
<p class="text-[10px] font-bold text-slate-600 uppercase tracking-widest">
|
||||
Encriptación End-to-End • SIBU Cloud Services
|
||||
</p>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<p class="auth-footer">SIBU © 2026 • Sistema de Transporte de Chiriquí</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-view-hud {
|
||||
font-family: 'Plus Jakarta Sans', 'Space Grotesk', sans-serif;
|
||||
.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);
|
||||
}
|
||||
|
||||
.scanning-lines {
|
||||
/* Glow decorativo SIBU amarillo */
|
||||
.auth-glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 50%,
|
||||
rgba(254, 231, 21, 0.02) 50%
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
animation: scan 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scan {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: 0 100%; }
|
||||
}
|
||||
|
||||
.hud-corner {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-color: rgba(254, 231, 21, 0.2);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.top-left { top: 40px; left: 40px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
|
||||
.top-right { top: 40px; right: 40px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
|
||||
.bottom-left { bottom: 40px; left: 40px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
|
||||
.bottom-right { bottom: 40px; right: 40px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
|
||||
|
||||
.hud-circle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: -20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px dashed rgba(254, 231, 21, 0.3);
|
||||
transform: translateX(-50%);
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border-radius: 50%;
|
||||
animation: spin 60s linear infinite;
|
||||
background: radial-gradient(circle, rgba(254, 231, 21, 0.08) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hud-circle-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 40px double rgba(254, 231, 21, 0.2);
|
||||
border-radius: 50%;
|
||||
.auth-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
/* ─── Branding ─── */
|
||||
.auth-brand {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hud-fade-enter-active, .hud-fade-leave-active {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
.brand-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.05em;
|
||||
color: var(--active-color);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hud-fade-enter-from, .hud-fade-leave-to {
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ─── 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: scale(0.95);
|
||||
filter: blur(10px);
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.auth-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-16px);
|
||||
}
|
||||
|
||||
/* ─── 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>
|
||||
|
||||
Reference in New Issue
Block a user