From 2d3f865e406b2be6920c6da22eb266ebe8b2a58d Mon Sep 17 00:00:00 2001
From: Sergei Birukov <suxscribe@gmail.com>
Date: Sun, 24 Mar 2024 14:35:37 +0300
Subject: [PATCH] Update layout. Add i18n into templates

Add getUiTrafficStats
---
 webui/src/App.vue                           |  31 ++++-
 webui/src/components/Client.vue             |   6 +-
 webui/src/components/ClientAddress.vue      |   9 +-
 webui/src/components/ClientAvatar.vue       |  40 +++----
 webui/src/components/ClientControls.vue     |  34 ++++--
 webui/src/components/ClientInfo.vue         |  97 ++++++++-------
 webui/src/components/ClientName.vue         | 124 ++++++++------------
 webui/src/components/ClientNewButton.vue    |   2 +-
 webui/src/components/ClientTrafficStat.vue  |  39 ++++++
 webui/src/components/Footer.vue             |  13 +-
 webui/src/components/Header.vue             |  17 +--
 webui/src/components/ModalCreateClient.vue  |  28 ++++-
 webui/src/components/ModalDeleteClient.vue  |  31 ++++-
 webui/src/components/UpdateNotification.vue |  25 ++--
 webui/src/components/icons/IconDelete.vue   |   7 +-
 webui/src/components/icons/IconEdit.vue     |   2 +-
 webui/src/components/icons/IconRX.vue       |  16 +++
 webui/src/components/icons/IconTX.vue       |  16 +++
 webui/src/services/api.js                   |   2 +-
 webui/src/store/store.js                    |   2 +
 20 files changed, 333 insertions(+), 208 deletions(-)
 create mode 100644 webui/src/components/ClientTrafficStat.vue
 create mode 100644 webui/src/components/icons/IconRX.vue
 create mode 100644 webui/src/components/icons/IconTX.vue

diff --git a/webui/src/App.vue b/webui/src/App.vue
index 3402b486..3c0f047b 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -8,7 +8,7 @@
         <div class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden">
           <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>
+              <p class="text-2xl font-medium dark:text-neutral-200">{{ $t('clients') }}</p>
             </div>
             <div class="flex-shrink-0">
               <ClientNewButton />
@@ -23,7 +23,7 @@
           </div>
           <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 />
+              {{ $t('noClients') }}<br /><br />
               <ClientNewButton />
             </p>
           </div>
@@ -84,10 +84,19 @@ import { storeToRefs } from 'pinia';
 const i18n = useI18n();
 
 const store = useStore();
-const { authenticated, requiresPassword } = storeToRefs(store);
 
-const { clients, clientCreateShowModal, clientToDelete, qrcode, prefersDarkScheme, uiTheme, uiChartType } =
-  storeToRefs(store);
+const {
+  authenticated,
+  requiresPassword,
+  clients,
+  clientCreateShowModal,
+  clientToDelete,
+  qrcode,
+  prefersDarkScheme,
+  uiTheme,
+  uiChartType,
+  uiTrafficStats,
+} = storeToRefs(store);
 
 const currentRelease = ref(null);
 const latestRelease = ref(null);
@@ -122,6 +131,7 @@ onBeforeMount(() => {
   getChartType();
   getRelease();
   getLang();
+  getUiTrafficStats();
 });
 
 onBeforeUnmount(() => {
@@ -178,4 +188,15 @@ async function getChartType() {
       uiChartType.value = 0;
     });
 }
+
+async function getUiTrafficStats() {
+  api
+    .getUiTrafficStats()
+    .then((res) => {
+      uiTrafficStats.value = res;
+    })
+    .catch(() => {
+      uiTrafficStats.value = false;
+    });
+}
 </script>
diff --git a/webui/src/components/Client.vue b/webui/src/components/Client.vue
index 207527a6..8526222d 100644
--- a/webui/src/components/Client.vue
+++ b/webui/src/components/Client.vue
@@ -6,8 +6,8 @@
     <!-- Chart -->
     <ClientCharts :client="client" />
 
