Improve connection check display in popup

Author: ruihildt

src/components/ConnectionCheck/ConnectionCheck.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { inject, ref } from 'vue';
+import { NCard, NCollapseTransition, NIcon } from 'naive-ui';
+
+import ConnectionDetails from '@/components/ConnectionCheck/ConnectionDetails.vue';
+import ConnectionLocation from '@/components/ConnectionCheck/ConnectionLocation.vue';
+import FeChevronDown from '@/components/Icons/FeChevronDown.vue';
+import FeChevronUp from '@/components/Icons/FeChevronUp.vue';
+import IconLabel from '@/components/IconLabel.vue';
+import WebTRCDetails from '@/components/ConnectionCheck/WebTRCDetails.vue';
+
+import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
+import { DnsServer } from '@/composables/useCheckDnsLeaks';
+
+defineProps<{
+  dnsServers: DnsServer[];
+  isErrorDNS: boolean;
+  isLoadingDNS: boolean;
+}>();
+
+const { isLoading, isError } = inject(ConnectionKey, defaultConnection);
+
+const showDetails = ref(true);
+</script>
+
+<template>
+  <n-card :bordered="false">
+    <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>
+
+    <div v-else>
+      <div>
+        <ConnectionLocation />
+        <n-icon size="20" class="cursor-pointer" @click="showDetails = !showDetails">
+          <FeChevronUp v-if="showDetails" />
+          <FeChevronDown v-else />
+        </n-icon>
+      </div>
+
+      <div>
+        <n-collapse-transition :show="showDetails">
+          <ConnectionDetails :dnsServers :isErrorDNS :isLoadingDNS />
+          <WebTRCDetails />
+        </n-collapse-transition>
+      </div>
+    </div>
+  </n-card>
+</template>

src/components/ConnectionCheck/ConnectionDetails.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+import FeCheckCircle from '@/components/Icons/FeCheckCircle.vue';
+import FeDrop from '@/components/Icons/FeDrop.vue';
+import FeXCircle from '@/components/Icons/FeXCircle.vue';
+import FeWarning from '@/components/Icons/FeWarning.vue';
+import MuSpinner from '@/components/Icons/MuSpinner.vue';
+
+import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
+import { DnsServer } from '@/composables/useCheckDnsLeaks';
+
+defineProps<{
+  dnsServers: DnsServer[];
+  isErrorDNS: boolean;
+  isLoadingDNS: boolean;
+}>();
+
+const { connection } = inject(ConnectionKey, defaultConnection);
+</script>
+
+<template>
+  <div class="ml-30px">
+    <div>
+      <h4 class="font-semibold inline-block">IP</h4>
+      <span class="ml-2"
+        >{{ connection.ip }} <span v-if="connection.ipv6"> / {{ connection.ipv6 }}</span></span
+      >
+    </div>
+    <div>
+      <h4 class="font-semibold inline-block">Provider</h4>
+      <span class="ml-2">{{ connection.provider }}</span>
+    </div>
+    <div v-if="connection.isMullvad">
+      <h4 class="font-semibold inline-block">Server</h4>
+      <span class="ml-2">{{ connection.server }}</span>
+    </div>
+    <div class="flex flex-row">
+      <h4 class="font-semibold mr-2">DNS</h4>
+
+      <div>
+        <div v-if="isLoadingDNS" class="flex items-center">
+          <MuSpinner />
+        </div>
+        <div v-if="isErrorDNS" class="flex items-center">
+          <FeWarning class="text-warning" />
+          <span class="ml-1">Couldn't determine DNS</span>
+        </div>
+        <div v-for="dnsServer in dnsServers" :key="dnsServer.ip" class="flex flex-row">
+          <div class="inline-flex items-center">
+            <FeDrop v-if="connection.isMullvad && !dnsServer.mullvad_dns" class="text-error" />
+            <FeCheckCircle v-if="dnsServer.mullvad_dns" class="text-success" />
+            <FeXCircle v-if="!connection.isMullvad && !dnsServer.mullvad_dns" class="text-error" />
+            <span class="ml-1">
+              {{ dnsServer.ip }}
+              ({{
+                dnsServer.mullvad_dns_hostname ||
+                dnsServer.hostname ||
+                dnsServer.organization ||
+                'unknown'
+              }})
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/components/ConnectionLocation/ConnectionLocation.test.ts src/components/ConnectionCheck/ConnectionLocation.test.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
 import { mount } from '@vue/test-utils';
-import ConnectionLocation from '@/components/ConnectionLocation/ConnectionLocation.vue';
+import ConnectionLocation from '@/components/ConnectionCheck/ConnectionLocation.vue';
 import { ConnectionKey } from '@/composables/useConnection';
 
 describe('ConnectionLocation.vue', function () {

src/components/ConnectionLocation/ConnectionLocation.vue src/components/ConnectionCheck/ConnectionLocation.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="15" y1="9" x2="9" y2="15"></line>
+    <line x1="9" y1="9" x2="15" y2="15"></line>
+  </svg>
+</template>

src/components/ConnectionDetails/AdvancedWebTRC.vue src/components/ConnectionCheck/WebTRCDetails.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 import { NCard, NCarousel, NIcon, NImage } from 'naive-ui';
 
 import Button from '@/components/Buttons/Button.vue';
@@ -10,9 +10,11 @@ import FeArrowRight from '@/components/Icons/FeArrowRight.vue';
 
 import { closePopup, openOptions, Tab } from '@/helpers/browserExtension';
 
+import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
 import useRecommendations from '@/composables/useRecommendations/useRecommendations';
 import useWarnings from '@/composables/useWarnings/useWarnings';
 
+const { isError, isLoading } = inject(ConnectionKey, defaultConnection);
 const { activeRecommendations } = useRecommendations();
 const { activeWarnings } = useWarnings();
 
@@ -22,7 +24,7 @@ const activeNotifications = computed(() => {
 </script>
 
 <template>
-  <div v-if="activeNotifications.length > 0" class="mb-4 z-50">
+  <div v-if="!isLoading && !isError && activeNotifications.length > 0" class="mt-4 z-50">
     <n-carousel :show-arrow="activeNotifications.length > 1" :show-dots="false">
       <template #arrow="{ prev, next }">
         <div v-if="activeNotifications.length > 1" class="arrows-custom">

src/components/ConnectionDetails/AdvancedDns.vue

@@ -4,7 +4,7 @@ import { NCard } from 'naive-ui';
 import Button from '@/components/Buttons/Button.vue';
 import CustomProxies from '@/components/Proxy/CustomProxies.vue';
 import IconLabel from '@/components/IconLabel.vue';
-import LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
+import LocationDrawer from '@/components/LocationDrawer.vue';
 import ProxyAutoReload from '@/components/Proxy/ProxyAutoReload.vue';
 import RandomProxyMode from '@/components/Proxy/RandomProxyMode.vue';
 import TitleCategory from '@/components/TitleCategory.vue';