add allowed IPs to client creation

src/lib/Server.js

@@ -128,9 +128,9 @@ module.exports = class Server {
         res.header('Content-Type', 'text/plain');
         res.send(config);
       }))
-      .post('/api/wireguard/client', Util.promisify(async (req) => {
+      .post('/api/wireguard/client', Util.promisify(async req => {
-        const { name } = req.body;
+        const { name, allowedIps } = req.body;
-        return WireGuard.createClient({ name });
+        return WireGuard.createClient({ name, allowedIps });
       }))
       .delete('/api/wireguard/client/:clientId', Util.promisify(async (req) => {
         const { clientId } = req.params;

src/lib/WireGuard.js

@@ -111,7 +111,7 @@ PostDown = ${WG_POST_DOWN}
 [Peer]
 PublicKey = ${client.publicKey}
 PresharedKey = ${client.preSharedKey}
-AllowedIPs = ${client.address}/32`;
+AllowedIPs = ${client.address}`;
     }
 
     debug('Config saving...');
@@ -219,7 +219,7 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
     });
   }
 
-  async createClient({ name }) {
+  async createClient({ name, allowedIps }) {
     if (!name) {
       throw new Error('Missing: Name');
     }
@@ -230,16 +230,20 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
     const publicKey = await Util.exec(`echo ${privateKey} | wg pubkey`);
     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

@@ -62,8 +62,8 @@
               <p class="text-2xl font-medium dark:text-neutral-200">{{$t("clients")}}</p>
             </div>
             <div class="flex-shrink-0">
-              <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 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 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 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"
@@ -347,6 +347,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

@@ -79,11 +79,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

@@ -43,6 +43,7 @@ new Vue({
     clientDelete: null,
     clientCreate: null,
     clientCreateName: '',
+    clientCreateAllowedIps: '',
     clientEditName: null,
     clientEditNameId: null,
     clientEditAddress: null,
@@ -217,10 +218,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) {