Improve error handling when proxy is set and no connection is detected

mullvad · Feb 7, 2024 · c653b21 · c653b21
1 parent 8529bd4
commit c653b21
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 74 deletions.
diff --git a/src/components/ConnectionDetails/ConnectionDetails.vue b/src/components/ConnectionDetails/ConnectionDetails.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
+import { inject } from 'vue';
 
 import AdvancedDns from '@/components/ConnectionDetails/AdvancedDns.vue';
 import AdvancedInfo from '@/components/ConnectionDetails/AdvancedInfo.vue';
@@ -15,48 +15,31 @@ import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
 import useSocksProxy from '@/composables/useSocksProxy';
 
 const { globalProxyEnabled } = useSocksProxy();
-
 const { isLoading, isError, connection } = inject(ConnectionKey, defaultConnection);
-const connected = computed(() => connection.value.isMullvad);
 </script>
 
 <template>
   <div class="p-2 pt-0">
-    <IconLabel
-      v-if="!connected && !isLoading"
-      text="Not using Mullvad"
-      type="info"
-      class="my-2 text-lg"
-    />
-
-    <div v-if="isLoading">
-      <p class="text-xl mb-2">
-        <IconLabel text="Checking connection" type="spinner" />
+    <div v-if="isLoading || isError">
+      <p class="mb-2">
+        <IconLabel v-if="isLoading" text="Checking connection" type="spinner" />
+        <IconLabel v-if="isError" text="Couldn't get connection details" type="warning" />
       </p>
 
       <div v-if="globalProxyEnabled">
         <p>The connection is set to use a proxy server.</p>
-        <p>If you can't load any pages, try disabling the proxy to access the internet directly</p>
-        <router-link to="/proxy">
-          <Button color="info" class="mt-2">Check active proxy</Button>
-        </router-link>
-      </div>
-    </div>
-
-    <div v-else-if="isError">
-      <IconLabel text="Couldn't get connection details" type="warning" />
-      <div v-if="globalProxyEnabled">
-        <p>The connection is set to use a proxy server.</p>
-        <p>If you can't load any pages, try disabling the proxy to access the internet directly</p>
+        <p>
+          If the page is not loading, try disconnecting the proxy to access the internet directly.
+        </p>
         <router-link to="/proxy">
-          <Button color="info" class="mt-2">Check active proxy</Button>
+          <Button color="info" class="mt-2">Review proxy settings</Button>
         </router-link>
       </div>
     </div>
 
     <div v-else>
       <ConnectionLocation />
-      <div v-if="connected" class="my-2">
+      <div v-if="connection.isMullvad" class="my-2">
         <UsingMullvadConnectionStatus class="text-lg" />
         <AdvancedInfo :disabled="isLoading" />
 

diff --git a/src/components/IconLabel.vue b/src/components/IconLabel.vue
@@ -10,11 +10,11 @@ import FeDrop from '@/components/Icons/FeDrop.vue';
 
 export type IconType = 'warning' | 'success' | 'info' | 'spinner' | 'leak' | 'check';
 
-defineProps<{ text: string; type: IconType }>();
+defineProps<{ text?: string; type: IconType }>();
 </script>
 
 <template>
-  <span>
+  <div class="flex items-center">
     <n-icon class="mr-2" size="25">
       <FeCheckCircle v-if="type === 'success'" class="text-success" />
       <FeCheck v-if="type === 'check'" class="text-success" />
@@ -24,13 +24,9 @@ defineProps<{ text: string; type: IconType }>();
       <FeDrop v-if="type === 'leak'" class="text-error" />
     </n-icon>
 
-    {{ text }}
-  </span>
+    <span v-if="text">{{ text }}</span>
+    <span v-else>
+      <slot></slot>
+    </span>
+  </div>
 </template>
-
-<style scoped>
-span {
-  display: flex;
-  align-items: center;
-}
-</style>
diff --git a/src/popup/views/Home.vue b/src/popup/views/Home.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, inject, watch } from 'vue';
-import { NTag } from 'naive-ui';
 
 import ConnectionDetails from '@/components/ConnectionDetails/ConnectionDetails.vue';
