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>