Rename and cleanup permissions request

Author: ruihildt

Diff for: src/components/OptionsTabs/ProxyTab.vue

@@ -8,11 +8,11 @@ import LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
 
 import useProxyPermissions from '@/composables/useProxyPermissions';
-const { proxyPermissionsGranted, triggerRequestProxyPermissions } = useProxyPermissions();
+const { isGranted, requestPermissions } = useProxyPermissions();
 </script>
 
 <template>
-  <template v-if="proxyPermissionsGranted">
+  <template v-if="isGranted">
     <CustomProxies />
     <LocationDrawer />
   </template>
@@ -31,7 +31,7 @@ const { proxyPermissionsGranted, triggerRequestProxyPermissions } = useProxyPerm
         </ul>
       </IconLabel>
 
-      <Button class="mt-3" @click="triggerRequestProxyPermissions"> Grant permissions </Button>
+      <Button class="mt-3" @click="requestPermissions"> Grant permissions </Button>
     </n-card>
   </template>
 </template>

Diff for: src/components/Proxy/HomeProxyStatus.vue

@@ -18,7 +18,7 @@ import { checkDomain } from '@/helpers/domain';
 const { activeTabHost, isBrowserPage } = useActiveTab();
 const { updateConnection } = useConnection();
 const { proxySelect } = useLocations();
-const { proxyPermissionsGranted, triggerRequestProxyPermissions } = useProxyPermissions();
+const { isGranted, requestPermissions } = useProxyPermissions();
 const { getSocksProxies } = useSocksProxies();
 const {
   allowProxy,
@@ -132,7 +132,7 @@ watch([currentHostProxyEnabled, subDomainProxyEnabled, domainProxyDetails, exclu
 
 <template>
   <n-tabs
-    v-if="proxyPermissionsGranted"
+    v-if="isGranted"
     type="line"
     justify-content="start"
     :value="activeTab"
@@ -275,41 +275,22 @@ watch([currentHostProxyEnabled, subDomainProxyEnabled, domainProxyDetails, exclu
         </div>
       </div>
     </n-tab-pane>
-
-    <n-tab-pane
-      v-if="!proxyPermissionsGranted"
-      name="permissions"
-      tab="Permissions missing"
-      class="flex flex-col"
-    >
-      <ul>
-        <li>- <strong>tabs</strong> to show proxy settings from the active tab</li>
-        <li>- <strong>proxy</strong> to configure and use Mullvad proxy servers</li>
-        <li>- <strong>&lt;all_urls&gt;</strong> to have granular proxy settings</li>
-      </ul>
-
-      <Button size="small" class="mt-3" @click="triggerRequestProxyPermissions">
-        Grant permissions
-      </Button>
-    </n-tab-pane>
   </n-tabs>
 
-  <n-tabs v-if="!proxyPermissionsGranted" type="line" justify-content="start">
+  <n-tabs v-else type="line" justify-content="start">
     <template #prefix>
       <TitleCategory title="Proxy" />
     </template>
 
-    <n-tab-pane v-if="!proxyPermissionsGranted" name="permissions" tab="Permissions missing">
+    <n-tab-pane name="permissions" tab="Permissions missing">
       <div class="flex flex-col">
         <ul>
           <li>- <strong>tabs</strong> to show proxy settings from the active tab</li>
           <li>- <strong>proxy</strong> to configure and use Mullvad proxy servers</li>
           <li>- <strong>&lt;all_urls&gt;</strong> to have granular proxy settings</li>
         </ul>
 
-        <Button size="small" class="mt-3" @click="triggerRequestProxyPermissions">
-          Grant permissions
-        </Button>
+        <Button size="small" class="mt-3" @click="requestPermissions"> Grant permissions </Button>
       </div>
     </n-tab-pane>
   </n-tabs>

Diff for: src/composables/useProxyPermissions.ts

@@ -1,21 +1,24 @@
-import { ref } from 'vue';
+import { ref, readonly } from 'vue';
 import { getProxyPermissions, requestProxyPermissions } from '@/helpers/permissions';
 
-const useProxyPermissions = () => {
-  const proxyPermissionsGranted = ref(false);
+export const useProxyPermissions = () => {
+  const isGranted = ref(false);
 
   const checkProxyPermissions = async () => {
-    proxyPermissionsGranted.value = await getProxyPermissions();
+    isGranted.value = await getProxyPermissions();
   };
 
-  const triggerRequestProxyPermissions = async () => {
-    proxyPermissionsGranted.value = await requestProxyPermissions();
-    return proxyPermissionsGranted.value;
+  const requestPermissions = async (): Promise<boolean> => {
+    isGranted.value = await requestProxyPermissions();
+    return isGranted.value;
   };
 
   checkProxyPermissions();
 
-  return { proxyPermissionsGranted, triggerRequestProxyPermissions };
+  return {
+    isGranted: readonly(isGranted),
+    requestPermissions,
+  };
 };
 
 export default useProxyPermissions;