Merge pull request #1 from WeeJeWel/master

Recupération

README.md

@@ -84,16 +84,18 @@ These options can be configured by setting environment variables using `-e KEY="
 | `WG_HOST` | - | `vpn.myserver.com` | The public hostname of your VPN server. |
 | `WG_PORT` | `51820` | `12345` | The public UDP port of your VPN server. WireGuard will always listen on `51820` inside the Docker container. |
 | `WG_MTU` | `null` | `1420` | The MTU the clients will use. Server uses default WG MTU. |
-| `WG_PERSISTENT_KEEPALIVE` | `0` | `25` | Value in seconds to keep the "connection" open. |
+| `WG_PERSISTENT_KEEPALIVE` | `0` | `25` | Value in seconds to keep the "connection" open. If this value is 0, then connections won't be kept alive. |
 | `WG_DEFAULT_ADDRESS` | `10.8.0.x` | `10.6.0.x` | Clients IP address range. |
 | `WG_DEFAULT_DNS` | `1.1.1.1` | `8.8.8.8, 8.8.4.4` | DNS server clients will use. |
 | `WG_ALLOWED_IPS` | `0.0.0.0/0, ::/0` | `192.168.15.0/24, 10.0.1.0/24` | Allowed IPs clients will use. |
-| `WG_POST_UP` | `...` | `iptables ...` | See [config.js](https://github.com/WeeJeWel/wg-easy/blob/master/src/config.js#L19) for the default value. |
+| `WG_PRE_UP` | `...` | - | See [config.js](https://github.com/WeeJeWel/wg-easy/blob/master/src/config.js#L19) for the default value. |
-| `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/WeeJeWel/wg-easy/blob/master/src/config.js#L26) for the default value. |
+| `WG_POST_UP` | `...` | `iptables ...` | See [config.js](https://github.com/WeeJeWel/wg-easy/blob/master/src/config.js#L20) for the default value. |
+| `WG_PRE_DOWN` | `...` | - | See [config.js](https://github.com/WeeJeWel/wg-easy/blob/master/src/config.js#L27) for the default value. |
+| `WG_POST_DOWN` | `...` | `iptables ...` | See [config.js](https://github.com/WeeJeWel/wg-easy/blob/master/src/config.js#L28) for the default value. |
 
 > If you change `WG_PORT`, make sure to also change the exposed port.
 
-# Updating
+## Updating
 
 To update to the latest version, simply run:
 
@@ -103,4 +105,8 @@ docker rm wg-easy
 docker pull weejewel/wg-easy
 ```
 
-And then run the `docker run -d \ ...` command above again.
+And then run the `docker run -d \ ...` command above again.
+
+## Common Use Cases
+
+* [Using WireGuard-Easy with Pi-Hole](https://github.com/WeeJeWel/wg-easy/wiki/Using-WireGuard-Easy-with-Pi-Hole)

docker-compose.yml

@@ -13,6 +13,10 @@ services:
       # - WG_DEFAULT_DNS=1.1.1.1
       # - WG_MTU=1420
       # - WG_ALLOWED_IPS=192.168.15.0/24, 10.0.1.0/24
+      # - WG_PRE_UP=echo "Pre Up" > /etc/wireguard/pre-up.txt
+      # - WG_POST_UP=echo "Post Up" > /etc/wireguard/post-up.txt
+      # - WG_PRE_DOWN=echo "Pre Down" > /etc/wireguard/pre-down.txt
+      # - WG_POST_DOWN=echo "Post Down" > /etc/wireguard/post-down.txt
       
     image: weejewel/wg-easy
     container_name: wg-easy

docs/changelog.json

@@ -3,5 +3,6 @@
   "2": "You can now rename a client, and update the address. Enjoy!",
   "3": "Many improvements and small changes. Enjoy!",
   "4": "Now with pretty charts for client's network speed. Enjoy!",
-  "5": "Many small improvements & feature requests. Enjoy!"
+  "5": "Many small improvements & feature requests. Enjoy!",
+  "6": "Many small performance improvements & bug fixes. Enjoy!"
 }

src/config.js

@@ -16,6 +16,7 @@ module.exports.WG_DEFAULT_DNS = typeof process.env.WG_DEFAULT_DNS === 'string'
   : '1.1.1.1';
 module.exports.WG_ALLOWED_IPS = process.env.WG_ALLOWED_IPS || '0.0.0.0/0, ::/0';
 
+module.exports.WG_PRE_UP = process.env.WG_PRE_UP || '';
 module.exports.WG_POST_UP = process.env.WG_POST_UP || `
 iptables -t nat -A POSTROUTING -s ${module.exports.WG_DEFAULT_ADDRESS.replace('x', '0')}/24 -o eth0 -j MASQUERADE;
 iptables -A INPUT -p udp -m udp --dport 51820 -j ACCEPT;
@@ -23,4 +24,5 @@ iptables -A FORWARD -i wg0 -j ACCEPT;
 iptables -A FORWARD -o wg0 -j ACCEPT;
 `.split('\n').join(' ');
 
+module.exports.WG_PRE_DOWN = process.env.WG_PRE_DOWN || '';
 module.exports.WG_POST_DOWN = process.env.WG_POST_DOWN || '';

src/lib/Server.js

@@ -62,7 +62,7 @@ module.exports = class Server {
         req.session.authenticated = true;
         req.session.save();
 
-        debug(`New Session: ${req.session.id})`);
+        debug(`New Session: ${req.session.id}`);
       }))
 
       // WireGuard
@@ -99,7 +99,11 @@ module.exports = class Server {
         const { clientId } = req.params;
         const client = await WireGuard.getClient({ clientId });
         const config = await WireGuard.getClientConfiguration({ clientId });
-        const configName = client.name.replace(/[^a-zA-Z0-9_=+.-]/g, '-').replace(/(-{2,}|-$)/g, '-').replace(/-$/, '').substring(0, 32);
+        const configName = client.name
+          .replace(/[^a-zA-Z0-9_=+.-]/g, '-')
+          .replace(/(-{2,}|-$)/g, '-')
+          .replace(/-$/, '')
+          .substring(0, 32);
         res.header('Content-Disposition', `attachment; filename="${configName}.conf"`);
         res.header('Content-Type', 'text/plain');
         res.send(config);

src/lib/WireGuard.js

@@ -19,7 +19,9 @@ const {
   WG_DEFAULT_ADDRESS,
   WG_PERSISTENT_KEEPALIVE,
   WG_ALLOWED_IPS,
+  WG_PRE_UP,
   WG_POST_UP,
+  WG_PRE_DOWN,
   WG_POST_DOWN,
 } = require('../config');
 
@@ -94,7 +96,9 @@ module.exports = class WireGuard {
 PrivateKey = ${config.server.privateKey}
 Address = ${config.server.address}/24
 ListenPort = 51820
+PreUp = ${WG_PRE_UP}
 PostUp = ${WG_POST_UP}
+PreDown = ${WG_PRE_DOWN}
 PostDown = ${WG_POST_DOWN}
 `;
 
@@ -261,6 +265,8 @@ Endpoint = ${WG_HOST}:${WG_PORT}`;
     config.clients[clientId] = client;
 
     await this.saveConfig();
+
+    return client;
   }
 
   async deleteClient({ clientId }) {

src/package.json

@@ -1,5 +1,5 @@
 {
-  "release": 5,
+  "release": 6,
   "name": "wg-easy",
   "version": "1.0.0",
   "description": "",

src/www/index.html

@@ -11,11 +11,17 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
 </head>
 
+<style>
+  [v-cloak] {
+    display: none;
+  }
+</style>
+
 <body class="bg-gray-50">
 
   <div id="app">
 
-    <div class="container mx-auto max-w-3xl">
+    <div v-cloak class="container mx-auto max-w-3xl">
 
       <div v-if="authenticated === true">
         <span v-if="requiresPassword"
@@ -72,13 +78,8 @@
               class="relative overflow-hidden border-b border-gray-100 border-solid">
 
               <!-- Chart -->
-              <div class="absolute z-0 bottom-0 left-0 right-0" style="top: 60%;">
+              <div class="absolute z-0 bottom-0 left-0 right-0" style="width: 100%; height: 30%;">
-                <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferTxSeries">
+                <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.chartSeries">
-                </apexchart>
-              </div>
-              <div class="absolute z-0 top-0 left-0 right-0" style="bottom: 60%;">
-                <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferRxSeries"
-                  style="transform: scaleY(-1);">
                 </apexchart>
               </div>
 
@@ -101,7 +102,7 @@
                 <div class="flex-grow">
 
                   <!-- Name -->
-                  <div class="text-gray-700 group" :title="'Created at ' + dateTime(new Date(client.createdAt))">
+                  <div class="text-gray-700 group" :title="'Created on ' + dateTime(new Date(client.createdAt))">
 
                     <!-- Show -->
                     <input v-show="clientEditNameId === client.id" v-model="clientEditName"
@@ -154,7 +155,7 @@
                     </span>
 
                     <!-- Transfer TX -->
-                    <span v-if="client.transferTx":title="'Total Download: ' + bytes(client.transferTx)">
+                    <span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)">
                       ·
                       <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                         fill="currentColor">
@@ -179,7 +180,7 @@
 
                     <!-- Last seen -->
                     <span v-if="client.latestHandshakeAt"
-                      :title="'Last seen at ' + dateTime(new Date(client.latestHandshakeAt))">
+                      :title="'Last seen on ' + dateTime(new Date(client.latestHandshakeAt))">
                       · {{new Date(client.latestHandshakeAt) | timeago}}
                     </span>
                   </div>
@@ -465,7 +466,7 @@
 
     </div>
 
-    <p class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline"
+    <p v-cloak class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline"
         href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline"
         href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a class="hover:underline"
         href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p>

src/www/js/api.js

@@ -6,7 +6,7 @@
 class API {
 
   async call({ method, path, body }) {
-    const res = await fetch(`/api${path}`, {
+    const res = await fetch(`./api${path}`, {
       method,
       headers: {
         'Content-Type': 'application/json',

src/www/js/app.js

@@ -51,31 +51,36 @@ new Vue({
     chartOptions: {
       chart: {
         background: 'transparent',
-        type: 'area',
+        type: 'bar',
+        stacked: false,
         toolbar: {
           show: false,
         },
+        animations: {
+          enabled: false,
+        },
       },
-      fill: {
+      colors: [
-        type: 'gradient',
+        '#DDDDDD', // rx
-      },
+        '#EEEEEE', // tx
-      colors: ['#CCCCCC'],
+      ],
       dataLabels: {
         enabled: false,
       },
-      stroke: {
+      plotOptions: {
-        curve: 'smooth',
+        bar: {
-        width: 0,
+          horizontal: false,
+        },
       },
       xaxis: {
         labels: {
           show: false,
         },
         axisTicks: {
-          show: false,
+          show: true,
         },
         axisBorder: {
-          show: false,
+          show: true,
         },
       },
       yaxis: {
@@ -130,9 +135,9 @@ new Vue({
 
         if (!this.clientsPersist[client.id]) {
           this.clientsPersist[client.id] = {};
-          this.clientsPersist[client.id].transferRxHistory = Array(20).fill(0);
+          this.clientsPersist[client.id].transferRxHistory = Array(100).fill(0);
           this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
-          this.clientsPersist[client.id].transferTxHistory = Array(20).fill(0);
+          this.clientsPersist[client.id].transferTxHistory = Array(100).fill(0);
           this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
 
           this.clientsPersist[client.id].chartOptions = {
@@ -155,22 +160,20 @@ new Vue({
         this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
         this.clientsPersist[client.id].transferTxHistory.shift();
 
+        this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
+
         client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
-        client.transferTxSeries = [{
+        client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
+
+        client.chartOptions = this.clientsPersist[client.id].chartOptions;
+        client.chartSeries = [{
           name: 'tx',
           data: this.clientsPersist[client.id].transferTxHistory,
-        }];
+        }, {
-
-        client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
-        client.transferRxSeries = [{
           name: 'rx',
           data: this.clientsPersist[client.id].transferRxHistory,
         }];
 
-        this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
-
-        client.chartOptions = this.clientsPersist[client.id].chartOptions;
-
         return client;
       });
     },