logout()

.vscode/settings.json

@@ -5,6 +5,6 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": ["source.fixAll.eslint"],
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
-  "editor.fontFamily": "Hack Nerd Font Mono Regular",
+  "editor.fontFamily": "DejaVuSansMono Nerd Font Book",
   "editor.fontSize": 16
 }

src/layouts/MainLayout.vue

@@ -11,28 +11,20 @@
           @click="toggleLeftDrawer"
         />
 
-        <q-toolbar-title>
-          Quasar App
-        </q-toolbar-title>
+        <q-toolbar-title> Quasar App </q-toolbar-title>
 
-        <div>Quasar v{{ $q.version }}</div>
+        <div>
+          <q-btn @click="listaStore.logout()">Cerrar</q-btn>
+        </div>
       </q-toolbar>
     </q-header>
 
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-    >
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
       <q-list>
-        <q-item-label
-          header
-        >
-          Essential Links
-        </q-item-label>
+        <q-item-label header> Essential Links </q-item-label>
 
         <EssentialLink
-          v-for="link in essentialLinks"
+          v-for="link in essentialLink"
           :key="link.title"
           v-bind="link"
         />
@@ -45,72 +37,59 @@
   </q-layout>
 </template>
 
-<script>
-import { defineComponent, ref } from 'vue'
-import EssentialLink from 'components/EssentialLink.vue'
+<script setup>
+import { ref } from "vue";
+import EssentialLink from "components/EssentialLink.vue";
+import { useListaStore } from "../stores/lista.js";
+const listaStore = useListaStore();
 
-const linksList = [
+const essentialLink = [
   {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev'
+    title: "Docs",
+    caption: "quasar.dev",
+    icon: "school",
+    link: "https://quasar.dev",
   },
   {
-    title: 'Github',
-    caption: 'github.com/quasarframework',
-    icon: 'code',
-    link: 'https://github.com/quasarframework'
+    title: "Github",
+    caption: "github.com/quasarframework",
+    icon: "code",
+    link: "https://github.com/quasarframework",
   },
   {
-    title: 'Discord Chat Channel',
-    caption: 'chat.quasar.dev',
-    icon: 'chat',
-    link: 'https://chat.quasar.dev'
+    title: "Discord Chat Channel",
+    caption: "chat.quasar.dev",
+    icon: "chat",
+    link: "https://chat.quasar.dev",
   },
   {
-    title: 'Forum',
-    caption: 'forum.quasar.dev',
-    icon: 'record_voice_over',
-    link: 'https://forum.quasar.dev'
+    title: "Forum",
+    caption: "forum.quasar.dev",
+    icon: "record_voice_over",
+    link: "https://forum.quasar.dev",
   },
   {
-    title: 'Twitter',
-    caption: '@quasarframework',
-    icon: 'rss_feed',
-    link: 'https://twitter.quasar.dev'
+    title: "Twitter",
+    caption: "@quasarframework",
+    icon: "rss_feed",
+    link: "https://twitter.quasar.dev",
   },
   {
-    title: 'Facebook',
-    caption: '@QuasarFramework',
-    icon: 'public',
-    link: 'https://facebook.quasar.dev'
+    title: "Facebook",
+    caption: "@QuasarFramework",
+    icon: "public",
+    link: "https://facebook.quasar.dev",
   },
   {
-    title: 'Quasar Awesome',
-    caption: 'Community Quasar projects',
-    icon: 'favorite',
-    link: 'https://awesome.quasar.dev'
-  }
-]
+    title: "Quasar Awesome",
+    caption: "Community Quasar projects",
+    icon: "favorite",
+    link: "https://awesome.quasar.dev",
+  },
+];
+const leftDrawerOpen = ref(false);
 
-export default defineComponent({
-  name: 'MainLayout',
-
-  components: {
-    EssentialLink
-  },
-
-  setup () {
-    const leftDrawerOpen = ref(false)
-
-    return {
-      essentialLinks: linksList,
-      leftDrawerOpen,
-      toggleLeftDrawer () {
-        leftDrawerOpen.value = !leftDrawerOpen.value
-      }
-    }
-  }
-})
+const toggleLeftDrawer = () => {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+};
 </script>

src/pages/IndexPage.vue

@@ -5,9 +5,8 @@
         {{ listaStore.pb.authStore.isValid ? "Es válido" : "No es válido" }}
       </div>
       <div class="row">{{ listaStore.pb.authStore.token }}</div>
-      <div class="row">{{ listaStore.pb.authStore.model.id }}</div>
+      <div class="row">{{ listaStore.pb.authStore.model }}</div>
     </div>
-    <q-btn @click="listaStore.pb.authStore.clear()">Cerrar</q-btn>
   </q-page>
 </template>
 

src/stores/lista.js

@@ -5,12 +5,11 @@ import PocketBase from "pocketbase";
 export const useListaStore = defineStore("lista", () => {
   const pb = new PocketBase("https://pocketbase.clonbg.es");
   const authData = ref("");
-  function login(email, password) {
+  async function login(email, password) {
     authData.value = pb
       .collection("users")
       .authWithPassword(email, password)
       .then((r) => {
-        console.log("logueado");
         this.router.push("/");
       })
       .catch((e) => {
@@ -20,8 +19,12 @@ export const useListaStore = defineStore("lista", () => {
   async function refresh() {
     const authData = await pb.collection("users").authRefresh();
   }
+  async function logout() {
+    pb.authStore.clear();
+    this.router.push("/login");
+  }
 
-  return { pb, authData, login, refresh };
+  return { pb, authData, login, refresh, logout };
 });
 
 /*