123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350 |
- <template>
- <div>
- <div class="container divide-dividerLight space-y-8 divide-y">
- <div class="md:grid md:gap-4 md:grid-cols-3">
- <div class="p-8 md:col-span-1">
- <h3 class="heading">
- {{ $t("settings.theme") }}
- </h3>
- <p class="mt-1 text-secondaryLight">
- {{ $t("settings.theme_description") }}
- </p>
- </div>
- <div class="p-8 md:col-span-2 space-y-8">
- <section>
- <h4 class="font-semibold text-secondaryDark">
- {{ $t("settings.background") }}
- </h4>
- <div class="mt-1 text-secondaryLight">
- <ColorScheme placeholder="..." tag="span">
- {{ $t(getColorModeName($colorMode.preference)) }}
- <span v-if="$colorMode.preference === 'system'">
- ({{ $t(getColorModeName($colorMode.value)) }})
- </span>
- </ColorScheme>
- </div>
- <div class="mt-4">
- <SmartColorModePicker />
- </div>
- </section>
- <section>
- <h4 class="font-semibold text-secondaryDark">
- {{ $t("settings.accent_color") }}
- </h4>
- <div class="mt-1 text-secondaryLight">
- {{ active.charAt(0).toUpperCase() + active.slice(1) }}
- </div>
- <div class="mt-4">
- <SmartAccentModePicker />
- </div>
- </section>
- <section>
- <h4 class="font-semibold text-secondaryDark">
- {{ $t("settings.font_size") }}
- </h4>
- <div class="mt-4">
- <SmartFontSizePicker />
- </div>
- </section>
- <section>
- <h4 class="font-semibold text-secondaryDark">
- {{ $t("settings.language") }}
- </h4>
- <div class="mt-4">
- <SmartChangeLanguage />
- </div>
- </section>
- <section>
- <h4 class="font-semibold text-secondaryDark">
- {{ $t("settings.experiments") }}
- </h4>
- <div class="mt-1 text-secondaryLight">
- {{ $t("settings.experiments_notice") }}
- <SmartLink
- class="link"
- to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
- blank
- >
- {{ $t("app.contact_us") }} </SmartLink
- >.
- </div>
- <div class="py-4 space-y-4">
- <div class="flex items-center">
- <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
- {{ $t("settings.telemetry") }}
- </SmartToggle>
- </div>
- <div class="flex items-center">
- <SmartToggle
- :on="EXPAND_NAVIGATION"
- @change="toggleSetting('EXPAND_NAVIGATION')"
- >
- {{ $t("settings.expand_navigation") }}
- </SmartToggle>
- </div>
- <div class="flex items-center">
- <SmartToggle
- :on="SIDEBAR_ON_LEFT"
- @change="toggleSetting('SIDEBAR_ON_LEFT')"
- >
- {{ $t("settings.sidebar_on_left") }}
- </SmartToggle>
- </div>
- <div class="flex items-center">
- <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
- {{ $t("layout.zen_mode") }}
- </SmartToggle>
- </div>
- </div>
- </section>
- </div>
- </div>
- <div class="md:grid md:gap-4 md:grid-cols-3">
- <div class="p-8 md:col-span-1">
- <h3 class="heading">
- {{ $t("settings.interceptor") }}
- </h3>
- <p class="mt-1 text-secondaryLight">
- {{ $t("settings.interceptor_description") }}
- </p>
- </div>
- <div class="p-8 md:col-span-2 space-y-8">
- <section>
- <h4 class="font-semibold text-secondaryDark">
- {{ $t("settings.extensions") }}
- </h4>
- <div class="mt-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>
- <SmartItem
- to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
- blank
- svg="brands/firefox"
- label="Firefox"
- :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
- :active-info-icon="hasFirefoxExtInstalled"
- outline
- />
- </span>
- <span>
- <SmartItem
- to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
- blank
- svg="brands/chrome"
- label="Chrome"
- :info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
- :active-info-icon="hasChromeExtInstalled"
- outline
- />
- </span>
- </div>
- <div class="py-4 space-y-4">
- <div class="flex items-center">
- <SmartToggle
- :on="EXTENSIONS_ENABLED"
- @change="toggleSetting('EXTENSIONS_ENABLED')"
- >
- {{ $t("settings.extensions_use_toggle") }}
- </SmartToggle>
- </div>
- </div>
- </section>
- <section>
- <h4 class="font-semibold text-secondaryDark">
- {{ $t("settings.proxy") }}
- </h4>
- <div class="mt-1 text-secondaryLight">
- {{
- `${$t("settings.official_proxy_hosting")} ${$t(
- "settings.read_the"
- )}`
- }}
- <SmartLink
- class="link"
- to="https://docs.hoppscotch.io/privacy"
- blank
- >
- {{ $t("app.proxy_privacy_policy") }} </SmartLink
- >.
- </div>
- <div class="py-4 space-y-4">
- <div class="flex items-center">
- <SmartToggle
- :on="PROXY_ENABLED"
- @change="toggleSetting('PROXY_ENABLED')"
- >
- {{ $t("settings.proxy_use_toggle") }}
- </SmartToggle>
- </div>
- </div>
- <div class="flex items-center py-4 space-x-2">
- <div class="relative flex flex-col flex-1">
- <input
- id="url"
- v-model="PROXY_URL"
- class="input floating-input"
- placeholder=" "
- type="url"
- autocomplete="off"
- :disabled="!PROXY_ENABLED"
- />
- <label for="url">
- {{ $t("settings.proxy_url") }}
- </label>
- </div>
- <ButtonSecondary
- v-tippy="{ theme: 'tooltip' }"
- :title="$t('settings.reset_default')"
- :svg="clearIcon"
- outline
- class="rounded"
- @click.native="resetProxy"
- />
- </div>
- </section>
- </div>
- </div>
- </div>
- <SmartConfirmModal
- :show="confirmRemove"
- :title="`${$t('confirm.remove_telemetry')} ${$t(
- 'settings.telemetry_helps_us'
- )}`"
- @hide-modal="confirmRemove = false"
- @resolve="
- () => {
- toggleSetting('TELEMETRY_ENABLED')
- confirmRemove = false
- }
- "
- />
- </div>
- </template>
- <script lang="ts">
- import { defineComponent } from "@nuxtjs/composition-api"
- import {
- hasExtensionInstalled,
- hasChromeExtensionInstalled,
- hasFirefoxExtensionInstalled,
- } from "~/helpers/strategies/ExtensionStrategy"
- import {
- applySetting,
- toggleSetting,
- defaultSettings,
- useSetting,
- } from "~/newstore/settings"
- import type { KeysMatching } from "~/types/ts-utils"
- import { getLocalConfig } from "~/newstore/localpersistence"
- type SettingsType = typeof defaultSettings
- export default defineComponent({
- setup() {
- return {
- PROXY_ENABLED: useSetting("PROXY_ENABLED"),
- PROXY_URL: useSetting("PROXY_URL"),
- EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
- TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
- EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
- SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
- ZEN_MODE: useSetting("ZEN_MODE"),
- }
- },
- data() {
- return {
- extensionVersion: hasExtensionInstalled()
- ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
- : null,
- hasChromeExtInstalled: hasChromeExtensionInstalled(),
- hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
- clearIcon: "rotate-ccw",
- active: getLocalConfig("THEME_COLOR") || "blue",
- confirmRemove: false,
- }
- },
- head() {
- return {
- title: `${this.$t("navigation.settings")} • Hoppscotch`,
- }
- },
- computed: {
- proxySettings(): { url: string } {
- return {
- url: this.PROXY_URL,
- }
- },
- },
- watch: {
- ZEN_MODE(ZEN_MODE) {
- this.applySetting("EXPAND_NAVIGATION", !ZEN_MODE)
- },
- proxySettings: {
- deep: true,
- handler({ url }) {
- this.applySetting("PROXY_URL", url)
- },
- },
- },
- methods: {
- showConfirmModal() {
- if (this.TELEMETRY_ENABLED) this.confirmRemove = true
- else toggleSetting("TELEMETRY_ENABLED")
- },
- applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
- applySetting(key, value)
- },
- toggleSetting<K extends KeysMatching<SettingsType, boolean>>(key: K) {
- if (key === "EXTENSIONS_ENABLED" && this.PROXY_ENABLED) {
- toggleSetting("PROXY_ENABLED")
- }
- if (key === "PROXY_ENABLED" && this.EXTENSIONS_ENABLED) {
- toggleSetting("EXTENSIONS_ENABLED")
- }
- toggleSetting(key)
- },
- toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
- name: K,
- value: SettingsType[K]
- ) {
- this.applySetting(name, value)
- },
- resetProxy() {
- applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
- this.clearIcon = "check"
- this.$toast.success(`${this.$t("state.cleared")}`)
- setTimeout(() => (this.clearIcon = "rotate-ccw"), 1000)
- },
- getColorModeName(colorMode: string) {
- switch (colorMode) {
- case "system":
- return "settings.system_mode"
- case "light":
- return "settings.light_mode"
- case "dark":
- return "settings.dark_mode"
- case "black":
- return "settings.black_mode"
- default:
- return "settings.system_mode"
- }
- },
- },
- })
- </script>
|