what even am I doing.

src/Login.vue

@@ -8,7 +8,7 @@
   </Form>
 
   <div v-if="userData.authenticated">
-  <div>Logged in as: {{userData.username}}</div>
+    <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 />
@@ -17,11 +17,10 @@
   </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(() => {

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() {

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
+    })
+  }
+}