wip

4 years ago · 91832c8e20
9 changed files with 398 additions and 328 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@ -35,10 +35,7 @@ jobs:
        password: ${{ secrets.DOCKER_PASSWORD }}
          
    # Set environment variables
-    - run: echo GH_BRANCH=${GITHUB_REF#refs/heads/} >> $GITHUB_ENV
-    - run: echo VERSION=$(cat package.json | jq -r .version) >> $GITHUB_ENV
-    - run: echo DOCKER_TAGS=$(cat package.json | jq -r .docker[\"$GH_BRANCH\"].tags) >> $GITHUB_ENV
-    - run: echo Branch ${{ env.GH_BRANCH }}, Tags ${{ env.DOCKER_TAGS }}
+    - run: echo RELEASE=$(cat ./src/package.json | jq -r .release) >> $GITHUB_ENV
    
    # Build & Publish
    - name: Build & Publish Docker Image
@ -46,4 +43,4 @@ jobs:
      with:
        push: true
        platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8
-        tags: weejewel/wg-easy:v${{ env.VERSION }}, weejewel/wg-easy:${{ env.DOCKER_TAGS }}
+        tags: weejewel/wg-easy:latest, weejewel/wg-easy:${{ env.RELEASE }}
--- a/README.md
+++ b/README.md
@ -80,3 +80,14 @@ These options can be configured in `docker-compose.yml` under `environment`.
 | `WG_ALLOWED_IPS` | `0.0.0.0/0, ::/0` | `192.168.15.0/24, 10.0.1.0/24` | Allowed IPs clients will use |

 > If you change `WG_PORT`, make sure to also change the exposed port.
+
+# Updating
+
+To update to the latest version, run:
+
+```bash
+docker-compose down
+docker-compose pull
+docker-compose up --detach --remove-orphans
+docker image prune
+```
--- a/package.json
+++ b/package.json
@ -4,13 +4,5 @@
    "build": "docker build --tag wg-easy .",
    "serve": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",
    "start": "docker run --env WG_HOST=0.0.0.0 --name wg-easy --cap-add=NET_ADMIN --cap-add=SYS_MODULE --sysctl=\"net.ipv4.conf.all.src_valid_mark=1\" --mount type=bind,source=\"$(pwd)\"/config,target=/etc/wireguard -p 51820:51820/udp -p 51821:51821/tcp wg-easy"
-  },
-  "docker": {
-    "production": {
-      "tags": "latest"
-    },
-    "staging": {
-      "tags": "beta"
-    }
  }
 }
--- a/src/config.js
+++ b/src/config.js
@ -1,5 +1,8 @@
 'use strict';

+const { release } = require('./package.json');
+
+module.exports.RELEASE = release;
 module.exports.PORT = process.env.PORT || 51821;
 module.exports.PASSWORD = process.env.PASSWORD;
 module.exports.WG_PATH = process.env.WG_PATH || '/etc/wireguard/';
--- a/src/lib/Server.js
+++ b/src/lib/Server.js
@ -12,6 +12,7 @@ const WireGuard = require('../services/WireGuard');

 const {
  PORT,
+  RELEASE,
  PASSWORD,
 } = require('../config');

@ -29,6 +30,10 @@ module.exports = class Server {
        saveUninitialized: true,
      }))

+      .get('/api/release', (Util.promisify(async () => {
+        return RELEASE;
+      })))
+
      // Authentication
      .get('/api/session', Util.promisify(async req => {
        const requiresPassword = !!process.env.PASSWORD;
--- a/src/package.json
+++ b/src/package.json
@ -1,4 +1,5 @@
 {
+  "release": 2,
  "name": "wg-easy",
  "version": "1.0.0",
  "description": "",
--- a/src/www/index.html
+++ b/src/www/index.html
@ -12,7 +12,11 @@
 </head>

 <body class="bg-gray-50">
-  <div id="app" class="container mx-auto">
+
+  <div id="app">
+
+    <div class="container mx-auto max-w-3xl">
+
      <div v-if="authenticated === true">
        <span v-if="requiresPassword"
          class="text-sm text-gray-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right" @click="logout">
@ -29,6 +33,21 @@
        </h1>
        <h2 class="text-sm text-gray-400 mb-10"></h2>

+        <div v-if="latestRelease" class="bg-red-800 p-4 text-white text-sm font-small mb-10 rounded-md shadow-lg"
+          :title="`v${currentRelease} → v${latestRelease.version}`">
+          <div class="container mx-auto flex flex-row flex-auto items-center">
+            <div class="flex-grow">
+              <p class="font-bold">There is an update available!</p>
+              <p>{{latestRelease.changelog}}</p>
+            </div>
+
+            <a href="https://github.com/WeeJeWel/wg-easy#updating" target="_blank"
+              class="p-3 rounded-md bg-white float-right font-sm font-semibold text-red-800 flex-shrink-0 border-2 border-red-800 hover:border-white hover:text-white hover:bg-red-800 transition-all">
+              Update →
+            </a>
+          </div>
+        </div>
+
        <div class="shadow-md rounded-lg bg-white overflow-hidden">
          <div class="flex flex-row flex-auto items-center p-3 px-5 border border-b-2 border-gray-100">
            <div class="flex-grow">
@ -39,7 +58,8 @@
                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" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                <span class="text-sm">New</span>
              </button>
@ -52,7 +72,8 @@
              <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">
-                <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" />
+                  <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>
                <img v-if="client.avatar" :src="client.avatar" class="w-10 rounded-full absolute top-0 left-0" />

@ -226,7 +247,8 @@
          <div class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center">
            <div class="bg-white rounded-md shadow-lg relative p-8">
              <button @click="qrcode = null" class="absolute right-4 top-4 text-gray-600 hover:text-gray-800">
-              <svg class="w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="w-8" 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="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
@ -414,7 +436,8 @@

      <div v-if="authenticated === null" class="text-gray-300 pt-24 pb-12">

-      <svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <svg class="w-5 animate-spin mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          fill="currentColor">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
@ -423,8 +446,11 @@

      </div>

+    </div>
+
    <p 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
@ -29,6 +29,13 @@ class API {
    return json;
  }

+  async getRelease() {
+    return this.call({
+      method: 'get',
+      path: '/release',
+    });
+  }
+
  async getSession() {
    return this.call({
      method: 'get',
--- a/src/www/js/app.js
+++ b/src/www/js/app.js
@ -22,6 +22,9 @@ new Vue({
    clientEditAddress: null,
    clientEditAddressId: null,
    qrcode: null,
+
+    currentRelease: null,
+    latestRelease: null,
  },
  methods: {
    dateTime: value => {
@ -155,5 +158,30 @@ new Vue({
    setInterval(() => {
      this.refresh().catch(console.error);
    }, 1000);
+
+    Promise.resolve().then(async () => {
+      const currentRelease = await this.api.getRelease();
+      const latestRelease = await fetch('https://weejewel.github.io/wg-easy/changelog.json')
+        .then(res => res.json())
+        .then(releases => {
+          const releasesArray = Object.entries(releases).map(([version, changelog]) => ({
+            version: parseInt(version, 10),
+            changelog,
+          }));
+          releasesArray.sort((a, b) => {
+            return b.version - a.version;
+          });
+
+          return releasesArray[0];
+        });
+
+      console.log(`Current Release: ${currentRelease}`);
+      console.log(`Latest Release: ${latestRelease.version}`);
+
+      if (currentRelease >= latestRelease.version) return;
+
+      this.currentRelease = currentRelease;
+      this.latestRelease = latestRelease;
+    }).catch(console.error);
  },
 });