Merge branch 'release' into 'master'

Release

See merge request mawthuq-software/wireguard-manager-gui!33

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:16
+
+WORKDIR /wireguard-manager-gui
+COPY . .
+RUN npm install
+RUN npm run build
+
+EXPOSE 3000
+CMD ["npm", "run", "start"]

README.md

@@ -4,6 +4,7 @@
 
 
 # Wireguard Manager GUI
+![Key Table](docs/images/keysTable.png)
 
 Wireguard Manager GUI is used to interact with multiple backend [Wireguard Manager and API servers](https://github.com/Mawthuq-Software/wireguard-manager-and-api).
 
@@ -13,10 +14,14 @@ Preview the front-end [here](https://mawthuq-wg-manager-gui.netlify.app/) (the b
 - [Wireguard Manager GUI](#wireguard-manager-gui)
   - [Content](#content)
   - [Deployment](#deployment)
+    - [Docker](#docker)
+      - [Starting the container](#starting-the-container)
+      - [Editing your configuration](#editing-your-configuration)
     - [Building from source](#building-from-source)
   - [Configuration](#configuration)
   - [Security](#security)
 ## Deployment
+![Key Generator](docs/images/generator.png)
 
 We recommend [building from source](#building-from-source) and running the server locally on your machine. Currently this project is not secure to run remotely as there is no authentication.
 
@@ -25,6 +30,21 @@ The easiest way to get up and running is by deploying to Vercel or Netlify. Tap
 **Important:** Despite this being the easiest method we do **not** recommend it as there is no form of authentication and anyone with your URL can perform functions on your API server.
 
 Proceed to the [configuration](#configuration) section.
+
+###  Docker
+Using docker is another quick way to get the project up and running on your machine.
+#### Starting the container
+1. ``git clone`` this repository
+2. ``cd`` into the new directory
+3. Copy the ``template.json`` and place it as ``config.json`` in the same directory
+4. Edit the [configuration](#configuration) 
+5. ``docker-compose up`` the project, this will build the docker image and run it. Use ``docker-compose -d`` to detach from the terminal. I recommend before detaching that you check everything builds fine.
+
+#### Editing your configuration
+After making any changes to ``config.json``, you will need to rebuild before bringing the docker-compose back up.
+
+1. ``docker-compose build``
+2. ``docker-compose up``. Use ``docker-compose -d`` to detach from the terminal.
 ### Building from source
 
 1. Git clone this repository to a local machine

components/KeyGeneratorForm/index.vue

@@ -253,6 +253,7 @@ export default {
             headers: {
               authorization: serverAuth,
             },
+            timeout: 3000
           }
         )
         const allowedIPs = res.data.allowedIPs

components/KeysSection/index.vue

@@ -39,9 +39,12 @@
     <div :class="outerModifyFormClass">
       <div :class="modifyFormClass">
         <ModifyKeyForm
+          :id="modifyFormID"
           :server-i-d="currentServerID"
           :key-i-d="currentKeyID"
           :key-enabled="keyEnabled"
+          :bw-limit="bwLimit"
+          :bw-used="bwUsed"
           @closeKeyGen="toggleModifyForm"
           @success-change="getKeys"
         />
@@ -71,7 +74,7 @@ export default {
     Input,
     KeyGeneratorForm,
     ModifyKeyForm,
-    Dropdown
+    Dropdown,
   },
   data() {
     return {
@@ -97,6 +100,9 @@ export default {
       currentServerID: '',
       currentKeyID: '',
       keyEnabled: '',
+      modifyFormID: 999999,
+      bwUsed: '-',
+      bwLimit: '-',
     }
   },
   computed: {
@@ -220,8 +226,10 @@ export default {
       // Hard code the array values as we know the positison
       this.currentKeyID = row[0]
       this.currentServerID = row[1]
+      this.getBWAPI(this.currentServerID, this.currentKeyID)
       this.keyEnabled = row[4]
       this.modifyFormOpen = true
+      this.modifyFormID++
     },
     toggleForm() {
       this.formOpen = false
@@ -299,6 +307,41 @@ export default {
         }
       }
     },
+    async getBWAPI(serverID, keyID) {
+      const serverURL = jsonVal.directAccess[serverID].url
+      const serverAuth = jsonVal.directAccess[serverID].auth
+      console.log('HERE')
+      try {
+        const res = await this.$axios.post(
+          serverURL + '/manager/subscription',
+          {
+            keyID: String(keyID),
+          },
+          {
+            headers: {
+              authorization: serverAuth,
+            },
+            timeout: 3000,
+          }
+        )
+        // const response = res.data.response
+
+        if (res.status === 202) {
+          this.bwLimit = res.data.bandwidthLimit
+          this.bwUsed = res.data.bandwidthUsed
+        }
+      } catch (err) {
+        if (err.response) {
+          this.infoLabel = err.response.data.response
+          console.log(err.response.data)
+          console.log(err.response.status)
+          console.log(err.response.headers)
+        } else {
+          this.infoLabel = 'Unable to connect to server.'
+        }
+        this.showBanner('error')
+      }
+    },
   },
 }
 </script>

components/ModifyKeyForm/index.vue

@@ -22,7 +22,12 @@
           </svg>
         </div>
       </div>
-
+      <div class="pt-2">
+        <p class="text-white font-bold">Bandwidth Used: {{ bwUsed }} MB</p>
+        <p class="text-white font-bold pt-1">
+          Bandwidth Limit: {{ bwLimit }} MB
+        </p>
+      </div>
       <div class="pt-4">
         <Input
           :placeholder="'(0 for unlimited)'"
@@ -83,6 +88,14 @@ export default {
       type: String,
       default: '',
     },
+    bwLimit: {
+      type: String,
+      default: '',
+    },
+    bwUsed: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -168,7 +181,6 @@ export default {
     },
     updateBW(bw) {
       this.bw = bw
-      console.log(this.keyEnabled, 'SSSS')
     },
     sleep(ms) {
       return new Promise((resolve) => {
@@ -208,6 +220,7 @@ export default {
             headers: {
               authorization: serverAuth,
             },
+            timeout: 3000,
           }
         )
 
@@ -249,6 +262,7 @@ export default {
             headers: {
               authorization: serverAuth,
             },
+            timeout: 3000,
           }
         )
         const response = res.data.response
@@ -283,6 +297,7 @@ export default {
             authorization: serverAuth,
             'Content-Type': 'application/json',
           },
+          timeout: 3000,
           data: {
             keyID: String(this.keyID),
           },
@@ -328,6 +343,7 @@ export default {
             headers: {
               authorization: serverAuth,
             },
+            timeout: 3000,
           }
         )
         const response = res.data.response

docker-compose.yml

@@ -0,0 +1,8 @@
+version: '3.8'
+
+services:
+  WGGUI:
+    image: mawthuq-wireguard-manager-gui:latest
+    build: .
+    ports:
+      - "3000:3000"

nuxt.config.js

@@ -34,6 +34,9 @@ export default {
     '@nuxtjs/tailwindcss',
   ],
 
+  server: {
+    host: '0.0.0.0', // default: localhost
+  },
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: ['@nuxtjs/axios'],