Merge pull request #1 from lblk/ip-segment-selector-develop

add IpSegmentSelect function
2 years ago · bedb679eaf
10 changed files with 166 additions and 4 deletions
--- a/4
+++ b/4
@ -6,6 +6,7 @@ FROM docker.io/library/node:18-alpine AS build_node_modules
 # Copy Web UI
 COPY src/ /app/
 WORKDIR /app
+
 RUN npm ci --omit=dev &&\
    mv node_modules /node_modules

@ -23,6 +24,9 @@ COPY --from=build_node_modules /app /app
 # than what runs inside of docker.
 COPY --from=build_node_modules /node_modules /node_modules

+# only for china developer
+RUN npm config set registry https://registry.npmmirror.com && sed -i 's/dl-cdn.alpinelinux.org/mirrors.tuna.tsinghua.edu.cn/g' /etc/apk/repositories
+
 RUN \
    # Enable this to run `npm run serve`
    npm i -g nodemon &&\
--- a/src/lib/Server.js
+++ b/src/lib/Server.js
@ -210,6 +210,15 @@ module.exports = class Server {
        const { address } = await readBody(event);
        await WireGuard.updateClientAddress({ clientId, address });
        return { success: true };
+      }))
+      .put('/api/wireguard/client/:clientId/ipSegSelected', defineEventHandler(async (event) => {
+        const clientId = getRouterParam(event, 'clientId');
+        if (clientId === '__proto__' || clientId === 'constructor' || clientId === 'prototype') {
+          throw createError({ status: 403 });
+        }
+        const { ipSegSelected } = await readBody(event);
+        await WireGuard.updateClientIpSegSelected({ clientId, ipSegSelected });
+        return { success: true };
      }));

    // Static assets
--- a/src/lib/WireGuard.js
+++ b/src/lib/WireGuard.js
@ -105,13 +105,19 @@ PostDown = ${WG_POST_DOWN}
    for (const [clientId, client] of Object.entries(config.clients)) {
      if (!client.enabled) continue;

+      let allowedIPs = `${client.address}/32`;
+      if (client.ipSegSelected && client.ipSegSelected.length > 0) {
+        const joinedIpSeg = client.ipSegSelected.join(',');
+        allowedIPs += `,${joinedIpSeg}`;
+      }
+      debug(`allowedIPs:${allowedIPs}`);
      result += `

 # Client: ${client.name} (${clientId})
 [Peer]
 PublicKey = ${client.publicKey}
 ${client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
-}AllowedIPs = ${client.address}/32`;
+}AllowedIPs = ${allowedIPs}`;
    }

    debug('Config saving...');
@ -137,6 +143,8 @@ ${client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
      name: client.name,
      enabled: client.enabled,
      address: client.address,
+      ipSegSelected: client.ipSegSelected,
+      ipSegSelecting: client.ipSegSelecting,
      publicKey: client.publicKey,
      createdAt: new Date(client.createdAt),
      updatedAt: new Date(client.updatedAt),
@ -192,9 +200,25 @@ ${client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
    return client;
  }

+  async getAllCIDR() {
+    const config = await this.getConfig();
+    const clients = await this.getClients();
+    let allCIDRs = [];
+    clients.forEach(client => {
+      allCIDRs = allCIDRs.concat(client.ipSegSelected);
+    });
+    return allCIDRs.join(',');
+  }
+
  async getClientConfiguration({ clientId }) {
    const config = await this.getConfig();
    const client = await this.getClient({ clientId });
+    let allowedIPs = await this.getAllCIDR();
+    if (allowedIPs === "") {
+      allowedIPs = WG_ALLOWED_IPS;
+    } else {
+      allowedIPs = `${WG_ALLOWED_IPS},${allowedIPs}`;
+    }

    return `
 [Interface]
