User mixin and toggle login popup after action.

src/Login.vue

@@ -8,58 +8,47 @@
   </Form>
 
   <div v-if="userData.authenticated">
-    <div>Logged in as: {{ userData.is_admin ? "Admin" : "" }} {{ 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 />
     </Form>
-    <Button @click=logout() label="Log Out" fluid />
+    <Button @click="onLogout()" label="Log Out" fluid />
   </div>
 </template>
 
 <style></style>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
+import { onMounted, ref, defineEmits } from 'vue'
 import { Form } from '@primevue/forms'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
-import Password from 'primevue/password';
+import Password from 'primevue/password'
 import axios from 'axios'
+import { useUserData, login, logout, resetPassword } from './user'
 
-const userData = ref({
-  id: -1,
-  username: "NONE",
-  authenticated: false,
-  is_admin: false
-})
+const emit = defineEmits<{
+  (e: 'onAction')
+}>()
 
-onMounted(() => {
-  axios.get('/api/auth/user').then((resp) => {
-    userData.value = resp.data
-  })
-})
+const userData = useUserData()
 
 function onFormSubmit(form: any) {
   const username = form.values.username
   const password = form.values.password
-
-  axios.post('/api/auth/login', { username, password }).then((resp) => {
-    userData.value = resp.data
-  })
+  login(username, password)
+  emit('onAction')
 }
 
 function onResetPassword(form: any) {
-  const username = userData.value.username
   const password = form.values.password
-
-  axios.post(`/api/auth/user/${userData.value.id}`, { username, password });
+  resetPassword(password)
+  emit('onAction')
 }
 
-function logout() {
-  axios.post('/api/auth/logout').then((resp) => {
-    userData.value = resp.data
-  })
+function onLogout() {
+  logout()
+  emit('onAction')
 }
-
 </script>

src/Router.vue

@@ -1,12 +1,12 @@
 <template>
   <Toolbar>
     <template #end>
-      <Button label="User" @click="visible = true"/>
+      <Button :label="displayUsername()" @click="visible = true" />
     </template>
   </Toolbar>
   <RouterView />
   <Dialog v-model:visible="visible" modal header="Log In" position="topright">
-    <Login />
+    <Login @onAction="loginCallback" />
   </Dialog>
 </template>
 
@@ -16,7 +16,22 @@ import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import Login from './Login.vue'
 
+import { useUserData } from './user'
 import { ref } from 'vue'
 
+const userRef = useUserData()
+
 const visible = ref(false)
+
+function displayUsername(): string {
+  const authenticated = userRef.value.authenticated
+  if (authenticated) {
+    return userRef.value.username
+  }
+  return 'Login'
+}
+
+function loginCallback(): void {
+  visible.value = false;
+}
 </script>

src/TableEditor.vue

@@ -24,7 +24,10 @@
       <template #subtitle>
         <div>
           Status:
-          <Chip :class="table.active ? 'active' : 'inactive'" :label="table.active ? 'active' : 'inactive'" />
+          <Chip
+            :class="table.active ? 'active' : 'inactive'"
+            :label="table.active ? 'active' : 'inactive'"
+          />
         </div>
       </template>
       <template #content>
@@ -45,8 +48,20 @@
       <template #title> Edit Details </template>
       <template #content>
         <div class="flex flex-column">
-          <InputText class="button-box" name="tableName" type="text" placeholder="Table Name" v-model="tableName" />
-          <InputText class="button-box" name="tableLink" type="text" placeholder="Table Link" v-model="tableLink" />
+          <InputText
+            class="button-box"
+            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>
@@ -77,7 +92,8 @@
   margin: 5px;
 }
 
-.active-foundry-stats {}
+.active-foundry-stats {
+}
 
 .inactive-foundry-stats {
   display: none;
@@ -114,9 +130,9 @@ const foundryStatus = reactive({
 })
 
 const currentUser = ref({
-  username: "None",
-  authenticated: "False",
-  is_admin: "False"
+  username: 'None',
+  authenticated: 'False',
+  is_admin: 'False',
 })
 
 const version = ref(12)
@@ -135,7 +151,7 @@ onMounted(() => {
 
   loadTable()
 
-  axios.get('/api/auth/user').then((resp) => currentUser.value = resp.data)
+  axios.get('/api/auth/user').then((resp) => (currentUser.value = resp.data))
 
   hostname.value = location.host
 })

src/main.ts

@@ -14,7 +14,7 @@ const routes = [
   { name: 'home', path: '/', component: TableManager },
   { name: 'edit', path: '/edit/:id', component: TableEditor },
   { name: 'new', path: '/new', component: CreateTable },
-  { name: 'login', path: '/login', component: Login}
+  { name: 'login', path: '/login', component: Login },
 ]
 
 const router = createRouter({

src/user.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { ref, computed, onMounted } from "vue"
+import { ref, computed, onMounted } from 'vue'
 
 export interface User {
   username: string
@@ -7,7 +7,7 @@ export interface User {
   authenticated: boolean
 }
 
-const $current_user = ref({ username: "username", is_admin: false, authenticated: false })
+const $current_user = ref({ username: 'username', is_admin: false, authenticated: false })
 export const current_user = computed((): User => {
   return $current_user.value
 })
@@ -18,13 +18,15 @@ function loadCurrentUser(): void {
   })
 }
 
-export function userUserData(): void {
+export function useUserData(): void {
   onMounted(() => {
     loadCurrentUser()
   })
+
+  return $current_user
 }
 
-export function loginUser(username: string, password: string): void {
+export function login(username: string, password: string): void {
   axios.post('/api/auth/login', { username, password }).then((resp) => {
     $current_user.value = resp.data
   })
@@ -37,3 +39,10 @@ export function logout(): void {
     })
   }
 }
+
+export function resetPassword(password: string): void {
+  axios.post(`/api/auth/user/${$current_user.value.id}`, {
+    username: $current_user.value.username,
+    password,
+  })
+}