Merge branch 'feature/s133-Split-Tunnel-inverse' into beta

# Conflicts: # ui/src/components/settings/settings-antitracker.vue
ivpn · Nov 10, 2023 · 428bb29 · 428bb29
2 parents 998e3d6 + 954626e
commit 428bb29
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 27 deletions.
diff --git a/ui/src/components/controls/control-link.vue b/ui/src/components/controls/control-link.vue
@@ -0,0 +1,34 @@
+<template>
+  <span>
+    <button class="link" v-on:click="shellOpenExternal(url)" :title="url">
+      {{ label }}
+    </button>
+  </span>
+</template>
+
+<script>
+const sender = window.ipcSender;
+
+export default {
+  props: {
+    label: String,
+    url: String,
+  },
+  methods: {
+    shellOpenExternal: (urlToOpen) => {
+      sender.shellOpenExternal(urlToOpen);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import "@/components/scss/constants";
+
+button.link {
+  @extend .noBordersTextBtn;
+  @extend .settingsLinkText;
+  font-size: inherit;
+}
+</style>
diff --git a/ui/src/components/settings/settings-antitracker.vue b/ui/src/components/settings/settings-antitracker.vue
@@ -5,7 +5,7 @@
     <div class="defColor" style="margin-bottom: 24px">
       When AntiTracker is enabled, IVPN blocks ads, malicious websites, and
       third-party trackers using our private DNS servers.
-      <button class="link" v-on:click="onLearnMoreLink">Learn more</button>
+      <linkCtrl label="Learn more" url="https://www.ivpn.net/antitracker" />
       about how IVPN AntiTracker is implemented.
     </div>
 
@@ -35,9 +35,10 @@
       AntiTracker experience.
     </div>
     <div class="fwDescription">
-      <button class="link" v-on:click="onAntitrackerBlockListLink">
-        Learn more
-      </button>
+      <linkCtrl
+        label="Learn more"
+        url="https://www.ivpn.net/knowledgebase/general/antitracker-plus-lists-explained/"
+      />
       about AntiTracker block lists.
     </div>
 
@@ -57,32 +58,27 @@
     <div class="fwDescription">
       To better understand how this may impact your experience please refer to
       our
-      <button class="link" v-on:click="onHardcodeLink">hardcore mode FAQ</button
-      >.
+      <linkCtrl
+        label="hardcore mode FAQ"
+        url="https://www.ivpn.net/antitracker/hardcore"
+      />.
     </div>
   </div>
 </template>
 
 <script>
 const sender = window.ipcSender;
 
+import linkCtrl from "@/components/controls/control-link.vue";
+
 export default {
+  components: {
+    linkCtrl,
+  },
   data: function () {
     return {};
   },
-  methods: {
-    onAntitrackerBlockListLink: () => {
-      sender.shellOpenExternal(
-        `https://www.ivpn.net/knowledgebase/general/antitracker-plus-lists-explained/`,
-      );
-    },
-    onLearnMoreLink: () => {
-      sender.shellOpenExternal(`https://www.ivpn.net/antitracker`);
-    },
-    onHardcodeLink: () => {
-      sender.shellOpenExternal(`https://www.ivpn.net/antitracker/hardcore`);
-    },
-  },
+  methods: {},
   computed: {
     isAntitrackerHardcore: {
       get() {

diff --git a/ui/src/components/settings/settings-splittunnel.vue b/ui/src/components/settings/settings-splittunnel.vue
@@ -158,9 +158,10 @@
           </div>
           <div class="settingsGrayLongDescriptionFont">
             For more information refer to the
-            <button class="link" v-on:click="onLearnMoreLink">
-              Split Tunnel Uses and Limitations
-            </button>
+            <linkCtrl
+              label="Split Tunnel Uses and Limitations"
+              url="https://www.ivpn.net/knowledgebase/general/split-tunnel-uses-and-limitations"
+            />
             webpage
           </div>
         </div>
@@ -411,6 +412,7 @@ import ComponentDialog from "@/components/component-dialog.vue";
 import binaryInfoControl from "@/components/controls/control-app-binary-info.vue";
 
 import spinner from "@/components/controls/control-spinner.vue";
+import linkCtrl from "@/components/controls/control-link.vue";
 
 function processError(e) {
   let errMes = e.toString();
@@ -434,6 +436,7 @@ export default {
     spinner,
     binaryInfoControl,
     ComponentDialog,
+    linkCtrl,
   },
 
   data: function () {
@@ -673,11 +676,6 @@ Do you want to enable Inverse mode for Split Tunnel?",
         }, 5000);
       }
     },
-    onLearnMoreLink: () => {
-      sender.shellOpenExternal(
-        `https://www.ivpn.net/knowledgebase/general/split-tunnel-uses-and-limitations`,
-      );
-    },
 
     updateAppsToShow() {
       // preparing list of apps to show (AppInfo fields + RunningApp)