"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "pages/settings.vue" between
hoppscotch-2.0.0.tar.gz and hoppscotch-2.1.0.tar.gz

About: Hoppscotch is a light-weight, web based API development suite.

settings.vue  (hoppscotch-2.0.0):settings.vue  (hoppscotch-2.1.0)
<template> <template>
<div> <div>
<div class="divide-y divide-dividerLight space-y-8"> <div class="divide-y divide-dividerLight container space-y-8">
<div class="md:grid md:gap-4 md:grid-cols-3">
<div class="p-8 md:col-span-1">
<h3 class="heading">
{{ $t("settings.account") }}
</h3>
<p class="mt-1 text-secondaryLight">
{{ $t("settings.account_description") }}
</p>
</div>
<div class="p-8 md:col-span-2">
<div v-if="currentUser === null">
<ButtonPrimary
:label="$t('auth.login')"
@click.native="showLogin = true"
/>
</div>
<div v-else class="space-y-8">
<section>
<h4 class="font-semibold text-secondaryDark">
{{ $t("settings.user") }}
</h4>
<div class="space-y-4 py-4">
<div class="flex items-start">
<div class="flex items-center">
<img
v-if="currentUser.photoURL"
:src="currentUser.photoURL"
class="rounded-full h-5 w-5"
/>
<i v-else class="material-icons">account_circle</i>
</div>
<div class="ml-4">
<label>
{{ currentUser.displayName || $t("state.nothing_found") }}
</label>
<p class="mt-1 text-secondaryLight">
{{ $t("settings.account_name_description") }}
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center">
<i class="material-icons">email</i>
</div>
<div class="ml-4">
<label>
{{ currentUser.email || $t("state.nothing_found") }}
</label>
<p class="mt-1 text-secondaryLight">
{{ $t("settings.account_email_description") }}
</p>
</div>
</div>
</div>
</section>
<Teams v-if="currentBackendUser && currentBackendUser.eaInvited" />
<section>
<h4 class="font-semibold text-secondaryDark">
{{ $t("settings.sync") }}
</h4>
<div class="mt-1 text-secondaryLight">
{{ $t("settings.sync_description") }}
</div>
<div class="space-y-4 py-4">
<div class="flex items-center">
<SmartToggle
:on="SYNC_COLLECTIONS"
@change="
toggleSettings('syncCollections', !SYNC_COLLECTIONS)
"
>
{{ $t("settings.sync_collections") }}
</SmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
:on="SYNC_ENVIRONMENTS"
@change="
toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
"
>
{{ $t("settings.sync_environments") }}
</SmartToggle>
</div>
<div class="flex items-center">
<SmartToggle
:on="SYNC_HISTORY"
@change="toggleSettings('syncHistory', !SYNC_HISTORY)"
>
{{ $t("settings.sync_history") }}
</SmartToggle>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="md:grid md:gap-4 md:grid-cols-3"> <div class="md:grid md:gap-4 md:grid-cols-3">
<div class="p-8 md:col-span-1"> <div class="p-8 md:col-span-1">
<h3 class="heading"> <h3 class="heading">
{{ $t("settings.theme") }} {{ $t("settings.theme") }}
</h3> </h3>
<p class="mt-1 text-secondaryLight"> <p class="mt-1 text-secondaryLight">
{{ $t("settings.theme_description") }} {{ $t("settings.theme_description") }}
</p> </p>
</div> </div>
<div class="space-y-8 p-8 md:col-span-2"> <div class="space-y-8 p-8 md:col-span-2">
skipping to change at line 171 skipping to change at line 73
<SmartLink <SmartLink
class="link" class="link"
to="https://github.com/hoppscotch/hoppscotch/issues/new/choose" to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
blank blank
> >
{{ $t("app.contact_us") }} </SmartLink {{ $t("app.contact_us") }} </SmartLink
>. >.
</div> </div>
<div class="space-y-4 py-4"> <div class="space-y-4 py-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
:on="EXPERIMENTAL_URL_BAR_ENABLED" {{ $t("settings.telemetry") }}
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
>
{{ $t("settings.use_experimental_url_bar") }}
</SmartToggle> </SmartToggle>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal"> <SmartToggle
{{ $t("settings.telemetry") }} :on="EXPAND_NAVIGATION"
{{ @change="toggleSetting('EXPAND_NAVIGATION')"
TELEMETRY_ENABLED >
? $t("state.enabled") {{ $t("settings.expand_navigation") }}
: $t("state.disabled")
}}
</SmartToggle> </SmartToggle>
</div> </div>
<!-- <div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="LEFT_SIDEBAR" :on="SIDEBAR_ON_LEFT"
@change="toggleSetting('LEFT_SIDEBAR')" @change="toggleSetting('SIDEBAR_ON_LEFT')"
> >
{{ $t("settings.navigation_sidebar") }} {{ $t("settings.sidebar_on_left") }}
{{
LEFT_SIDEBAR ? $t("state.enabled") : $t("state.disabled")
}}
</SmartToggle> </SmartToggle>
</div> --> </div>
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')"> <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
{{ $t("layout.zen_mode") }} {{ $t("layout.zen_mode") }}
{{ ZEN_MODE ? $t("state.enabled") : $t("state.disabled") }}
</SmartToggle> </SmartToggle>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</div> </div>
<div class="md:grid md:gap-4 md:grid-cols-3"> <div class="md:grid md:gap-4 md:grid-cols-3">
<div class="p-8 md:col-span-1"> <div class="p-8 md:col-span-1">
<h3 class="heading"> <h3 class="heading">
skipping to change at line 242 skipping to change at line 135
<span v-else> <span v-else>
{{ $t("settings.extension_version") }}: {{ $t("settings.extension_version") }}:
{{ $t("settings.extension_ver_not_reported") }} {{ $t("settings.extension_ver_not_reported") }}
</span> </span>
</div> </div>
<div class="flex flex-col space-y-2 py-4"> <div class="flex flex-col space-y-2 py-4">
<span> <span>
<SmartItem <SmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch" to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank blank
svg="firefox" svg="brands/firefox"
label="Firefox" label="Firefox"
:info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''" :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
:active-info-icon="hasFirefoxExtInstalled" :active-info-icon="hasFirefoxExtInstalled"
outline outline
/> />
</span> </span>
<span> <span>
<SmartItem <SmartItem
to="https://chrome.google.com/webstore/detail/hoppscotch-brows er-extens/amknoiejhlmhancpahfcfcfhllgkpbld" to="https://chrome.google.com/webstore/detail/hoppscotch-brows er-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
blank blank
svg="chrome" svg="brands/chrome"
label="Chrome" label="Chrome"
:info-icon="hasChromeExtInstalled ? 'check_circle' : ''" :info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
:active-info-icon="hasChromeExtInstalled" :active-info-icon="hasChromeExtInstalled"
outline outline
/> />
</span> </span>
</div> </div>
<div class="space-y-4 py-4"> <div class="space-y-4 py-4">
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
skipping to change at line 301 skipping to change at line 194
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="PROXY_ENABLED" :on="PROXY_ENABLED"
@change="toggleSetting('PROXY_ENABLED')" @change="toggleSetting('PROXY_ENABLED')"
> >
{{ $t("settings.proxy_use_toggle") }} {{ $t("settings.proxy_use_toggle") }}
</SmartToggle> </SmartToggle>
</div> </div>
</div> </div>
<div class="flex space-x-2 py-4 items-center"> <div class="flex space-x-2 py-4 items-center">
<div class="flex flex-1 items-center relative"> <div class="flex flex-1 flex-col relative">
<input <input
id="url" id="url"
v-model="PROXY_URL" v-model="PROXY_URL"
class="input floating-input" class="input floating-input"
placeholder=" " placeholder=" "
type="url" type="url"
autocomplete="off"
:disabled="!PROXY_ENABLED" :disabled="!PROXY_ENABLED"
/> />
<label for="url"> <label for="url">
{{ $t("settings.proxy_url") }} {{ $t("settings.proxy_url") }}
</label> </label>
</div> </div>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('settings.reset_default')" :title="$t('settings.reset_default')"
:icon="clearIcon" :svg="clearIcon"
outline outline
class="rounded" class="rounded"
@click.native="resetProxy" @click.native="resetProxy"
/> />
</div> </div>
</section> </section>
</div> </div>
</div> </div>
</div> </div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
<SmartConfirmModal <SmartConfirmModal
:show="confirmRemove" :show="confirmRemove"
:title="`${$t('confirm.remove_telemetry')} ${$t( :title="`${$t('confirm.remove_telemetry')} ${$t(
'settings.telemetry_helps_us' 'settings.telemetry_helps_us'
)}`" )}`"
@hide-modal="confirmRemove = false" @hide-modal="confirmRemove = false"
@resolve=" @resolve="
toggleSetting('TELEMETRY_ENABLED') () => {
confirmRemove = false toggleSetting('TELEMETRY_ENABLED')
confirmRemove = false
}
" "
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api" import { defineComponent } from "@nuxtjs/composition-api"
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
import { import {
hasExtensionInstalled, hasExtensionInstalled,
hasChromeExtensionInstalled, hasChromeExtensionInstalled,
hasFirefoxExtensionInstalled, hasFirefoxExtensionInstalled,
} from "~/helpers/strategies/ExtensionStrategy" } from "~/helpers/strategies/ExtensionStrategy"
import { import {
applySetting, applySetting,
toggleSetting, toggleSetting,
defaultSettings, defaultSettings,
useSetting, useSetting,
} from "~/newstore/settings" } from "~/newstore/settings"
import type { KeysMatching } from "~/types/ts-utils" import type { KeysMatching } from "~/types/ts-utils"
import { currentUser$ } from "~/helpers/fb/auth"
import { getLocalConfig } from "~/newstore/localpersistence" import { getLocalConfig } from "~/newstore/localpersistence"
import { useReadonlyStream } from "~/helpers/utils/composables"
type SettingsType = typeof defaultSettings type SettingsType = typeof defaultSettings
export default defineComponent({ export default defineComponent({
setup() { setup() {
return { return {
PROXY_ENABLED: useSetting("PROXY_ENABLED"), PROXY_ENABLED: useSetting("PROXY_ENABLED"),
PROXY_URL: useSetting("PROXY_URL"), PROXY_URL: useSetting("PROXY_URL"),
PROXY_KEY: useSetting("PROXY_KEY"),
EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"), EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
SYNC_COLLECTIONS: useSetting("syncCollections"),
SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
SYNC_HISTORY: useSetting("syncHistory"),
TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"), TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"), EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
ZEN_MODE: useSetting("ZEN_MODE"), ZEN_MODE: useSetting("ZEN_MODE"),
currentUser: useReadonlyStream(currentUser$, currentUser$.value),
currentBackendUser: useReadonlyStream(
currentUserInfo$,
currentUserInfo$.value
),
} }
}, },
data() { data() {
return { return {
extensionVersion: hasExtensionInstalled() extensionVersion: hasExtensionInstalled()
? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion() ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
: null, : null,
hasChromeExtInstalled: hasChromeExtensionInstalled(), hasChromeExtInstalled: hasChromeExtensionInstalled(),
hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(), hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
clearIcon: "clear_all", clearIcon: "rotate-ccw",
showLogin: false,
active: getLocalConfig("THEME_COLOR") || "blue", active: getLocalConfig("THEME_COLOR") || "blue",
confirmRemove: false, confirmRemove: false,
} }
}, },
head() { head() {
return { return {
title: `${this.$t("navigation.settings")} • Hoppscotch`, title: `${this.$t("navigation.settings")} • Hoppscotch`,
} }
}, },
computed: { computed: {
proxySettings(): { url: string; key: string } { proxySettings(): { url: string } {
return { return {
url: this.PROXY_URL, url: this.PROXY_URL,
key: this.PROXY_KEY,
} }
}, },
}, },
watch: { watch: {
ZEN_MODE(ZEN_MODE) { ZEN_MODE(ZEN_MODE) {
this.applySetting("LEFT_SIDEBAR", !ZEN_MODE) this.applySetting("EXPAND_NAVIGATION", !ZEN_MODE)
// this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
}, },
proxySettings: { proxySettings: {
deep: true, deep: true,
handler({ url, key }) { handler({ url }) {
this.applySetting("PROXY_URL", url) this.applySetting("PROXY_URL", url)
this.applySetting("PROXY_KEY", key)
}, },
}, },
}, },
methods: { methods: {
showConfirmModal() { showConfirmModal() {
if (this.TELEMETRY_ENABLED) this.confirmRemove = true if (this.TELEMETRY_ENABLED) this.confirmRemove = true
else toggleSetting("TELEMETRY_ENABLED") else toggleSetting("TELEMETRY_ENABLED")
}, },
applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) { applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
applySetting(key, value) applySetting(key, value)
skipping to change at line 452 skipping to change at line 330
toggleSetting(key) toggleSetting(key)
}, },
toggleSettings<K extends KeysMatching<SettingsType, boolean>>( toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
name: K, name: K,
value: SettingsType[K] value: SettingsType[K]
) { ) {
this.applySetting(name, value) this.applySetting(name, value)
}, },
resetProxy() { resetProxy() {
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`) applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
this.clearIcon = "done" this.clearIcon = "check"
this.$toast.success(this.$t("state.cleared").toString(), { this.$toast.success(`${this.$t("state.cleared")}`, {
icon: "clear_all", icon: "clear_all",
}) })
setTimeout(() => (this.clearIcon = "clear_all"), 1000) setTimeout(() => (this.clearIcon = "rotate-ccw"), 1000)
}, },
getColorModeName(colorMode: string) { getColorModeName(colorMode: string) {
switch (colorMode) { switch (colorMode) {
case "system": case "system":
return "settings.system_mode" return "settings.system_mode"
case "light": case "light":
return "settings.light_mode" return "settings.light_mode"
case "dark": case "dark":
return "settings.dark_mode" return "settings.dark_mode"
case "black": case "black":
 End of changes. 30 change blocks. 
153 lines changed or deleted 31 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)