From f628e2afd373affb2524effd6845e2495d6c309c Mon Sep 17 00:00:00 2001
From: Sergei Birukov <suxscribe@gmail.com>
Date: Sat, 23 Mar 2024 09:16:05 +0300
Subject: [PATCH] Add Header component

+ some component updates
---
 webui/src/App.vue                        | 112 ++++-------------------
 webui/src/components/ClientAddress.vue   |  26 ++++--
 webui/src/components/ClientControls.vue  |  29 +++---
 webui/src/components/ClientNewButton.vue |  40 ++++----
 webui/src/components/Header.vue          |  31 +++++++
 webui/src/components/LoadingSpinner.vue  |  10 +-
 webui/src/services/api.js                |   5 +-
 webui/src/store/store.js                 |  68 ++++++++++++--
 8 files changed, 170 insertions(+), 151 deletions(-)
 create mode 100644 webui/src/components/Header.vue

diff --git a/webui/src/App.vue b/webui/src/App.vue
index 62d01f88..5e9f4cc5 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -2,24 +2,18 @@
   <main>
     <div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0">
       <div v-if="authenticated === true">
-        <span
-          v-if="requiresPassword"
-          class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
-          @click="logout"
-        >
-          Logout
-          <IconLogout />
-        </span>
-        <h1 class="text-4xl dark:text-neutral-200 font-medium mt-2 mb-2">
-          <img src="./assets/img/logo.png" width="32" class="inline align-middle dark:bg" />
-          <span class="align-middle">WireGuard</span>
-        </h1>
-        <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
-
+        <Header />
         <UpdateNotification :latest-release="latestRelease" :current-release="currentRelease" />
 
         <div class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden">
-          <ClientNewButton @create-new-client="handleNewClient" />
+          <div class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600">
+            <div class="flex-grow">
+              <p class="text-2xl font-medium dark:text-neutral-200">Clients</p>
+            </div>
+            <div class="flex-shrink-0">
+              <ClientNewButton />
+            </div>
+          </div>
 
           <div v-if="clients && clients.length > 0">
             <!-- Client -->
@@ -30,13 +24,7 @@
           <div v-if="clients && clients.length === 0">
             <p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm">
               There are no clients yet.<br /><br />
-              <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="handleNewClient()"
-              >
-                <IconNew class="w-4 mr-2" />
-                <span class="text-sm">New Client</span>
-              </button>
+              <ClientNewButton />
             </p>
           </div>
           <div v-if="clients === null" class="text-gray-200 dark:text-red-300 p-5">
@@ -64,7 +52,7 @@
         <Auth />
       </div>
 
-      <div v-if="authenticated === null" class="text-gray-300 dark:text-red-300 pt-24 pb-12">
+      <div v-if="authenticated === null">
         <LoadingSpinner />
       </div>
     </div>
@@ -74,19 +62,17 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import sha256 from 'crypto-js/sha256';
+import { ref, onBeforeUnmount, onBeforeMount } from 'vue';
 
 import Auth from '@/components/Auth.vue';
 import UpdateNotification from '@/components/UpdateNotification.vue';
 import ClientNewButton from '@/components/ClientNewButton.vue';
-import IconLogout from '@/components/icons/IconLogout.vue';
-import IconNew from '@/components/icons/IconNew.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import Footer from '@/components/Footer.vue';
 import ModalQRCode from '@/components/ModalQRCode.vue';
 import ModalCreateClient from '@/components/ModalCreateClient.vue';
 import ModalDeleteClient from '@/components/ModalDeleteClient.vue';
+import Header from '@/components/Header.vue';
 
 import API from '@/services/api';
 import Client from '@/components/Client.vue';
@@ -97,9 +83,7 @@ import { storeToRefs } from 'pinia';
 const store = useStore();
 const { authenticated, requiresPassword } = storeToRefs(store);
 
-const { clients, clientsPersist, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store);
-
-const logout = store.logout;
+const { clients, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store);
 
 const currentRelease = ref(null);
 const latestRelease = ref(null);
@@ -108,32 +92,28 @@ const refreshInterval = ref(null);
 
 const api = new API();
 
-onMounted(() => {
+const refresh = store.refresh;
+
+onBeforeMount(() => {
   api
     .getSession()
     .then((session) => {
       authenticated.value = session.authenticated;
       // authenticated.value = false; //debug
       requiresPassword.value = session.requiresPassword;
-
+      refresh();
       refreshInterval.value = setInterval(refresh, 1000);
     })
     .catch((err) => {
       console.log(err.message || err.toString());
     });
+  getRelease();
 });
 
 onBeforeUnmount(() => {
   clearInterval(refreshInterval.value);
 });
 
-getRelease();
-
-function handleNewClient() {
-  clientCreateShowModal.value = true;
-  clientCreateName.value = '';
-}
-
 async function getRelease() {
   try {
     const currentReleaseData = await api.getRelease();
@@ -162,58 +142,4 @@ async function getRelease() {
     console.log('Something went wrong', error);
   }
 }
-
-async function refresh({ updateCharts = false } = {}) {
-  if (!authenticated.value) return;
-
-  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;
-    });
-  } catch (error) {
-    console.log('Something went wrong', error);
-  }
-}
 </script>