-    <div class="relative p-5 z-10 flex flex-col md:flex-row justify-between">
-      <div class="flex items-center pb-2 md:pb-0">
+    <div class="relative py-3 md:py-5 px-3 z-10 flex flex-col sm:flex-row justify-between gap-3">
+      <div class="flex gap-3 md:gap-4 w-full items-center">
         <ClientAvatar :client="client" />
         <ClientInfo :client="client" />
       </div>
@@ -26,9 +26,7 @@ import ClientInfo from '@/components/ClientInfo.vue';
 import ClientAvatar from '@/components/ClientAvatar.vue';
 import ClientControls from '@/components/ClientControls.vue';
 
-
 defineProps({
   client: {},
 });
-
 </script>
diff --git a/webui/src/components/ClientAddress.vue b/webui/src/components/ClientAddress.vue
index 61e19c35..6827eb74 100644
--- a/webui/src/components/ClientAddress.vue
+++ b/webui/src/components/ClientAddress.vue
@@ -1,24 +1,21 @@
 <!-- EditableAddress.vue -->
 <template>
-  <span class="group block md:inline-block pb-1 md:pb-0">
+  <span class="group">
     <!-- Show -->
     <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>
+    <span v-show="editAddressId !== client.id" class="inline-block">{{ client.address }}</span>
 
     <!-- Edit -->
     <span
       v-show="editAddressId !== client.id"
-      class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
+      class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity p-0.5"
       @click="edit"
     >
       <IconEdit />
diff --git a/webui/src/components/ClientAvatar.vue b/webui/src/components/ClientAvatar.vue
index e70cf521..d44fe849 100644
--- a/webui/src/components/ClientAvatar.vue
+++ b/webui/src/components/ClientAvatar.vue
@@ -1,33 +1,25 @@
-<script>
-import IconAvatarDefault from './icons/IconAvatarDefault.vue';
-
-export default {
-  props: ['client'],
-  components: { IconAvatarDefault },
-};
-</script>
-
 <template>
   <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
     <IconAvatarDefault class="w-6 m-2 text-gray-300" />
-    <img
-      v-if="client.avatar"
-      :src="client.avatar"
-      class="w-10 rounded-full absolute top-0 left-0"
-    />
+    <img v-if="props.client.avatar" :src="props.client.avatar" class="w-10 rounded-full absolute top-0 left-0" />
 
     <div
-      v-if="
-        client.latestHandshakeAt &&
-        new Date() - new Date(client.latestHandshakeAt) < 1000 * 60 * 10
-      "
+      v-if="props.client.latestHandshakeAt && new Date() - new Date(props.client.latestHandshakeAt) < 1000 * 60 * 10"
     >
-      <div
-        class="animate-ping w-4 h-4 p-1 bg-red-100 dark:bg-red-100 rounded-full absolute -bottom-1 -right-1"
-      ></div>
-      <div
-        class="w-2 h-2 bg-red-800 dark:bg-red-600 rounded-full absolute bottom-0 right-0"
-      ></div>
+      <div class="animate-ping w-4 h-4 p-1 bg-red-100 dark:bg-red-100 rounded-full absolute -bottom-1 -right-1"></div>
+      <div class="w-2 h-2 bg-red-800 dark:bg-red-600 rounded-full absolute bottom-0 right-0"></div>
     </div>
   </div>
 </template>
+
+<script setup>
+import { defineProps } from 'vue';
+import IconAvatarDefault from './icons/IconAvatarDefault.vue';
+
+const props = defineProps({
+  client: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
diff --git a/webui/src/components/ClientControls.vue b/webui/src/components/ClientControls.vue
index 8ee3ffbb..929e162b 100644
--- a/webui/src/components/ClientControls.vue
+++ b/webui/src/components/ClientControls.vue
@@ -3,15 +3,16 @@
     <!-- Enable/Disable -->
     <div
       v-if="client.enabled === true"
-      title="Disable Client"
+      :title="$t('disableClient')"
       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"
     >
       <div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div>
     </div>
+
     <div
       v-if="client.enabled === false"
-      title="Enable Client"
+      :title="$t('enableClient')"
       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"
     >
@@ -19,9 +20,15 @@
     </div>
 
     <!-- Show QR-->
+
     <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"
+      :disabled="!client.downloadableConfig"
+      class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
+      :class="{
+        'hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white': client.downloadableConfig,
+        'is-disabled': !client.downloadableConfig,
+      }"
+      :title="!client.downloadableConfig ? $t('noPrivKey') : $t('showQR')"
       @click="getQrCode"
     >
       <IconQRCode />
@@ -29,18 +36,29 @@
 
     <!-- Download Config -->
     <a
+      :disabled="!client.downloadableConfig"
       :href="'./api/wireguard/client/' + client.id + '/configuration'"
-      download
-      class="align-middle inline-block 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="Download Configuration"
+      :download="client.downloadableConfig ? 'configuration' : null"
+      class="align-middle inline-block bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
+      :class="{
+        'hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white': client.downloadableConfig,
+        'is-disabled': !client.downloadableConfig,
+      }"
+      :title="!client.downloadableConfig ? $t('noPrivKey') : $t('downloadConfig')"
+      @click="
+        if (!client.downloadableConfig) {
+          $event.preventDefault();
+        }
+      "
     >
       <IconDownload />
     </a>
 
     <!-- Delete -->