+import IconLabel from '@/components/IconLabel.vue';
 import NotificationsCarousel from '@/components/NotificationsCarousel.vue';
 
 import useActiveTab from '@/composables/useActiveTab';
@@ -11,7 +11,7 @@ import useSocksProxy from '@/composables/useSocksProxy';
 import useStore from '@/composables/useStore';
 
 const { activeTabHost } = useActiveTab();
-const { currentHostProxyEnabled, initProxies } = useSocksProxy();
+const { currentHostProxyDetails, currentHostProxyEnabled, initProxies } = useSocksProxy();
 const { excludedHosts } = useStore();
 const { isLoading, isError, connection } = inject(ConnectionKey, defaultConnection);
 
@@ -32,10 +32,31 @@ watch(connection, async () => {
   <NotificationsCarousel v-if="!isLoading && !isError" />
   <ConnectionDetails />
 
-  <n-tag v-if="currentHostExcluded" round :bordered="false" type="info">
-    <strong>{{ activeTabHost }}</strong> is set to never be proxied
-  </n-tag>
-  <n-tag v-else-if="currentHostProxyEnabled" round :bordered="false" type="info">
-    <strong>{{ activeTabHost }}</strong> is set to always use a specific proxy
-  </n-tag>
+  <div v-if="!isLoading">
+    <IconLabel v-if="currentHostExcluded" text="" type="info" class="my-2">
+      <strong>{{ activeTabHost }}</strong> is set to is set to never be proxied
+    </IconLabel>
+
+    <IconLabel
+      v-if="currentHostProxyEnabled && connection.isMullvad"
+      text=""
+      type="info"
+      class="my-2"
+    >
+      <strong>{{ activeTabHost }}</strong> is set to always be proxied through
+      <strong>{{ currentHostProxyDetails.server }}</strong>
+    </IconLabel>
+
+    <IconLabel
+      v-if="currentHostProxyEnabled && !connection.isMullvad"
+      text=""
+      type="warning"
+      class="my-2"
+    >
+      <strong>{{ activeTabHost }}</strong> can't be reached because<br />
+      - a proxy is set for this domain<br />
+      - no connection to Mullvad VPN (WireGuard) is detected<br />
+      If you want to access this domain, either disconnect the proxy or connect to Mullvad VPN.
+    </IconLabel>
+  </div>
 </template>
diff --git a/src/popup/views/Proxy.vue b/src/popup/views/Proxy.vue
@@ -1,40 +1,15 @@
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
-import { NTag } from 'naive-ui';
-
-import FeInfo from '@/components/Icons/FeInfo.vue';
-import IconLabel from '@/components/IconLabel.vue';
 import LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
 import ProxyGlobal from '@/components/ProxyStatus/ProxyGlobal.vue';
 import ProxyHost from '@/components/ProxyStatus/ProxyHost.vue';
 
 import useActiveTab from '@/composables/useActiveTab';
-import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
 
 const { isAboutPage } = useActiveTab();
-const { connection, isError, isLoading } = inject(ConnectionKey, defaultConnection);
-
-// Only allow connecting to Proxy if the user is connected to Mullvad
-const canUseProxy = computed(() => connection.value.isMullvad);
 </script>
 
 <template>
-  <div v-if="isLoading">
-    <p class="text-xl mb-2">
-      <IconLabel text="Checking connection" type="spinner" />
-    </p>
-  </div>
-
-  <div v-else-if="canUseProxy || isError">
-    <ProxyHost v-if="!isAboutPage" />
-    <ProxyGlobal />
-    <LocationDrawer />
-  </div>
-
-  <n-tag v-else round :bordered="false" type="info">
-    To use the proxy, <em>connect to Mullvad VPN first.</em>
-    <template #icon>
-      <FeInfo />
-    </template>
-  </n-tag>
+  <ProxyHost v-if="!isAboutPage" />
+  <ProxyGlobal />
+  <LocationDrawer />
 </template>