what even am I doing.

src/Login.vue

@@ -1,27 +1,26 @@
 <template>
-<Form v-if="!userData.authenticated" v-slot="$form" @submit="onFormSubmit">
+  <Form v-if="!userData.authenticated" v-slot="$form" @submit="onFormSubmit">
-  <div class="flex flex-column">
+    <div class="flex flex-column">
-    <InputText name="username" type="text" placeholder="Username" fluid/>
+      <InputText name="username" type="text" placeholder="Username" fluid />
-    <Password name="password" placeholder="Password" :feedback="false" fluid/>
+      <Password name="password" placeholder="Password" :feedback="false" fluid />
-    <Button type="submit" label="Log In"/>
+      <Button type="submit" label="Log In" />
-  </div>
+    </div>
-</Form>
-
-<div v-if="userData.authenticated">
-  <div>Logged in as: {{userData.username}}</div>
-  <Form v-slot="$form" @submit="onResetPassword">
-    <Password name="password" placeholder="Password" :feedback="false" fluid/>
-    <Button type="submit" label="Reset Password" fluid/>
   </Form>
-  <Button @click=logout() label="Log Out" fluid/>
+
-</div>
+  <div v-if="userData.authenticated">
+    <div>Logged in as: {{ userData.is_admin ? "Admin" : "" }} {{ userData.username }}</div>
+    <Form v-slot="$form" @submit="onResetPassword">
+      <Password name="password" placeholder="Password" :feedback="false" fluid />
+      <Button type="submit" label="Reset Password" fluid />
+    </Form>
+    <Button @click=logout() label="Log Out" fluid />
+  </div>
 </template>
 
-<style>
+<style></style>
-</style>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue"
+import { onMounted, ref } from "vue"
 import { Form } from '@primevue/forms'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
