From 5aab1243634d64fa66e817a9bc60532e955dc42d Mon Sep 17 00:00:00 2001
From: rui hildt <rui@mullvad.net>
Date: Thu, 15 Aug 2024 18:40:33 +0200
Subject: [PATCH] Add possibility to add a proxy manually

---
 package-lock.json                      | 17 +++++++++++
 package.json                           |  1 +
 src/components/Proxy/CustomProxies.vue | 39 ++++++++++++++++++++++++--
 src/helpers/socksProxy.ts              | 16 +++++++----
 4 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 772c1165..60a484aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "ipaddr.js": "^2.2.0",
         "naive-ui": "^2.39.0",
+        "tldts": "^6.1.39",
         "uuid": "^10.0.0",
         "vue-query": "^1.26.0",
         "vue-router": "^4.4.0"
@@ -16078,6 +16079,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tldts": {
+      "version": "6.1.39",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.39.tgz",
+      "integrity": "sha512-UCGXcPhYIUELc+FifEeDXYkoTWNU6iOEdM/Q5LsvkTz2SnpQ3q5onA+DiiZlR5YDskMhfK1YBQDeWL7PH9/miQ==",
+      "dependencies": {
+        "tldts-core": "^6.1.39"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.39",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.39.tgz",
+      "integrity": "sha512-+Qib8VaRq6F56UjP4CJXd30PI4s3hFumDywUlsbiEWoA8+lfAaWNTLr3e6/zZOgHzVyon4snHaybeFHd8C0j/A=="
+    },
     "node_modules/tmp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
diff --git a/package.json b/package.json
index e68527b6..9f35ca1d 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
   "dependencies": {
     "ipaddr.js": "^2.2.0",
     "naive-ui": "^2.39.0",
+    "tldts": "^6.1.39",
     "uuid": "^10.0.0",
     "vue-query": "^1.26.0",
     "vue-router": "^4.4.0"
diff --git a/src/components/Proxy/CustomProxies.vue b/src/components/Proxy/CustomProxies.vue
index 3cd1a42f..567f9ff8 100644
--- a/src/components/Proxy/CustomProxies.vue
+++ b/src/components/Proxy/CustomProxies.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { NCard, NCheckbox, NDivider, NSwitch, NTooltip } from 'naive-ui';
+import { NCard, NCheckbox, NDivider, NSwitch, NTooltip, NInput } from 'naive-ui';
+import { parse } from 'tldts';
+import { computed, ref } from 'vue';
 
 import Button from '@/components/Buttons/Button.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
@@ -30,6 +31,25 @@ const handleCustomProxySelect = (host: string) => {
   hostProxySelect.value = true;
   toggleLocations();
 };
+
+const customProxyDomain = ref('');
+const formError = ref('');
+
+const isValidDomain = (input: string) => {
+  return !!parse(input).domain;
+};
+
+const selectLocationForNewProxy = () => {
+  if (!isValidDomain(customProxyDomain.value)) {
+    formError.value = 'Please enter a valid domain name.';
+    return;
+  }
+
+  customProxy.value = parse(customProxyDomain.value).hostname!;
+  hostProxySelect.value = true;
+  toggleLocations();
+  formError.value = '';
+};
 </script>
 
 <template>
@@ -68,6 +88,21 @@ const handleCustomProxySelect = (host: string) => {
         <Button color="error" @click="removeCustomProxy(host)">Remove proxy</Button>
       </div>
     </div>
+
+    <div class="mb-3">
+      <n-divider />
+      <TitleCategory title="Add a proxy manually" />
+
+      <div class="flex">
+        <NInput
+          v-model:value="customProxyDomain"
+          placeholder="Enter domain name"
+          class="flex-grow mr-2"
+        />
+        <Button class="w-3/12" @click="selectLocationForNewProxy">Select location</Button>
+      </div>
+      <div v-if="formError" class="text-red-500 mt-2">{{ formError }}</div>
+    </div>
   </NCard>
 
   <NCard v-if="excludedHosts.length > 0" :bordered="false">
diff --git a/src/helpers/socksProxy.ts b/src/helpers/socksProxy.ts
index 0625f43d..ff2cbfff 100644
--- a/src/helpers/socksProxy.ts
+++ b/src/helpers/socksProxy.ts
@@ -1,4 +1,5 @@
 import ipaddr from 'ipaddr.js';
+import { getDomain } from 'tldts';
 
 import { RequestDetails, ProxyDetails } from '@/helpers/socksProxy.types';
 
@@ -32,12 +33,15 @@ const getHostProxyDetails = async (): Promise<ProxyDetails> => {
 export const getActiveTabDetails = async () => {
   const activeTab = await browser.tabs.query({ active: true });
 
-  return activeTab[0].url
-    ? {
-        host: new URL(activeTab[0].url).hostname,
-        protocol: new URL(activeTab[0].url).protocol,
-      }
-    : { host: '', protocol: '' };
+  if (activeTab[0].url) {
+    const activeURL = new URL(activeTab[0].url);
+
+    return {
+      host: getDomain(activeURL.hostname)!,
+      protocol: activeURL.protocol,
+    };
+  }
+  return { host: '', protocol: '' };
 };
 
 export const getActiveProxyDetails = async () => {