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);
+        const { name, allowedIps } = await readBody(event);
-        await WireGuard.createClient({ name });
+        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++) {
+    if (allowedIps) {
-      const client = Object.values(config.clients).find((client) => {
+      address = allowedIps
-        return client.address === WG_DEFAULT_ADDRESS.replace('x', i);
+    } 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) {
+        if (!client) {
-        address = WG_DEFAULT_ADDRESS.replace('x', i);
+          address = `${WG_DEFAULT_ADDRESS.replace('x', i)}/32`;
-        break;
+          break;
+        }
       }
     }
 

src/www/index.html

@@ -112,9 +112,9 @@
                 <span class="max-md:hidden text-sm">{{$t("backup")}}</span>
               </a>
               <!-- New client -->
-              <button @click="clientCreate = true; clientCreateName = '';"
+              <button @click="clientCreate = true; clientCreateName = ''; clientCreateAllowedIps = '';"
-                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">
+                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 md:mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                <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" />
@@ -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>

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 })
+      this.api.createClient({ name, allowedIps })
-        .catch((err) => alert(err.message || err.toString()))
+        .catch(err => alert(err.message || err.toString()))
         .finally(() => this.refresh().catch(console.error));
     },
     deleteClient(client) {