Move disconnect proxy message to Status page

mullvad · Dec 7, 2023 · b1b5a2b · b1b5a2b
1 parent f843137
commit b1b5a2b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 29 deletions.
diff --git a/src/components/ConnectionDetails/ConnectionDetails.vue b/src/components/ConnectionDetails/ConnectionDetails.vue
@@ -1,16 +1,20 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
-import ConnectionLocation from '@/components/ConnectionLocation/ConnectionLocation.vue';
 import AdvancedDns from '@/components/ConnectionDetails/AdvancedDns.vue';
 import AdvancedInfo from '@/components/ConnectionDetails/AdvancedInfo.vue';
 import AdvancedWebRTC from '@/components/ConnectionDetails/AdvancedWebTRC.vue';
+import ConnectionLocation from '@/components/ConnectionLocation/ConnectionLocation.vue';
 import IconLabel from '@/components/IconLabel.vue';
+import ProxyDisconnectMessage from '@/components/ProxyStatus/ProxyDisconnectMessage.vue';
 
 import UsingMullvadConnectionStatus from '@/components/ConnectionStatus/UsingMullvadConnectionStatus.vue';
 import DnsLeakStatus from '@/components/ConnectionStatus/DnsLeakStatus.vue';
 
 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);
@@ -25,11 +29,17 @@ const connected = computed(() => connection.value.isMullvad);
       class="my-2 text-lg"
     />
 
-    <p class="text-xl mb-2">
-      <IconLabel v-if="isLoading" text="Checking connection" type="spinner" />
+    <div>
+      <div v-if="isLoading">
+        <p class="text-xl mb-2">
+          <IconLabel text="Checking connection" type="spinner" />
+        </p>
+        <!-- TODO Add custom proxy as well  -->
+        <ProxyDisconnectMessage v-if="globalProxyEnabled" />
+      </div>
       <IconLabel v-else-if="isError" text="Couldn't get connection details" type="warning" />
       <ConnectionLocation v-else />
-    </p>
+    </div>
 
     <div v-if="!isLoading && !isError">
       <div v-if="connected" class="my-2">

diff --git a/src/components/ProxyStatus/ProxyButton.vue b/src/components/ProxyStatus/ProxyButton.vue
@@ -2,40 +2,18 @@
 import { computed, inject } from 'vue';
 
 import Button from '@/components/Buttons/Button.vue';
-import MuSpinner from '@/components/Icons/MuSpinner.vue';
-import ProxyDisconnectMessage from '@/components/ProxyStatus/ProxyDisconnectMessage.vue';
 
 import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
-import useSocksProxy from '@/composables/useSocksProxy';
 import useLocations from '@/composables/useLocations';
 
-const { connection, isLoading } = inject(ConnectionKey, defaultConnection);
-
+const { connection } = inject(ConnectionKey, defaultConnection);
 const { toggleLocations } = useLocations();
-const { globalProxyEnabled } = useSocksProxy();
-
-// Only allow connecting to Proxy if the user is connected to Mullvad
-const canUseProxy = computed(() => connection.value.isMullvad);
 
-// Only allow Location selection if using WireGuard
 const isWireGuard = computed(() => connection.value.protocol?.includes('WireGuard'));
 </script>
 
 <template>
-  <div v-if="isLoading">
-    <p class="flex items-center mb-2">
-      Connecting
-      <MuSpinner class="ml-2 animate-spin" />
-    </p>
-    <ProxyDisconnectMessage v-if="!canUseProxy && globalProxyEnabled" />
-  </div>
-  <div v-else>
-    <ProxyDisconnectMessage v-if="!canUseProxy && globalProxyEnabled" />
-    <p v-else-if="!canUseProxy">
-      To be able to use a proxy, please <em>connect to Mullvad VPN</em>
-    </p>
-    <div v-else-if="isWireGuard" class="flex">
-      <Button @click="toggleLocations"> Switch location </Button>
-    </div>
+  <div v-if="isWireGuard" class="flex">
+    <Button @click="toggleLocations"> Switch location </Button>
   </div>
 </template>