dietpi/pocketbase-vue-listas-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

listas items

Browse Source
This commit is contained in:
Clonbg
2024-08-30 01:12:26 +02:00
parent 0d4e5e5cfd
commit f4bd38e5a2
9 changed files with 330 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/views/LoginView.vue
View File

@@ -1,64 +1,79 @@
<!-- <template>
<h1 class="text-3xl font-bold underline">
Login Page Gooooo
</h1>
<router-link to="/about">Go to About</router-link>
</template> -->
<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">Welcome Back!</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">Email Address</label>
<input type="email" id="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">Password</label>
<input type="password" id="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">Forgot
Password?</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">Remember me</label>
<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>
<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">Create
Account</a>
</div>
<button onclick="alert('hello')" type="submit" 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 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>
</div>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed, ref } from 'vue'
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 storeCounter = useCounterStore()
const storeUser = useUserStore()
let count = ref(0)
let pb = null
let email = ref('p40store@gmail.com')
let password = ref('p40store')
console.log(storeCounter.count) // 0
onMounted(() => {
pb = new PocketBase('http://127.0.0.1:8090');
})
storeCounter.increment()
console.log(storeCounter.count) // 1
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')
})
count = computed(() => storeCounter.doubleCount)
console.log(count.value) // 2
console.log(storeCounter.count) // 1
storeCounter.changeCount(19)
console.log(storeCounter.count) // 10
storeCounter.count = computed(() => storeCounter.doubleCount)
console.log(storeCounter.count) // 20 */
}
</script>