Add store (wip)

webui/src/App.vue

@@ -263,9 +263,15 @@ import Footer from '@/components/Footer.vue';
 import API from '@/services/api';
 import Client from '@/components/Client.vue';
 
-const authenticated = ref(null);
-const authenticating = ref(false);
-const password = ref(null);
+import { useStore } from './store/store';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const { authenticated } = storeToRefs(store);
+
+// const authenticated = ref(null);
+// const authenticating = ref(false);
+// const password = ref(null);
 const requiresPassword = ref(null);
 
 const clients = ref(null);
@@ -395,31 +401,31 @@ async function refresh({ updateCharts = false } = {}) {
   });
 }
 
-function login(e) {
-  e.preventDefault();
-
-  if (!password.value) return;
-  if (authenticating.value) return;
-
-  authenticating.value = true;
-  api
-    .createSession({
-      password: password,
-    })
-    .then(async () => {
-      const session = await api.getSession();
-      authenticated.value = session.authenticated;
-      requiresPassword.value = session.requiresPassword;
-      return this.refresh();
-    })
-    .catch((err) => {
-      alert(err.message || err.toString());
-    })
-    .finally(() => {
-      this.authenticating = false;
-      this.password = null;
-    });
-}
+// function login(e) {
+//   e.preventDefault();
+
+//   if (!password.value) return;
+//   if (authenticating.value) return;
+
+//   authenticating.value = true;
+//   api
+//     .createSession({
+//       password: password,
+//     })
+//     .then(async () => {
+//       const session = await api.getSession();
+//       authenticated.value = session.authenticated;
+//       requiresPassword.value = session.requiresPassword;
+//       return this.refresh();
+//     })
+//     .catch((err) => {
+//       alert(err.message || err.toString());
+//     })
+//     .finally(() => {
+//       this.authenticating = false;
+//       this.password = null;
+//     });
+// }
 
 function logout(e) {
   e.preventDefault();

webui/src/components/Auth.vue

@@ -40,7 +40,11 @@
 
 <script setup>
 import IconAvatarDefault from '@/components/icons/IconAvatarDefault.vue';
-import LoadingSpinner from './LoadingSpinner.vue';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
 
+import { useStore } from '@/store/store';
+import { storeToRefs } from 'pinia';
 
+const store = useStore();
+const { password, authenticating, login } = storeToRefs(store);
 </script>

webui/src/main.js

@@ -5,6 +5,4 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 
 const pinia = createPinia();
-const app = createApp(App).mount('#app');
-
-app.use(pinia);
+createApp(App).use(pinia).mount('#app');

webui/src/store/store.js

@@ -0,0 +1,45 @@
+import API from '@/services/api';
+import { ref } from 'vue';
+
+import { defineStore } from 'pinia';
+
+const api = new API();
+
+export const useStore = defineStore('store', () => {
+  const authenticated = ref(null);
+  const authenticating = ref(false);
+  const password = ref(null);
+
+  function login(e) {
+    e.preventDefault();
+
+    if (!password.value) return;
+    if (authenticating.value) return;
+
+    authenticating.value = true;
+    api
+      .createSession({
+        password: password,
+      })
+      .then(async () => {
+        const session = await api.getSession();
+        authenticated.value = session.authenticated;
+        requiresPassword.value = session.requiresPassword;
+        return this.refresh();
+      })
+      .catch((err) => {
+        alert(err.message || err.toString());
+      })
+      .finally(() => {
+        this.authenticating = false;
+        this.password = null;
+      });
+  }
+
+  return {
+    authenticated,
+    authenticating,
+    login,
+    password,
+  };
+});