Login ok

web/src/layouts/default/View.vue

@@ -1,13 +1,36 @@
 <template>
   <v-app id="inspire">
-    <v-navigation-drawer v-model="drawer"> </v-navigation-drawer>
+    <v-navigation-drawer v-model="drawer">
+      <v-list>
+        <v-list-item>
+          <template v-slot:prepend>
+            <v-avatar :image="me?.thumbnailPhoto || undefined" />
+          </template>
+          <v-list-item-title>{{ me?.displayName }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ me?.campus }}
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+      <template v-slot:append>
+        <div class="pa-2">
+          <v-btn block variant="text" @click="logout">
+            <template v-slot:prepend>
+              <v-icon icon="mdi-logout"></v-icon>
+            </template>
+            Logout
+          </v-btn>
+        </div>
+      </template>
+    </v-navigation-drawer>
 
     <v-app-bar>
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-      <v-avatar rounded>
-        <v-img :src="me?.thumbnailPhoto || undefined" />
-      </v-avatar>
-      <v-toolbar-title>Application</v-toolbar-title>
+
+      <v-toolbar-title
+        ><v-icon icon="mdi-printer" /> Impressoras</v-toolbar-title
+      >
+      <v-spacer />
     </v-app-bar>
 
     <v-main>
@@ -20,8 +43,19 @@
 import { ref } from "vue";
 
 import { useAppStore } from "@/store/app";
+import { removeJwtToken } from "@/auth";
+
+import { useRouter } from "vue-router";
 
 const { me } = useAppStore();
 
 const drawer = ref(true);
+
+const router = useRouter();
+
+function logout() {
+  removeJwtToken();
+
+  router.push({ name: "Login" });
+}
 </script>

web/src/layouts/simple/View.vue

@@ -4,8 +4,4 @@
   </v-app>
 </template>
 
-<script lang="ts" setup>
-import { ref } from "vue";
-
-const drawer = ref(true);
-</script>
+<script lang="ts" setup></script>

web/src/plugins/vuetify.ts

@@ -5,22 +5,22 @@
  */
 
 // Styles
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
 
 // Composables
-import { createVuetify } from 'vuetify'
+import { createVuetify } from "vuetify";
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
-  theme: {
-    themes: {
-      light: {
-        colors: {
-          primary: '#1867C0',
-          secondary: '#5CBBF6',
-        },
-      },
-    },
-  },
-})
+  // theme: {
+  //   themes: {
+  //     light: {
+  //       colors: {
+  //         primary: '#1867C0',
+  //         secondary: '#5CBBF6',
+  //       },
+  //     },
+  //   },
+  // },
+});

web/src/views/Login.vue

@@ -64,6 +64,7 @@ import { ref, reactive } from "vue";
 import { api } from "@/api";
 import { saveJwtToken } from "@/auth";
 import { useRouter } from "vue-router";
+import { useAppStore } from "@/store/app";
 
 const username = ref<string>("");
 const password = ref<string>("");
@@ -75,6 +76,8 @@ const loading = ref(false);
 
 const router = useRouter();
 
+const { fetchMe } = useAppStore();
+
 async function login() {
   errors.splice(0, errors.length);
 
@@ -92,6 +95,8 @@ async function login() {
 
     saveJwtToken(token);
 
+    await fetchMe();
+
     router.push({ name: "Home" });
   } catch (error: any) {
     errors.push(error.message);