ricardo/Alpha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejorar login y sidebar: SVG logo, arreglar card estilo docs, corregir Label, agregar componentes de tipografia

Browse Source
This commit is contained in:
Ricardo Gonzalez
2026-05-26 01:06:05 -05:00
parent cd97b16daa
commit 045ff796ef
18 changed files with 256 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/LoginView.vue
+19 -20
View File
@@ -4,7 +4,8 @@ import { useAuthStore } from '@/stores/auth'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Checkbox } from '@/components/ui/checkbox'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
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()
@@ -35,29 +36,27 @@ async function handleLogin() {
</script>
<template>
<div class="flex min-h-svh flex-col items-center justify-center bg-background p-6">
<Card class="w-full max-w-[400px]">
<CardHeader class="text-center pb-4">
<div class="flex aspect-square size-12 items-center justify-center rounded-xl bg-primary text-primary-foreground mx-auto mb-3">
<span class="font-bold text-xl">A</span>
</div>
<CardTitle class="text-2xl font-bold tracking-tight">Alpha</CardTitle>
<CardDescription class="text-xs mt-1">Alpha</CardDescription>
<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">
<CardHeader>
<CardTitle class="text-2xl">Iniciar sesión</CardTitle>
</CardHeader>
<CardContent>
<form @submit.prevent="handleLogin" class="flex flex-col gap-4">
<div class="space-y-1.5">
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
<Input v-model="email" name="email" type="email" placeholder="ricardo@..." autocomplete="email" />
<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="space-y-1.5">
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
<div class="grid gap-2">
<Label for="password">Contraseña</Label>
<div class="relative">
<Input
id="password"
v-model="password"
:type="showPassword ? 'text' : 'password'"
name="password"
placeholder="••••••••"
autocomplete="current-password"
class="pr-10"
@@ -75,19 +74,19 @@ async function handleLogin() {
<div class="flex items-center gap-2">
<Checkbox id="remember" v-model:checked="rememberMe" />
<label for="remember" class="text-xs text-muted-foreground cursor-pointer select-none">Recordarme</label>
<Label for="remember" class="text-sm font-normal cursor-pointer">Recordarme</Label>
</div>
<div v-if="auth.error" class="text-xs text-destructive bg-destructive/10 rounded-md px-3 py-2">
<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 mt-2" :disabled="auth.loading">
<Button type="submit" class="w-full" :disabled="auth.loading">
{{ auth.loading ? 'Ingresando...' : 'Iniciar sesión' }}
</Button>
</form>
<p class="text-center text-[11px] text-muted-foreground/40 mt-6">
<p class="text-center text-xs text-muted-foreground/40 mt-6">
kappa.lambdaanalytics.co
</p>
</CardContent>