+
     <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"
+      :title="$t('deleteClient')"
       @click="handleDeleteClick"
     >
       <IconDelete />
diff --git a/webui/src/components/ClientInfo.vue b/webui/src/components/ClientInfo.vue
index 2273191c..09b4cebb 100644
--- a/webui/src/components/ClientInfo.vue
+++ b/webui/src/components/ClientInfo.vue
@@ -1,67 +1,82 @@
 <template>
-  <div class="flex-grow">
-    <!-- Name -->
-    <ClientName
-      :client="client"
-      @update-client-name="updateClientName"
-    />
-
-    <!-- Info -->
-    <div class="text-gray-400 dark:text-neutral-400 text-xs">
-      <!-- Address -->
-      <ClientAddress :client="client" @update-address="updateClientAddress" />
-      <!-- Transfer TX -->
-      <ClientTransfer
-        :transferData="client.transferTx"
-        :transferDataCurrent="client.transferTxCurrent"
-        :title="'Total Download: ' + bytes(client.transferTx)"
-        ><IconDownArrow
-      /></ClientTransfer>
-
-      <!-- Transfer RX -->
-      <ClientTransfer
-        :transferData="client.transferRx"
-        :transferDataCurrent="client.transferRxCurrent"
-        :title="'Total Upload: ' + bytes(client.transferRx)"
-      >
-        <IconUpArrow />
-      </ClientTransfer>
-
-      <!-- Last seen -->
-      <span
-        v-if="client.latestHandshakeAt"
-        :title="'Last seen on ' + dateTime(new Date(client.latestHandshakeAt))"
-      >
-        <!-- FIXME: add "timeago" -->
-        <!-- · {{ new Date(client.latestHandshakeAt) | timeago }} -->
-        · {{ timeago(client.latestHandshakeAt) }}
-      </span>
+  <div class="flex flex-col xxs:flex-row w-full gap-2">
+    <div class="flex flex-col flex-grow gap-1">
+      <!-- Name -->
+      <ClientName :client="client" />
+      <!-- Info -->
+      <div class="text-gray-400 dark:text-neutral-400 text-xs">
+        <!-- Address -->
+        <ClientAddress :client="client" />
+        <!-- Transfer TX -->
+        <ClientTransfer
+          v-if="!uiTrafficStats && client.transferTx"
+          :transfer-data="client.transferTx"
+          :transfer-data-current="client.transferTxCurrent"
+          :title="$t('totalDownload') + bytes(client.transferTx)"
+          ><IconDownArrow
+        /></ClientTransfer>
+        <!-- Transfer RX -->
+        <ClientTransfer
+          v-if="!uiTrafficStats && client.transferTx"
+          :transfer-data="client.transferRx"
+          :transfer-data-current="client.transferRxCurrent"
+          :title="$t('totalUpload') + bytes(client.transferRx)"
+        >
+          <IconUpArrow />
+        </ClientTransfer>
+        <!-- Last seen -->
+        <span v-if="client.latestHandshakeAt" :title="'Last seen on ' + dateTime(new Date(client.latestHandshakeAt))">
+          <!-- FIXME: add "timeago" -->
+          <!-- · {{ new Date(client.latestHandshakeAt) | timeago }} -->
+          {{ !uiTrafficStats ? ' · ' : '' }}{{ timeago(client.latestHandshakeAt) }}
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="uiTrafficStats && client.transferTx && client.transferRx"
+      class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px justify-end"
+    >
+      <ClientTrafficStat
+        :transfer-data-current="client.transferTxCurrent"
+        :transfer-data="client.transferTx"
+        type="tx"
+      />
+      <ClientTrafficStat
+        :transfer-data-current="client.transferRxCurrent"
+        :transfer-data="client.transferRx"
+        type="rx"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { storeToRefs } from 'pinia';
+
+import API from '@/services/api';
+import { useStore } from '@/store/store';
+
 import ClientName from '@/components/ClientName.vue';
 import ClientAddress from '@/components/ClientAddress.vue';
 import IconUpArrow from '@/components/icons/IconUpArrow.vue';
 import IconDownArrow from '@/components/icons/IconDownArrow.vue';
 import ClientTransfer from '@/components/ClientTransfer.vue';
