add allowed IPs to client creation

src/lib/Server.js

@@ -191,8 +191,8 @@ module.exports = class Server {
         return config;
       }))
       .post('/api/wireguard/client', defineEventHandler(async (event) => {
-        const { name } = await readBody(event);
-        await WireGuard.createClient({ name });
+        const { name, allowedIps } = await readBody(event);
+        await WireGuard.createClient({ name, allowedIps });
         return { success: true };
       }))
       .delete('/api/wireguard/client/:clientId', defineEventHandler(async (event) => {

src/lib/WireGuard.js

@@ -225,7 +225,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     });
   }
 
-  async createClient({ name }) {
+  async createClient({ name, allowedIps }) {
     if (!name) {
       throw new Error('Missing: Name');
     }
@@ -238,16 +238,20 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     });
     const preSharedKey = await Util.exec('wg genpsk');
 
-    // Calculate next IP
     let address;
-    for (let i = 2; i < 255; i++) {
-      const client = Object.values(config.clients).find((client) => {
-        return client.address === WG_DEFAULT_ADDRESS.replace('x', i);
-      });
+    if (allowedIps) {
+      address = allowedIps
+    } else {
+      // Calculate next IP
+      for (let i = 2; i < 255; i++) {
+        const client = Object.values(config.clients).find(client => {
+          return client.address.includes(WG_DEFAULT_ADDRESS.replace('x', i));
+        });
 
-      if (!client) {
-        address = WG_DEFAULT_ADDRESS.replace('x', i);
-        break;
+        if (!client) {
+          address = `${WG_DEFAULT_ADDRESS.replace('x', i)}/32`;
+          break;
+        }
       }
     }
 

src/www/index.html

@@ -42,7 +42,7 @@
                 <path stroke-linecap="round" stroke-linejoin="round"
                   d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
               </svg>
-              <svg v-else xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" 
+              <svg v-else xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                 class="w-5 h-5 fill-gray-600 dark:fill-neutral-400">
                 <path
                   d="M12,2.2c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S17.4,2.2,12,2.2z M3.8,12c0-4.5,3.7-8.2,8.2-8.2v16.5C7.5,20.2,3.8,16.5,3.8,12z" />
@@ -112,9 +112,9 @@
                 <span class="max-md:hidden text-sm">{{$t("backup")}}</span>
               </a>
               <!-- New client -->
-              <button @click="clientCreate = true; clientCreateName = '';"
-                class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition">
-                <svg class="w-4 md:mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+              <button @click="clientCreate = true; clientCreateName = ''; clientCreateAllowedIps = '';"
+                class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 border-2 border-gray-100 py-2 px-4 rounded inline-flex items-center transition">
+                <svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                   stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                     d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
@@ -224,7 +224,7 @@
                           </svg>
                           {{client.transferTxCurrent | bytes}}/s
                         </span>
-                        
+
                         <!-- Inline Transfer RX -->
                         <span v-if="!uiTrafficStats && client.transferRx" class="whitespace-nowrap" :title="$t('totalUpload') + bytes(client.transferRx)">
                           ·
@@ -452,6 +452,12 @@
                           type="text" v-model.trim="clientCreateName" :placeholder="$t('name')" />
                       </p>
                     </div>
+                    <div class="mt-2">
+                      <p class="text-sm text-gray-500">
+                        <input class="rounded p-2 border-2 border-gray-100 focus:border-gray-200 outline-none w-full"
+                          type="text" v-model.trim="clientCreateAllowedIps" placeholder="Allowed IPs (optional)" />
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -614,4 +620,4 @@
   <script src="./js/app.js"></script>
 </body>
 
-</html>
+</html>

src/www/js/api.js

@@ -93,11 +93,11 @@ class API {
     })));
   }
 
-  async createClient({ name }) {
+  async createClient({ name, allowedIps }) {
     return this.call({
       method: 'post',
       path: '/wireguard/client',
-      body: { name },
+      body: { name, allowedIps },
     });
   }
 

src/www/js/app.js

@@ -59,6 +59,7 @@ new Vue({
     clientDelete: null,
     clientCreate: null,
     clientCreateName: '',
+    clientCreateAllowedIps: '',
     clientEditName: null,
     clientEditNameId: null,
     clientEditAddress: null,
@@ -268,10 +269,11 @@ new Vue({
     },
     createClient() {
       const name = this.clientCreateName;
+      const allowedIps = this.clientCreateAllowedIps;
       if (!name) return;
 
-      this.api.createClient({ name })
-        .catch((err) => alert(err.message || err.toString()))
+      this.api.createClient({ name, allowedIps })
+        .catch(err => alert(err.message || err.toString()))
         .finally(() => this.refresh().catch(console.error));
     },
     deleteClient(client) {