diff --git a/src/components/Location.vue b/src/components/Location.vue index e7ac2aa8..43dc507d 100644 --- a/src/components/Location.vue +++ b/src/components/Location.vue @@ -10,18 +10,16 @@ import { updateCurrentTabProxyBadge } from '@/helpers/proxyBadge'; import useListProxies from '@/composables/useListProxies'; import useSocksProxy from '@/composables/useSocksProxy'; import useLocations from '@/composables/useLocations'; -import useActiveTab from '@/composables/useActiveTab'; import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory'; import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types'; -const { activeTabHost } = useActiveTab(); -const { customProxy, hostProxySelect, toggleLocations } = useLocations(); +const { customProxyHost, customProxySelect, toggleLocations } = useLocations(); const { proxiesList } = useListProxies(); const { setCurrentHostProxy, setGlobalProxy } = useSocksProxy(); const { storeSocksProxyUsage } = useProxyHistory(); const currentOrAllWebsites = computed(() => - hostProxySelect.value ? customProxy.value || activeTabHost.value : 'all your browser traffic', + customProxySelect.value ? customProxyHost.value : 'all your browser traffic', ); const setProxy = ( @@ -35,12 +33,12 @@ const setProxy = ( storeSocksProxyUsage({ country, countryCode, city, hostname, ipv4_address }); toggleLocations(); - if (hostProxySelect.value) { + if (customProxySelect.value) { setCurrentHostProxy( { country, countryCode, city, hostname, ipv4_address, port }, - customProxy.value || activeTabHost.value, + customProxyHost.value, ); - customProxy.value = ''; + customProxyHost.value = ''; } else { setGlobalProxy({ country, countryCode, city, hostname, ipv4_address, port }); } diff --git a/src/components/Proxy/CustomProxies.vue b/src/components/Proxy/CustomProxies.vue index 8c2ffedf..11fcb05f 100644 --- a/src/components/Proxy/CustomProxies.vue +++ b/src/components/Proxy/CustomProxies.vue @@ -10,18 +10,22 @@ import TitleCategory from '@/components/TitleCategory.vue'; import useSocksProxy from '@/composables/useSocksProxy'; import useLocations from '@/composables/useLocations'; -const { customProxy, hostProxySelect, toggleLocations } = useLocations(); +const { proxySelect } = useLocations(); // For some reason importing `hostProxiesDetails` directly from useStore() // will cause the value not to be reactively updated const { allowProxy, excludedHosts, + globalProxyDetails, + globalProxyEnabled, hostProxiesDetails, neverProxyHost, removeCustomProxy, + removeGlobalProxy, toggleCustomProxy, toggleCustomProxyDNS, + toggleGlobalProxy, } = useSocksProxy(); const manualProxyDomain = ref(''); @@ -32,10 +36,8 @@ const combinedHosts = computed(() => { return [...new Set(allHosts)].sort((a, b) => a.localeCompare(b)); }); -const handleCustomProxySelect = (host: string) => { - customProxy.value = host; - hostProxySelect.value = true; - toggleLocations(); +const handleProxySelect = (host?: string) => { + proxySelect(host); manualProxyDomain.value = ''; }; @@ -51,7 +53,7 @@ const neverProxyHostManual = () => { const handleCustomProxySelectManual = () => { if (manualProxyDomain.value) { - handleCustomProxySelect(manualProxyDomain.value); + handleProxySelect(manualProxyDomain.value); manualProxyDomain.value = ''; manualProxyDomainError.value = false; } else { @@ -90,6 +92,44 @@ const clearError = () => { Please enter a domain name + +
+

All websites

+ +
+
+

+ {{ globalProxyDetails.city }}, {{ globalProxyDetails.country }} +

+
+

Server

+
{{ globalProxyDetails.server }}
+
+
+ + +
+ + + {{ globalProxyEnabled ? 'Proxy' : 'When enabled, this proxy is' }} used by + all websites, except for domains listed below. + + +
+ + +
+
+
@@ -132,7 +172,7 @@ const clearError = () => { diff --git a/src/components/Proxy/HomeProxyStatus.vue b/src/components/Proxy/HomeProxyStatus.vue index eac1a1c2..1a47f25e 100644 --- a/src/components/Proxy/HomeProxyStatus.vue +++ b/src/components/Proxy/HomeProxyStatus.vue @@ -30,7 +30,7 @@ const { toggleGlobalProxy, } = useSocksProxy(); const { getSocksProxies } = useListProxies(); -const { hostProxySelect, toggleLocations } = useLocations(); +const { proxySelect } = useLocations(); const { connection } = inject(ConnectionKey, defaultConnection); const currentHostExcluded = computed(() => excludedHosts.value.includes(activeTabHost.value)); @@ -52,10 +52,9 @@ const handleTabClick = (tabName: string) => { lastClickedTab.value = tabName; }; -const handleProxySelect = async (customProxy: boolean) => { - hostProxySelect.value = customProxy; +const handleProxySelect = async (host?: string) => { + proxySelect(host); await getSocksProxies(); - toggleLocations(); }; @@ -97,7 +96,7 @@ const handleProxySelect = async (customProxy: boolean) => {

- @@ -198,7 +197,7 @@ const handleProxySelect = async (customProxy: boolean) => { diff --git a/src/composables/useLocations.ts b/src/composables/useLocations.ts index c099b461..9a9f2ebb 100644 --- a/src/composables/useLocations.ts +++ b/src/composables/useLocations.ts @@ -1,14 +1,22 @@ import { ref } from 'vue'; const showLocations = ref(false); -const hostProxySelect = ref(false); -const customProxy = ref(''); +const customProxySelect = ref(false); +const customProxyHost = ref(''); const useLocations = () => { const toggleLocations = () => { showLocations.value = !showLocations.value; }; - return { customProxy, hostProxySelect, showLocations, toggleLocations }; + + const proxySelect = (host?: string) => { + // when host is not provided, it means the user is selecting a proxy for all websites + customProxyHost.value = host ? host : ''; + customProxySelect.value = !!host; + toggleLocations(); + }; + + return { customProxyHost, customProxySelect, proxySelect, showLocations, toggleLocations }; }; export default useLocations;