+import ClientTrafficStat from '@/components/ClientTrafficStat.vue';
 
 import { useDateTime } from '@/composables/useDateTime';
 import { useTimeAgo } from '@/composables/useTimeAgo';
 import { useBytes } from '@/composables/useBytes';
-import API from '@/services/api';
 
 defineProps({
   client: {},
 });
 
+const store = useStore();
+const { uiTrafficStats } = storeToRefs(store);
+
 const { dateTime } = useDateTime();
 const { timeago } = useTimeAgo();
 const { bytes } = useBytes();
 
 const api = new API();
-
-
 </script>
diff --git a/webui/src/components/ClientName.vue b/webui/src/components/ClientName.vue
index b37f5302..984f2dfe 100644
--- a/webui/src/components/ClientName.vue
+++ b/webui/src/components/ClientName.vue
@@ -1,33 +1,51 @@
 <template>
   <div
-    class="text-gray-700 dark:text-neutral-200 group"
-    :title="'Created on ' + dateTime(new Date(client.createdAt))"
+    class="text-gray-700 dark:text-neutral-200 group text-sm md:text-base"
+    :title="$t('createdOn') + dateTime(new Date(client.createdAt))"
   >
-    <!-- Show -->
+    <!-- Input -->
     <input
       v-show="clientEditNameId === client.id"
-      :value="clientEditName"
-      @input="clientEditName = $event.target.value"
-      @keyup.enter="updateName(client)"
-      @keyup.escape="cancelEdit"
       :ref="'client-' + client.id + '-name'"
-      class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30"
+      v-model="clientEditName"
+      class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-full"
+      @keyup.escape="cancelEdit"
+      @keyup.enter="handleInputSubmit"
     />
+    <span v-show="clientEditNameId !== client.id" class="border-transparent">{{ client.name }}</span>
+
+    <!-- Button -->
     <span
       v-show="clientEditNameId !== client.id"
-      class="inline-block border-t-2 border-b-2 border-transparent"
-      >{{ client.name }}</span
+      class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity px-1 py-1"
+      @click="handleEditClick"
     >
+      <IconEdit />
+    </span>
+  </div>
+
+  <!-- <div class="text-gray-700 dark:text-neutral-200 group" :title="'Created on ' + dateTime(new Date(client.createdAt))">
+    <input
+      v-show="clientEditNameId === client.id"
+      :ref="'client-' + client.id + '-name'"
+      :value="clientEditName"
+      class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30"
+      @input="clientEditName = $event.target.value"
+      @keyup.enter="updateName(client)"
+      @keyup.escape="cancelEdit"
+    />
+    <span v-show="clientEditNameId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{
+      client.name
+    }}</span>
 
-    <!-- Edit -->
     <span
       v-show="clientEditNameId !== client.id"
-      @click="editName(client)"
       class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
+      @click="editName(client)"
     >
       <IconEdit />
     </span>
-  </div>
+  </div> -->
 </template>
 
 <script setup>
@@ -35,10 +53,16 @@ import { ref, nextTick } from 'vue';
 import { useDateTime } from '../composables/useDateTime';
 import IconEdit from './icons/IconEdit.vue';
 import API from '@/services/api';
+import { useStore } from '@/store/store';
 