@ -206,7 +230,7 @@ ${WG_MTU ? `MTU = ${WG_MTU}\n` : ''}\
 [Peer]
 PublicKey = ${config.server.publicKey}
 ${client.preSharedKey ? `PresharedKey = ${client.preSharedKey}\n` : ''
-}AllowedIPs = ${WG_ALLOWED_IPS}
+}AllowedIPs = ${allowedIPs}
 PersistentKeepalive = ${WG_PERSISTENT_KEEPALIVE}
 Endpoint = ${WG_HOST}:${WG_PORT}`;
  }
@ -253,6 +277,8 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
      id,
      name,
      address,
+      ipSegSelected: [],
+      ipSegSelecting: [],
      privateKey,
      publicKey,
      preSharedKey,
@ -319,6 +345,21 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
    await this.saveConfig();
  }

+  async updateClientIpSegSelected({ clientId, ipSegSelected }) {
+    const client = await this.getClient({ clientId });
+
+    const ipSegRegex = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\/\d{1,2}$/;
+    for (const address of ipSegSelected) {
+      if (!ipSegRegex.test(address)) {
+        throw new ServerError(`Invalid Address: ${address}`, 400);
+      }
+    }
+    client.ipSegSelected = ipSegSelected;
+    client.updatedAt = new Date();
+
+    await this.saveConfig();
+  }
+
  // Shutdown wireguard
  async Shutdown() {
    await Util.exec('wg-quick down wg0').catch(() => { });
--- a/src/www/css/app.css
+++ b/src/www/css/app.css
@ -590,6 +590,53 @@ video {
  }
 }

+.multiselect--active:where(.dark, .dark *),
+    .multiselect__content-wrapper:where(.dark, .dark *),
+    .multiselect:where(.dark, .dark *),
+    .multiselect__input:where(.dark, .dark *),
+    .multiselect__tags:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(212 212 212 / var(--tw-text-opacity));
+}
+
+.multiselect--active:where(.dark, .dark *)::-moz-placeholder, .multiselect__content-wrapper:where(.dark, .dark *)::-moz-placeholder, .multiselect:where(.dark, .dark *)::-moz-placeholder, .multiselect__input:where(.dark, .dark *)::-moz-placeholder, .multiselect__tags:where(.dark, .dark *)::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+
+.multiselect--active:where(.dark, .dark *)::placeholder,
+    .multiselect__content-wrapper:where(.dark, .dark *)::placeholder,
+    .multiselect:where(.dark, .dark *)::placeholder,
+    .multiselect__input:where(.dark, .dark *)::placeholder,
+    .multiselect__tags:where(.dark, .dark *)::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+
+.multiselect__tag {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+
+.multiselect__tag-icon {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.multiselect__tag-icon:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
+.multiselect__content-wrapper,
+    .multiselect__content {
+  display: none;
+}
+
 .sr-only {
  position: absolute;
  width: 1px;
@ -622,6 +669,10 @@ video {
  position: relative;
 }

+.sticky {
+  position: sticky;
+}
+
 .inset-0 {
  inset: 0px;
 }
@ -1892,4 +1943,4 @@ video {

 .peer:checked ~ .peer-checked\:dark\:fill-neutral-400:where(.dark, .dark *) {
  fill: #a3a3a3;
-}
+}
--- a/src/www/css/vue-multiselect.min.css
+++ b/src/www/css/vue-multiselect.min.css
--- a/src/www/index.html
+++ b/src/www/index.html
@ -4,6 +4,7 @@
 <head>
  <title>WireGuard</title>
  <meta charset="utf-8"/>
+  <link href="./css/vue-multiselect.min.css" rel="stylesheet">
  <link href="./css/app.css" rel="stylesheet">
  <link rel="manifest" href="./manifest.json">
  <link rel="icon" type="image/png" href="./img/favicon.png">
@ -284,8 +285,13 @@
                      <div class="rounded-full w-4 h-4 m-1 bg-white"></div>
                    </div>

-                    <!-- Show QR-->
+                    <!-- Show Route Ip Segment -->
+                    <multiselect v-model="client.ipSegSelected" :options="client.ipSegSelecting" :multiple="true" placeholder="input router"
+                      id="ip-segment-selector" :taggable="true" @tag="addNewTag(client, $event)" @select="handleSelect(client, $event)"
+                      @remove="handleRemove(client, $event)">
+                    </multiselect>

+                    <!-- Show QR-->
                    <button :disabled="!client.downloadableConfig"
                      class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
                      :class="{
@ -586,6 +592,7 @@
  <script src="./js/vendor/vue-i18n.min.js"></script>
  <script src="./js/vendor/apexcharts.min.js"></script>
  <script src="./js/vendor/vue-apexcharts.min.js"></script>
+  <script src="./js/vendor/vue-multiselect.min.js"></script>
  <script src="./js/vendor/sha256.min.js"></script>
  <script src="./js/vendor/timeago.full.min.js"></script>
  <script src="./js/api.js"></script>
--- a/src/www/js/api.js
+++ b/src/www/js/api.js
@ -138,4 +138,12 @@ class API {
    });
  }

+  async updateClientIpSegSelected({ clientId, ipSegSelected }) {
+    return this.call({
+      method: 'put',
+      path: `/wireguard/client/${clientId}/ipSegSelected/`,
+      body: { ipSegSelected },
+    });
+  }
+
 }
--- a/src/www/js/app.js
+++ b/src/www/js/app.js
@ -46,6 +46,7 @@ new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
+    Multiselect: window.VueMultiselect.default,
  },
  i18n,
  data: {
@ -230,6 +231,21 @@ new Vue({
        return client;
      });
    },
+    addNewTag(client, newTag) {
+      const tag = newTag;
+      client.ipSegSelected.push(tag);
+      client.ipSegSelecting.push(tag);
+      const list = client.ipSegSelected;
+      this.updateClientIpSegSelected(client, list);
+    },
+    handleSelect(client, event) {
+      const list = client.ipSegSelected;
+      this.updateClientIpSegSelected(client, list);
+    },
+    handleRemove(client, event) {
+      const list = client.ipSegSelected;
+      this.updateClientIpSegSelected(client, list);
+    },
    login(e) {
      e.preventDefault();

@ -299,6 +315,11 @@ new Vue({
        .catch((err) => alert(err.message || err.toString()))
        .finally(() => this.refresh().catch(console.error));
    },
+    updateClientIpSegSelected(client, ipSegSelected) {
+      this.api.updateClientIpSegSelected({ clientId: client.id, ipSegSelected })
+        .catch((err) => alert(err.message || err.toString()))
+        .finally(() => this.refresh().catch(console.error));
+    },
    toggleTheme() {
      const themes = ['light', 'dark', 'auto'];
      const currentIndex = themes.indexOf(this.uiTheme);
--- a/src/www/js/vendor/vue-multiselect.min.js
+++ b/src/www/js/vendor/vue-multiselect.min.js
--- a/src/www/src/css/app.css
+++ b/src/www/src/css/app.css
@ -1,3 +1,22 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+@layer components {
+    .multiselect--active,
+    .multiselect__content-wrapper,
+    .multiselect,
+    .multiselect__input,
+    .multiselect__tags {
+      @apply dark:bg-neutral-600 dark:text-neutral-300 dark:placeholder:text-neutral-400;
+    }
+    .multiselect__tag {
+      @apply bg-red-800;
+    }
+    .multiselect__tag-icon {
+      @apply bg-red-800 hover:bg-red-700;
+    }
+    .multiselect__content-wrapper,
+    .multiselect__content {
+      @apply hidden;
+    }
+  }