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

change flowbite x preline

Browse Source
This commit is contained in:
clonbg
2024-09-07 16:23:11 +02:00
parent a2d44137cd
commit 8fa8066e88
7 changed files with 239 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -9,5 +9,6 @@
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="./node_modules/preline/dist/preline.js"></script>
</body>
</html>

487
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -9,14 +9,15 @@
"preview": "vite preview"
},
"dependencies": {
"flowbite": "^2.5.1",
"flowbite-vue": "^0.1.6",
"@preline/overlay": "^2.4.1",
"pinia": "^2.1.7",
"pocketbase": "^0.21.5",
"preline": "^2.4.1",
"vue": "^3.4.29",
"vue-router": "^4.3.3"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.9",
"@vitejs/plugin-vue": "^5.0.5",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",

2
src/main.js
View File

@@ -1,6 +1,4 @@
import "./index.css";
//in your `main.js` file
import '../node_modules/flowbite-vue/dist/index.css'
import { createApp } from "vue";
import { createPinia } from "pinia";

12
src/views/ListasView.vue
View File

@@ -1,22 +1,12 @@
<template>
<div class="bg-gray-200 flex flex-col gap-4 h-screen items-center justify-center">
<div class="bg-gray-400 flex flex-col gap-4 h-screen items-center justify-center">
<h1 class="text-2xl font-bold mb-6">
Las listas de {{ storeUser.user.name }}
</h1>
<!-- Card 1 -->
<template v-for="lista in listas">
<router-link :to="`/lista/${lista.id}`" class="rounded-sm w-1/2 grid grid-cols-12 bg-white shadow p-3 gap-2 items-center hover:shadow-lg transition delay-150 duration-300 ease-in-out hover:scale-105 transform">
<!-- Icon -->
<div class="col-span-12 md:col-span-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
className="size-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
</svg>
</div>
<!-- Title -->
<div class="col-span-11 xl:-ml-5">
<p class="text-blue-600 font-semibold">{{ lista.nombre }}</p>

162
src/views/LoginView.vue
View File

@@ -1,19 +1,19 @@
<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"
class="min-h-screen flex items-center justify-center w-full bg-emerald-700"
>
<div
class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 ancho min-w-[300px]"
class="bg-emerald-200 shadow-md rounded-lg px-8 py-6 ancho min-w-[300px]"
>
<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">
<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray">
Logueate!
</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"
class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
>Correo electrónico</label
>
<input
@@ -28,7 +28,7 @@
<div class="mb-4">
<label
for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
class="block text-sm font-medium text-gray-700 dark:text-gray-600 mb-2"
>Contraseña</label
>
<input
@@ -41,11 +41,11 @@
/>
<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="
visibleModalPassword = true;
email = '';
"
class="text-xs text-blue-400 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="hs-vertically-centered-modal"
data-hs-overlay="#hs-vertically-centered-modal"
>Olvidó la contraseña?</a
>
</div>
@@ -67,60 +67,89 @@
</form>
</div>
</div>
<!-- Modal de recuperar contraseña -->
<fwb-modal v-if="visibleModalPassword" @close="visibleModalPassword = false">
<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="visibleModalPassword = false" color="alternative">
Decline
</fwb-button>
<fwb-button @click="requestPasswordReset" color="green">
I accept
</fwb-button>
</div>
</template>
</fwb-modal>
<!-- Modal de parametros incorrectos -->
<fwb-modal
v-if="visibleModalIncorrect"
@close="visibleModalIncorrect = false"
>
<template #header>
<div class="flex items-center text-lg text-red-700">Error</div>
</template>
<template #body> Parametros incorrectos </template>
</fwb-modal>
<!-- Modal de correo enviado -->
<fwb-modal v-if="visibleModalSended" @close="visibleModalSended = false">
<template #header>
<div class="flex items-center text-lg text-green-700">Aviso</div>
</template>
<template #body> Correo enviado </template>
</fwb-modal>
<!-- Modal de correo invalido -->
<fwb-modal v-if="visibleModalInvalid" @close="visibleModalInvalid = false">
<template #header>
<div class="flex items-center text-lg text-red-700">Aviso</div>
</template>
<template #body> No es un correo válido </template>
</fwb-modal>
<!-- Modal de recuperar contraseña -->
<div
id="hs-vertically-centered-modal"
class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none"
role="dialog"
tabindex="-1"
aria-labelledby="hs-vertically-centered-modal-label"
>
<div
class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto min-h-[calc(100%-3.5rem)] flex items-center"
>
<div
class="w-full flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto dark:bg-emerald-700 dark:border-neutral-700 dark:shadow-neutral-700/70"
>
<div
class="flex justify-between items-center py-3 px-4 border-b dark:border-neutral-700"
>
<h3
id="hs-vertically-centered-modal-label"
class="font-bold text-gray-800 dark:text-white"
>
Recuperar contraseña
</h3>
<button
type="button"
class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600"
aria-label="Close"
data-hs-overlay="#hs-vertically-centered-modal"
>
<span class="sr-only">Close</span>
<svg
class="shrink-0 size-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="p-4 overflow-y-auto">
<input
type="text"
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-emerald-900 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
placeholder="Email@example.com"
/>
<p class="text-gray-800 dark:text-white"><small>
Si el correo electrónico existe en nuestra base de datos, le
enviaremos un correo.</small>
</p>
</div>
<div
class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-neutral-700"
>
<button
type="button"
class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
data-hs-overlay="#hs-vertically-centered-modal"
>
Cerrar
</button>
<button
type="button"
class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
@click="cerrar"
>
Aceptar
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
@@ -128,7 +157,6 @@ 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();
@@ -136,10 +164,6 @@ const storeUser = useUserStore();
let pb = null;
let email = ref("p40store@gmail.com");
let password = ref("p40store");
const visibleModalPassword = ref(false);
const visibleModalIncorrect = ref(false);
const visibleModalSended = ref(false);
const visibleModalInvalid = ref(false);
onMounted(() => {
pb = new PocketBase(storeUser.urlPocketbase);
@@ -177,6 +201,10 @@ const requestPasswordReset = async () => {
visibleModalPassword.value = false;
email.value = "";
};
const cerrar = () => {
window.HSOverlay.close('#hs-vertically-centered-modal');
}
</script>
<style>
.ancho {

7
tailwind.config.js
View File

@@ -2,11 +2,12 @@ module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/flowbite/**/*.js",
"node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}",
'./node_modules/preline/preline.js',
],
theme: {
extend: {},
},
plugins: [require("flowbite/plugin")],
plugins: [
require("@tailwindcss/forms"),
require("preline/plugin")],
};