Merge pull request #282 from WeeJeWel/master

Merge Master into Production
2025-01-09 22:45:35 +08:00 · 2022-06-12 23:06:25 +02:00 · 2022-06-12 23:06:25 +02:00 · 2935bfe354
commit 2935bfe354
parent 17d9b576c5 2abefa90eb
7 changed files with 53 additions and 40 deletions
--- a/README.md
+++ b/README.md
@ -93,7 +93,7 @@ These options can be configured by setting environment variables using `-e KEY="

 > If you change `WG_PORT`, make sure to also change the exposed port.

-# Updating
+## Updating

 To update to the latest version, simply run:

@ -104,3 +104,7 @@ docker pull weejewel/wg-easy
 ```

 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)
--- a/docs/changelog.json
+++ b/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!"
 }
--- a/src/lib/Server.js
+++ b/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);
--- a/src/package.json
+++ b/src/package.json
@ -1,5 +1,5 @@
 {
-  "release": 5,
+  "release": 6,
  "name": "wg-easy",
  "version": "1.0.0",
  "description": "",
--- a/src/www/index.html
+++ b/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%;">
-                <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferTxSeries">
-                </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);">
+              <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.chartSeries">
                </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>
--- a/src/www/js/api.js
+++ b/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',
--- a/src/www/js/app.js
+++ b/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: {
-        type: 'gradient',
-      },
-      colors: ['#CCCCCC'],
+      colors: [
+        '#DDDDDD', // rx
+        '#EEEEEE', // tx
+      ],
      dataLabels: {
        enabled: false,
      },
-      stroke: {
-        curve: 'smooth',
-        width: 0,
+      plotOptions: {
+        bar: {
+          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;
      });
    },