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

olvidó contraseña

Browse Source
This commit is contained in:
clonbg
2024-08-31 06:14:39 +02:00
parent 9c9c8cbc67
commit 00c95ad65b
7 changed files with 597 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Lista.vue
View File

@@ -21,7 +21,7 @@
</span>
</div>
<h4 class="ml-4 text-xl font-bold text-navy-700 dark:text-white">
Tasks
{{ nombreLista }}
</h4>
</div>
<button
@@ -43,7 +43,7 @@
justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400"
name="weekly" />
<p class="text-base font-bold text-navy-700 dark:text-white">
<p class="text-base text-navy-700 dark:text-white" :class="{ 'line-through': item.completado, 'font-bold': !item.completado }">
{{ item.nombre }}
</p>
</div>
@@ -55,9 +55,6 @@
</div>
</div>
<p class="font-normal text-navy-700 mt-20 mx-auto w-max">Notifications Card component from <a
href="https://horizon-ui.com?ref=tailwindcomponents.com" target="_blank"
class="text-brand-500 font-bold">Horizon UI Tailwind React</a></p>
</div>
</body>
<div>
@@ -73,14 +70,48 @@ const route = useRoute()
let id_lista = route.params.id
let items = ref()
let pb = null
let nombreLista = ref('')
onMounted(async () => {
pb = new PocketBase('http://127.0.0.1:8090');
items.value = await pb.collection('item').getFullList( {
sort: '-created',
filter: `field.id = '${id_lista}'`,
});
items.value = items.value.filter((item) => item.field == id_lista);
ordenarItems()
const lista = await pb.collection('listas').getOne(id_lista, {
expand: 'nombre',
});
nombreLista.value = lista.nombre
console.log(nombreLista.value)
})
/**
* Sorts the items in descending order of their last updated date.
*/
const ordenarItems = () => {
items.value.sort((a, b) => {
if (a.updated < b.updated) {
return 1
}
if (a.updated > b.updated) {
return -1
}
return 0
})
items.value.sort((a, b) => {
if (a.completado < b.completado) {
return -1
}
if (a.completado > b.completado) {
return 1
}
return 0
})
}
</script>

2
src/index.css
View File

@@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;

20
src/main.js
View File

@@ -1,14 +1,18 @@
import './index.css'
import "./index.css";
//in your `main.js` file
import '../node_modules/flowbite-vue/dist/index.css'
import { createApp } from "vue";
import { createPinia } from "pinia";
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
import App from "./App.vue";
import router from "./router";
app.use(createPinia())
const app = createApp(App);
app.use(createPinia());
app.use(router)
app.mount('#app')
app.mount("#app");

215
src/views/LoginView.vue
View File

@@ -1,79 +1,162 @@
<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>
<!-- 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"
@click="showModal"
>Olvidó la contraseña?</a
>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center"></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>
<!-- Modal de recuperar contraseña -->
<fwb-modal v-if="visibleModalPassword" @close="closeModal">
<template #header>
<div class="flex items-center text-lg">
Recuperar contraseña
</div>
</template>
<template #body>
<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
/>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
Si el email existe en nuestra base de datos se le mandará un correo con un enlace donde podrá cambiar la contraseña.
</p>
</template>
<template #footer>
<div class="flex justify-between">
<fwb-button @click="closeModal" color="alternative">
Decline
</fwb-button>
<fwb-button @click="requestPasswordReset" color="green">
I accept
</fwb-button>
</div>
</template>
</fwb-modal>
</template>
<script setup>
import { useUserStore } from '@/stores/user'
import { onMounted, ref } from 'vue'
import PocketBase from 'pocketbase';
import router from '@/router';
import { useUserStore } from "@/stores/user";
import { onMounted, ref } from "vue";
import PocketBase from "pocketbase";
import router from "@/router";
import { FwbButton, FwbModal } from 'flowbite-vue'
// access the `store` variable anywhere in the component ✨
const storeUser = useUserStore()
const storeUser = useUserStore();
let pb = null
let email = ref('p40store@gmail.com')
let password = ref('p40store')
let pb = null;
let email = ref("p40store@gmail.com");
let password = ref("p40store");
const visibleModalPassword = ref(false);
const alertaCorreoEnviado = ref(false);
onMounted(() => {
pb = new PocketBase('http://127.0.0.1:8090');
})
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')
})
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");
});
};
/**
* Muestra el modal de recuperaci n de contrase a
*/
const closeModal = () => {
visibleModalPassword.value = false
}
const showModal = () =>{
email=ref("")
visibleModalPassword.value = true
}
</script>
const requestPasswordReset = async () => {
const authData = await pb
.collection("users")
.requestPasswordReset(email.value)
.then(function (result) {
closeModal()
alert("Correo enviado");
})
.catch(function () {
alert("No existe el correo");
});
};
</script>