From 8bb13f6bf4cd873ebb0f7fa0b9aaed1f0f61c011 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 24 Sep 2022 17:58:19 -0800
Subject: [PATCH] fetch and store self in store

---
 frontend/pages/home.vue | 18 ++++++++++++++++--
 frontend/stores/auth.ts |  3 +++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/home.vue b/frontend/pages/home.vue
index f39eb6b..b173709 100644
--- a/frontend/pages/home.vue
+++ b/frontend/pages/home.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { useAuthStore } from "~~/stores/auth";
   import { useItemStore } from "~~/stores/items";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
@@ -12,6 +13,19 @@
 
   const api = useUserApi();
 
+  const auth = useAuthStore();
+
+  if (auth.self === null) {
+    const { data, error } = await api.self();
+    if (error) {
+      navigateTo("/login");
+    }
+
+    auth.$patch({ self: data.item });
+
+    console.log(auth.self);
+  }
+
   const itemsStore = useItemStore();
   const items = computed(() => itemsStore.items);
 
@@ -121,8 +135,8 @@
             <div class="sm:flex sm:space-x-5">
               <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
                 <p class="text-sm font-medium text-gray-600">Welcome back,</p>
-                <p class="text-xl font-bold text-gray-900 sm:text-2xl">Username</p>
-                <p class="text-sm font-medium text-gray-600">User</p>
+                <p class="text-xl font-bold text-gray-900 sm:text-2xl">{{ auth.self.name }}</p>
+                <p class="text-sm font-medium text-gray-600">{{ auth.self.isSuperuser ? "Admin" : "User" }}</p>
               </div>
             </div>
             <div class="mt-5 flex justify-center sm:mt-0">
diff --git a/frontend/stores/auth.ts b/frontend/stores/auth.ts
index 4c4abc2..ef46a70 100644
--- a/frontend/stores/auth.ts
+++ b/frontend/stores/auth.ts
@@ -1,11 +1,13 @@
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
 import { UserApi } from "~~/lib/api/user";
+import { UserOut } from "~~/lib/api/types/data-contracts";
 
 export const useAuthStore = defineStore("auth", {
   state: () => ({
     token: useLocalStorage("pinia/auth/token", ""),
     expires: useLocalStorage("pinia/auth/expires", ""),
+    self: null as UserOut | null,
   }),
   getters: {
     isTokenExpired: state => {
@@ -30,6 +32,7 @@ export const useAuthStore = defineStore("auth", {
 
       this.token = "";
       this.expires = "";
+      this.self = null;
 
       return result;
     },