spcfox · mindst0rm · Jun 29, 2024 · Jun 29, 2024 · Jun 30, 2024
diff --git a/docs/changelog.json b/docs/changelog.json
@@ -1,3 +1,3 @@
 {
-  "1": "Initial version. Enjoy!"
+  "1.1": "Adding change allowedIPS :)"
 }
diff --git a/src/lib/Server.js b/src/lib/Server.js
@@ -171,6 +171,14 @@ module.exports = class Server {
         const { address } = req.body;
         return WireGuard.updateClientAddress({ clientId, address });
       }))
+      .put('/api/wireguard/client/:clientId/allowedips', Util.promisify(async (req, res) => {
+        const { clientId } = req.params;
+        if (clientId === '__proto__' || clientId === 'constructor' || clientId === 'prototype') {
+          res.end(403);
+        }
+        const { ips } = req.body;
+        return WireGuard.updateClientAllowedIPS({ clientId, ips });
+      }))
 
       .listen(PORT, WEBUI_HOST, () => {
         debug(`Listening on http://${WEBUI_HOST}:${PORT}`);

diff --git a/src/lib/WireGuard.js b/src/lib/WireGuard.js
@@ -143,13 +143,14 @@ H4 = ${config.server.h4}
     for (const [clientId, client] of Object.entries(config.clients)) {
       if (!client.enabled) continue;
 
+      let allowedips_adding = client.allowedIPs ? ',' + client.allowedIPs : '';
       result += `
 
 # Client: ${client.name} (${clientId})
 [Peer]
 PublicKey = ${client.publicKey}
 PresharedKey = ${client.preSharedKey}
-AllowedIPs = ${client.address}/32`;
+AllowedIPs = ${client.address}/32 ${allowedips_adding}`;
     }
 
     debug('Config saving...');
@@ -214,6 +215,7 @@ AllowedIPs = ${client.address}/32`;
           : new Date(Number(`${latestHandshakeAt}000`));
         client.transferRx = Number(transferRx);
         client.transferTx = Number(transferTx);
+        client.allowedIPs = allowedIps;
         client.persistentKeepalive = persistentKeepalive;
       });
 
@@ -365,4 +367,13 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
     await this.saveConfig();
   }
 
+  async updateClientAllowedIPS({ clientId, ips }) {
+    const client = await this.getClient({ clientId });
+
+    client.allowedIPs = ips;
+    client.updatedAt = new Date();
+
+    await this.saveConfig();
+  }
+
 };
diff --git a/src/www/css/app.css b/src/www/css/app.css
@@ -826,6 +826,10 @@ video {
   width: 5rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-4 {
   width: 1rem;
 }

diff --git a/src/www/index.html b/src/www/index.html
@@ -2,12 +2,13 @@
 <html>
 
 <head>
-  <title>WireGuard</title>
+  <title>AmneziaWG by M1NDST0RM</title>
   <link href="./css/app.css" rel="stylesheet">
   <link rel="manifest" href="./manifest.json">
   <link rel="icon" href="img/favicon.ico" sizes="any">
   <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>
   <meta name="apple-mobile-web-app-capable" content="yes">
 </head>
 <style>
@@ -16,8 +17,8 @@
   }
 </style>
 
-<body class="bg-gray-50 dark:bg-neutral-800">
-
+<body class="bg-white dark:bg-neutral-800">
+  <!-- <body class="bg-white"></body> -->
   <div id="app">
 
     <div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0">
@@ -36,7 +37,7 @@
         </span>
         <h1 class="text-4xl dark:text-neutral-200 font-medium mt-2 mb-2">
           <img src="./img/logo.svg" width="60" class="inline align-middle dark:bg" />
-          <span class="align-middle">AmneziaWG</span>
+          <span class="align-middle">AmneziaWG by M1NDST0RM</span>
         </h1>
         <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
 
@@ -92,8 +93,8 @@ <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
               <div class="relative p-5 z-10 flex flex-col md:flex-row justify-between">
                 <div class="flex items-center pb-2 md:pb-0">
                   <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
-                    <svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 20 20" fill="currentColor">
+                    <svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                      fill="currentColor">
                       <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                         clip-rule="evenodd" />
                     </svg>
@@ -163,6 +164,31 @@ <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
                           </svg>
                         </span>
                       </span>
