First commit to add AllowedIPs field, form and logic.

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') {

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 });

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"

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',