From 7ca165850325a1918a04c68ed234b7c1bfcb22af Mon Sep 17 00:00:00 2001
From: RobHold <robhold@protonmail.com>
Date: Tue, 29 Oct 2024 23:55:38 +0700
Subject: [PATCH] First commit to add AllowedIPs field, form and logic.

---
 src/lib/Server.js    |  9 +++++++++
 src/lib/WireGuard.js | 11 ++++++++++-
 src/www/index.html   | 25 ++++++++++++++++++++++++-
 src/www/js/api.js    |  8 ++++++++
 4 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/lib/Server.js b/src/lib/Server.js
index da2f6c9d..bd79a03c 100644
--- a/src/lib/Server.js
+++ b/src/lib/Server.js
@@ -303,6 +303,15 @@ module.exports = class Server {
         await WireGuard.updateClientAddress({ clientId, address });
         return { success: true };
       }))
+      .put('/api/wireguard/client/:clientId/allowedIPs', defineEventHandler(async (event) => {
+        const clientId = getRouterParam(event, 'clientId');
+        if (clientId === '__proto__' || clientId === 'constructor' || clientId === 'prototype') {
+          throw createError({ status: 403 });
+        }
+        const { address } = await readBody(event);
+        await WireGuard.updateClientAllowedIPs({ clientId, allowedIPs });
+        return { success: true };
+      }))
       .put('/api/wireguard/client/:clientId/expireDate', defineEventHandler(async (event) => {
         const clientId = getRouterParam(event, 'clientId');
         if (clientId === '__proto__' || clientId === 'constructor' || clientId === 'prototype') {
diff --git a/src/lib/WireGuard.js b/src/lib/WireGuard.js
index 8ce325f7..411954cd 100644
--- a/src/lib/WireGuard.js
+++ b/src/lib/WireGuard.js
@@ -120,7 +120,7 @@ PostDown = ${WG_POST_DOWN}
 [Peer]
 PublicKey = ${client.publicKey}
 ${client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
-}AllowedIPs = ${client.address}/32`;
+}AllowedIPs = ${client.address}/32, ${client.allowedIPs}`;
     }
 
     debug('Config saving...');
@@ -344,6 +344,15 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
 
     await this.saveConfig();
   }
+// ip is an array
+  async updateClientAllowedIPs({ clientId, allowedIPs }) {
+    const client = await this.getClient({ clientId });
+
+    client.allowedIPs = allowedIPs.toString();
+    client.updatedAt = new Date();
+
+    await this.saveConfig();
+  }
 
   async updateClientAddress({ clientId, address }) {
     const client = await this.getClient({ clientId });
diff --git a/src/www/index.html b/src/www/index.html
index 03f93565..5594ee67 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -205,8 +205,31 @@
                           </svg>
                         </span>
                       </div>
-                      <!-- Address -->
+                      <!--AllowedIPs-->
                       <div class=" block md:inline-block pb-1 md:pb-0 text-gray-500 dark:text-neutral-400 text-xs">
+                        <span class="group">
+                          <!-- Show -->
+                          <input v-show="clientEditAllowedIPsId === client.id" v-model="clientEditAllowedIPs"
+                            v-on:keyup.enter="updateClientAllowedIPs(client, clientEditAllowedIPs); clientEditAllowedIPs = null; clientEditAllowedIPsId = null;"
+                            v-on:keyup.escape="clientEditAllowedIPs = null; clientEditAllowedIPsId = null;"
+                            :ref="'client-' + client.id + '-allowedIPs'"
+                            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="clientEditAllowedIPsId !== client.id"
+                            class="inline-block ">{{client.allowedIPs}}</span>
+
+                          <!-- Edit -->
+                          <span v-show="clientEditAllowedIPsId !== client.id"
+                            @click="clientEditAllowedIPs = client.allowedIPs; clientEditAllowedIPsId = client.id; setTimeout(() => $refs['client-' + client.id + '-allowedIPs'][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>
+                        <!-- Address -->
                         <span class="group">
                           <!-- Show -->
                           <input v-show="clientEditAddressId === client.id" v-model="clientEditAddress"
diff --git a/src/www/js/api.js b/src/www/js/api.js
index 7b836d37..292dc14d 100644
--- a/src/www/js/api.js
+++ b/src/www/js/api.js
@@ -169,6 +169,14 @@ class API {
     });
   }
 
+  async updateClientAllowedIPs({ clientId, allowedIPs }) {
+    return this.call({
+      method: 'put',
+      path: `/wireguard/client/${clientId}/allowedIPs/`,
+      body: { allowedIPs },
+    });
+  }
+
   async updateClientExpireDate({ clientId, expireDate }) {
     return this.call({
       method: 'put',