From 00e7e27183441a32de16d6b4906cc112d8a7fd59 Mon Sep 17 00:00:00 2001
From: Sergei Birukov <suxscribe@gmail.com>
Date: Fri, 22 Mar 2024 19:59:33 +0300
Subject: [PATCH] Update

---
 webui/src/App.vue                       | 257 +++++++-----------------
 webui/src/components/Auth.vue           |   7 +-
 webui/src/components/ClientControls.vue |  24 ++-
 webui/src/services/api.js               |  15 +-
 webui/src/store/store.js                |  70 ++++++-
 5 files changed, 175 insertions(+), 198 deletions(-)

diff --git a/webui/src/App.vue b/webui/src/App.vue
index 5e88d045..a676dde0 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -32,7 +32,7 @@
                 <button
                   class="bg-red-800 hover:bg-red-700 text-white border-2 border-none py-2 px-4 rounded inline-flex items-center transition"
                   @click="
-                    clientCreate = true;
+                    clientCreateShowModal = true;
                     clientCreateName = '';
                   "
                 >
@@ -63,34 +63,15 @@
         </div>
 
         <!-- Create Dialog -->
-        <div v-if="clientCreate" class="fixed z-10 inset-0 overflow-y-auto">
+        <div v-if="clientCreateShowModal" class="fixed z-10 inset-0 overflow-y-auto">
           <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <!--
-  Background overlay, show/hide based on modal state.
-
-  Entering: "ease-out duration-300"
-  From: "opacity-0"
-  To: "opacity-100"
-  Leaving: "ease-in duration-200"
-  From: "opacity-100"
-  To: "opacity-0"
--->
             <div class="fixed inset-0 transition-opacity" aria-hidden="true">
               <div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75 dark:opacity-50"></div>
             </div>
 
             <!-- This element is to trick the browser into centering the modal contents. -->
             <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-            <!--
-  Modal panel, show/hide based on modal state.
 
-  Entering: "ease-out duration-300"
-  From: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
-  To: "opacity-100 tranneutral-y-0 sm:scale-100"
-  Leaving: "ease-in duration-200"
-  From: "opacity-100 tranneutral-y-0 sm:scale-100"
-  To: "opacity-0 tranneutral-y-4 sm:tranneutral-y-0 sm:scale-95"
--->
             <div
               class="inline-block align-bottom bg-white dark:bg-neutral-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
               role="dialog"
@@ -126,10 +107,7 @@
                   v-if="clientCreateName.length"
                   type="button"
                   class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
-                  @click="
-                    createClient();
-                    clientCreate = null;
-                  "
+                  @click="createClient()"
                 >
                   Create
                 </button>
@@ -143,7 +121,7 @@
                 <button
                   type="button"
                   class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                  @click="clientCreate = null"
+                  @click="clientCreateShowModal = null"
                 >
                   Cancel
                 </button>
@@ -153,7 +131,7 @@
         </div>
 
         <!-- Delete Dialog -->
-        <div v-if="clientDelete" class="fixed z-10 inset-0 overflow-y-auto">
+        <div v-if="clientToDelete" class="fixed z-10 inset-0 overflow-y-auto">
           <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
             <!--
   Background overlay, show/hide based on modal state.
@@ -202,7 +180,7 @@
                     </h3>
                     <div class="mt-2">
                       <p class="text-sm text-gray-500 dark:text-neutral-300">
-                        Are you sure you want to delete <strong>{{ clientDelete.name }}</strong
+                        Are you sure you want to delete <strong>{{ clientToDelete.name }}</strong
                         >? This action cannot be undone.
                       </p>
                     </div>
@@ -213,17 +191,14 @@
                 <button
                   type="button"
                   class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 dark:bg-red-600 text-base font-medium text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
-                  @click="
-                    deleteClient(clientDelete);
-                    clientDelete = null;
-                  "
+                  @click="deleteClient(clientToDelete)"
                 >
                   Delete
                 </button>
                 <button
                   type="button"
                   class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                  @click="clientDelete = null"
+                  @click="clientToDelete = null"
                 >
                   Cancel
                 </button>
@@ -247,7 +222,7 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
 import sha256 from 'crypto-js/sha256';
 
 import Auth from '@/components/Auth.vue';
@@ -267,58 +242,44 @@ import { useStore } from './store/store';
 import { storeToRefs } from 'pinia';
 
 const store = useStore();
-const { authenticated } = storeToRefs(store);
+const { authenticated, requiresPassword } = storeToRefs(store);
 
-// const authenticated = ref(null);
-// const authenticating = ref(false);
-// const password = ref(null);
-const requiresPassword = ref(null);
+const { clients, clientsPersist, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store);
 
