refactor: move from network strategies to generic interceptor service (#3242)
This commit is contained in:
Andrew Bastin
GitHub
@@ -113,108 +113,11 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-8 space-y-8 md:col-span-2">
|
||||
<section>
|
||||
<section v-for="[id, settings] in interceptorsWithSettings" :key="id">
|
||||
<h4 class="font-semibold text-secondaryDark">
|
||||
{{ t("settings.extensions") }}
|
||||
{{ settings.entryTitle(t) }}
|
||||
</h4>
|
||||
<div class="my-1 text-secondaryLight">
|
||||
<span v-if="extensionVersion != null">
|
||||
{{
|
||||
`${t("settings.extension_version")}: v${
|
||||
extensionVersion.major
|
||||
}.${extensionVersion.minor}`
|
||||
}}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ t("settings.extension_version") }}:
|
||||
{{ t("settings.extension_ver_not_reported") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col py-4 space-y-2">
|
||||
<span>
|
||||
<HoppSmartItem
|
||||
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
|
||||
blank
|
||||
:icon="IconChrome"
|
||||
label="Chrome"
|
||||
:info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
|
||||
:active-info-icon="hasChromeExtInstalled"
|
||||
outline
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<HoppSmartItem
|
||||
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
|
||||
blank
|
||||
:icon="IconFirefox"
|
||||
label="Firefox"
|
||||
:info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
|
||||
:active-info-icon="hasFirefoxExtInstalled"
|
||||
outline
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="py-4 space-y-4">
|
||||
<div class="flex items-center">
|
||||
<HoppSmartToggle
|
||||
:on="EXTENSIONS_ENABLED"
|
||||
@change="toggleInterceptor('extension')"
|
||||
>
|
||||
{{ t("settings.extensions_use_toggle") }}
|
||||
</HoppSmartToggle>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h4 class="font-semibold text-secondaryDark">
|
||||
{{ t("settings.proxy") }}
|
||||
</h4>
|
||||
<div class="my-1 text-secondaryLight">
|
||||
{{
|
||||
`${t("settings.official_proxy_hosting")} ${t(
|
||||
"settings.read_the"
|
||||
)}`
|
||||
}}
|
||||
<HoppSmartAnchor
|
||||
class="link"
|
||||
to="https://docs.hoppscotch.io/support/privacy"
|
||||
blank
|
||||
:label="t('app.proxy_privacy_policy')"
|
||||
/>.
|
||||
</div>
|
||||
<div class="py-4 space-y-4">
|
||||
<div class="flex items-center">
|
||||
<HoppSmartToggle
|
||||
:on="PROXY_ENABLED"
|
||||
@change="toggleInterceptor('proxy')"
|
||||
>
|
||||
{{ t("settings.proxy_use_toggle") }}
|
||||
</HoppSmartToggle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center py-4 space-x-2">
|
||||
<HoppSmartInput
|
||||
v-model="PROXY_URL"
|
||||
styles="flex-1"
|
||||
placeholder=" "
|
||||
input-styles="input floating-input"
|
||||
:disabled="!PROXY_ENABLED"
|
||||
>
|
||||
<template #label>
|
||||
<label for="url">
|
||||
{{ t("settings.proxy_url") }}
|
||||
</label>
|
||||
</template>
|
||||
</HoppSmartInput>
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('settings.reset_default')"
|
||||
:icon="clearIcon"
|
||||
outline
|
||||
class="rounded"
|
||||
@click="resetProxy"
|
||||
/>
|
||||
</div>
|
||||
<component :is="settings.component" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -236,62 +139,47 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import IconChrome from "~icons/brands/chrome"
|
||||
import IconCheckCircle from "~icons/lucide/check-circle"
|
||||
import IconFirefox from "~icons/brands/firefox"
|
||||
import IconRotateCCW from "~icons/lucide/rotate-ccw"
|
||||
import IconCheck from "~icons/lucide/check"
|
||||
import { ref, computed, watch } from "vue"
|
||||
import { refAutoReset } from "@vueuse/core"
|
||||
import { applySetting, toggleSetting } from "~/newstore/settings"
|
||||
import { useSetting } from "@composables/settings"
|
||||
import { useToast } from "@composables/toast"
|
||||
import { useI18n } from "@composables/i18n"
|
||||
import { useColorMode } from "@composables/theming"
|
||||
import { useReadonlyStream } from "@composables/stream"
|
||||
|
||||
import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
|
||||
import { extensionStatus$ } from "~/newstore/HoppExtension"
|
||||
import { usePageHead } from "@composables/head"
|
||||
import { useService } from "dioc/vue"
|
||||
import { InterceptorService } from "~/services/interceptor.service"
|
||||
import { pipe } from "fp-ts/function"
|
||||
import * as O from "fp-ts/Option"
|
||||
import * as A from "fp-ts/Array"
|
||||
|
||||
const t = useI18n()
|
||||
const toast = useToast()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
usePageHead({
|
||||
title: computed(() => t("navigation.settings")),
|
||||
})
|
||||
|
||||
const interceptorService = useService(InterceptorService)
|
||||
const interceptorsWithSettings = computed(() =>
|
||||
pipe(
|
||||
interceptorService.availableInterceptors.value,
|
||||
A.filterMap((interceptor) =>
|
||||
interceptor.settingsPageEntry
|
||||
? O.some([
|
||||
interceptor.interceptorID,
|
||||
interceptor.settingsPageEntry,
|
||||
] as const)
|
||||
: O.none
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
const ACCENT_COLOR = useSetting("THEME_COLOR")
|
||||
const PROXY_ENABLED = useSetting("PROXY_ENABLED")
|
||||
const PROXY_URL = useSetting("PROXY_URL")
|
||||
const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
|
||||
const TELEMETRY_ENABLED = useSetting("TELEMETRY_ENABLED")
|
||||
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
|
||||
const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
|
||||
const ZEN_MODE = useSetting("ZEN_MODE")
|
||||
|
||||
const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
|
||||
|
||||
const extensionVersion = computed(() => {
|
||||
return currentExtensionStatus.value === "available"
|
||||
? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
|
||||
: null
|
||||
})
|
||||
|
||||
const hasChromeExtInstalled = computed(
|
||||
() => browserIsChrome() && currentExtensionStatus.value === "available"
|
||||
)
|
||||
|
||||
const hasFirefoxExtInstalled = computed(
|
||||
() => browserIsFirefox() && currentExtensionStatus.value === "available"
|
||||
)
|
||||
|
||||
const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
|
||||
IconRotateCCW,
|
||||
1000
|
||||
)
|
||||
|
||||
const confirmRemove = ref(false)
|
||||
|
||||
const proxySettings = computed(() => ({
|
||||
@@ -310,34 +198,11 @@ watch(
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
// Extensions and proxy should not be enabled at the same time
|
||||
const toggleInterceptor = (interceptor: "extension" | "proxy") => {
|
||||
if (interceptor === "extension") {
|
||||
EXTENSIONS_ENABLED.value = !EXTENSIONS_ENABLED.value
|
||||
|
||||
if (EXTENSIONS_ENABLED.value) {
|
||||
PROXY_ENABLED.value = false
|
||||
}
|
||||
} else {
|
||||
PROXY_ENABLED.value = !PROXY_ENABLED.value
|
||||
|
||||
if (PROXY_ENABLED.value) {
|
||||
EXTENSIONS_ENABLED.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const showConfirmModal = () => {
|
||||
if (TELEMETRY_ENABLED.value) confirmRemove.value = true
|
||||
else toggleSetting("TELEMETRY_ENABLED")
|
||||
}
|
||||
|
||||
const resetProxy = () => {
|
||||
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
|
||||
clearIcon.value = IconCheck
|
||||
toast.success(`${t("state.cleared")}`)
|
||||
}
|
||||
|
||||
const getColorModeName = (colorMode: string) => {
|
||||
switch (colorMode) {
|
||||
case "system":
|
||||
|
||||
Reference in New Issue
Block a user