From 047c53621072c2ef6c1167b04ef62f7576da9dec Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Sat, 15 Jun 2024 12:54:05 +0200
Subject: [PATCH] Update frontend

Co-authored-by: Peter Lewis <peter@peterlew.is>
Co-authored-by: Philip H <47042125+pheiduck@users.noreply.github.com>
---
 src/www/index.html | 25 +++++++++++++++++++++++++
 src/www/js/api.js  |  8 ++++++++
 src/www/js/app.js  |  7 +++++++
 3 files changed, 40 insertions(+)

diff --git a/src/www/index.html b/src/www/index.html
index 72044728..cbe8b4ff 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -226,6 +226,31 @@
                     <div v-if="uiTrafficStats"
                       class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px justify-end">
 
+                      <!-- Address6 -->
+                      <span class="group">
+
+                        <!-- Show -->
+                        <input v-show="clientEditAddress6Id === client.id" v-model="clientEditAddress6"
+                          v-on:keyup.enter="updateClientAddress6(client, clientEditAddress6); clientEditAddress6 = null; clientEditAddress6Id = null;"
+                          v-on:keyup.escape="clientEditAddress6 = null; clientEditAddress6Id = null;"
+                          :ref="'client-' + client.id + '-address6'"
+                          class="rounded border-2 border-gray-100 focus:border-gray-200 outline-none w-20 text-black" />
+                        <span v-show="clientEditAddress6Id !== client.id"
+                          class="inline-block border-t-2 border-b-2 border-transparent">{{client.address6}}</span>
+
+                        <!-- Edit -->
+                        <span v-show="clientEditAddress6Id !== client.id"
+                          @click="clientEditAddress6 = client.address6; clientEditAddress6Id = client.id; setTimeout(() => $refs['client-' + client.id + '-address6'][0].select(), 1);"
+                          class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
+                          <svg xmlns="http://www.w3.org/2000/svg"
+                            class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
+                            viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                          </svg>
+                        </span>
+                      </span>
+
                       <!-- Transfer TX -->
                       <div class="min-w-20 md:min-w-24" v-if="client.transferTx">
                         <span class="flex gap-1" :title="$t('totalDownload') + bytes(client.transferTx)">
diff --git a/src/www/js/api.js b/src/www/js/api.js
index 356164c5..27796f92 100644
--- a/src/www/js/api.js
+++ b/src/www/js/api.js
@@ -138,4 +138,12 @@ class API {
     });
   }
 
+  async updateClientAddress6({ clientId, address6 }) {
+    return this.call({
+      method: 'put',
+      path: `/wireguard/client/${clientId}/address6/`,
+      body: { address6 },
+    });
+  }
+
 }
diff --git a/src/www/js/app.js b/src/www/js/app.js
index 6745f698..025f1a57 100644
--- a/src/www/js/app.js
+++ b/src/www/js/app.js
@@ -63,6 +63,8 @@ new Vue({
     clientEditNameId: null,
     clientEditAddress: null,
     clientEditAddressId: null,
+    clientEditAddress6: null,
+    clientEditAddress6Id: null,
     qrcode: null,
 
     currentRelease: null,
@@ -299,6 +301,11 @@ new Vue({
         .catch((err) => alert(err.message || err.toString()))
         .finally(() => this.refresh().catch(console.error));
     },
+    updateClientAddress6(client, address6) {
+      this.api.updateClientAddress6({ clientId: client.id, address6 })
+        .catch((err) => alert(err.message || err.toString()))
+        .finally(() => this.refresh().catch(console.error));
+    },
     toggleTheme() {
       const themes = ['light', 'dark', 'auto'];
       const currentIndex = themes.indexOf(this.uiTheme);