Navbar - change routes and add page name create profile page

app/components/NavBar.vue

@@ -1,32 +1,25 @@
 <template>
     <!-- Toolbar at the top of the screen -->
-    <v-app-bar
-        color="rgba(27, 94, 32, 0.8)"
-        height="48"
-        v-if="status === 'authenticated'"
-    >
+    <v-app-bar color="rgba(27, 94, 32, 0.8)" height="48">
         <!-- Title of the application with adjusted margin and font size -->
         <v-app-bar-title class="text-h6 ms-3 text-white">
             <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
 
-            <span class="ms-1 text-white">{{ data.email }}</span>
+            <span class="ms-1 text-white"
+                >Listas de Front - {{ capitalize($route.name) }}</span
+            >
         </v-app-bar-title>
 
         <!-- Spacer to push the following elements to the right -->
         <v-spacer />
 
         <!-- Menu icons on the right side of the toolbar -->
-        <template v-slot:append>
-            <small class="text-white"> Logout </small>
-            <v-btn icon="mdi-account" class="text-white" @click="logout">
-            </v-btn>
-        </template>
     </v-app-bar>
 
     <v-navigation-drawer v-model="drawer" temporary>
         <v-list-item
-            prepend-avatar="https://randomuser.me/api/portraits/men/78.jpg"
-            title="John Leider"
+            :prepend-avatar="data.image ? data.image : ''"
+            :title="data.name ? data.name : ''"
         ></v-list-item>
 
         <v-divider></v-divider>
@@ -39,38 +32,19 @@
                 @click="navigateTo('/')"
             ></v-list-item>
             <v-list-item
-                prepend-icon="mdi-login"
-                title="Login"
-                value="login"
-                @click="navigateTo('/login')"
-            ></v-list-item>
-            <v-list-item
-                prepend-icon="mdi-account-plus-outline"
-                title="Register"
-                value="register"
-                @click="navigateTo('/register')"
-            ></v-list-item>
-            <v-list-item
-                prepend-icon="mdi-lock-reset"
-                title="Forgot"
-                value="forgot"
-                @click="navigateTo('/forgot-password')"
+                prepend-icon="mdi-account"
+                title="Profile"
+                value="profile"
+                @click="navigateTo('/profile')"
             ></v-list-item>
         </v-list>
     </v-navigation-drawer>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-const { status, data, signOut } = useAuth();
-const systemStore = useSystemStore();
-// Drawer state to open/close the navigation drawer
+import { ref, capitalize } from "vue";
 const drawer = ref(false);
-
-const logout = async () => {
-    await systemStore.deleteCookies();
-    await signOut({ callbackUrl: "/login" });
-};
+const { data } = useAuth();
 </script>
 
 <style></style>

app/pages/index.vue

@@ -5,6 +5,7 @@
         <div class="mt-3">My Application's Home Page</div>
         <div>
             {{ listasStore.listas }}
+            {{ data }}
         </div>
     </v-container>
 </template>
@@ -13,6 +14,7 @@
 definePageMeta({
     auth: true,
 });
+const { data } = useAuth();
 import { ref, onMounted } from "vue";
 import { useSystemStore } from "~/stores/system";
 import { useListasStore } from "~/stores/listas";

app/pages/profile.vue

@@ -0,0 +1,36 @@
+<template>
+    <v-container
+        class="fill-height d-flex flex-column align-center justify-center text-center"
+    >
+        <v-avatar color="primary" size="62">
+            <img :src="data.image ? data.image : ''" :alt="data.name" />
+        </v-avatar>
+        <h3 class="mt-10">Último login:</h3>
+        <p>{{ data.last_login }}</p>
+        <h3>Username:</h3>
+        <p>{{ data.username }}</p>
+        <h3>Nombre:</h3>
+        <p>{{ data.name }} {{ data.last_name }}</p>
+        <h3>Correo:</h3>
+        <p>{{ data.email }}</p>
+        <h3>Listas:</h3>
+
+        <p>{{ listasStore.listas.length }}</p>
+    </v-container>
+</template>
+
+<script setup>
+definePageMeta({
+    auth: true,
+});
+const { data } = useAuth();
+import { ref, onMounted } from "vue";
+import { useSystemStore } from "~/stores/system";
+import { useListasStore } from "~/stores/listas";
+const listasStore = useListasStore();
+const systemStore = useSystemStore();
+
+onMounted(async () => {
+    await listasStore.getData();
+});
+</script>