96 lines
3.2 KiB
Vue
96 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Eye, EyeOff } from 'lucide-vue-next'
|
|
|
|
const auth = useAuthStore()
|
|
const email = ref('')
|
|
const password = ref('')
|
|
const showPassword = ref(false)
|
|
const rememberMe = ref(false)
|
|
|
|
onMounted(() => {
|
|
const saved = localStorage.getItem('alpha_remember_email')
|
|
if (saved) {
|
|
email.value = saved
|
|
rememberMe.value = true
|
|
}
|
|
})
|
|
|
|
async function handleLogin() {
|
|
if (!email.value || !password.value) return
|
|
|
|
if (rememberMe.value) {
|
|
localStorage.setItem('alpha_remember_email', email.value)
|
|
} else {
|
|
localStorage.removeItem('alpha_remember_email')
|
|
}
|
|
|
|
await auth.login({ email: email.value, password: password.value })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6">
|
|
<img src="/Alpha.svg" alt="Alpha" class="h-10 w-auto dark:invert" />
|
|
|
|
<Card class="w-full max-w-sm cursor-pointer transition-colors border-primary/50">
|
|
<CardHeader>
|
|
<CardTitle class="text-2xl">Iniciar sesión</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<form @submit.prevent="handleLogin" class="grid gap-4">
|
|
<div class="grid gap-2">
|
|
<Label for="email">Email</Label>
|
|
<Input id="email" v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<Label for="password">Contraseña</Label>
|
|
<div class="relative">
|
|
<Input
|
|
id="password"
|
|
v-model="password"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
placeholder="••••••••"
|
|
autocomplete="current-password"
|
|
class="pr-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
@click="showPassword = !showPassword"
|
|
>
|
|
<EyeOff v-if="showPassword" class="size-4" />
|
|
<Eye v-else class="size-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox id="remember" v-model:checked="rememberMe" />
|
|
<Label for="remember" class="text-sm font-normal cursor-pointer">Recordarme</Label>
|
|
</div>
|
|
|
|
<div v-if="auth.error" class="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
|
|
{{ auth.error }}
|
|
</div>
|
|
|
|
<Button type="submit" class="w-full" :disabled="auth.loading">
|
|
{{ auth.loading ? 'Ingresando...' : 'Iniciar sesión' }}
|
|
</Button>
|
|
</form>
|
|
|
|
<p class="text-center text-xs text-muted-foreground/40 mt-6">
|
|
kappa.lambdaanalytics.co
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|