Skip to content

Commit

Permalink
Add support for no proxying in Options
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruihildt
ruihildt committed Oct 17, 2024
1 parent bcf7b26 commit 4d773ac
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 53 deletions.
2 changes: 1 addition & 1 deletion src/components/Buttons/Button.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const classes = computed(() => {
</script>

<template>
<component :is="type" :href="href" class="btn" :class="classes">
<component :is="type" :href="href" class="btn whitespace-nowrap" :class="classes">
<slot></slot>
</component>
</template>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Buttons/__snapshots__/Button.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Button should render a blue button 1`] = `
<button
class="btn bg-blue text-white"
class="btn whitespace-nowrap bg-blue text-white"
>
Knapp
Expand All @@ -12,7 +12,7 @@ exports[`Button should render a blue button 1`] = `

exports[`Button should render a button 1`] = `
<button
class="btn"
class="btn whitespace-nowrap"
>
Knapp
Expand All @@ -22,7 +22,7 @@ exports[`Button should render a button 1`] = `

exports[`Button should render an a tag 1`] = `
<a
class="btn"
class="btn whitespace-nowrap"
href="https://www.mullvad.net"
>
Expand Down
156 changes: 111 additions & 45 deletions src/components/Proxy/CustomProxies.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { computed, ref } from 'vue';
import { NCard, NCheckbox, NDivider, NSwitch, NTooltip, NInput } from 'naive-ui';
import Button from '@/components/Buttons/Button.vue';
import IconLabel from '@/components/IconLabel.vue';
import SplitButton from '@/components/Buttons/SplitButton.vue';
import TitleCategory from '@/components/TitleCategory.vue';
import useSocksProxy from '@/composables/useSocksProxy';
Expand All @@ -16,81 +18,145 @@ const {
allowProxy,
excludedHosts,
hostProxiesDetails,
neverProxyHost,
removeCustomProxy,
toggleCustomProxy,
toggleCustomProxyDNS,
} = useSocksProxy();
const proxies = computed(() =>
Object.entries(hostProxiesDetails.value).map(([host, proxy]) => ({ host, proxyDetails: proxy })),
);
const manualProxyDomain = ref('');
const manualProxyDomainError = ref(false);
const combinedHosts = computed(() => {
const allHosts = [...Object.keys(hostProxiesDetails.value), ...excludedHosts.value];
return [...new Set(allHosts)].sort((a, b) => a.localeCompare(b));
});
const handleCustomProxySelect = (host: string) => {
customProxy.value = host;
hostProxySelect.value = true;
toggleLocations();
manualProxyDomain.value = '';
};
const neverProxyHostManual = () => {
if (manualProxyDomain.value) {
neverProxyHost(manualProxyDomain.value);
manualProxyDomain.value = '';
manualProxyDomainError.value = false;
} else {
manualProxyDomainError.value = true;
}
};
const handleCustomProxySelectManual = () => {
if (manualProxyDomain.value) {
handleCustomProxySelect(manualProxyDomain.value);
manualProxyDomain.value = '';
manualProxyDomainError.value = false;
} else {
manualProxyDomainError.value = true;
}
};
const clearError = () => {
manualProxyDomainError.value = false;
};
</script>

<template>
<NCard :bordered="false" class="mb-4">
<NCard :bordered="false">
<TitleCategory title="Add proxy for a domain" />
<div class="flex items-center mt-2">
<NInput
v-model:value="manualProxyDomain"
placeholder="Enter domain name"
class="mr-2 flex-grow"
:status="manualProxyDomainError ? 'error' : undefined"
@focus="clearError"
/>

<SplitButton
size="small"
main-color="blue"
sub-color="white"
main-text="Select location"
sub-text="Never proxy"
@main-click="handleCustomProxySelectManual"
@sub-click="neverProxyHostManual"
/>
<Button class="whitespace-nowrap" @click="handleCustomProxySelect(manualProxyDomain)"
>Select Location</Button
>
</div>
<div v-for="{ host, proxyDetails } in proxies" :key="host" :bordered="false">
<div v-if="manualProxyDomainError" class="text-red-500 text-sm mt-1">
Please enter a domain name
</div>

<div v-for="host in combinedHosts" :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>
<h1 class="font-semibold text-lg mb-2 text-gray-200">
{{ host }}
</h1>
<template v-if="host in hostProxiesDetails && !excludedHosts.includes(host)">
<n-tooltip v-if="hostProxiesDetails[host].server">
<template #trigger>
<n-switch
:value="hostProxiesDetails[host].socksEnabled"
@update-value="toggleCustomProxy(host)"
/>
</template>
<span>{{
hostProxiesDetails[host].socksEnabled ? 'Proxy enabled' : 'Proxy disabled'
}}</span>
</n-tooltip>
</template>
</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>
<template v-if="host in hostProxiesDetails && !excludedHosts.includes(host)">
<div v-if="hostProxiesDetails[host].server" class="mb-3">
<h1>{{ hostProxiesDetails[host].country }}, {{ hostProxiesDetails[host].city }}</h1>
<ul class="mb-2">
<li>Proxy Server: {{ hostProxiesDetails[host].server }}</li>
<li>
Proxy DNS
<n-checkbox
size="large"
:checked="hostProxiesDetails[host].proxyDNS"
:focusable="false"
@update-checked="toggleCustomProxyDNS(host)"
/>
</li>
</ul>
</div>

<div class="flex justify-between">
<Button @click="handleCustomProxySelect(host)">Select location</Button>
<Button color="error" @click="removeCustomProxy(host)">Remove proxy</Button>
</div>
</div>
</NCard>
<div class="flex justify-between">
<Button
size="small"
class="flex items-center justify-center"
@click="handleCustomProxySelect(host)"
>
Change location
</Button>

<NCard v-if="excludedHosts.length > 0" :bordered="false">
<TitleCategory title="Excluded from proxying" />
<div v-for="host in excludedHosts" :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>
<Button @click="allowProxy(host)"> Allow proxying </Button>
</div>
<div>
<SplitButton
size="small"
main-color="error"
sub-color="white"
main-text="Remove proxy"
sub-text="Never proxy"
@main-click="removeCustomProxy(host)"
@sub-click="neverProxyHost(host)"
/>
</div>
</div>
</template>

<template v-else>
<div class="flex justify-between">
<IconLabel type="info" class="mb-3"> Never proxied </IconLabel>
<Button @click="allowProxy(host)">Allow proxying</Button>
</div>
</template>
</div>
</NCard>
</template>
8 changes: 4 additions & 4 deletions src/components/__snapshots__/MostUsedLocationButtons.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`MostUsedLocationButtons should render one button 1`] = `
>
<button
class="btn block"
class="btn whitespace-nowrap block"
>
Argentina
Expand All @@ -22,21 +22,21 @@ exports[`MostUsedLocationButtons should render three buttons 1`] = `
>
<button
class="btn block"
class="btn whitespace-nowrap block"
>
Sweden
</button>
<button
class="btn block"
class="btn whitespace-nowrap block"
>
Norway
</button>
<button
class="btn block"
class="btn whitespace-nowrap block"
>
Iceland
Expand Down

0 comments on commit 4d773ac

Please sign in to comment.