"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

---