User data loading

src/components/top_nav/UserAction.vue

@@ -1,22 +1,31 @@
 <script setup>
 import {ref, onMounted} from "vue";
 import {loadToken, Anonymous} from "../scripts/load_token.js";
+import {request} from "../lib/gateway.js";
 
 const Loading = Symbol("loading")
 const token = ref(Loading)
+const userData = ref(Loading)
 
-onMounted(() => {
-  token.value = loadToken()
+onMounted(async () => {
+  let tokenData = loadToken()
+  token.value = tokenData
+  if(tokenData !== Anonymous) {
+    let response = await request("/user_data", {cors: true, token: tokenData.token})
+    userData.value = await response.json()
+  } else {
+    userData.value = null
+  }
 })
 </script>
 
 <template>
   <li :class="['nav-item', {'dropdown': (token !== Loading && token !== Anonymous)}]">
-    <div v-if="token === Loading" class="placeholder"></div>
+    <div v-if="token === Loading || userData === Loading" class="placeholder"></div>
     <a v-else-if="token === Anonymous" class="nav-link" href="/login">Login</a>
     <template v-else>
       <a href="#" class="btn btn-secondary dropdown-toggle" role="button"
-         data-bs-toggle="dropdown">{{ token.username || "Username" }}</a>
+         data-bs-toggle="dropdown">{{ userData.username || "Username" }}</a>
       <ul class="dropdown-menu dropdown-menu-end">
         <li><a href="#" class="dropdown-item">Logout</a></li>
       </ul>