-defineProps({
-  client: {},
-})
+const props = defineProps({
+  client: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useStore();
 
 const { dateTime } = useDateTime();
 
@@ -47,77 +71,33 @@ const clientEditNameId = ref(null);
 
 const api = new API();
 
-const updateName = (client) => {
-  // emit('update-client-name', client, clientEditName);
-  updateClientName(client, clientEditName.value);
+const cancelEdit = () => {
   clientEditName.value = null;
   clientEditNameId.value = null;
 };
 
-const cancelEdit = () => {
+const handleInputSubmit = () => {
+  updateClientName();
   clientEditName.value = null;
   clientEditNameId.value = null;
 };
 
-const editName = (client) => {
-  console.log(client);
-
-  clientEditName.value = client.name;
-  clientEditNameId.value = client.id;
+const handleEditClick = () => {
+  clientEditName.value = props.client.name;
+  clientEditNameId.value = props.client.id;
   nextTick(() => {
-    const clientNameRef = ['client-' + client.id + '-name'];
+    const clientNameRef = ['client-' + props.client.id + '-name'];
 
     if (clientNameRef.value) {
-      clientNameRef.value[0].select()
+      clientNameRef.value[0].select();
     }
   });
 };
 
-function updateClientName(client, name) {
-  api
-    .updateClientName({ clientId: client.id, name })
-    .catch((err) => alert(err.message || err.toString()));
-  // .finally(() => refresh().catch(console.error));
-}
-
-function updateClientAddress(client, address) {
+function updateClientName() {
   api
-    .updateClientAddress({ clientId: client.id, address })
-    .catch((err) => alert(err.message || err.toString()));
-  // .finally(() => refresh().catch(console.error));
+    .updateClientName({ clientId: props.client.id, name: clientEditName.value })
+    .catch((err) => alert(err.message || err.toString()))
+    .finally(() => store.refresh());
 }
-
-
-// import { useDateTime } from '../composables/useDateTime';
-// import IconEdit from './icons/IconEdit.vue';
-
-// export default {
-//   props: ['client', 'clientEditName', 'clientEditNameId'],
-//   setup() {
-//     const { dateTime } = useDateTime();
-//     return {
-//       dateTime,
-//       // other reactive properties
-//     };
-//   },
-//   methods: {
-//     updateClientName() {
-//       this.$emit('update-client-name', this.client, this.clientEditName);
-//       this.clientEditName = null;
-//       this.clientEditNameId = null;
-//     },
-//     cancelEdit() {
-//       this.clientEditName = null;
-//       this.clientEditNameId = null;
-//     },
-//     editName() {
-//       this.clientEditName = this.client.name;
-//       this.clientEditNameId = this.client.id;
-//       this.$nextTick(() => {
-//         this.$refs['client-' + this.client.id + '-name'][0].select();
-//       });
-//     },
-//   },
-//   components: { IconEdit },
-// };
 </script>
diff --git a/webui/src/components/ClientNewButton.vue b/webui/src/components/ClientNewButton.vue
index 1eeeca5d..4212348e 100644
--- a/webui/src/components/ClientNewButton.vue
+++ b/webui/src/components/ClientNewButton.vue
@@ -6,7 +6,7 @@
       @click="handleNewClient()"
     >
       <IconNew class="w-4 mr-2" />
-      <span class="text-sm">New</span>
+      <span class="text-sm">{{ $t('new') }}</span>
     </button>
   </div>
 </template>
diff --git a/webui/src/components/ClientTrafficStat.vue b/webui/src/components/ClientTrafficStat.vue
new file mode 100644
index 00000000..315ce38e
--- /dev/null
+++ b/webui/src/components/ClientTrafficStat.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px justify-end">
+    <div class="min-w-20 md:min-w-24">
+      <span class="flex gap-1" :title="$t('totalDownload') + bytes(transferData)">
+        <IconTX v-if="type === 'tx'" />
+        <IconRX v-if="type === 'rx'" />
+        <div>
+          <span class="text-gray-700 dark:text-neutral-200">{{ bytes(transferDataCurrent) }}/s</span>
+          <!-- Total -->
+          <br /><span class="font-regular" style="font-size: 0.85em">{{ bytes(transferData) }}</span>
+        </div>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBytes } from '@/composables/useBytes';
+
+import IconRX from '@/components/icons/IconRX.vue';
+import IconTX from '@/components/icons/IconTX.vue';
+
+const { bytes } = useBytes();
+
+defineProps({
+  transferData: {
+    type: Object,
+    default: null,
+  },
+  transferDataCurrent: {
+    type: Object,
+    default: null,
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+</script>
diff --git a/webui/src/components/Footer.vue b/webui/src/components/Footer.vue
index c9670bd6..575e13f2 100644
--- a/webui/src/components/Footer.vue
+++ b/webui/src/components/Footer.vue
@@ -1,11 +1,12 @@
 <template>
   <p v-cloak class="text-center m-10 text-gray-300 dark:text-neutral-600 text-xs">
-    Made by
-    <a target="_blank" class="hover:underline" href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a>
-    ·
-    <a class="hover:underline" href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a>
-    ·
-    <a class="hover:underline" href="https://github.com/wg-easy/wg-easy" target="_blank">GitHub</a>
+    <a class="hover:underline" target="_blank" href="https://github.com/wg-easy/wg-easy">WireGuard Easy</a> © 2021-2024
+    by <a class="hover:underline" target="_blank" href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> is
+    licensed under
+    <a class="hover:underline" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
+      >CC BY-NC-SA 4.0</a
+    >
+    · <a class="hover:underline" href="https://github.com/sponsors/WeeJeWel" target="_blank">{{ $t('donate') }}</a>
   </p>
 </template>
 
diff --git a/webui/src/components/Header.vue b/webui/src/components/Header.vue
index 27d69cc9..d10ac1e2 100644
--- a/webui/src/components/Header.vue
+++ b/webui/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col-reverse xxs:flex-row flex-auto items-center items-end gap-3">
+  <div class="flex flex-col-reverse xxs:flex-row flex-auto items-center items-end gap-3 mb-4">
     <h1 class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4">
       <img src="@/assets/img/logo.png" width="32" class="inline align-middle dark:bg mr-2" /><span class="align-middle"
         >WireGuard</span
@@ -33,21 +33,6 @@
       </span>
     </div>
   </div>
-  <!-- <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>
diff --git a/webui/src/components/ModalCreateClient.vue b/webui/src/components/ModalCreateClient.vue
index 669ce8fb..ad236e71 100644
--- a/webui/src/components/ModalCreateClient.vue
+++ b/webui/src/components/ModalCreateClient.vue
@@ -1,11 +1,31 @@
 <template>
   <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"
@@ -22,7 +42,7 @@
           </div>
           <div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
             <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
-              New Client
+              {{ $t('newClient') }}
             </h3>
             <div class="mt-2">
               <p class="text-sm text-gray-500">
@@ -44,21 +64,21 @@
           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()"
         >
-          Create
+          {{ $t('create') }}
         </button>
         <button
           v-else
           type="button"
           class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 dark:bg-neutral-400 text-base font-medium text-white dark:text-neutral-300 sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed"
         >
-          Create
+          {{ $t('create') }}
         </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="clientCreateShowModal = null"
         >
-          Cancel
+          {{ $t('cancel') }}
         </button>
       </div>
     </div>
diff --git a/webui/src/components/ModalDeleteClient.vue b/webui/src/components/ModalDeleteClient.vue
index ab43a318..6852fc36 100644
--- a/webui/src/components/ModalDeleteClient.vue
+++ b/webui/src/components/ModalDeleteClient.vue
@@ -3,10 +3,31 @@
     <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>
+    <!--
+      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"
+    -->
 
     <!-- This element is to trick the browser into centering the modal contents. -->
     <!-- TODO: Check if still relevant? -->
     <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"
@@ -23,12 +44,12 @@
           </div>
           <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
             <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200">
-              Delete Client
+              {{ $t('deleteClient') }}
             </h3>
             <div class="mt-2">
               <p class="text-sm text-gray-500 dark:text-neutral-300">
-                Are you sure you want to delete <strong>{{ clientToDelete.name }}</strong
-                >? This action cannot be undone.
+                {{ $t('deleteDialog1') }} <strong>{{ clientToDelete.name }}</strong
+                >? {{ $t('deleteDialog2') }}
               </p>
             </div>
           </div>
@@ -40,14 +61,14 @@
           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(clientToDelete)"
         >
-          Delete
+          {{ $t('deleteClient') }}
         </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="clientToDelete = null"
         >
-          Cancel
+          {{ $t('cancel') }}
         </button>
       </div>
     </div>
diff --git a/webui/src/components/UpdateNotification.vue b/webui/src/components/UpdateNotification.vue
index e620a00b..8e94cfff 100644
--- a/webui/src/components/UpdateNotification.vue
+++ b/webui/src/components/UpdateNotification.vue
@@ -1,9 +1,3 @@
-<script>
-export default {
-  props: ['latestRelease', 'currentRelease'],
-};
-</script>
-
 <template>
   <div
     v-if="latestRelease"
@@ -12,7 +6,7 @@ export default {
   >
     <div class="container mx-auto flex flex-row flex-auto items-center">
       <div class="flex-grow">
-        <p class="font-bold">There is an update available!</p>
+        <p class="font-bold">{{ $t('updateAvailable') }}</p>
         <p>{{ latestRelease.changelog }}</p>
       </div>
 
@@ -21,8 +15,23 @@ export default {
         target="_blank"
         class="p-3 rounded-md bg-white dark:bg-red-100 float-right font-sm font-semibold text-red-800 dark:text-red-600 flex-shrink-0 border-2 border-red-800 dark:border-red-600 hover:border-white dark:hover:border-red-600 hover:text-white dark:hover:text-red-100 hover:bg-red-800 dark:hover:bg-red-600 transition-all"
       >
-        Update →
+        {{ $t('update') }} →
       </a>
     </div>
   </div>
 </template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+defineProps({
+  latestRelease: {
+    type: Object,
+    required: true,
+  },
+  currentRelease: {
+    type: String,
+    required: true,
+  },
+});
+</script>
diff --git a/webui/src/components/icons/IconDelete.vue b/webui/src/components/icons/IconDelete.vue
index e09dee76..985951bc 100644
--- a/webui/src/components/icons/IconDelete.vue
+++ b/webui/src/components/icons/IconDelete.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    class="w-5"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
+  <svg class="w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
     <path
       fill-rule="evenodd"
       d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
diff --git a/webui/src/components/icons/IconEdit.vue b/webui/src/components/icons/IconEdit.vue
index 82a59606..92d670ad 100644
--- a/webui/src/components/icons/IconEdit.vue
+++ b/webui/src/components/icons/IconEdit.vue
@@ -1,7 +1,7 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100"
+    class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100 mb-[3px]"
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
diff --git a/webui/src/components/icons/IconRX.vue b/webui/src/components/icons/IconRX.vue
new file mode 100644
index 00000000..336ceb01
--- /dev/null
+++ b/webui/src/components/icons/IconRX.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    class="align-middle h-3 inline mt-0.5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
+
+<script setup></script>
diff --git a/webui/src/components/icons/IconTX.vue b/webui/src/components/icons/IconTX.vue
new file mode 100644
index 00000000..09e81c2c
--- /dev/null
+++ b/webui/src/components/icons/IconTX.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    class="align-middle h-3 inline mt-0.5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
+
+<script setup></script>
diff --git a/webui/src/services/api.js b/webui/src/services/api.js
index 8fc4f5a2..d938e819 100644
--- a/webui/src/services/api.js
+++ b/webui/src/services/api.js
@@ -40,7 +40,7 @@ export default class API {
     return res.slice(0, 2);
   }
 
-  async getuiTrafficStats() {
+  async getUiTrafficStats() {
     return this.call({
       method: 'get',
       path: '/ui-traffic-stats',
diff --git a/webui/src/store/store.js b/webui/src/store/store.js
index 5e57db87..2e69f2f6 100644
--- a/webui/src/store/store.js
+++ b/webui/src/store/store.js
@@ -24,6 +24,7 @@ export const useStore = defineStore('store', () => {
 
   const uiChartType = ref(0);
   const uiShowCharts = ref(localStorage.getItem('uiShowCharts') === '1');
+  const uiTrafficStats = ref(false);
 
   function login(e) {
     e.preventDefault();
@@ -180,6 +181,7 @@ export const useStore = defineStore('store', () => {
     prefersDarkScheme,
     uiChartType,
     uiShowCharts,
+    uiTrafficStats,
     login,
     logout,
     createClient,