agregar checkbox Recordarme en login con persistencia de email
This commit is contained in:
+25
-2
@@ -1,8 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { useAuthStore } from '@/stores/auth'
|
import { useAuthStore } from '@/stores/auth'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Input } from '@/components/ui/input'
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Checkbox } from '@/components/ui/checkbox'
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
import { Eye, EyeOff } from 'lucide-vue-next'
|
import { Eye, EyeOff } from 'lucide-vue-next'
|
||||||
|
|
||||||
@@ -10,9 +11,25 @@ const auth = useAuthStore()
|
|||||||
const email = ref('')
|
const email = ref('')
|
||||||
const password = ref('')
|
const password = ref('')
|
||||||
const showPassword = ref(false)
|
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() {
|
async function handleLogin() {
|
||||||
if (!email.value || !password.value) return
|
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 })
|
await auth.login({ email: email.value, password: password.value })
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -32,7 +49,7 @@ async function handleLogin() {
|
|||||||
<form @submit.prevent="handleLogin" class="flex flex-col gap-4">
|
<form @submit.prevent="handleLogin" class="flex flex-col gap-4">
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
|
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
|
||||||
<Input v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
|
<Input v-model="email" name="email" type="email" placeholder="ricardo@..." autocomplete="email" />
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1.5">
|
<div class="space-y-1.5">
|
||||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
|
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
|
||||||
@@ -40,6 +57,7 @@ async function handleLogin() {
|
|||||||
<Input
|
<Input
|
||||||
v-model="password"
|
v-model="password"
|
||||||
:type="showPassword ? 'text' : 'password'"
|
:type="showPassword ? 'text' : 'password'"
|
||||||
|
name="password"
|
||||||
placeholder="••••••••"
|
placeholder="••••••••"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
class="pr-10"
|
class="pr-10"
|
||||||
@@ -55,6 +73,11 @@ async function handleLogin() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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-xs text-destructive bg-destructive/10 rounded-md px-3 py-2">
|
||||||
{{ auth.error }}
|
{{ auth.error }}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user