diff --git a/webui/src/components/ClientAddress.vue b/webui/src/components/ClientAddress.vue
index 1d7b0189..61e19c35 100644
--- a/webui/src/components/ClientAddress.vue
+++ b/webui/src/components/ClientAddress.vue
@@ -2,11 +2,25 @@
 <template>
   <span class="group block md:inline-block pb-1 md:pb-0">
     <!-- Show -->
-    <input v-show="editAddressId === client.id" v-model="editAddress" @keyup.enter="updateAddress" @keyup.escape="cancelEdit" :test="'client-' + client.id + '-address'" :ref="'client-' + client.id + '-address'" class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" />
-    <span v-show="editAddressId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{ client.address }}</span>
+    <input
+      v-show="editAddressId === client.id"
+      :ref="'client-' + client.id + '-address'"
+      v-model="editAddress"
+      :test="'client-' + client.id + '-address'"
+      class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500"
+      @keyup.enter="updateAddress"
+      @keyup.escape="cancelEdit"
+    />
+    <span v-show="editAddressId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{
+      client.address
+    }}</span>
 
     <!-- Edit -->
-    <span v-show="editAddressId !== client.id" @click="edit" class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
+    <span
+      v-show="editAddressId !== client.id"
+      class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
+      @click="edit"
+    >
       <IconEdit />
     </span>
   </span>
@@ -16,9 +30,6 @@
 import { ref, nextTick } from 'vue';
 import IconEdit from './icons/IconEdit.vue';
 
-const clientEditAddress = ref(null);
-const clientEditAddressId = ref(null);
-
 const props = defineProps(['client']);
 const editAddress = ref(null);
 const editAddressId = ref(null);
@@ -26,7 +37,7 @@ const editAddressId = ref(null);
 const emit = defineEmits(['inFocus', 'submit', 'update-address']);
 
 const updateAddress = () => {
-  console.log('emit')
+  console.log('emit');
 
   emit('update-address', props.client, editAddress.value);
   editAddress.value = null;
@@ -48,5 +59,4 @@ const edit = () => {
     }
   });
 };
-
 </script>
diff --git a/webui/src/components/ClientControls.vue b/webui/src/components/ClientControls.vue
index f1ad079c..8ee3ffbb 100644
--- a/webui/src/components/ClientControls.vue
+++ b/webui/src/components/ClientControls.vue
@@ -5,7 +5,7 @@
       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)"
+      @click="disableClient"
     >
       <div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div>
     </div>
@@ -13,7 +13,7 @@
       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)"
+      @click="enableClient"
     >
       <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="getQrCode(client)"
+      @click="getQrCode"
     >
       <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="handleDeleteClick()"
+      @click="handleDeleteClick"
     >
       <IconDelete />
     </button>
@@ -65,19 +65,24 @@ const { qrcode, clientToDelete } = storeToRefs(store);
 const props = defineProps({
   client: {},
 });
+const refresh = store.refresh;
 
