92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<template>
|
|
<div class="flex flex-col space-y-4 p-4 items-start">
|
|
<div class="flex flex-col">
|
|
<h2 class="inline-flex font-semibold text-secondaryDark pb-2">
|
|
{{ t("settings.interceptor") }}
|
|
</h2>
|
|
<p class="inline-flex">
|
|
{{ t("settings.interceptor_description") }}
|
|
</p>
|
|
</div>
|
|
<SmartRadioGroup
|
|
:radios="interceptors"
|
|
:selected="interceptorSelection"
|
|
@change="toggleSettingKey"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watchEffect } from "@nuxtjs/composition-api"
|
|
import { KeysMatching } from "~/types/ts-utils"
|
|
import {
|
|
applySetting,
|
|
SettingsType,
|
|
toggleSetting,
|
|
useSetting,
|
|
} from "~/newstore/settings"
|
|
import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
|
|
import { useI18n, usePolled } from "~/helpers/utils/composables"
|
|
|
|
const t = useI18n()
|
|
|
|
const PROXY_ENABLED = useSetting("PROXY_ENABLED")
|
|
const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
|
|
|
|
const toggleSettingKey = <
|
|
K extends KeysMatching<SettingsType | "BROWSER_ENABLED", boolean>
|
|
>(
|
|
key: K
|
|
) => {
|
|
interceptorSelection.value = key
|
|
if (key === "EXTENSIONS_ENABLED") {
|
|
applySetting("EXTENSIONS_ENABLED", true)
|
|
if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
|
|
}
|
|
if (key === "PROXY_ENABLED") {
|
|
applySetting("PROXY_ENABLED", true)
|
|
if (EXTENSIONS_ENABLED.value) toggleSetting("EXTENSIONS_ENABLED")
|
|
}
|
|
if (key === "BROWSER_ENABLED") {
|
|
applySetting("PROXY_ENABLED", false)
|
|
applySetting("EXTENSIONS_ENABLED", false)
|
|
}
|
|
}
|
|
|
|
const extensionVersion = usePolled(5000, (stopPolling) => {
|
|
const result = hasExtensionInstalled()
|
|
? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
|
|
: null
|
|
|
|
// We don't need to poll anymore after we get value
|
|
if (result) stopPolling()
|
|
|
|
return result
|
|
})
|
|
|
|
const interceptors = computed(() => [
|
|
{ value: "BROWSER_ENABLED", label: t("state.none") },
|
|
{ value: "PROXY_ENABLED", label: t("settings.proxy") },
|
|
{
|
|
value: "EXTENSIONS_ENABLED",
|
|
label:
|
|
`${t("settings.extensions")}: ` +
|
|
(extensionVersion.value !== null
|
|
? `v${extensionVersion.value.major}.${extensionVersion.value.minor}`
|
|
: t("settings.extension_ver_not_reported")),
|
|
},
|
|
])
|
|
|
|
const interceptorSelection = ref("")
|
|
|
|
watchEffect(() => {
|
|
if (PROXY_ENABLED.value) {
|
|
interceptorSelection.value = "PROXY_ENABLED"
|
|
} else if (EXTENSIONS_ENABLED.value) {
|
|
interceptorSelection.value = "EXTENSIONS_ENABLED"
|
|
} else {
|
|
interceptorSelection.value = "BROWSER_ENABLED"
|
|
}
|
|
})
|
|
</script>
|