+                      <br>
+                      <!-- AllowedIPS Client -->
+                      <span class="group block md:inline-block pb-1 md:pb-0">
+
+                        <!-- Show -->
+                        <input v-show="clientEditAllowedIPSId === client.allowedIPs" 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-64 h-6 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" />
+                        <span v-show="clientEditAllowedIPSId !== client.allowedIPs"
+                          class="inline-block border-t-2 border-b-2 border-transparent">AllowedIPS: {{client.allowedIPs}}</span>
+
+                        <!-- Edit -->
+                        <span v-show="clientEditAllowedIPSId !== client.AllowedIPS"
+                          @click="clientEditAllowedIPS = client.allowedIPs; clientEditAllowedIPSId = client.allowedIPs; 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>
 
                       <!-- Transfer TX -->
                       <span v-if="client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)">
@@ -318,8 +344,8 @@ <h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
                 <div class="sm:flex sm:items-start">
                   <div
                     class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10">
-                    <svg class="h-6 w-6 text-white" inline xmlns="http://www.w3.org/2000/svg"
-                      fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <svg class="h-6 w-6 text-white" 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" />
                     </svg>
@@ -429,15 +455,15 @@ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200" id
       <div v-if="authenticated === false">
         <h1 class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-center">
           <img src="./img/logo.svg" width="60" class="inline align-middle dark:bg" />
-          <span class="align-middle">AmneziaWG</span>
+          <span class="align-middle">AmneziaWG by M1NDST0RM</span>
         </h1>
 
         <form @submit="login"
           class="shadow rounded-md bg-white dark:bg-neutral-700 mx-auto w-64 p-5 overflow-hidden mt-10">
           <!-- Avatar -->
           <div class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-800 relative overflow-hidden">
-            <svg class="w-10 h-10 m-5 text-white dark:text-white" xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20" fill="currentColor">
+            <svg class="w-10 h-10 m-5 text-white dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+              fill="currentColor">
               <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
             </svg>
           </div>
@@ -477,6 +503,19 @@ <h1 class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-c
       </div>
 
     </div>
+    <footer style="
+      /* position: absolute;
+      bottom: 0; */
+      /* left: 50%; */
+      /* transform: translateX(-50%); */
+    " v-if="authenticated">
+      <p v-cloak class="text-center m-10 text-gray-300 text-sm flex items-center justify-center">
+        Разработка от &nbsp; &nbsp;
+        <i class="fa-brands fa-github fa-2x mx-1.5"></i>
+        &nbsp; &nbsp;
+        <a target="_blank" class="hover:underline text-xl" href="https://github.com/mindst0rm">M1NDST0RM</a>
+      </p>
+    </footer>
 
   </div>
 
@@ -491,4 +530,4 @@ <h1 class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-c
   <script src="./js/app.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/src/www/js/api.js b/src/www/js/api.js
@@ -131,4 +131,13 @@ class API {
     });
   }
 
+  async updateClientAllowedIPS({ clientId, ips }) {
+    return this.call({
+      method: 'put',
+      // path: `/wireguard/client/${clientId}/address/`,
+      path: `/wireguard/client/${clientId}/allowedips/`,
+      body: { ips },
+    });
+  }
+
 }
diff --git a/src/www/js/app.js b/src/www/js/app.js
@@ -5,7 +5,7 @@
 
 'use strict';
 
-const CHANGELOG_URL = 'https://raw.githubusercontent.com/spcfox/amnezia-wg-easy/production/docs/changelog.json';
+const CHANGELOG_URL = 'https://raw.githubusercontent.com/mindst0rm/amneziawg-web-ui/master/docs/changelog.json';
 
 function bytes(bytes, decimals, kib, maxunit) {
   kib = kib || false;
@@ -49,6 +49,8 @@ new Vue({
     clientEditNameId: null,
     clientEditAddress: null,
     clientEditAddressId: null,
+    clientEditAllowedIPS: null,
+    clientEditAllowedIPSId: null,
     qrcode: null,
 
     currentRelease: null,
@@ -250,6 +252,11 @@ new Vue({
         .catch((err) => alert(err.message || err.toString()))
         .finally(() => this.refresh().catch(console.error));
     },
+    updateClientAllowedIPS(client, ips) {
+      this.api.updateClientAllowedIPS({ clientId: client.id, ips })
+        .catch((err) => alert(err.message || err.toString()))
+        .finally(() => this.refresh().catch(console.error));
+    },
     toggleTheme() {
       if (this.isDark) {
         localStorage.theme = 'light';
-Original file line number
+Diff line change
@@ Expand Up / @@ -826,6 +826,10 @@ video { @@
       width: 5rem;
     }
+    .w-40 {
+      width: 10rem;
+    }
     .w-4 {
       width: 1rem;
     }
@@ Expand Down @@