Add possibility to add a proxy manually

mullvad · Aug 16, 2024 · e2a995a · e2a995a
1 parent 6dbaa5d
commit e2a995a
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -1,13 +1,17 @@
 <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';
 
 import useSocksProxy from '@/composables/useSocksProxy';
 import useLocations from '@/composables/useLocations';
 
+const customProxyDomain = ref('');
+const formError = ref('');
+
 const { customProxy, hostProxySelect, toggleLocations } = useLocations();
 
 // For some reason importing `hostProxiesDetails` directly from useStore()
@@ -30,43 +34,80 @@ const handleCustomProxySelect = (host: string) => {
   hostProxySelect.value = true;
   toggleLocations();
 };
+
+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 = '';
+  customProxyDomain.value = '';
+};
 </script>
 
 <template>
-  <NCard v-if="proxies.length > 0" :bordered="false" class="mb-4">
+  <NCard :bordered="false" class="mb-4">
     <TitleCategory title="Custom proxies" />
-    <div v-for="{ host, proxyDetails } in proxies" :key="host" :bordered="false" class="mb-4">
-      <n-divider />
-      <div class="flex justify-between">
-        <h1 class="font-semibold text-lg mb-2 text-gray-200">{{ host }}</h1>
-        <n-tooltip v-if="proxyDetails.server">
-          <template #trigger>
-            <n-switch :value="proxyDetails.socksEnabled" @update-value="toggleCustomProxy(host)" />
-          </template>
-          <span> {{ proxyDetails.socksEnabled ? 'Proxy enabled' : 'Proxy disabled' }}</span>
-        </n-tooltip>
-      </div>
+    <div v-if="proxies.length > 0">
+      <div v-for="{ host, proxyDetails } in proxies" :key="host" :bordered="false" class="mb-4">
+        <n-divider />
+        <div class="flex justify-between">
+          <h1 class="font-semibold text-lg mb-2 text-gray-200">{{ host }}</h1>
+          <n-tooltip v-if="proxyDetails.server">
+            <template #trigger>
+              <n-switch
+                :value="proxyDetails.socksEnabled"
+                @update-value="toggleCustomProxy(host)"
+              />
+            </template>
+            <span> {{ proxyDetails.socksEnabled ? 'Proxy enabled' : 'Proxy disabled' }}</span>
+          </n-tooltip>
+        </div>
+
+        <div v-if="proxyDetails.server" class="mb-3">
+          <h1>{{ proxyDetails.country }}, {{ proxyDetails.city }}</h1>
+          <ul class="mb-2">
+            <li>Proxy Server: {{ proxyDetails.server }}</li>
+            <li>
+              Proxy DNS
+              <n-checkbox
+                size="large"
+                :checked="proxyDetails.proxyDNS"
+                :focusable="false"
+                @update-checked="toggleCustomProxyDNS(host)"
+              />
+            </li>
+          </ul>
+        </div>
 
-      <div v-if="proxyDetails.server" class="mb-3">
-        <h1>{{ proxyDetails.country }}, {{ proxyDetails.city }}</h1>
-        <ul class="mb-2">
-          <li>Proxy Server: {{ proxyDetails.server }}</li>
-          <li>
-            Proxy DNS
-            <n-checkbox
-              size="large"
-              :checked="proxyDetails.proxyDNS"
-              :focusable="false"
-              @update-checked="toggleCustomProxyDNS(host)"
-            />
-          </li>
-        </ul>
+        <div class="flex justify-between">
+          <Button @click="handleCustomProxySelect(host)">Select location</Button>
+          <Button color="error" @click="removeCustomProxy(host)">Remove proxy</Button>
+        </div>
       </div>
+    </div>
 
-      <div class="flex justify-between">
-        <Button @click="handleCustomProxySelect(host)">Select location</Button>
-        <Button color="error" @click="removeCustomProxy(host)">Remove proxy</Button>
+    <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>
 

diff --git 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 () => {