-function enableClient(client) {
-  api.enableClient({ clientId: client.id }).catch((err) => alert(err.message || err.toString()));
-  // .finally(() => refresh().catch(console.error));
+function enableClient() {
+  api
+    .enableClient({ clientId: props.client.id })
+    .catch((err) => alert(err.message || err.toString()))
+    .finally(() => refresh().catch(console.error));
 }
 
-function disableClient(client) {
-  api.disableClient({ clientId: client.id }).catch((err) => alert(err.message || err.toString()));
-  // .finally(() => refresh().catch(console.error));
+function disableClient() {
+  api
+    .disableClient({ clientId: props.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`;
+async function getQrCode() {
+  qrcode.value = await api.getQrCode({ clientId: props.client.id });
 }
 function handleDeleteClick() {
   clientToDelete.value = props.client;
diff --git a/webui/src/components/ClientNewButton.vue b/webui/src/components/ClientNewButton.vue
index 26e03d22..1eeeca5d 100644
--- a/webui/src/components/ClientNewButton.vue
+++ b/webui/src/components/ClientNewButton.vue
@@ -1,32 +1,26 @@
 <!-- ClientNewButton.vue -->
 <template>
-  <div
-    class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
-  >
-    <div class="flex-grow">
-      <p class="text-2xl font-medium dark:text-neutral-200">Clients</p>
-    </div>
-    <div class="flex-shrink-0">
-      <button
-        @click="createNewClient"
-        class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition"
-      >
-        <IconNew class="w-4 mr-2" />
-        <span class="text-sm">New</span>
-      </button>
-    </div>
+  <div>
+    <button
+      class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition"
+      @click="handleNewClient()"
+    >
+      <IconNew class="w-4 mr-2" />
+      <span class="text-sm">New</span>
+    </button>
   </div>
 </template>
 
-<script>
+<script setup>
+import { storeToRefs } from 'pinia';
+import { useStore } from '@/store/store';
 import IconNew from './icons/IconNew.vue';
 
-export default {
-  methods: {
-    createNewClient() {
-      this.$emit('create-new-client');
-    },
-  },
-  components: { IconNew },
+const store = useStore();
+const { clientCreateShowModal, clientCreateName } = storeToRefs(store);
+
+const handleNewClient = () => {
+  clientCreateShowModal.value = true;
+  clientCreateName.value = '';
 };
 </script>
diff --git a/webui/src/components/Header.vue b/webui/src/components/Header.vue
new file mode 100644
index 00000000..f12c04ab
--- /dev/null
+++ b/webui/src/components/Header.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <span
+      v-if="requiresPassword"
+      class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
+      @click="logout"
+    >
+      Logout
+      <IconLogout />
+    </span>
+    <h1 class="text-4xl dark:text-neutral-200 font-medium mt-2 mb-2">
+      <img src="@/assets/img/logo.png" width="32" class="inline align-middle dark:bg" />
+      <span class="align-middle">WireGuard</span>
+    </h1>
+    <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
+  </div>
+</template>
+
+<script setup>
+import IconLogout from './icons/IconLogout.vue';
+
+import { useStore } from '@/store/store';
+import { storeToRefs } from 'pinia';
+
+const store = useStore();
+const { requiresPassword } = storeToRefs(store);
+
+const logout = store.logout;
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/webui/src/components/LoadingSpinner.vue b/webui/src/components/LoadingSpinner.vue
index 8d3a31c4..8624ab7f 100644
--- a/webui/src/components/LoadingSpinner.vue
+++ b/webui/src/components/LoadingSpinner.vue
@@ -1,3 +1,9 @@
+<template>
+  <div class="text-gray-300 dark:text-red-300 pt-24 pb-12">
+    <IconSpinnerVue class="w-5 animate-spin mx-auto" />
+  </div>
+</template>
+
 <script>
 import IconSpinnerVue from './icons/IconSpinner.vue';
 
@@ -5,7 +11,3 @@ export default {
   components: { IconSpinnerVue },
 };
 </script>
-
-<template>
-  <IconSpinnerVue class="w-5 animate-spin mx-auto" />
-</template>
diff --git a/webui/src/services/api.js b/webui/src/services/api.js
index 741bc0de..8d5fd3b8 100644
--- a/webui/src/services/api.js
+++ b/webui/src/services/api.js
@@ -114,9 +114,6 @@ export default class API {
   }
 
   async getQrCode({ clientId }) {
-    return this.call({
-      method: 'get',
-      path: `/wireguard/client/${clientId}/qrcode.svg`,
-    });
+    return `${this.SERVER}/api/wireguard/client/${clientId}/qrcode.svg`;
   }
 }
diff --git a/webui/src/store/store.js b/webui/src/store/store.js
index 040a6b3e..3b450551 100644
--- a/webui/src/store/store.js
+++ b/webui/src/store/store.js
@@ -1,5 +1,6 @@
 import API from '@/services/api';
 import { ref, reactive } from 'vue';
+import sha256 from 'crypto-js/sha256';
 
 import { defineStore } from 'pinia';
 
@@ -33,7 +34,7 @@ export const useStore = defineStore('store', () => {
         const session = await api.getSession();
         authenticated.value = session.authenticated;
         requiresPassword.value = session.requiresPassword;
-        // return this.refresh();
+        return this.refresh();
       })
       .catch((err) => {
         console.log(err.message || err.toString());
@@ -64,9 +65,7 @@ export const useStore = defineStore('store', () => {
     api
       .createClient({ name: clientCreateName.value })
       .catch((err) => alert(err.message || err.toString()))
-      .finally
-      // () => refresh().catch(console.error)
-      ();
+      .finally(() => refresh().catch(console.error));
 
     clientCreateShowModal.value = null;
   }
@@ -75,13 +74,67 @@ export const useStore = defineStore('store', () => {
     api
       .deleteClient({ clientId: client.id })
       .catch((err) => alert(err.message || err.toString()))
-      .finally
-      // () => refresh().catch(console.error)
-      ();
+      .finally(() => refresh().catch(console.error));
 
     clientToDelete.value = null;
   }
 
+  async function refresh({ updateCharts = false } = {}) {
+    if (!authenticated.value) return;
+
+    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;
+      });
+    } catch (error) {
+      console.log('Something went wrong', error);
+    }
+  }
+
   return {
     authenticated,
     authenticating,
@@ -97,5 +150,6 @@ export const useStore = defineStore('store', () => {
     logout,
     createClient,
     deleteClient,
+    refresh,
   };
 });