-const clients = ref(null);
-const clientsPersist = reactive({});
-const clientDelete = ref(null);
-const clientCreate = ref(null);
-const clientCreateName = ref('');
-const qrcode = ref(null);
+const logout = store.logout;
+const createClient = store.createClient;
+const deleteClient = store.deleteClient;
 
 const currentRelease = ref(null);
 const latestRelease = ref(null);
 
-const isDark = ref(null);
+const refreshInterval = ref(null);
 
 const api = new API();
 
-isDark.value = false;
-if (localStorage.theme === 'dark') {
-  isDark.value = true;
-}
+onMounted(() => {
+  api
+    .getSession()
+    .then((session) => {
+      authenticated.value = session.authenticated;
+      // authenticated.value = false; //debug
+      requiresPassword.value = session.requiresPassword;
 
-api
-  .getSession()
-  .then((session) => {
-    authenticated.value = session.authenticated;
-    // authenticated.value = false; //debug
-    requiresPassword.value = session.requiresPassword;
-    refresh({
-      updateCharts: true,
-    }).catch((err) => {
+      refreshInterval.value = setInterval(refresh, 1000);
+    })
+    .catch((err) => {
       console.log(err.message || err.toString());
     });
-  })
-  .catch((err) => {
-    console.log(err.message || err.toString());
-  });
+});
 
-setInterval(() => {
-  refresh({
-    updateCharts: true,
-  }).catch(console.error);
-}, 1000);
+onBeforeUnmount(() => {
+  clearInterval(refreshInterval.value);
+});
 
 getRelease();
 
 function handleNewClient() {
-  clientCreate.value = true;
+  clientCreateShowModal.value = true;
   clientCreateName.value = '';
 }
 
@@ -354,118 +315,54 @@ async function getRelease() {
 async function refresh({ updateCharts = false } = {}) {
   if (!authenticated.value) return;
 
-  const clientsData = await api.getClients();
-  clients.value = clientsData.map((client) => {
-    if (client.name.includes('@') && client.name.includes('.')) {
-      client.avatar = `https://www.gravatar.com/avatar/${sha256(client.name)}?d=blank`;
-    }
-
-    if (!clientsPersist[client.id]) {
-      clientsPersist[client.id] = {};
-      clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
-      clientsPersist[client.id].transferRxPrevious = client.transferRx;
-      clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
-      clientsPersist[client.id].transferTxPrevious = client.transferTx;
-    }
-
-    // Debug
-    client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
-    client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
-    client.latestHandshakeAt = new Date('2024-03-20');
-    // updateCharts = false;
-
-    if (updateCharts) {
-      clientsPersist[client.id].transferRxCurrent = client.transferRx - clientsPersist[client.id].transferRxPrevious;
-      clientsPersist[client.id].transferRxPrevious = client.transferRx;
-      clientsPersist[client.id].transferTxCurrent = client.transferTx - clientsPersist[client.id].transferTxPrevious;
-      clientsPersist[client.id].transferTxPrevious = client.transferTx;
-
-      clientsPersist[client.id].transferRxHistory.push(clientsPersist[client.id].transferRxCurrent);
-      clientsPersist[client.id].transferRxHistory.shift();
-
-      clientsPersist[client.id].transferTxHistory.push(clientsPersist[client.id].transferTxCurrent);
-      clientsPersist[client.id].transferTxHistory.shift();
-    }
-
-    client.transferTxCurrent = clientsPersist[client.id].transferTxCurrent;
-    client.transferRxCurrent = clientsPersist[client.id].transferRxCurrent;
-
-    client.transferTxHistory = clientsPersist[client.id].transferTxHistory;
-    client.transferRxHistory = clientsPersist[client.id].transferRxHistory;
-    client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
-
-    client.hoverTx = clientsPersist[client.id].hoverTx;
-    client.hoverRx = clientsPersist[client.id].hoverRx;
-
-    return client;
-  });
-}
-
-// 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();
-
-  api
-    .deleteSession()
-    .then(() => {
-      authenticated.value = false;
-      clients.value = null;
-    })
-    .catch((err) => {
-      alert(err.message || err.toString());
+  try {
+    const clientsData = await api.getClients();
+    clients.value = clientsData.map((client) => {
+      if (client.name.includes('@') && client.name.includes('.')) {
+        client.avatar = `https://www.gravatar.com/avatar/${sha256(client.name)}?d=blank`;
+      }
+
+      if (!clientsPersist[client.id]) {
+        clientsPersist[client.id] = {};
+        clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
+        clientsPersist[client.id].transferRxPrevious = client.transferRx;
+        clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
+        clientsPersist[client.id].transferTxPrevious = client.transferTx;
+      }
+
+      // Debug
+      client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
+      client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
+      client.latestHandshakeAt = new Date('2024-03-20');
+      updateCharts = true; // DEV TODO: Update. Get from settings
+
+      if (updateCharts) {
+        clientsPersist[client.id].transferRxCurrent = client.transferRx - clientsPersist[client.id].transferRxPrevious;
+        clientsPersist[client.id].transferRxPrevious = client.transferRx;
+        clientsPersist[client.id].transferTxCurrent = client.transferTx - clientsPersist[client.id].transferTxPrevious;
+        clientsPersist[client.id].transferTxPrevious = client.transferTx;
+
+        clientsPersist[client.id].transferRxHistory.push(clientsPersist[client.id].transferRxCurrent);
+        clientsPersist[client.id].transferRxHistory.shift();
+
+        clientsPersist[client.id].transferTxHistory.push(clientsPersist[client.id].transferTxCurrent);
+        clientsPersist[client.id].transferTxHistory.shift();
+      }
+
+      client.transferTxCurrent = clientsPersist[client.id].transferTxCurrent;
+      client.transferRxCurrent = clientsPersist[client.id].transferRxCurrent;
+
+      client.transferTxHistory = clientsPersist[client.id].transferTxHistory;
+      client.transferRxHistory = clientsPersist[client.id].transferRxHistory;
+      client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
+
+      client.hoverTx = clientsPersist[client.id].hoverTx;
+      client.hoverRx = clientsPersist[client.id].hoverRx;
+
+      return client;
     });
-}
-
-function createClient() {
-  const name = clientCreateName;
-  if (!name.value) return;
-
-  api
-    .createClient({ name })
-    .catch((err) => alert(err.message || err.toString()))
-    .finally(() => refresh().catch(console.error));
-}
-
-function deleteClient(client) {
-  api
-    .deleteClient({ clientId: client.id })
-    .catch((err) => alert(err.message || err.toString()))
-    .finally(() => refresh().catch(console.error));
-}
-
-function toggleTheme() {
-  if (isDark.value) {
-    localStorage.theme = 'light';
-    document.documentElement.classList.remove('dark');
-  } else {
-    localStorage.theme = 'dark';
-    document.documentElement.classList.add('dark');
+  } catch (error) {
+    console.log('Something went wrong', error);
   }
-  isDark.value = !isDark.value;
 }
 </script>
diff --git a/webui/src/components/Auth.vue b/webui/src/components/Auth.vue
index 49ca3c11..fbeb5ef6 100644
--- a/webui/src/components/Auth.vue
+++ b/webui/src/components/Auth.vue
@@ -2,7 +2,10 @@
   <div>
     <h1 class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-center">WireGuard</h1>
 
-    <form class="shadow rounded-md bg-white dark:bg-neutral-700 mx-auto w-64 p-5 overflow-hidden mt-10" @submit="login">
+    <form
+      class="shadow rounded-md bg-white dark:bg-neutral-700 mx-auto w-64 p-5 overflow-hidden mt-10"
+      @submit="store.login"
+    >
       <!-- Avatar -->
       <div class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-800 relative overflow-hidden">
         <IconAvatarDefault class="w-10 h-10 m-5 text-white dark:text-white" />
@@ -46,5 +49,5 @@ import { useStore } from '@/store/store';
 import { storeToRefs } from 'pinia';
 
 const store = useStore();
-const { password, authenticating, login } = storeToRefs(store);
+const { password, authenticating } = storeToRefs(store);
 </script>
diff --git a/webui/src/components/ClientControls.vue b/webui/src/components/ClientControls.vue
index 1d0045de..f1ad079c 100644
--- a/webui/src/components/ClientControls.vue
+++ b/webui/src/components/ClientControls.vue
@@ -2,18 +2,18 @@
   <div class="text-gray-400 dark:text-neutral-400 flex gap-1 items-center justify-between">
     <!-- Enable/Disable -->
     <div
-      @click="disableClient(client)"
       v-if="client.enabled === true"
       title="Disable Client"
       class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-red-800 cursor-pointer hover:bg-red-700 transition-all"
+      @click="disableClient(client)"
     >
       <div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div>
     </div>
     <div
-      @click="enableClient(client)"
       v-if="client.enabled === false"
       title="Enable Client"
       class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-gray-200 dark:bg-neutral-400 cursor-pointer hover:bg-gray-300 dark:hover:bg-neutral-500 transition-all"
+      @click="enableClient(client)"
     >
       <div class="rounded-full w-4 h-4 m-1 bg-white"></div>
     </div>
@@ -22,7 +22,7 @@
     <button
       class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
       title="Show QR Code"
-      @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`"
+      @click="getQrCode(client)"
     >
       <IconQRCode />
     </button>
@@ -41,7 +41,7 @@
     <button
       class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
       title="Delete Client"
-      @click="clientDelete = client"
+      @click="handleDeleteClick()"
     >
       <IconDelete />
     </button>
@@ -49,15 +49,20 @@
 </template>
 
 <script setup>
+import { storeToRefs } from 'pinia';
+
 import IconQRCode from '@/components/icons/IconQRCode.vue';
 import IconDownload from '@/components/icons/IconDownload.vue';
 import IconDelete from '@/components/icons/IconDelete.vue';
 
 import API from '@/services/api';
-
 const api = new API();
 
-defineProps({
+import { useStore } from '@/store/store';
+const store = useStore();
+const { qrcode, clientToDelete } = storeToRefs(store);
+
+const props = defineProps({
   client: {},
 });
 
@@ -70,4 +75,11 @@ function disableClient(client) {
   api.disableClient({ clientId: client.id }).catch((err) => alert(err.message || err.toString()));
   // .finally(() => refresh().catch(console.error));
 }
+
+async function getQrCode(client) {
+  qrcode.value = `${api.SERVER}/api/wireguard/client/${client.id}/qrcode.svg`;
+}
+function handleDeleteClick() {
+  clientToDelete.value = props.client;
+}
 </script>
diff --git a/webui/src/services/api.js b/webui/src/services/api.js
index 8e36d1de..741bc0de 100644
--- a/webui/src/services/api.js
+++ b/webui/src/services/api.js
@@ -1,12 +1,14 @@
-const SERVER = 'http://127.0.0.1:51821';
-
 export default class API {
+  constructor() {
+    this.SERVER = 'http://localhost:51821'; //! DEV
+  }
   async call({ method, path, body }) {
-    const res = await fetch(`${SERVER}/api${path}`, {
+    const res = await fetch(`${this.SERVER}/api${path}`, {
       method,
       headers: {
         'Content-Type': 'application/json',
       },
+      credentials: 'include', //! DEV
       body: body ? JSON.stringify(body) : undefined,
     });
 
@@ -110,4 +112,11 @@ export default class API {
       body: { address },
     });
   }
+
+  async getQrCode({ clientId }) {
+    return this.call({
+      method: 'get',
+      path: `/wireguard/client/${clientId}/qrcode.svg`,
+    });
+  }
 }
diff --git a/webui/src/store/store.js b/webui/src/store/store.js
index 095f2b3c..040a6b3e 100644
--- a/webui/src/store/store.js
+++ b/webui/src/store/store.js
@@ -1,5 +1,5 @@
 import API from '@/services/api';
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 import { defineStore } from 'pinia';
 
@@ -9,6 +9,14 @@ export const useStore = defineStore('store', () => {
   const authenticated = ref(null);
   const authenticating = ref(false);
   const password = ref(null);
+  const requiresPassword = ref(null);
+
+  const clients = ref(null);
+  const clientsPersist = reactive({});
+  const clientToDelete = ref(null);
+  const clientCreateShowModal = ref(null);
+  const clientCreateName = ref('');
+  const qrcode = ref(null);
 
   function login(e) {
     e.preventDefault();
@@ -19,27 +27,75 @@ export const useStore = defineStore('store', () => {
     authenticating.value = true;
     api
       .createSession({
-        password: password,
+        password: password.value,
       })
       .then(async () => {
         const session = await api.getSession();
         authenticated.value = session.authenticated;
         requiresPassword.value = session.requiresPassword;
-        return this.refresh();
+        // return this.refresh();
       })
       .catch((err) => {
-        alert(err.message || err.toString());
+        console.log(err.message || err.toString());
       })
       .finally(() => {
-        this.authenticating = false;
-        this.password = null;
+        authenticating.value = false;
+        password.value = null;
+      });
+  }
+
+  function logout(e) {
+    e.preventDefault();
+
+    api
+      .deleteSession()
+      .then(() => {
+        authenticated.value = false;
+        clients.value = null;
+      })
+      .catch((err) => {
+        alert(err.message || err.toString());
       });
   }
 
+  function createClient() {
+    if (!clientCreateName.value) return;
+
+    api
+      .createClient({ name: clientCreateName.value })
+      .catch((err) => alert(err.message || err.toString()))
+      .finally
+      // () => refresh().catch(console.error)
+      ();
+
+    clientCreateShowModal.value = null;
+  }
+
+  function deleteClient(client) {
+    api
+      .deleteClient({ clientId: client.id })
+      .catch((err) => alert(err.message || err.toString()))
+      .finally
+      // () => refresh().catch(console.error)
+      ();
+
+    clientToDelete.value = null;
+  }
+
   return {
     authenticated,
     authenticating,
-    login,
     password,
+    requiresPassword,
+    clients,
+    clientsPersist,
+    clientToDelete,
+    clientCreateShowModal,
+    clientCreateName,
+    qrcode,
+    login,
+    logout,
+    createClient,
+    deleteClient,
   };
 });