all settings implemented

martijnmichel · Feb 26, 2020 · 57958f2 · 57958f2
1 parent fa06ab3
commit 57958f2
Show file tree

Hide file tree

Showing 11 changed files with 1,664 additions and 61 deletions.
diff --git a/app-icon.png b/app-icon.png
diff --git a/app-splashscreen.png b/app-splashscreen.png
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0",
+    "@quasar/quasar-app-extension-icon-genie": "^1.1.3",
     "babel-eslint": "^10.0.1",
     "devtron": "^1.4.0",
     "electron": "^7.0.0",

diff --git a/quasar.conf.js b/quasar.conf.js
@@ -145,7 +145,7 @@ module.exports = function(ctx) {
 
     // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
     electron: {
-      bundler: "packager", // 'packager' or 'builder'
+      bundler: "builder", // 'packager' or 'builder'
 
       packager: {
         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

diff --git a/quasar.extensions.json b/quasar.extensions.json
@@ -0,0 +1,15 @@
+{
+  "@quasar/icon-genie": {
+    "minify_dev": "pngquant",
+    "minify_build": "pngcrush",
+    "cordova": {
+      "background_color": "#000074",
+      "splashscreen_type": "pure"
+    },
+    "build_always": false,
+    "__internal": {
+      "dev": {},
+      "build": {}
+    }
+  }
+}
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
@@ -24,6 +24,19 @@
         <q-toggle v-model="settings.cybersec" />
       </q-item-section>
     </q-item>
+    <q-item tag="label" v-ripple>
+      <q-item-section>
+        <q-item-label>Obfuscate</q-item-label>
+        <q-item-label caption
+          >When enabled, this feature will allow to bypass network traffic
+          sensors that aim to detect usage of protocol and log, throttle or
+          block it.</q-item-label
+        >
+      </q-item-section>
+      <q-item-section avatar>
+        <q-toggle v-model="settings.obfuscate" />
+      </q-item-section>
+    </q-item>
     <q-item tag="label" v-ripple>
       <q-item-section>
         <q-item-label>Kill switch</q-item-label>
@@ -46,6 +59,50 @@
         <q-toggle v-model="settings.notify" />
       </q-item-section>
     </q-item>
+    <q-item tag="label" v-ripple>
+      <q-item-section>
+        <q-item-label>Protocol</q-item-label>
+        <q-item-label caption>Sets the protocol to use.</q-item-label>
+      </q-item-section>
+      <q-item-section avatar>
+        <q-btn-toggle
+          v-model="settings.protocol"
+          toggle-color="primary"
+          :options="[
+            { label: 'TCP', value: 'TCP' },
+            { label: 'UDP', value: 'UDP' }
+          ]"
+        />
+      </q-item-section>
+    </q-item>
+    <q-item tag="label" v-ripple>
+      <q-item-section>
+        <q-item-label>Technology</q-item-label>
+        <q-item-label caption>Sets the technology to use.</q-item-label>
+      </q-item-section>
+      <q-item-section avatar>
+        <q-btn-toggle
+          v-model="settings.technology"
+          toggle-color="primary"
+          :options="[
+            { label: 'OpenVPN', value: 'OpenVPN' },
+            { label: 'NordLynx', value: 'NordLynx' }
+          ]"
+        />
+      </q-item-section>
+    </q-item>
+    <q-item tag="label" v-ripple v-if="!settings.cybersec">
+      <q-item-section>
+        <q-item-label>DNS</q-item-label>
+        <q-item-label caption
+          >Sets custom DNS servers. <br />
+          (Disabled when Cybersec is turned on.)</q-item-label
+        >
+      </q-item-section>
+      <q-item-section avatar>
+        <q-input v-model="settings.dns" outlined dense @blur="saveDNS()" />
+      </q-item-section>
+    </q-item>
   </q-list>
 </template>
 
@@ -76,18 +133,26 @@ export default {
     this.getSettings();
   },
   watch: {
-    "settings.autoconnect": function(val) {
-      exec(`nordvpn set autoconnect ${val}`, (err, stdout, stderr) => {
-        this.getSettings();
-      });
-    },
-    "settings.cybersec": function(val) {
-      exec(`nordvpn set cybersec ${val}`, (err, stdout, stderr) => {
-        this.getSettings();
-      });
+    settings: {
+      deep: true,
+      handler: function(val) {
+        _.each(val, (value, setting) => {
+          if (setting === "dns") return false;
+          if (value !== this.$store.state.settings[setting]) {
+            exec(`nordvpn set ${setting} ${value}`, (err, stdout, stderr) => {
+              this.getSettings();
+            });
+          }
+        });
+      }
     }
   },
   methods: {
+    saveDNS() {
+      exec(`nordvpn set dns ${this.settings.dns}`, (err, stdout, stderr) => {
+        this.getSettings();
+      });
+    },
     getSettings() {
       exec("nordvpn settings", (err, stdout, esterr) => {
         let settings = {};
@@ -100,7 +165,8 @@ export default {
           settings[
             line[0]
               .replace(/-/i, "")
-              .replace(" ", "")
+              .replace(/ /i, "")
+              .trim()
               .toLowerCase()
           ] = value;
         });

diff --git a/src/components/Status.vue b/src/components/Status.vue
@@ -56,7 +56,7 @@ export default {
       });
     },
     disconnect() {
-      if (this.status.Status === "Connected") {
+      if (this.status.status === "Connected") {
         exec("nordvpn disconnect", (err, stdout, esterr) => {
           this.getStatus();
         });

diff --git a/src/components/Terminal.vue b/src/components/Terminal.vue
@@ -13,9 +13,9 @@ export default {
       window.term.loadAddon(fitAddon);
       fitAddon.fit();
 
-      console.log(window.ptyProcess);
+      //console.log(window.ptyProcess);
 
-      window.ptyProcess.write("uname -a\r");
+      //window.ptyProcess.write("uname -a\r");
     });
   },
   methods: {}

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -24,6 +24,7 @@
       show-if-above
       bordered
       content-class="bg-grey-1"
+      :width="500"
     >
       <q-list>
         <q-item-label header class="text-grey-8">Settings</q-item-label>
@@ -35,9 +36,8 @@
       <div class="row">
         <div class="col-xs-11">
           <q-tabs v-model="tab" dense align="left" switch-indicator>
-            <q-tab name="mails" label="Mails" />
-            <q-tab name="alarms" label="Alarms" />
-            <q-tab name="movies" label="Movies" />
+            <q-tab name="terminal" label="Terminal" />
+            <q-tab name="connection" label="Connection" />
           </q-tabs>
         </div>
         <div class="col-xs-1 text-right">
@@ -50,18 +50,22 @@
 
       <div v-if="bottomNav">
         <q-tab-panels v-model="tab" animated>
-          <q-tab-panel name="mails" dense class="q-pa-xs">
+          <q-tab-panel name="terminal" dense class="q-pa-xs">
             <Terminal />
           </q-tab-panel>
 
-          <q-tab-panel name="alarms">
-            <div class="text-h6">Alarms</div>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
-          </q-tab-panel>
-
-          <q-tab-panel name="movies">
-            <div class="text-h6">Movies</div>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          <q-tab-panel name="connection" dense class="q-pa-xs">
+            <q-markup-table flat>
+              <tbody>
+                <tr
+                  v-for="(value, setting) in $store.state.status"
+                  v-bind:key="setting"
+                >
+                  <td class="text-subtitle2 text-capitalize">{{ setting }}</td>
+                  <td>{{ value }}</td>
+                </tr>
+              </tbody></q-markup-table
+            >
           </q-tab-panel>
         </q-tab-panels>
       </div>

diff --git a/src/statics/nordvpn-for-pc-windows-mac.png b/src/statics/nordvpn-for-pc-windows-mac.png