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:
@ -12,34 +12,35 @@ const password = ref('')
|
||||
const keepSession = ref(false)
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const showPassword = ref(false)
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const handleLogin = async () => {
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
|
||||
try {
|
||||
const response = await authService.login({
|
||||
email: email.value,
|
||||
// CRÍTICO: enviar email en minúsculas para evitar mismatch con el backend
|
||||
email: email.value.trim().toLowerCase(),
|
||||
password: password.value,
|
||||
keep_session: keepSession.value
|
||||
})
|
||||
|
||||
|
||||
authStore.login(response.access_token, response.role, response.full_name)
|
||||
|
||||
// Redirect based on role or home
|
||||
|
||||
const role = response.role.toUpperCase()
|
||||
if (role === 'ADMIN') router.push('/admin')
|
||||
else if (role === 'DRIVER') router.push('/driver')
|
||||
else if (role === 'PROMOTER') router.push('/promoter')
|
||||
else router.push('/map')
|
||||
|
||||
|
||||
} catch (error: any) {
|
||||
if (!error.response) {
|
||||
errorMessage.value = 'Error de conexión. Verifica tu internet.'
|
||||
} else if (error.response.status === 401) {
|
||||
errorMessage.value = 'Credenciales inválidas.'
|
||||
errorMessage.value = 'Correo o contraseña incorrectos.'
|
||||
} else {
|
||||
errorMessage.value = error.response?.data?.detail || 'Error en el servidor.'
|
||||
}
|
||||
@ -51,19 +52,19 @@ const handleLogin = async () => {
|
||||
const handleGoogleLogin = async () => {
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
|
||||
try {
|
||||
const { token } = await signInWithGoogle()
|
||||
const response = await authService.googleLogin(token)
|
||||
|
||||
|
||||
authStore.login(response.access_token, response.role, response.full_name)
|
||||
|
||||
|
||||
const role = response.role.toUpperCase()
|
||||
if (role === 'ADMIN') router.push('/admin')
|
||||
else if (role === 'DRIVER') router.push('/driver')
|
||||
else if (role === 'PROMOTER') router.push('/promoter')
|
||||
else router.push('/map')
|
||||
|
||||
|
||||
} catch (error: any) {
|
||||
errorMessage.value = 'Error al iniciar sesión con Google.'
|
||||
console.error(error)
|
||||
@ -74,84 +75,349 @@ const handleGoogleLogin = async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-hud">
|
||||
<!-- Google Login Button (Featured) -->
|
||||
<button
|
||||
<div class="login-form">
|
||||
<!-- Google -->
|
||||
<button
|
||||
type="button"
|
||||
class="google-btn"
|
||||
:disabled="isLoading"
|
||||
@click="handleGoogleLogin"
|
||||
class="w-full mb-8 h-14 bg-white dark:bg-zinc-800 rounded-2xl flex items-center justify-center gap-3 border border-slate-200 dark:border-white/10 shadow-sm active:scale-95 transition-all group"
|
||||
>
|
||||
<img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" class="size-6" alt="Google">
|
||||
<span class="text-sm font-black text-slate-700 dark:text-gray-200 uppercase tracking-tight">Continuar con Google</span>
|
||||
<div class="absolute inset-0 rounded-2xl border-2 border-primary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
|
||||
<span>Continuar con Google</span>
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="h-px flex-1 bg-white/5"></div>
|
||||
<span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">O entrar con email</span>
|
||||
<div class="h-px flex-1 bg-white/5"></div>
|
||||
<div class="divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-text">o con correo</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleLogin" class="space-y-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Terminal de Correo</label>
|
||||
<div class="relative group">
|
||||
<span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">alternate_email</span>
|
||||
<input
|
||||
type="email"
|
||||
v-model="email"
|
||||
placeholder="ACCESS_ID@SIBU.COM"
|
||||
required
|
||||
class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all uppercase text-sm"
|
||||
<!-- Formulario -->
|
||||
<form @submit.prevent="handleLogin">
|
||||
<!-- Email -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="login-email">Correo electrónico</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">alternate_email</span>
|
||||
<input
|
||||
id="login-email"
|
||||
type="email"
|
||||
v-model="email"
|
||||
placeholder="tu@correo.com"
|
||||
required
|
||||
autocomplete="email"
|
||||
class="field-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Código de Acceso</label>
|
||||
<div class="relative group">
|
||||
<span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">lock_open</span>
|
||||
<input
|
||||
type="password"
|
||||
v-model="password"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold focus:border-primary focus:ring-0 transition-all text-sm"
|
||||
|
||||
<!-- Contraseña -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="login-password">Contraseña</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">lock</span>
|
||||
<input
|
||||
id="login-password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
v-model="password"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
class="field-input"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-pw"
|
||||
@click="showPassword = !showPassword"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-2">
|
||||
<label class="flex items-center gap-2 cursor-pointer group">
|
||||
<input type="checkbox" v-model="keepSession" class="hidden" />
|
||||
<div class="size-5 rounded-lg border-2 border-white/10 flex items-center justify-center transition-colors" :class="keepSession ? 'bg-primary border-primary' : ''">
|
||||
<span class="material-icons text-slate-900 text-xs" v-if="keepSession">check</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-slate-500 uppercase">Mantener sesión</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="text-xs font-bold text-red-500 uppercase tracking-tight text-center">{{ errorMessage }}</p>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full h-14 bg-primary text-slate-900 rounded-2xl font-black uppercase tracking-[0.2em] text-xs shadow-xl shadow-primary/20 active:scale-95 transition-all mt-4"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
{{ isLoading ? 'Validando...' : 'Acceder al Sistema' }}
|
||||
|
||||
<!-- Mantener sesión -->
|
||||
<label class="keep-session">
|
||||
<input type="checkbox" v-model="keepSession" class="keep-checkbox" />
|
||||
<span class="keep-box" :class="{ 'keep-box--on': keepSession }">
|
||||
<span v-if="keepSession" class="material-icons keep-check">check</span>
|
||||
</span>
|
||||
<span class="keep-label">Mantener sesión iniciada</span>
|
||||
</label>
|
||||
|
||||
<!-- Error -->
|
||||
<p v-if="errorMessage" class="error-msg">
|
||||
<span class="material-icons error-icon">error_outline</span>
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
|
||||
<!-- Botón enviar -->
|
||||
<button type="submit" class="submit-btn" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="btn-spinner"></span>
|
||||
<span>{{ isLoading ? 'Ingresando...' : 'Iniciar Sesión' }}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-8 text-center">
|
||||
<p class="text-[11px] font-bold text-slate-500 uppercase">
|
||||
¿Nuevo en la red?
|
||||
<button @click="emit('toggle')" class="text-primary hover:underline ml-1">Crear Registro</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Switch a registro -->
|
||||
<p class="switch-text">
|
||||
¿No tienes cuenta?
|
||||
<button type="button" class="switch-link" @click="emit('toggle')">Regístrate aquí</button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
input::placeholder {
|
||||
letter-spacing: 0.1em;
|
||||
.login-form {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ─── Google ─── */
|
||||
.google-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.875rem;
|
||||
background: var(--bg-primary);
|
||||
border: 1.5px solid var(--border-color);
|
||||
border-radius: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.google-btn:hover:not(:disabled) {
|
||||
border-color: var(--active-color);
|
||||
}
|
||||
|
||||
.google-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ─── Divider ─── */
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.divider-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ─── Campos ─── */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.field + .field {
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 0.875rem;
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 0.875rem 0.875rem 2.75rem;
|
||||
background: var(--bg-primary);
|
||||
border: 1.5px solid var(--border-color);
|
||||
border-radius: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: var(--active-color);
|
||||
}
|
||||
|
||||
.toggle-pw {
|
||||
position: absolute;
|
||||
right: 0.875rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle-pw .material-icons {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* ─── Mantener sesión ─── */
|
||||
.keep-session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.keep-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.keep-box {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
border: 1.5px solid var(--border-color);
|
||||
border-radius: 0.375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.keep-box--on {
|
||||
background: var(--active-color);
|
||||
border-color: var(--active-color);
|
||||
}
|
||||
|
||||
.keep-check {
|
||||
font-size: 0.875rem;
|
||||
color: #101820;
|
||||
}
|
||||
|
||||
.keep-label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ─── Error ─── */
|
||||
.error-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: #ef4444;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── Botón enviar ─── */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--active-color);
|
||||
color: #101820;
|
||||
border: none;
|
||||
border-radius: 0.875rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 800;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s, transform 0.15s;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.submit-btn:not(:disabled):active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid rgba(16, 24, 32, 0.3);
|
||||
border-top-color: #101820;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ─── Switch ─── */
|
||||
.switch-text {
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.switch-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--active-color);
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin-left: 0.25rem;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,27 +11,26 @@ const password = ref('')
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const successMessage = ref('')
|
||||
const showPassword = ref(false)
|
||||
|
||||
const handleRegister = async () => {
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
|
||||
try {
|
||||
await authService.registerPassenger({
|
||||
full_name: fullName.value,
|
||||
email: email.value,
|
||||
full_name: fullName.value.trim(),
|
||||
email: email.value.trim().toLowerCase(),
|
||||
password: password.value
|
||||
})
|
||||
|
||||
analyticsService.logEvent({
|
||||
event_name: 'sign_up',
|
||||
properties: { method: 'email' }
|
||||
|
||||
analyticsService.logEvent({
|
||||
event_name: 'sign_up',
|
||||
properties: { method: 'email' }
|
||||
})
|
||||
|
||||
successMessage.value = 'Registro exitoso. Ahora puedes entrar.'
|
||||
setTimeout(() => {
|
||||
emit('success')
|
||||
}, 2000)
|
||||
|
||||
successMessage.value = '¡Cuenta creada! Ahora puedes iniciar sesión.'
|
||||
setTimeout(() => { emit('success') }, 2000)
|
||||
} catch (error: any) {
|
||||
errorMessage.value = error.response?.data?.detail || 'Error al crear la cuenta.'
|
||||
} finally {
|
||||
@ -41,73 +40,293 @@ const handleRegister = async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register-hud">
|
||||
<div v-if="successMessage" class="bg-primary/10 border border-primary/50 p-6 rounded-3xl text-center mb-6">
|
||||
<span class="material-icons text-primary text-4xl mb-2">verified_user</span>
|
||||
<h3 class="text-white font-black uppercase text-sm mb-1">Acceso Concedido</h3>
|
||||
<p class="text-xs text-primary/80 font-bold uppercase">{{ successMessage }}</p>
|
||||
<div class="register-form">
|
||||
|
||||
<!-- Éxito -->
|
||||
<div v-if="successMessage" class="success-card">
|
||||
<span class="material-icons success-icon">check_circle</span>
|
||||
<h3 class="success-title">¡Registro exitoso!</h3>
|
||||
<p class="success-desc">{{ successMessage }}</p>
|
||||
</div>
|
||||
|
||||
<form v-else @submit.prevent="handleRegister" class="space-y-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Identidad de Usuario</label>
|
||||
<div class="relative group">
|
||||
<span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">badge</span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="fullName"
|
||||
placeholder="NOMBRE COMPLETO"
|
||||
required
|
||||
class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all uppercase text-sm"
|
||||
<!-- Formulario -->
|
||||
<form v-else @submit.prevent="handleRegister">
|
||||
|
||||
<!-- Nombre -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="reg-name">Nombre completo</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">person</span>
|
||||
<input
|
||||
id="reg-name"
|
||||
type="text"
|
||||
v-model="fullName"
|
||||
placeholder="Tu nombre"
|
||||
required
|
||||
autocomplete="name"
|
||||
class="field-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Terminal de Correo</label>
|
||||
<div class="relative group">
|
||||
<span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">alternate_email</span>
|
||||
<input
|
||||
type="email"
|
||||
v-model="email"
|
||||
placeholder="USUARIO@SIBU.COM"
|
||||
required
|
||||
class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all uppercase text-sm"
|
||||
<!-- Email -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="reg-email">Correo electrónico</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">alternate_email</span>
|
||||
<input
|
||||
id="reg-email"
|
||||
type="email"
|
||||
v-model="email"
|
||||
placeholder="tu@correo.com"
|
||||
required
|
||||
autocomplete="email"
|
||||
class="field-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Definir Código de Acceso</label>
|
||||
<div class="relative group">
|
||||
<span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">security</span>
|
||||
<input
|
||||
type="password"
|
||||
v-model="password"
|
||||
placeholder="MÍNIMO 8 CARACTERES"
|
||||
required
|
||||
|
||||
<!-- Contraseña -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="reg-password">Contraseña</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">lock</span>
|
||||
<input
|
||||
id="reg-password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
v-model="password"
|
||||
placeholder="Mínimo 8 caracteres"
|
||||
required
|
||||
minlength="8"
|
||||
class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all text-sm"
|
||||
autocomplete="new-password"
|
||||
class="field-input"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-pw"
|
||||
@click="showPassword = !showPassword"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="text-xs font-bold text-red-500 uppercase tracking-tight text-center">{{ errorMessage }}</p>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full h-14 bg-primary text-slate-900 rounded-2xl font-black uppercase tracking-[0.2em] text-xs shadow-xl shadow-primary/20 active:scale-95 transition-all mt-6"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
{{ isLoading ? 'Procesando Datos...' : 'Registrar Credenciales' }}
|
||||
|
||||
<!-- Error -->
|
||||
<p v-if="errorMessage" class="error-msg">
|
||||
<span class="material-icons error-icon">error_outline</span>
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
|
||||
<!-- Botón enviar -->
|
||||
<button type="submit" class="submit-btn" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="btn-spinner"></span>
|
||||
<span>{{ isLoading ? 'Creando cuenta...' : 'Crear Cuenta' }}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-8 text-center">
|
||||
<p class="text-[11px] font-bold text-slate-500 uppercase">
|
||||
¿Ya tienes autorización?
|
||||
<button @click="emit('toggle')" class="text-primary hover:underline ml-1">Regresar al Login</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Switch a login -->
|
||||
<p class="switch-text">
|
||||
¿Ya tienes cuenta?
|
||||
<button type="button" class="switch-link" @click="emit('toggle')">Inicia sesión</button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.register-form {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ─── Éxito ─── */
|
||||
.success-card {
|
||||
background: rgba(74, 222, 128, 0.08);
|
||||
border: 1px solid rgba(74, 222, 128, 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 3rem;
|
||||
color: #4ade80;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.success-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ─── Campos ─── */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.field + .field {
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 0.875rem;
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 0.875rem 0.875rem 2.75rem;
|
||||
background: var(--bg-primary);
|
||||
border: 1.5px solid var(--border-color);
|
||||
border-radius: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
border-color: var(--active-color);
|
||||
}
|
||||
|
||||
.toggle-pw {
|
||||
position: absolute;
|
||||
right: 0.875rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle-pw .material-icons {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* ─── Error ─── */
|
||||
.error-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: #ef4444;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── Botón ─── */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--active-color);
|
||||
color: #101820;
|
||||
border: none;
|
||||
border-radius: 0.875rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 800;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s, transform 0.15s;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.submit-btn:not(:disabled):active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid rgba(16, 24, 32, 0.3);
|
||||
border-top-color: #101820;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ─── Switch ─── */
|
||||
.switch-text {
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.switch-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--active-color);
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin-left: 0.25rem;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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