Add Header component

+ some component updates
2 years ago · f628e2afd3
8 changed files with 170 additions and 151 deletions
--- 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>
--- 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>
--- 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;
--- 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>
--- a/webui/src/components/Header.vue
+++ 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>
--- 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>
--- 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`;
  }
 }
--- 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,
  };
 });