79 lines
3.0 KiB
Vue
79 lines
3.0 KiB
Vue
<template>
|
|
<!-- https://www.creative-tim.com/twcomponents/component/simple-login-form-3 -->
|
|
<div class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950">
|
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md">
|
|
<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">Bienvenido!</h1>
|
|
<form action="#">
|
|
<div class="mb-4">
|
|
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Correo
|
|
electrónico</label>
|
|
<input type="email" id="email" v-model="email"
|
|
class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
placeholder="your@email.com" required>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="password"
|
|
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Contraseña</label>
|
|
<input type="password" id="password" v-model="password"
|
|
class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
|
placeholder="Enter your password" required>
|
|
<a href="#"
|
|
class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Olvidó
|
|
la contraseña?</a>
|
|
</div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="remember"
|
|
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:outline-none"
|
|
checked>
|
|
<label for="remember"
|
|
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Recuérdame</label>
|
|
</div>
|
|
<a href="#"
|
|
class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Crear
|
|
cuenta</a>
|
|
</div>
|
|
<button @click="login" type="button"
|
|
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Login</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { useUserStore } from '@/stores/user'
|
|
import { onMounted, ref } from 'vue'
|
|
import PocketBase from 'pocketbase';
|
|
import router from '@/router';
|
|
|
|
// access the `store` variable anywhere in the component ✨
|
|
const storeUser = useUserStore()
|
|
|
|
let pb = null
|
|
let email = ref('p40store@gmail.com')
|
|
let password = ref('p40store')
|
|
|
|
onMounted(() => {
|
|
pb = new PocketBase('http://127.0.0.1:8090');
|
|
})
|
|
|
|
const login = async () => {
|
|
const authData = await pb.collection('users').authWithPassword(
|
|
email.value,
|
|
password.value,
|
|
).then(function (result) {
|
|
console.log(pb.authStore.isValid);
|
|
storeUser.user = pb.authStore.model
|
|
storeUser.isValid = pb.authStore.isValid
|
|
console.log(storeUser.user)
|
|
if (storeUser.isValid) {
|
|
router.push('listas')
|
|
}
|
|
}).catch(function () {
|
|
alert('Parámetros incorrectos')
|
|
})
|
|
|
|
}
|
|
|
|
</script> |