@@ -31,7 +30,8 @@ import axios from 'axios'
 const userData = ref({
   id: -1,
   username: "NONE",
-  authenticated: false
+  authenticated: false,
+  is_admin: false
 })
 
 onMounted(() => {
@@ -44,7 +44,7 @@ function onFormSubmit(form: any) {
   const username = form.values.username
   const password = form.values.password
 
-  axios.post('/api/auth/login', {username, password}).then((resp) => {
+  axios.post('/api/auth/login', { username, password }).then((resp) => {
     userData.value = resp.data
   })
 }
@@ -53,7 +53,7 @@ function onResetPassword(form: any) {
   const username = userData.value.username
   const password = form.values.password
 
-  axios.post(`/api/auth/user/${userData.value.id}`, {username, password});
+  axios.post(`/api/auth/user/${userData.value.id}`, { username, password });
 }
 
 function logout() {

src/TableEditor.vue

@@ -24,10 +24,7 @@
       <template #subtitle>
         <div>
           Status:
-          <Chip
+          <Chip :class="table.active ? 'active' : 'inactive'" :label="table.active ? 'active' : 'inactive'" />
-            :class="table.active ? 'active' : 'inactive'"
-            :label="table.active ? 'active' : 'inactive'"
-          />
         </div>
       </template>
       <template #content>
@@ -48,20 +45,8 @@
       <template #title> Edit Details </template>
       <template #content>
         <div class="flex flex-column">
-          <InputText
+          <InputText class="button-box" name="tableName" type="text" placeholder="Table Name" v-model="tableName" />
-            class="button-box"
+          <InputText class="button-box" name="tableLink" type="text" placeholder="Table Link" v-model="tableLink" />
-            name="tableName"
-            type="text"
-            placeholder="Table Name"
-            v-model="tableName"
-          />
-          <InputText
-            class="button-box"
-            name="tableLink"
-            type="text"
-            placeholder="Table Link"
-            v-model="tableLink"
-          />
           <Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
         </div>
       </template>
@@ -92,8 +77,7 @@
   margin: 5px;
 }
 
-.active-foundry-stats {
+.active-foundry-stats {}
-}
 
 .inactive-foundry-stats {
   display: none;
@@ -129,6 +113,12 @@ const foundryStatus = reactive({
   users: 0,
 })
 
+const currentUser = ref({
+  username: "None",
+  authenticated: "False",
+  is_admin: "False"
+})
+
 const version = ref(12)
 const availableVersion = ref([11, 12])
 
@@ -143,23 +133,10 @@ onMounted(() => {
     readFoundryStatus()
   }, 2000)
 
-  axios
+  loadTable()
-    .get(`/api/tables/${route.params.id}`)
+
-    .then((resp) => {
+  axios.get('/api/auth/user').then((resp) => currentUser.value = resp.data)
-      table.table_name = resp.data.table_name
+
-      table.table_link = resp.data.table_link
-      table.active = resp.data.active
-      tableName.value = resp.data.table_name
-      tableLink.value = resp.data.table_link
-      console.log(table)
-      return axios.get(`/${table.table_link}/api/status`)
-    })
-    .then((resp) => {
-      foundryStatus.active = resp.data.active
-      foundryStatus.world = resp.data.world
-      foundryStatus.users = resp.data.users
-      console.log(resp)
-    })
   hostname.value = location.host
 })
 
@@ -170,7 +147,7 @@ onUnmounted(() => {
 
 watch(
   () => route.params.id,
-  (newValue, oldValue) => {
+  (newValue) => {
     console.log(newValue)
     axios.get(`/api/tables/${newValue}`).then((resp) => {
       table.table_name = resp.data.table_name
@@ -194,10 +171,8 @@ function readTable() {
 function readFoundryStatus() {
   if (table.active) {
     axios.get(`/${table.table_link}/api/status`).then((resp) => {
-      if (resp.status = 200) {
+      if (resp.status == 200) {
         foundryStatus.running = resp.data.version
-        console.log(resp)
-        console.log(foundryStatus)
         foundryStatus.active = resp.data.active
         foundryStatus.world = resp.data.world
         foundryStatus.users = resp.data.users
@@ -212,7 +187,21 @@ function readFoundryStatus() {
 }
 
 function loadTable() {
-  axios.get(`/api/tables/${route.params.id}`)
+  axios
+    .get(`/api/tables/${route.params.id}`)
+    .then((resp) => {
+      table.table_name = resp.data.table_name
+      table.table_link = resp.data.table_link
+      table.active = resp.data.active
+      tableName.value = resp.data.table_name
+      tableLink.value = resp.data.table_link
+      return axios.get(`/${table.table_link}/api/status`)
+    })
+    .then((resp) => {
+      foundryStatus.active = resp.data.active
+      foundryStatus.world = resp.data.world
+      foundryStatus.users = resp.data.users
+    })
 }
 
 function save() {
@@ -229,14 +218,14 @@ function startTable() {
 
 function stopTable() {
   axios.post(`/api/tables/${route.params.id}:stop`).then(() => {
-      foundryStatus.running = false
+    foundryStatus.running = false
-      foundryStatus.active = false
+    foundryStatus.active = false
-      foundryStatus.world = 'Not Loaded'
+    foundryStatus.world = 'Not Loaded'
-      foundryStatus.users = 0
+    foundryStatus.users = 0
-    })
+  })
 }
 
-function deleteTable() {}
+function deleteTable() { }
 
 function isTableLoading() {
   return table.active && !foundryStatus.running

src/user.ts

@@ -0,0 +1,39 @@
+import axios from 'axios'
+import { ref, computed, onMounted } from "vue"
+
+export interface User {
+  username: string
+  is_admin: boolean
+  authenticated: boolean
+}
+
+const $current_user = ref({ username: "username", is_admin: false, authenticated: false })
+export const current_user = computed((): User => {
+  return $current_user.value
+})
+
+function loadCurrentUser(): void {
+  axios.get('/api/auth/user').then((resp) => {
+    $current_user.value = resp.data
+  })
+}
+
+export function userUserData(): void {
+  onMounted(() => {
+    loadCurrentUser()
+  })
+}
+
+export function loginUser(username: string, password: string): void {
+  axios.post('/api/auth/login', { username, password }).then((resp) => {
+    $current_user.value = resp.data
+  })
+}
+
+export function logout(): void {
+  if ($current_user.value.authenticated) {
+    axios.post('/api/auth/logout').then((resp) => {
+      $current_user.value = resp.data
+    })
+  }
+}