Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: redesign auth UI to match SIBU design system, fix login bug

Browse Source 
- 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:
Johan Samudio
2026-02-22 18:04:52 -05:00
parent a1ba74cd49
commit 69061a081f
3 changed files with 766 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
frontend/src/components/auth/LoginForm.vue
View File

@ -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>

349
frontend/src/components/auth/RegisterForm.vue
View File

@ -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>