btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Merge branch 'main' into feat/short-code

Browse Source
This commit is contained in:
liyasthomas
2021-11-22 11:35:16 +05:30
parent 6ed4211004 1e08e7f73d
commit 56cdb79773
103 changed files with 2125 additions and 2203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -35,13 +35,8 @@
@apply bg-divider;
}
.cm-focused {
@apply !outline-none;
}
input::placeholder,
textarea::placeholder,
.CodeMirror-empty {
textarea::placeholder {
@apply text-secondary;
@apply opacity-25;
}
@@ -318,7 +313,7 @@ pre.ace_editor {
&.toasted-primary {
@apply bg-tooltip;
@apply text-primary;
@apply justify-start;
@apply justify-between;
@apply shadow;
@apply font-medium;
@apply transition;
@@ -391,7 +386,7 @@ pre.ace_editor {
.smart-splitter .splitpanes__splitter::before {
@apply absolute;
@apply inset-0;
@apply bg-dividerLight;
@apply bg-accentLight;
@apply opacity-0;
@apply z-20;
@apply transition;
@@ -435,29 +430,16 @@ pre.ace_editor {
@apply w-full;
}
.CodeMirror {
@apply !h-auto;
.cm-focused {
@apply select-auto;
@apply !outline-none;
font-size: var(--body-font-size);
&:not(.CodeMirror-focused) .CodeMirror-activeline-background {
background: transparent !important;
}
.CodeMirror-dialog-top {
.cm-activeLine {
@apply bg-primaryLight;
@apply border-dividerLight;
@apply px-4;
@apply py-2;
@apply z-5;
}
.CodeMirror-scroll {
@apply min-h-64;
}
* {
font-family: "Roboto Mono", monospace;
.cm-activeLineGutter {
@apply bg-primaryDark;
}
}

28
packages/hoppscotch-app/assets/scss/themes.scss
View File

@@ -53,17 +53,17 @@
}
@mixin dark-editor-theme {
--editor-type-color: theme("colors.purple.500");
--editor-name-color: theme("colors.blue.500");
--editor-operator-color: theme("colors.indigo.500");
--editor-invalid-color: theme("colors.red.500");
--editor-separator-color: theme("colors.gray.500");
--editor-meta-color: theme("colors.gray.500");
--editor-variable-color: theme("colors.green.500");
--editor-link-color: theme("colors.cyan.500");
--editor-process-color: theme("colors.gray.400");
--editor-constant-color: theme("colors.fuchsia.500");
--editor-keyword-color: theme("colors.pink.500");
--editor-type-color: theme("colors.purple.400");
--editor-name-color: theme("colors.blue.400");
--editor-operator-color: theme("colors.indigo.400");
--editor-invalid-color: theme("colors.red.400");
--editor-separator-color: theme("colors.gray.400");
--editor-meta-color: theme("colors.gray.400");
--editor-variable-color: theme("colors.green.400");
--editor-link-color: theme("colors.cyan.400");
--editor-process-color: theme("colors.fuchsia.400");
--editor-constant-color: theme("colors.violet.400");
--editor-keyword-color: theme("colors.pink.400");
}
@mixin light-editor-theme {
@@ -82,15 +82,15 @@
@mixin black-editor-theme {
--editor-type-color: theme("colors.purple.400");
--editor-name-color: theme("colors.gray.400");
--editor-name-color: theme("colors.fuchsia.400");
--editor-operator-color: theme("colors.indigo.400");
--editor-invalid-color: theme("colors.red.400");
--editor-separator-color: theme("colors.gray.400");
--editor-meta-color: theme("colors.gray.400");
--editor-variable-color: theme("colors.green.400");
--editor-link-color: theme("colors.cyan.400");
--editor-process-color: theme("colors.blue.400");
--editor-constant-color: theme("colors.fuchsia.400");
--editor-process-color: theme("colors.violet.400");
--editor-constant-color: theme("colors.blue.400");
--editor-keyword-color: theme("colors.pink.400");
}

135
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -4,7 +4,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="EXPAND_NAVIGATION ? $t('hide.sidebar') : $t('show.sidebar')"
:title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
svg="sidebar"
class="transform"
:class="{ '-rotate-180': !EXPAND_NAVIGATION }"
@@ -12,9 +12,9 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${
ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
} ${$t('layout.zen_mode')}`"
:title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
'layout.zen_mode'
)}`"
:svg="ZEN_MODE ? 'minimize' : 'maximize'"
:class="{
'!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
@@ -36,20 +36,20 @@
<ButtonSecondary
svg="help-circle"
class="!rounded-none"
:label="`${$t('app.help')}`"
:label="`${t('app.help')}`"
/>
</template>
<div class="flex flex-col">
<SmartItem
svg="book"
:label="`${$t('app.documentation')}`"
:label="`${t('app.documentation')}`"
to="https://docs.hoppscotch.io"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
svg="zap"
:label="`${$t('app.keyboard_shortcuts')}`"
:label="`${t('app.keyboard_shortcuts')}`"
@click.native="
() => {
showShortcuts = true
@@ -59,14 +59,14 @@
/>
<SmartItem
svg="gift"
:label="`${$t('app.whats_new')}`"
:label="`${t('app.whats_new')}`"
to="https://docs.hoppscotch.io/changelog"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
svg="message-circle"
:label="`${$t('app.chat_with_us')}`"
:label="`${t('app.chat_with_us')}`"
@click.native="
() => {
chatWithUs()
@@ -77,21 +77,21 @@
<hr />
<SmartItem
svg="github"
:label="`${$t('app.github')}`"
:label="`${t('app.github')}`"
to="https://github.com/hoppscotch/hoppscotch"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
svg="twitter"
:label="`${$t('app.twitter')}`"
:label="`${t('app.twitter')}`"
to="https://hoppscotch.io/twitter"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
svg="user-plus"
:label="`${$t('app.invite')}`"
:label="`${t('app.invite')}`"
@click.native="
() => {
showShare = true
@@ -101,14 +101,14 @@
/>
<SmartItem
svg="lock"
:label="`${$t('app.terms_and_privacy')}`"
:label="`${t('app.terms_and_privacy')}`"
to="https://docs.hoppscotch.io/privacy"
blank
@click.native="$refs.options.tippy().hide()"
/>
<!-- <SmartItem :label="$t('app.status')" /> -->
<!-- <SmartItem :label="t('app.status')" /> -->
<div class="flex opacity-50 py-2 px-4">
{{ `${$t("app.name")} ${$t("app.version")}` }}
{{ `${t("app.name")} ${t("app.version")}` }}
</div>
</div>
</tippy>
@@ -116,19 +116,19 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
svg="zap"
:title="$t('app.shortcuts')"
:title="t('app.shortcuts')"
@click.native="showShortcuts = true"
/>
<ButtonSecondary
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
svg="share-2"
:title="$t('request.share')"
:title="t('request.share')"
@click.native="nativeShare()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="COLUMN_LAYOUT ? $t('layout.row') : $t('layout.column')"
:title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
svg="columns"
class="transform"
:class="{ 'rotate-90': !COLUMN_LAYOUT }"
@@ -142,7 +142,7 @@
>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
:title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
svg="sidebar-open"
class="transform"
:class="{ 'rotate-180': !SIDEBAR }"
@@ -156,61 +156,56 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "@nuxtjs/composition-api"
<script setup lang="ts">
import { ref, watch } from "@nuxtjs/composition-api"
import { defineActionHandler } from "~/helpers/actions"
import { showChat } from "~/helpers/support"
import { useSetting } from "~/newstore/settings"
import { useI18n } from "~/helpers/utils/composables"
export default defineComponent({
setup() {
const showShortcuts = ref(false)
const showShare = ref(false)
const t = useI18n()
const showShortcuts = ref(false)
const showShare = ref(false)
defineActionHandler("flyouts.keybinds.toggle", () => {
showShortcuts.value = !showShortcuts.value
})
defineActionHandler("modals.share.toggle", () => {
showShare.value = !showShare.value
})
return {
EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
SIDEBAR: useSetting("SIDEBAR"),
ZEN_MODE: useSetting("ZEN_MODE"),
COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
navigatorShare: !!navigator.share,
showShortcuts,
showShare,
}
},
watch: {
ZEN_MODE() {
this.EXPAND_NAVIGATION = !this.ZEN_MODE
},
},
methods: {
nativeShare() {
if (navigator.share) {
navigator
.share({
title: "Hoppscotch",
text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
url: "https://hoppscotch.io",
})
.then(() => {})
.catch(console.error)
} else {
// fallback
}
},
chatWithUs() {
showChat()
},
},
defineActionHandler("flyouts.keybinds.toggle", () => {
showShortcuts.value = !showShortcuts.value
})
defineActionHandler("modals.share.toggle", () => {
showShare.value = !showShare.value
})
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const SIDEBAR = useSetting("SIDEBAR")
const ZEN_MODE = useSetting("ZEN_MODE")
const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
const navigatorShare = !!navigator.share
watch(
() => ZEN_MODE.value,
() => {
EXPAND_NAVIGATION.value = !ZEN_MODE.value
}
)
const nativeShare = () => {
if (navigator.share) {
navigator
.share({
title: "Hoppscotch",
text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
url: "https://hoppscotch.io",
})
.then(() => {})
.catch(console.error)
} else {
// fallback
}
}
const chatWithUs = () => {
showChat()
}
</script>

5
packages/hoppscotch-app/components/app/Fuse.vue
View File

@@ -15,7 +15,7 @@
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center">
{{ $t("state.nothing_found") }} "{{ search }}"
{{ t("state.nothing_found") }} "{{ search }}"
</span>
</div>
</div>
@@ -26,6 +26,9 @@ import { computed, onUnmounted, onMounted } from "@nuxtjs/composition-api"
import Fuse from "fuse.js"
import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
import { HoppAction } from "~/helpers/actions"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
input: Record<string, any>[]

16
packages/hoppscotch-app/components/app/GitHubStarButton.vue
View File

@@ -18,19 +18,13 @@
</transition>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import GithubButton from "vue-github-button"
export default defineComponent({
components: {
GithubButton,
},
props: {
size: {
type: String,
default: undefined,
},
defineProps({
size: {
type: String,
default: undefined,
},
})
</script>

43
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -15,21 +15,21 @@
<ButtonSecondary
id="installPWA"
v-tippy="{ theme: 'tooltip' }"
:title="$t('header.install_pwa')"
:title="t('header.install_pwa')"
svg="download"
class="rounded"
@click.native="showInstallPrompt()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('app.search')} <kbd>/</kbd>`"
:title="`${t('app.search')} <kbd>/</kbd>`"
svg="search"
class="rounded"
@click.native="showSearch = true"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('support.title')} <kbd>?</kbd>`"
:title="`${t('support.title')} <kbd>?</kbd>`"
svg="life-buoy"
class="rounded"
@click.native="showSupport = true"
@@ -37,21 +37,21 @@
<ButtonSecondary
v-if="currentUser === null"
svg="upload-cloud"
:label="$t('header.save_workspace')"
:label="t('header.save_workspace')"
filled
class="hidden md:flex"
@click.native="showLogin = true"
/>
<ButtonPrimary
v-if="currentUser === null"
:label="$t('header.login')"
:label="t('header.login')"
@click.native="showLogin = true"
/>
<div v-else class="space-x-2 inline-flex items-center">
<ButtonPrimary
v-tippy="{ theme: 'tooltip' }"
:title="$t('team.invite_tooltip')"
:label="$t('team.invite')"
:title="t('team.invite_tooltip')"
:label="t('team.invite')"
svg="user-plus"
class="
!bg-green-500
@@ -78,7 +78,7 @@
<ButtonSecondary
v-else
v-tippy="{ theme: 'tooltip' }"
:title="$t('header.account')"
:title="t('header.account')"
class="rounded"
svg="user"
/>
@@ -86,13 +86,13 @@
<SmartItem
to="/profile"
svg="user"
:label="$t('navigation.profile')"
:label="t('navigation.profile')"
@click.native="$refs.user.tippy().hide()"
/>
<SmartItem
to="/settings"
svg="settings"
:label="$t('navigation.settings')"
:label="t('navigation.settings')"
@click.native="$refs.user.tippy().hide()"
/>
<FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
@@ -110,18 +110,20 @@
</template>
<script setup lang="ts">
import { onMounted, ref, useContext } from "@nuxtjs/composition-api"
import { onMounted, ref } from "@nuxtjs/composition-api"
import intializePwa from "~/helpers/pwa"
import { probableUser$ } from "~/helpers/fb/auth"
import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import { defineActionHandler } from "~/helpers/actions"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
/**
* Once the PWA code is initialized, this holds a method
@@ -160,12 +162,11 @@ onMounted(() => {
const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
if (!cookiesAllowed) {
$toast.show(t("app.we_use_cookies").toString(), {
icon: "cookie",
toast.show(`${t("app.we_use_cookies")}`, {
duration: 0,
action: [
{
text: t("action.learn_more").toString(),
text: `${t("action.learn_more")}`,
onClick: (_, toastObject) => {
setLocalConfig("cookiesAllowed", "yes")
toastObject.goAway(0)
@@ -173,7 +174,7 @@ onMounted(() => {
},
},
{
text: t("action.dismiss").toString(),
text: `${t("action.dismiss")}`,
onClick: (_, toastObject) => {
setLocalConfig("cookiesAllowed", "yes")
toastObject.goAway(0)

9
packages/hoppscotch-app/components/app/Interceptor.vue
View File

@@ -4,17 +4,17 @@
:on="PROXY_ENABLED"
@change="toggleSettingKey('PROXY_ENABLED')"
>
{{ $t("settings.proxy") }}
{{ t("settings.proxy") }}
</SmartToggle>
<SmartToggle
:on="EXTENSIONS_ENABLED"
@change="toggleSettingKey('EXTENSIONS_ENABLED')"
>
{{ $t("settings.extensions") }}:
{{ t("settings.extensions") }}:
{{
extensionVersion != null
? `v${extensionVersion.major}.${extensionVersion.minor}`
: $t("settings.extension_ver_not_reported")
: t("settings.extension_ver_not_reported")
}}
</SmartToggle>
</div>
@@ -25,6 +25,9 @@ import { defineComponent } from "@nuxtjs/composition-api"
import { KeysMatching } from "~/types/ts-utils"
import { SettingsType, toggleSetting, useSetting } from "~/newstore/settings"
import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const PROXY_ENABLED = useSetting("PROXY_ENABLED")
const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")

7
packages/hoppscotch-app/components/app/PowerSearch.vue
View File

@@ -13,7 +13,7 @@
type="text"
autocomplete="off"
name="command"
:placeholder="`${$t('app.type_a_command_search')}`"
:placeholder="`${t('app.type_a_command_search')}`"
class="
bg-transparent
border-b border-dividerLight
@@ -45,7 +45,7 @@
class="flex flex-col"
>
<h5 class="my-2 text-secondaryLight py-2 px-6">
{{ $t(map.section) }}
{{ t(map.section) }}
</h5>
<AppPowerSearchEntry
v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -66,6 +66,9 @@ import { ref, computed, watch } from "@nuxtjs/composition-api"
import { HoppAction, invokeAction } from "~/helpers/actions"
import { spotlight as mappings, fuse } from "~/helpers/shortcuts"
import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
show: boolean

6
packages/hoppscotch-app/components/app/PowerSearchEntry.vue
View File

@@ -24,7 +24,7 @@
class="flex flex-1 mr-4 font-medium transition"
:class="{ 'text-secondaryDark': active }"
>
{{ $t(shortcut.label) }}
{{ t(shortcut.label) }}
</span>
<span
v-for="(key, keyIndex) in shortcut.keys"
@@ -37,6 +37,10 @@
</template>
<script setup lang="ts">
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps<{
shortcut: Object
active: Boolean

14
packages/hoppscotch-app/components/app/Section.vue
View File

@@ -4,15 +4,11 @@
</section>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
export default defineComponent({
props: {
label: {
type: String,
default: "Section",
},
<script setup lang="ts">
defineProps({
label: {
type: String,
default: "Section",
},
})
</script>

126
packages/hoppscotch-app/components/app/Share.vue
View File

@@ -1,12 +1,12 @@
<template>
<SmartModal
v-if="show"
:title="$t('app.invite_your_friends')"
@close="$emit('hide-modal')"
:title="t('app.invite_your_friends')"
@close="hideModal"
>
<template #body>
<p class="text-secondaryLight mb-8 px-2">
{{ $t("app.invite_description") }}
{{ t("app.invite_description") }}
</p>
<div class="flex flex-col space-y-2 px-2">
<div class="grid gap-4 grid-cols-3">
@@ -25,7 +25,7 @@
<button class="share-link" @click="copyAppLink">
<SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
<span class="mt-3">
{{ $t("app.copy") }}
{{ t("app.copy") }}
</span>
</button>
</div>
@@ -34,70 +34,70 @@
</SmartModal>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import { ref } from "@nuxtjs/composition-api"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { useI18n, useToast } from "~/helpers/utils/composables"
export default defineComponent({
props: {
show: Boolean,
},
data() {
const url = "https://hoppscotch.io"
const text = "Hoppscotch - Open source API development ecosystem."
const description =
"Helps you create requests faster, saving precious time on development."
const subject =
"Checkout Hoppscotch - an open source API development ecosystem"
const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
const twitter = "hoppscotch_io"
const t = useI18n()
return {
url: "https://hoppscotch.io",
copyIcon: "copy",
platforms: [
{
name: "Email",
icon: "mail",
link: `mailto:?subject=${subject}&body=${summary}`,
},
{
name: "Twitter",
icon: "brands/twitter",
link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
},
{
name: "Facebook",
icon: "brands/facebook",
link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
},
{
name: "Reddit",
icon: "brands/reddit",
link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
},
{
name: "LinkedIn",
icon: "brands/linkedin",
link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
},
],
}
const toast = useToast()
defineProps<{
show: Boolean
}>()
const emit = defineEmits<{
(e: "hide-modal"): void
}>()
const url = "https://hoppscotch.io"
const text = "Hoppscotch - Open source API development ecosystem."
const description =
"Helps you create requests faster, saving precious time on development."
const subject = "Checkout Hoppscotch - an open source API development ecosystem"
const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
const twitter = "hoppscotch_io"
const copyIcon = ref("copy")
const platforms = [
{
name: "Email",
icon: "mail",
link: `mailto:?subject=${subject}&body=${summary}`,
},
methods: {
copyAppLink() {
copyToClipboard(this.url)
this.copyIcon = "check"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "copy"), 1000)
},
hideModal() {
this.$emit("hide-modal")
},
{
name: "Twitter",
icon: "brands/twitter",
link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
},
})
{
name: "Facebook",
icon: "brands/facebook",
link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
},
{
name: "Reddit",
icon: "brands/reddit",
link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
},
{
name: "LinkedIn",
icon: "brands/linkedin",
link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
},
]
const copyAppLink = () => {
copyToClipboard(url)
copyIcon.value = "check"
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
const hideModal = () => {
emit("hide-modal")
}
</script>
<style lang="scss" scoped>

23
packages/hoppscotch-app/components/app/Shortcuts.vue
View File

@@ -14,7 +14,7 @@
justify-between
"
>
<h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
<div class="flex">
<ButtonSecondary svg="x" class="rounded" @click.native="close()" />
</div>
@@ -35,18 +35,26 @@
px-4
focus-visible:border-divider
"
:placeholder="`${$t('action.search')}`"
:placeholder="`${t('action.search')}`"
/>
</div>
</div>
<div v-if="filterText">
<div
v-if="filterText"
class="
divide-y divide-dividerLight
flex flex-col flex-1
overflow-auto
hide-scrollbar
"
>
<div
v-for="(map, mapIndex) in searchResults"
:key="`map-${mapIndex}`"
class="space-y-4 py-4 px-6"
>
<h1 class="font-semibold text-secondaryDark">
{{ $t(map.item.section) }}
{{ t(map.item.section) }}
</h1>
<AppShortcutsEntry
v-for="(shortcut, index) in map.item.shortcuts"
@@ -66,7 +74,7 @@
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<span class="text-center">
{{ $t("state.nothing_found") }} "{{ filterText }}"
{{ t("state.nothing_found") }} "{{ filterText }}"
</span>
</div>
</div>
@@ -85,7 +93,7 @@
class="space-y-4 py-4 px-6"
>
<h1 class="font-semibold text-secondaryDark">
{{ $t(map.section) }}
{{ t(map.section) }}
</h1>
<AppShortcutsEntry
v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -102,6 +110,9 @@
import { computed, ref } from "@nuxtjs/composition-api"
import Fuse from "fuse.js"
import mappings from "~/helpers/shortcuts"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps<{
show: boolean

6
packages/hoppscotch-app/components/app/ShortcutsEntry.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex items-center">
<span class="flex flex-1 mr-4">
{{ $t(shortcut.label) }}
{{ t(shortcut.label) }}
</span>
<span
v-for="(key, index) in shortcut.keys"
@@ -14,6 +14,10 @@
</template>
<script setup lang="ts">
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps<{
shortcut: Object
}>()

71
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -26,50 +26,43 @@
</aside>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import useWindowSize from "~/helpers/utils/useWindowSize"
import { useSetting } from "~/newstore/settings"
import { useI18n } from "~/helpers/utils/composables"
export default defineComponent({
setup() {
return {
windowInnerWidth: useWindowSize(),
EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
}
const t = useI18n()
const windowInnerWidth = useWindowSize()
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
const primaryNavigation = [
{
target: "index",
svg: "link-2",
title: t("navigation.rest"),
},
data() {
return {
primaryNavigation: [
{
target: "index",
svg: "link-2",
title: this.$t("navigation.rest"),
},
{
target: "graphql",
svg: "graphql",
title: this.$t("navigation.graphql"),
},
{
target: "realtime",
svg: "globe",
title: this.$t("navigation.realtime"),
},
{
target: "documentation",
svg: "book-open",
title: this.$t("navigation.doc"),
},
{
target: "settings",
svg: "settings",
title: this.$t("navigation.settings"),
},
],
}
{
target: "graphql",
svg: "graphql",
title: t("navigation.graphql"),
},
})
{
target: "realtime",
svg: "globe",
title: t("navigation.realtime"),
},
{
target: "documentation",
svg: "book-open",
title: t("navigation.doc"),
},
{
target: "settings",
svg: "settings",
title: t("navigation.settings"),
},
]
</script>
<style scoped lang="scss">

59
packages/hoppscotch-app/components/app/SlideOver.vue
View File

@@ -33,37 +33,34 @@
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import { onMounted, watch } from "@nuxtjs/composition-api"
export default defineComponent({
props: {
show: {
type: Boolean,
required: true,
default: false,
},
},
watch: {
show: {
immediate: true,
handler(show) {
if (process.client) {
if (show) document.body.style.setProperty("overflow", "hidden")
else document.body.style.removeProperty("overflow")
}
},
},
},
mounted() {
document.addEventListener("keydown", (e) => {
if (e.keyCode === 27 && this.show) this.close()
})
},
methods: {
close() {
this.$emit("close")
},
},
const props = defineProps<{
show: Boolean
}>()
const emit = defineEmits<{
(e: "close"): void
}>()
watch(
() => props.show,
(show) => {
if (process.client) {
if (show) document.body.style.setProperty("overflow", "hidden")
else document.body.style.removeProperty("overflow")
}
}
)
onMounted(() => {
document.addEventListener("keydown", (e) => {
if (e.keyCode === 27 && props.show) close()
})
})
const close = () => {
emit("close")
}
</script>

79
packages/hoppscotch-app/components/app/Support.vue
View File

@@ -1,7 +1,7 @@
<template>
<SmartModal
v-if="show"
:title="$t('support.title')"
:title="t('support.title')"
max-width="sm:max-w-md"
@close="$emit('hide-modal')"
>
@@ -9,9 +9,9 @@
<div class="flex flex-col space-y-2">
<SmartItem
svg="book"
:label="$t('app.documentation')"
:label="t('app.documentation')"
to="https://docs.hoppscotch.io"
:description="$t('support.documentation')"
:description="t('support.documentation')"
info-icon="chevron_right"
active
blank
@@ -19,20 +19,17 @@
/>
<SmartItem
svg="zap"
:label="$t('app.keyboard_shortcuts')"
:description="$t('support.shortcuts')"
:label="t('app.keyboard_shortcuts')"
:description="t('support.shortcuts')"
info-icon="chevron_right"
active
@click.native="
showShortcuts()
hideModal()
"
@click.native="showShortcuts()"
/>
<SmartItem
svg="gift"
:label="$t('app.whats_new')"
:label="t('app.whats_new')"
to="https://docs.hoppscotch.io/changelog"
:description="$t('support.changelog')"
:description="t('support.changelog')"
info-icon="chevron_right"
active
blank
@@ -40,31 +37,28 @@
/>
<SmartItem
svg="message-circle"
:label="$t('app.chat_with_us')"
:description="$t('support.chat')"
:label="t('app.chat_with_us')"
:description="t('support.chat')"
info-icon="chevron_right"
active
@click.native="
chatWithUs()
hideModal()
"
@click.native="chatWithUs()"
/>
<SmartItem
svg="brands/discord"
:label="$t('app.join_discord_community')"
:label="t('app.join_discord_community')"
to="https://hoppscotch.io/discord"
blank
:description="$t('support.community')"
:description="t('support.community')"
info-icon="chevron_right"
active
@click.native="hideModal()"
/>
<SmartItem
svg="brands/twitter"
:label="$t('app.twitter')"
:label="t('app.twitter')"
to="https://hoppscotch.io/twitter"
blank
:description="$t('support.twitter')"
:description="t('support.twitter')"
info-icon="chevron_right"
active
@click.native="hideModal()"
@@ -74,25 +68,32 @@
</SmartModal>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import { invokeAction } from "~/helpers/actions"
import { showChat } from "~/helpers/support"
import { useI18n } from "~/helpers/utils/composables"
export default defineComponent({
props: {
show: Boolean,
},
methods: {
chatWithUs() {
showChat()
},
showShortcuts() {
invokeAction("flyouts.keybinds.toggle")
},
hideModal() {
this.$emit("hide-modal")
},
},
})
const t = useI18n()
defineProps<{
show: Boolean
}>()
const emit = defineEmits<{
(e: "hide-modal"): void
}>()
const chatWithUs = () => {
showChat()
hideModal()
}
const showShortcuts = () => {
invokeAction("flyouts.keybinds.toggle")
hideModal()
}
const hideModal = () => {
emit("hide-modal")
}
</script>

4
packages/hoppscotch-app/components/collections/Add.vue
View File

@@ -47,9 +47,7 @@ export default defineComponent({
methods: {
addNewCollection() {
if (!this.name) {
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
this.$toast.error(this.$t("collection.invalid_name"))
return
}
this.$emit("submit", this.name)

4
packages/hoppscotch-app/components/collections/AddFolder.vue
View File

@@ -51,9 +51,7 @@ export default defineComponent({
methods: {
addFolder() {
if (!this.name) {
this.$toast.error(this.$t("folder.invalid_name"), {
icon: "error_outline",
})
this.$toast.error(this.$t("folder.invalid_name"))
return
}
this.$emit("add-folder", {

4
packages/hoppscotch-app/components/collections/Edit.vue
View File

@@ -48,9 +48,7 @@ export default defineComponent({
methods: {
saveCollection() {
if (!this.name) {
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
this.$toast.error(this.$t("collection.invalid_name"))
return
}
this.$emit("submit", this.name)

4
packages/hoppscotch-app/components/collections/EditFolder.vue
View File

@@ -48,9 +48,7 @@ export default defineComponent({
methods: {
editFolder() {
if (!this.name) {
this.$toast.error(this.$t("folder.invalid_name"), {
icon: "error_outline",
})
this.$toast.error(this.$t("folder.invalid_name"))
return
}
this.$emit("submit", this.name)

4
packages/hoppscotch-app/components/collections/EditRequest.vue
View File

@@ -47,9 +47,7 @@ export default defineComponent({
methods: {
saveRequest() {
if (!this.requestUpdateData.name) {
this.$toast.error(this.$t("request.invalid_name"), {
icon: "error_outline",
})
this.$toast.error(this.$t("request.invalid_name"))
return
}
this.$emit("submit", this.requestUpdateData)

20
packages/hoppscotch-app/components/collections/ImportExport.vue
View File

@@ -229,15 +229,11 @@ export default defineComponent({
}
)
.then((res) => {
this.$toast.success(this.$t("export.gist_created"), {
icon: "done",
})
this.$toast.success(this.$t("export.gist_created"))
window.open(res.html_url)
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
},
@@ -415,23 +411,17 @@ export default defineComponent({
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
document.body.appendChild(a)
a.click()
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
this.$toast.success(this.$t("state.download_started"))
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
}, 1000)
},
fileImported() {
this.$toast.success(this.$t("state.file_imported"), {
icon: "folder_shared",
})
this.$toast.success(this.$t("state.file_imported"))
},
failedImport() {
this.$toast.error(this.$t("import.failed"), {
icon: "error_outline",
})
this.$toast.error(this.$t("import.failed"))
},
parsePostmanCollection({ info, name, item }) {
const hoppscotchCollection = {

46
packages/hoppscotch-app/components/collections/SaveRequest.vue
View File

@@ -1,7 +1,7 @@
<template>
<SmartModal
v-if="show"
:title="`${$t('collection.save_as')}`"
:title="`${t('collection.save_as')}`"
@close="hideModal"
>
<template #body>
@@ -18,11 +18,11 @@
@keyup.enter="saveRequestAs"
/>
<label for="selectLabelSaveReq">
{{ $t("request.name") }}
{{ t("request.name") }}
</label>
</div>
<label class="p-4">
{{ $t("collection.select_location") }}
{{ t("collection.select_location") }}
</label>
<CollectionsGraphql
v-if="mode === 'graphql'"
@@ -45,11 +45,11 @@
<template #footer>
<span>
<ButtonPrimary
:label="`${$t('action.save')}`"
:label="`${t('action.save')}`"
@click.native="saveRequestAs"
/>
<ButtonSecondary
:label="`${$t('action.cancel')}`"
:label="`${t('action.cancel')}`"
@click.native="hideModal"
/>
</span>
@@ -58,7 +58,7 @@
</template>
<script setup lang="ts">
import { reactive, ref, useContext, watch } from "@nuxtjs/composition-api"
import { reactive, ref, watch } from "@nuxtjs/composition-api"
import { isHoppRESTRequest } from "~/helpers/types/HoppRESTRequest"
import {
editGraphqlRequest,
@@ -75,6 +75,9 @@ import {
import * as teamUtils from "~/helpers/teams/utils"
import { apolloClient } from "~/helpers/apollo"
import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
type CollectionType =
| {
@@ -137,12 +140,7 @@ const emit = defineEmits<{
(e: "hide-modal"): void
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
// TODO: Use a better implementation with computed ?
// This implementation can't work across updates to mode prop (which won't happen tho)
@@ -194,15 +192,11 @@ const hideModal = () => {
const saveRequestAs = async () => {
if (!requestName.value) {
$toast.error(`${t("error.empty_req_name")}`, {
icon: "error_outline",
})
toast.error(`${t("error.empty_req_name")}`)
return
}
if (picked.value === null) {
$toast.error(`${t("collection.select")}`, {
icon: "error_outline",
})
toast.error(`${t("collection.select")}`)
return
}
@@ -283,9 +277,7 @@ const saveRequestAs = async () => {
requestSaved()
})
.catch((error) => {
$toast.error(t("profile.no_permission").toString(), {
icon: "error_outline",
})
toast.error(`${t("profile.no_permission")}`)
throw new Error(error)
})
@@ -320,9 +312,7 @@ const saveRequestAs = async () => {
requestSaved()
} catch (error) {
$toast.error(t("profile.no_permission").toString(), {
icon: "error_outline",
})
toast.error(`${t("profile.no_permission")}`)
console.error(error)
}
} else if (picked.value.pickedType === "teams-collection") {
@@ -352,9 +342,7 @@ const saveRequestAs = async () => {
requestSaved()
} catch (error) {
$toast.error(t("profile.no_permission").toString(), {
icon: "error_outline",
})
toast.error(`${t("profile.no_permission")}`)
console.error(error)
}
} else if (picked.value.pickedType === "gql-my-request") {
@@ -386,9 +374,7 @@ const saveRequestAs = async () => {
}
const requestSaved = () => {
$toast.success(`${t("request.added")}`, {
icon: "post_add",
})
toast.success(`${t("request.added")}`)
hideModal()
}

4
packages/hoppscotch-app/components/collections/graphql/Add.vue
View File

@@ -49,9 +49,7 @@ export default defineComponent({
methods: {
addNewCollection() {
if (!this.name) {
this.$toast.error(`${this.$t("collection.invalid_name")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("collection.invalid_name")}`)
return
}

4
packages/hoppscotch-app/components/collections/graphql/Collection.vue
View File

@@ -251,9 +251,7 @@ export default defineComponent({
this.$emit("select", { picked: null })
}
removeGraphqlCollection(this.collectionIndex)
this.$toast.success(`${this.$t("state.deleted")}`, {
icon: "delete",
})
this.$toast.success(`${this.$t("state.deleted")}`)
},
dropEvent({ dataTransfer }: any) {
this.dragging = !this.dragging

4
packages/hoppscotch-app/components/collections/graphql/Edit.vue
View File

@@ -54,9 +54,7 @@ export default defineComponent({
methods: {
saveCollection() {
if (!this.name) {
this.$toast.error(`${this.$t("collection.invalid_name")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("collection.invalid_name")}`)
return
}
const collectionUpdated = {

4
packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
View File

@@ -54,9 +54,7 @@ export default defineComponent({
methods: {
editFolder() {
if (!this.name) {
this.$toast.error(`${this.$t("collection.invalid_name")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("collection.invalid_name")}`)
return
}
editGraphqlFolder(this.folderPath, {

4
packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
View File

@@ -58,9 +58,7 @@ export default defineComponent({
methods: {
saveRequest() {
if (!this.requestUpdateData.name) {
this.$toast.error(`${this.$t("collection.invalid_name")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("collection.invalid_name")}`)
return
}
const requestUpdated = {

4
packages/hoppscotch-app/components/collections/graphql/Folder.vue
View File

@@ -250,9 +250,7 @@ export default defineComponent({
}
removeGraphqlFolder(this.folderPath)
this.$toast.success(`${this.$t("state.deleted")}`, {
icon: "delete",
})
this.$toast.success(`${this.$t("state.deleted")}`)
},
dropEvent({ dataTransfer }: any) {
this.dragging = !this.dragging

20
packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
View File

@@ -140,15 +140,11 @@ export default defineComponent({
}
)
.then((res) => {
this.$toast.success(this.$t("export.gist_created"), {
icon: "done",
})
this.$toast.success(this.$t("export.gist_created"))
window.open(res.html_url)
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
},
@@ -252,23 +248,17 @@ export default defineComponent({
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
document.body.appendChild(a)
a.click()
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
this.$toast.success(this.$t("state.download_started"))
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
}, 1000)
},
fileImported() {
this.$toast.success(this.$t("state.file_imported"), {
icon: "folder_shared",
})
this.$toast.success(this.$t("state.file_imported"))
},
failedImport() {
this.$toast.error(this.$t("import.failed"), {
icon: "error_outline",
})
this.$toast.error(this.$t("import.failed"))
},
parsePostmanCollection({ info, name, item }) {
const hoppscotchCollection = {

4
packages/hoppscotch-app/components/collections/graphql/Request.vue
View File

@@ -194,9 +194,7 @@ export default defineComponent({
}
removeGraphqlRequest(this.folderPath, this.requestIndex)
this.$toast.success(`${this.$t("state.deleted")}`, {
icon: "delete",
})
this.$toast.success(`${this.$t("state.deleted")}`)
},
},
})

68
packages/hoppscotch-app/components/collections/index.vue
View File

@@ -361,14 +361,10 @@ export default defineComponent({
this.collectionsType.selectedTeam.id
)
.then(() => {
this.$toast.success(this.$t("collection.created"), {
icon: "done",
})
this.$toast.success(this.$t("collection.created"))
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}
@@ -377,9 +373,7 @@ export default defineComponent({
// Intented to be called by CollectionEdit modal submit event
updateEditingCollection(newName) {
if (!newName) {
this.$toast.error(this.$t("collection.invalid_name"), {
icon: "error_outline",
})
this.$toast.error(this.$t("collection.invalid_name"))
return
}
if (this.collectionsType.type === "my-collections") {
@@ -396,14 +390,10 @@ export default defineComponent({
teamUtils
.renameCollection(this.$apollo, newName, this.editingCollection.id)
.then(() => {
this.$toast.success(this.$t("collection.renamed"), {
icon: "done",
})
this.$toast.success(this.$t("collection.renamed"))
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}
@@ -420,14 +410,10 @@ export default defineComponent({
teamUtils
.renameCollection(this.$apollo, name, this.editingFolder.id)
.then(() => {
this.$toast.success(this.$t("folder.renamed"), {
icon: "done",
})
this.$toast.success(this.$t("folder.renamed"))
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}
@@ -460,15 +446,11 @@ export default defineComponent({
this.editingRequestIndex
)
.then(() => {
this.$toast.success(this.$t("request.renamed"), {
icon: "done",
})
this.$toast.success(this.$t("request.renamed"))
this.$emit("update-team-collections")
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}
@@ -533,15 +515,11 @@ export default defineComponent({
},
})
.then(() => {
this.$toast.success(this.$t("folder.created"), {
icon: "done",
})
this.$toast.success(this.$t("folder.created"))
this.$emit("update-team-collections")
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}
@@ -605,9 +583,7 @@ export default defineComponent({
}
removeRESTCollection(collectionIndex)
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
this.$toast.success(this.$t("state.deleted"))
} else if (collectionsType.type === "team-collections") {
// Cancel pick if picked collection is deleted
if (
@@ -633,14 +609,10 @@ export default defineComponent({
},
})
.then(() => {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
this.$toast.success(this.$t("state.deleted"))
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}
@@ -658,9 +630,7 @@ export default defineComponent({
this.$emit("select", { picked: null })
}
removeRESTRequest(folderPath, requestIndex)
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
this.$toast.success(this.$t("state.deleted"))
} else if (this.collectionsType.type === "team-collections") {
// Cancel pick if the picked item is being deleted
if (
@@ -674,14 +644,10 @@ export default defineComponent({
teamUtils
.deleteRequest(this.$apollo, requestIndex)
.then(() => {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
this.$toast.success(this.$t("state.deleted"))
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
}

4
packages/hoppscotch-app/components/collections/my/Folder.vue
View File

@@ -262,9 +262,7 @@ export default defineComponent({
this.$emit("select", { picked: null })
}
removeRESTFolder(this.folderPath)
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
this.$toast.success(this.$t("state.deleted"))
},
dropEvent({ dataTransfer }) {
this.dragging = !this.dragging

8
packages/hoppscotch-app/components/collections/teams/Folder.vue
View File

@@ -253,15 +253,11 @@ export default defineComponent({
teamUtils
.deleteCollection(this.$apollo, this.folder.id)
.then(() => {
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
this.$toast.success(this.$t("state.deleted"))
this.$emit("update-team-collections")
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
this.$emit("update-team-collections")

4
packages/hoppscotch-app/components/environments/Add.vue
View File

@@ -52,9 +52,7 @@ export default defineComponent({
methods: {
addNewEnvironment() {
if (!this.name) {
this.$toast.error(`${this.$t("environment.invalid_name")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("environment.invalid_name")}`)
return
}
createEnvironment(this.name)

8
packages/hoppscotch-app/components/environments/Edit.vue
View File

@@ -177,9 +177,7 @@ export default defineComponent({
clearContent() {
this.vars = []
this.clearIcon = "check"
this.$toast.success(`${this.$t("state.cleared")}`, {
icon: "clear_all",
})
this.$toast.success(`${this.$t("state.cleared")}`)
setTimeout(() => (this.clearIcon = "trash-2"), 1000)
},
addEnvironmentVariable() {
@@ -193,9 +191,7 @@ export default defineComponent({
},
saveEnvironment() {
if (!this.name) {
this.$toast.error(`${this.$t("environment.invalid_name")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("environment.invalid_name")}`)
return
}

4
packages/hoppscotch-app/components/environments/Environment.vue
View File

@@ -102,9 +102,7 @@ export default defineComponent({
removeEnvironment() {
if (this.environmentIndex !== "Global")
deleteEnvironment(this.environmentIndex)
this.$toast.success(`${this.$t("state.deleted")}`, {
icon: "delete",
})
this.$toast.success(`${this.$t("state.deleted")}`)
},
duplicateEnvironment() {
if (this.environmentIndex === "Global") {

16
packages/hoppscotch-app/components/environments/ImportExport.vue
View File

@@ -140,15 +140,11 @@ export default defineComponent({
}
)
.then((res) => {
this.$toast.success(this.$t("export.gist_created"), {
icon: "done",
})
this.$toast.success(this.$t("export.gist_created"))
window.open(res.html_url)
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
},
@@ -230,18 +226,14 @@ export default defineComponent({
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
document.body.appendChild(a)
a.click()
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
this.$toast.success(this.$t("state.download_started"))
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
}, 1000)
},
fileImported() {
this.$toast.success(this.$t("state.file_imported"), {
icon: "folder_shared",
})
this.$toast.success(this.$t("state.file_imported"))
},
},
})

18
packages/hoppscotch-app/components/firebase/Login.vue
View File

@@ -155,9 +155,7 @@ export default defineComponent({
},
methods: {
showLoginSuccess() {
this.$toast.success(`${this.$t("auth.login_success")}`, {
icon: "vpn_key",
})
this.$toast.success(`${this.$t("auth.login_success")}`)
},
async signInWithGoogle() {
this.signingInWithGoogle = true
@@ -174,7 +172,6 @@ export default defineComponent({
// The pending Google credential.
const pendingCred = e.credential
this.$toast.info(`${this.$t("auth.account_exists")}`, {
icon: "vpn_key",
duration: 0,
closeOnSwipe: false,
action: {
@@ -190,9 +187,7 @@ export default defineComponent({
},
})
} else {
this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("error.something_went_wrong")}`)
}
}
@@ -218,7 +213,6 @@ export default defineComponent({
// The pending Google credential.
const pendingCred = e.credential
this.$toast.info(`${this.$t("auth.account_exists")}`, {
icon: "vpn_key",
duration: 0,
closeOnSwipe: false,
action: {
@@ -234,9 +228,7 @@ export default defineComponent({
},
})
} else {
this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("error.something_went_wrong")}`)
}
}
@@ -256,9 +248,7 @@ export default defineComponent({
})
.catch((e) => {
console.error(e)
this.$toast.error(e.message, {
icon: "error_outline",
})
this.$toast.error(e.message)
this.signingInWithEmail = false
})
.finally(() => {

8
packages/hoppscotch-app/components/firebase/Logout.vue
View File

@@ -40,14 +40,10 @@ export default defineComponent({
async logout() {
try {
await signOutUser()
this.$toast.success(`${this.$t("auth.logged_out")}`, {
icon: "vpn_key",
})
this.$toast.success(`${this.$t("auth.logged_out")}`)
} catch (e) {
console.error(e)
this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
icon: "error_outline",
})
this.$toast.error(`${this.$t("error.something_went_wrong")}`)
}
},
},

12
packages/hoppscotch-app/components/graphql/Request.vue
View File

@@ -18,14 +18,14 @@
hover:border-dividerDark
focus-visible:bg-transparent focus-visible:border-dividerDark
"
:placeholder="$t('request.url')"
:placeholder="`${t('request.url')}`"
:disabled="connected"
@keyup.enter="onConnectClick"
/>
<ButtonPrimary
id="get"
name="get"
:label="!connected ? $t('action.connect') : $t('action.disconnect')"
:label="!connected ? t('action.connect') : t('action.disconnect')"
class="w-32"
@click.native="onConnectClick"
/>
@@ -37,9 +37,15 @@
import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
import { GQLConnection } from "~/helpers/GQLConnection"
import { getCurrentStrategyID } from "~/helpers/network"
import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useStream,
useI18n,
} from "~/helpers/utils/composables"
import { gqlHeaders$, gqlURL$, setGQLURL } from "~/newstore/GQLSession"
const t = useI18n()
const props = defineProps<{
conn: GQLConnection
}>()

116
packages/hoppscotch-app/components/graphql/RequestOptions.vue
View File

@@ -3,20 +3,20 @@
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
<template #actions>
<ButtonSecondary
:label="`${$t('request.run')}`"
:label="`${t('request.run')}`"
svg="play"
class="rounded-none !text-accent"
@click.native="runQuery()"
/>
<ButtonSecondary
ref="saveRequest"
:label="`${$t('request.save')}`"
:label="`${t('request.save')}`"
class="rounded-none"
@click.native="saveRequest"
/>
</template>
<SmartTab :id="'query'" :label="`${$t('tab.query')}`" :selected="true">
<SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
<AppSection label="query">
<div
class="
@@ -33,25 +33,25 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.query") }}
{{ t("request.query") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io"
to="https://docs.hoppscotch.io/graphql/#queries"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.prettify')"
:title="t('action.prettify')"
:svg="`${prettifyQueryIcon}`"
@click.native="prettifyQuery"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="`${copyQueryIcon}`"
@click.native="copyQuery"
/>
@@ -61,7 +61,7 @@
</AppSection>
</SmartTab>
<SmartTab :id="'variables'" :label="`${$t('tab.variables')}`">
<SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
<AppSection label="variables">
<div
class="
@@ -77,19 +77,19 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.variables") }}
{{ t("request.variables") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io"
to="https://docs.hoppscotch.io/graphql/#queries"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="`${copyVariablesIcon}`"
@click.native="copyVariables"
/>
@@ -99,7 +99,7 @@
</AppSection>
</SmartTab>
<SmartTab :id="'headers'" :label="`${$t('tab.headers')}`">
<SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
<AppSection label="headers">
<div
class="
@@ -115,32 +115,32 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("tab.headers") }}
{{ t("tab.headers") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io"
to="https://docs.hoppscotch.io/graphql/#headers"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
:title="t('action.clear_all')"
svg="trash-2"
@click.native="bulkMode ? clearBulkEditor() : clearContent()"
@click.native="clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.bulk_mode')"
:title="t('state.bulk_mode')"
svg="edit"
:class="{ '!text-accent': bulkMode }"
@click.native="bulkMode = !bulkMode"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
:title="t('add.new')"
svg="plus"
:disabled="bulkMode"
@click.native="addRequestHeader"
@@ -159,7 +159,7 @@
"
>
<SmartAutoComplete
:placeholder="`${$t('count.header', { count: index + 1 })}`"
:placeholder="`${t('count.header', { count: index + 1 })}`"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@@ -183,7 +183,7 @@
/>
<input
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:placeholder="`${t('count.value', { count: index + 1 })}`"
:name="`value ${String(index)}`"
:value="header.value"
autofocus
@@ -201,9 +201,9 @@
:title="
header.hasOwnProperty('active')
? header.active
? $t('action.turn_off')
: $t('action.turn_on')
: $t('action.turn_off')
? t('action.turn_off')
: t('action.turn_on')
: t('action.turn_off')
"
:svg="
header.hasOwnProperty('active')
@@ -225,7 +225,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="removeRequestHeader(index)"
@@ -253,13 +253,13 @@
w-16
inline-flex
"
:alt="$t('empty.headers')"
:alt="`${t('empty.headers')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.headers") }}
{{ t("empty.headers") }}
</span>
<ButtonSecondary
:label="`${$t('add.new')}`"
:label="`${t('add.new')}`"
filled
svg="plus"
class="mb-4"
@@ -280,7 +280,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref, useContext, watch } from "@nuxtjs/composition-api"
import { onMounted, ref, watch } from "@nuxtjs/composition-api"
import clone from "lodash/clone"
import * as gql from "graphql"
import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -288,6 +288,8 @@ import {
useNuxt,
useReadonlyStream,
useStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import {
addGQLHeader,
@@ -314,15 +316,14 @@ import jsonLinter from "~/helpers/editor/linting/json"
import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
import queryCompleter from "~/helpers/editor/completion/gqlQuery"
const t = useI18n()
const props = defineProps<{
conn: GQLConnection
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const nuxt = useNuxt()
const bulkMode = ref(false)
@@ -335,11 +336,9 @@ watch(bulkHeaders, () => {
value: item.substring(item.indexOf(":") + 1).trim(),
active: !item.trim().startsWith("//"),
}))
setGQLHeaders(transformation)
setGQLHeaders(transformation as GQLHeader[])
} catch (e) {
$toast.error(`${t("error.something_went_wrong")}`, {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(e)
}
})
@@ -392,12 +391,13 @@ const showSaveRequestModal = ref(false)
watch(
headers,
() => {
if (
(headers.value[headers.value.length - 1]?.key !== "" ||
headers.value[headers.value.length - 1]?.value !== "") &&
headers.value.length
)
addRequestHeader()
if (!bulkMode.value)
if (
(headers.value[headers.value.length - 1]?.key !== "" ||
headers.value[headers.value.length - 1]?.value !== "") &&
headers.value.length
)
addRequestHeader()
},
{ deep: true }
)
@@ -427,6 +427,7 @@ onMounted(() => {
const copyQuery = () => {
copyToClipboard(gqlQueryString.value)
copyQueryIcon.value = "check"
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
}
@@ -470,18 +471,14 @@ const runQuery = async () => {
})
)
$toast.success(`${t("state.finished_in", { duration })}`, {
icon: "done",
})
toast.success(`${t("state.finished_in", { duration })}`)
} catch (e: any) {
response.value = `${e}`
nuxt.value.$loading.finish()
$toast.error(
toast.error(
`${t("error.something_went_wrong")}. ${t("error.check_console_details")}`,
{
icon: "error_outline",
}
{}
)
console.error(e)
}
@@ -499,12 +496,11 @@ const hideRequestModal = () => {
const prettifyQuery = () => {
try {
gqlQueryString.value = gql.print(gql.parse(gqlQueryString.value))
prettifyQueryIcon.value = "check"
} catch (e) {
$toast.error(`${t("error.gql_prettify_invalid_query")}`, {
icon: "error_outline",
})
toast.error(`${t("error.gql_prettify_invalid_query")}`)
prettifyQueryIcon.value = "info"
}
prettifyQueryIcon.value = "check"
setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
}
@@ -515,6 +511,7 @@ const saveRequest = () => {
const copyVariables = () => {
copyToClipboard(variableString.value)
copyVariablesIcon.value = "check"
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
}
@@ -542,11 +539,10 @@ const removeRequestHeader = (index: number) => {
const deletedItem = headersBeforeDeletion[index]
if (deletedItem.key || deletedItem.value) {
$toast.success(t("state.deleted").toString(), {
icon: "delete",
toast.success(`${t("state.deleted")}`, {
action: [
{
text: t("action.undo").toString(),
text: `${t("action.undo")}`,
onClick: (_, toastObject) => {
setGQLHeaders(headersBeforeDeletion as GQLHeader[])
editBulkHeadersLine(index, deletedItem)

39
packages/hoppscotch-app/components/graphql/Response.vue
View File

@@ -5,7 +5,7 @@
class="flex flex-col p-4 items-center justify-center"
>
<SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ $t("state.loading") }}</span>
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div v-else-if="responseString">
<div
@@ -22,12 +22,12 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("response.title") }}
{{ t("response.title") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -35,14 +35,14 @@
<ButtonSecondary
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:title="t('action.download_file')"
:svg="downloadResponseIcon"
@click.native="downloadResponse"
/>
<ButtonSecondary
ref="copyResponseButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="copyResponseIcon"
@click.native="copyResponse"
/>
@@ -63,10 +63,10 @@
<div class="flex space-x-2 pb-4 my-4">
<div class="flex flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.command_menu") }}
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.help_menu") }}
{{ t("shortcut.general.help_menu") }}
</span>
</div>
<div class="flex flex-col space-y-4">
@@ -79,8 +79,8 @@
</div>
</div>
<ButtonSecondary
:label="`${$t('app.documentation')}`"
to="https://docs.hoppscotch.io"
:label="`${t('app.documentation')}`"
to="https://docs.hoppscotch.io/features/response"
svg="external-link"
blank
outline
@@ -91,17 +91,19 @@
</template>
<script setup lang="ts">
import { reactive, ref, useContext } from "@nuxtjs/composition-api"
import { reactive, ref } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import { gqlResponse$ } from "~/newstore/GQLSession"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const responseString = useReadonlyStream(gqlResponse$, "")
@@ -128,6 +130,7 @@ const copyResponseIcon = ref("copy")
const copyResponse = () => {
copyToClipboard(responseString.value!)
copyResponseIcon.value = "check"
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
}
@@ -141,9 +144,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadResponseIcon.value = "check"
$toast.success(`${t("state.download_started")}`, {
icon: "downloading",
})
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)

64
packages/hoppscotch-app/components/graphql/Sidebar.vue
View File

@@ -3,7 +3,7 @@
<SmartTab
:id="'history'"
icon="clock"
:label="`${$t('tab.history')}`"
:label="`${t('tab.history')}`"
:selected="true"
>
<History
@@ -16,7 +16,7 @@
<SmartTab
:id="'collections'"
icon="folder"
:label="`${$t('tab.collections')}`"
:label="`${t('tab.collections')}`"
>
<CollectionsGraphql />
</SmartTab>
@@ -24,7 +24,7 @@
<SmartTab
:id="'docs'"
icon="book-open"
:label="`${$t('tab.documentation')}`"
:label="`${t('tab.documentation')}`"
>
<AppSection label="docs">
<div
@@ -53,10 +53,10 @@
w-16
inline-flex
"
:alt="$t('empty.documentation')"
:alt="`${t('empty.documentation')}`"
/>
<span class="text-center mb-4">
{{ $t("empty.documentation") }}
{{ t("empty.documentation") }}
</span>
</div>
<div v-else>
@@ -65,7 +65,7 @@
v-model="graphqlFieldsFilterText"
type="search"
autocomplete="off"
:placeholder="`${$t('action.search')}`"
:placeholder="`${t('action.search')}`"
class="bg-transparent flex w-full p-4 py-2"
/>
<div class="flex">
@@ -73,7 +73,7 @@
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/quickstart/graphql"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
</div>
@@ -86,7 +86,7 @@
<SmartTab
v-if="queryFields.length > 0"
:id="'queries'"
:label="`${$t('tab.queries')}`"
:label="`${t('tab.queries')}`"
:selected="true"
class="divide-y divide-dividerLight"
>
@@ -101,7 +101,7 @@
<SmartTab
v-if="mutationFields.length > 0"
:id="'mutations'"
:label="`${$t('graphql.mutations')}`"
:label="`${t('graphql.mutations')}`"
class="divide-y divide-dividerLight"
>
<GraphqlField
@@ -115,7 +115,7 @@
<SmartTab
v-if="subscriptionFields.length > 0"
:id="'subscriptions'"
:label="`${$t('graphql.subscriptions')}`"
:label="`${t('graphql.subscriptions')}`"
class="divide-y divide-dividerLight"
>
<GraphqlField
@@ -130,7 +130,7 @@
v-if="graphqlTypes.length > 0"
:id="'types'"
ref="typesTab"
:label="`${$t('tab.types')}`"
:label="`${t('tab.types')}`"
class="divide-y divide-dividerLight"
>
<GraphqlType
@@ -149,7 +149,7 @@
</AppSection>
</SmartTab>
<SmartTab :id="'schema'" icon="box" :label="`${$t('tab.schema')}`">
<SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
<AppSection ref="schema" label="schema">
<div
v-if="schemaString"
@@ -166,19 +166,19 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("graphql.schema") }}
{{ t("graphql.schema") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/quickstart/graphql"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -186,14 +186,14 @@
<ButtonSecondary
ref="downloadSchema"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:title="t('action.download_file')"
:svg="downloadSchemaIcon"
@click.native="downloadSchema"
/>
<ButtonSecondary
ref="copySchemaCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="copySchemaIcon"
@click.native="copySchema"
/>
@@ -221,10 +221,10 @@
w-16
inline-flex
"
:alt="$t('empty.schema')"
:alt="`${t('empty.schema')}`"
/>
<span class="text-center mb-4">
{{ $t("empty.schema") }}
{{ t("empty.schema") }}
</span>
</div>
</AppSection>
@@ -233,20 +233,18 @@
</template>
<script setup lang="ts">
import {
computed,
nextTick,
reactive,
ref,
useContext,
} from "@nuxtjs/composition-api"
import { computed, nextTick, reactive, ref } from "@nuxtjs/composition-api"
import { GraphQLField, GraphQLType } from "graphql"
import { map } from "rxjs/operators"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { GQLConnection } from "~/helpers/GQLConnection"
import { GQLHeader } from "~/helpers/types/HoppGQLRequest"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import {
setGQLHeaders,
setGQLQuery,
@@ -255,6 +253,8 @@ import {
setGQLVariables,
} from "~/newstore/GQLSession"
const t = useI18n()
function isTextFoundInGraphqlFieldObject(
text: string,
field: GraphQLField<any, any>
@@ -321,11 +321,7 @@ const props = defineProps<{
conn: GQLConnection
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const queryFields = useReadonlyStream(
props.conn.queryFields$.pipe(map((x) => x ?? [])),
@@ -449,9 +445,7 @@ const downloadSchema = () => {
document.body.appendChild(a)
a.click()
downloadSchemaIcon.value = "check"
$toast.success(`${t("state.download_started")}`, {
icon: "downloading",
})
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)

8
packages/hoppscotch-app/components/history/index.vue
View File

@@ -140,9 +140,7 @@ export default defineComponent({
clearHistory() {
if (this.page === "rest") clearRESTHistory()
else clearGraphqlHistory()
this.$toast.success(`${this.$t("state.history_deleted")}`, {
icon: "delete",
})
this.$toast.success(`${this.$t("state.history_deleted")}`)
},
useHistory(entry: any) {
if (this.page === "rest") setRESTRequest(entry.request)
@@ -150,9 +148,7 @@ export default defineComponent({
deleteHistory(entry: any) {
if (this.page === "rest") deleteRESTHistoryEntry(entry)
else deleteGraphqlHistoryEntry(entry)
this.$toast.success(`${this.$t("state.deleted")}`, {
icon: "delete",
})
this.$toast.success(`${this.$t("state.deleted")}`)
},
toggleStar(entry: any) {
if (this.page === "rest") toggleRESTHistoryEntryStar(entry)

19
packages/hoppscotch-app/components/history/rest/Card.vue
View File

@@ -49,13 +49,9 @@
</template>
<script lang="ts">
import {
computed,
defineComponent,
PropType,
useContext,
} from "@nuxtjs/composition-api"
import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
import findStatusGroup from "~/helpers/findStatusGroup"
import { useI18n } from "~/helpers/utils/composables"
import { RESTHistoryEntry } from "~/newstore/history"
export default defineComponent({
@@ -64,10 +60,7 @@ export default defineComponent({
showMore: Boolean,
},
setup(props) {
const {
app: { i18n },
} = useContext()
const $t = i18n.t.bind(i18n)
const t = useI18n()
const duration = computed(() => {
if (props.entry.responseMeta.duration) {
@@ -75,9 +68,9 @@ export default defineComponent({
if (!responseDuration) return ""
return responseDuration > 0
? `${$t("request.duration")}: ${responseDuration}ms`
: $t("error.no_duration")
} else return $t("error.no_duration")
? `${t("request.duration")}: ${responseDuration}ms`
: t("error.no_duration")
} else return t("error.no_duration")
})
const entryStatus = computed(() => {

8
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -107,7 +107,7 @@
<ButtonSecondary
outline
:label="$t('app.documentation')"
to="https://docs.hoppscotch.io"
to="https://docs.hoppscotch.io/features/authorization"
blank
svg="external-link"
reverse
@@ -151,7 +151,7 @@
<SmartAnchor
class="link"
:label="`${$t('authorization.learn')} \xA0 →`"
to="https://docs.hoppscotch.io/"
to="https://docs.hoppscotch.io/features/authorization"
blank
/>
</div>
@@ -187,7 +187,7 @@
<SmartAnchor
class="link"
:label="`${$t('authorization.learn')} \xA0 →`"
to="https://docs.hoppscotch.io/"
to="https://docs.hoppscotch.io/features/authorization"
blank
/>
</div>
@@ -227,7 +227,7 @@
<SmartAnchor
class="link"
:label="`${$t('authorization.learn')} \xA0 →`"
to="https://docs.hoppscotch.io/"
to="https://docs.hoppscotch.io/features/authorization"
blank
/>
</div>

2
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -77,7 +77,7 @@
<ButtonSecondary
outline
:label="`${$t('app.documentation')}`"
to="https://docs.hoppscotch.io"
to="https://docs.hoppscotch.io/features/body"
blank
svg="external-link"
reverse

17
packages/hoppscotch-app/components/http/CodegenModal.vue
View File

@@ -7,7 +7,7 @@
<template #body>
<div class="flex flex-col px-2">
<label for="requestType" class="px-4 pb-4">
{{ $t("request.choose_language") }}
{{ t("request.choose_language") }}
</label>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
@@ -62,13 +62,16 @@
</template>
<script setup lang="ts">
import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
import { computed, ref, watch } from "@nuxtjs/composition-api"
import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
import { getCurrentEnvironment } from "~/newstore/environments"
import { getRESTRequest } from "~/newstore/RESTSession"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
show: boolean
@@ -78,11 +81,7 @@ const emit = defineEmits<{
(e: "hide-modal"): void
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const options = ref<any | null>(null)
@@ -126,9 +125,7 @@ const hideModal = () => emit("hide-modal")
const copyRequestCode = () => {
copyToClipboard(requestCode.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`, {
icon: "content_paste",
})
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

70
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -14,32 +14,32 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.header_list") }}
{{ t("request.header_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/headers"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
:title="t('action.clear_all')"
svg="trash-2"
@click.native="bulkMode ? clearBulkEditor() : clearContent()"
@click.native="clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.bulk_mode')"
:title="t('state.bulk_mode')"
svg="edit"
:class="{ '!text-accent': bulkMode }"
@click.native="bulkMode = !bulkMode"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
:title="t('add.new')"
svg="plus"
:disabled="bulkMode"
@click.native="addHeader"
@@ -54,7 +54,7 @@
class="divide-x divide-dividerLight border-b border-dividerLight flex"
>
<SmartAutoComplete
:placeholder="`${$t('count.header', { count: index + 1 })}`"
:placeholder="`${t('count.header', { count: index + 1 })}`"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@@ -78,7 +78,7 @@
/>
<SmartEnvInput
v-model="header.value"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:placeholder="`${t('count.value', { count: index + 1 })}`"
styles="
bg-transparent
flex
@@ -100,9 +100,9 @@
:title="
header.hasOwnProperty('active')
? header.active
? $t('action.turn_off')
: $t('action.turn_on')
: $t('action.turn_off')
? t('action.turn_off')
: t('action.turn_on')
: t('action.turn_off')
"
:svg="
header.hasOwnProperty('active')
@@ -126,7 +126,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="deleteHeader(index)"
@@ -154,14 +154,14 @@
w-16
inline-flex
"
:alt="$t('empty.headers')"
:alt="`${t('empty.headers')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.headers") }}
{{ t("empty.headers") }}
</span>
<ButtonSecondary
filled
:label="`${$t('add.new')}`"
:label="`${t('add.new')}`"
svg="plus"
class="mb-4"
@click.native="addHeader"
@@ -172,7 +172,7 @@
</template>
<script setup lang="ts">
import { onBeforeUpdate, ref, useContext, watch } from "@nuxtjs/composition-api"
import { onBeforeUpdate, ref, watch } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import {
addRESTHeader,
@@ -183,14 +183,16 @@ import {
updateRESTHeader,
} from "~/newstore/RESTSession"
import { commonHeaders } from "~/helpers/headers"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const bulkMode = ref(false)
const bulkHeaders = ref("")
@@ -212,11 +214,9 @@ watch(bulkHeaders, () => {
value: item.substring(item.indexOf(":") + 1).trim(),
active: !item.trim().startsWith("//"),
}))
setRESTHeaders(transformation)
setRESTHeaders(transformation as HoppRESTHeader[])
} catch (e) {
$toast.error(`${t("error.something_went_wrong")}`, {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(e)
}
})
@@ -226,12 +226,13 @@ const headers$ = useReadonlyStream(restHeaders$, [])
watch(
headers$,
(newValue) => {
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
)
addHeader()
if (!bulkMode.value)
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
)
addHeader()
},
{ deep: true }
)
@@ -277,11 +278,10 @@ const deleteHeader = (index: number) => {
const deletedItem = headersBeforeDeletion[index]
if (deletedItem.key || deletedItem.value) {
$toast.success(t("state.deleted").toString(), {
icon: "delete",
toast.success(`${t("state.deleted")}`, {
action: [
{
text: t("action.undo").toString(),
text: `${t("action.undo")}`,
onClick: (_, toastObject) => {
setRESTHeaders(headersBeforeDeletion as HoppRESTHeader[])
editBulkHeadersLine(index, deletedItem)

21
packages/hoppscotch-app/components/http/ImportCurl.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="`${$t('import.curl')}`" @close="hideModal">
<SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<div ref="curlEditor" class="border border-dividerLight rounded"></div>
@@ -8,11 +8,11 @@
<template #footer>
<span class="flex">
<ButtonPrimary
:label="`${$t('import.title')}`"
:label="`${t('import.title')}`"
@click.native="handleImport"
/>
<ButtonSecondary
:label="`${$t('action.cancel')}`"
:label="`${t('action.cancel')}`"
@click.native="hideModal"
/>
</span>
@@ -21,7 +21,7 @@
</template>
<script setup lang="ts">
import { ref, useContext } from "@nuxtjs/composition-api"
import { ref } from "@nuxtjs/composition-api"
import parseCurlCommand from "~/helpers/curlparser"
import { useCodemirror } from "~/helpers/editor/codemirror"
import {
@@ -30,12 +30,11 @@ import {
makeRESTRequest,
} from "~/helpers/types/HoppRESTRequest"
import { setRESTRequest } from "~/newstore/RESTSession"
import { useI18n, useToast } from "~/helpers/utils/composables"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const curl = ref("")
@@ -123,9 +122,7 @@ const handleImport = () => {
)
} catch (e) {
console.error(e)
$toast.error(`${t("error.curl_invalid_format")}`, {
icon: "error_outline",
})
toast.error(`${t("error.curl_invalid_format")}`)
}
hideModal()
}

26
packages/hoppscotch-app/components/http/OAuth2Authorization.vue
View File

@@ -48,7 +48,7 @@
<div class="p-2">
<ButtonSecondary
filled
:label="`${$t('authorization.generate_token')}`"
:label="`${t('authorization.generate_token')}`"
@click.native="handleAccessTokenRequest()"
/>
</div>
@@ -56,19 +56,21 @@
</template>
<script lang="ts">
import { Ref, useContext } from "@nuxtjs/composition-api"
import { pluckRef, useStream } from "~/helpers/utils/composables"
import { Ref } from "@nuxtjs/composition-api"
import {
pluckRef,
useI18n,
useStream,
useToast,
} from "~/helpers/utils/composables"
import { HoppRESTAuthOAuth2 } from "~/helpers/types/HoppRESTAuth"
import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
import { tokenRequest } from "~/helpers/oauth"
export default {
setup() {
const {
$toast,
app: { i18n },
} = useContext()
const $t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const auth = useStream(
restAuth$,
@@ -97,9 +99,7 @@ export default {
oidcDiscoveryURL.value === "" &&
(authURL.value === "" || accessTokenURL.value === "")
) {
$toast.error(`${$t("complete_config_urls")}`, {
icon: "error",
})
toast.error(`${t("complete_config_urls")}`)
return
}
try {
@@ -113,9 +113,7 @@ export default {
}
await tokenRequest(tokenReqParams)
} catch (e) {
$toast.error(`${e}`, {
icon: "code",
})
toast.error(`${e}`)
}
}

70
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -14,32 +14,32 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.parameter_list") }}
{{ t("request.parameter_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/parameters"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
:title="t('action.clear_all')"
svg="trash-2"
@click.native="bulkMode ? clearBulkEditor() : clearContent()"
@click.native="clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.bulk_mode')"
:title="t('state.bulk_mode')"
svg="edit"
:class="{ '!text-accent': bulkMode }"
@click.native="bulkMode = !bulkMode"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
:title="t('add.new')"
svg="plus"
:disabled="bulkMode"
@click.native="addParam"
@@ -55,7 +55,7 @@
>
<SmartEnvInput
v-model="param.key"
:placeholder="`${$t('count.parameter', { count: index + 1 })}`"
:placeholder="`${t('count.parameter', { count: index + 1 })}`"
styles="
bg-transparent
flex
@@ -73,7 +73,7 @@
/>
<SmartEnvInput
v-model="param.value"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:placeholder="`${t('count.value', { count: index + 1 })}`"
styles="
bg-transparent
flex
@@ -95,9 +95,9 @@
:title="
param.hasOwnProperty('active')
? param.active
? $t('action.turn_off')
: $t('action.turn_on')
: $t('action.turn_off')
? t('action.turn_off')
: t('action.turn_on')
: t('action.turn_off')
"
:svg="
param.hasOwnProperty('active')
@@ -119,7 +119,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="deleteParam(index)"
@@ -147,13 +147,13 @@
w-16
inline-flex
"
:alt="$t('empty.parameters')"
:alt="`${t('empty.parameters')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.parameters") }}
{{ t("empty.parameters") }}
</span>
<ButtonSecondary
:label="`${$t('add.new')}`"
:label="`${t('add.new')}`"
svg="plus"
filled
class="mb-4"
@@ -165,10 +165,14 @@
</template>
<script setup lang="ts">
import { ref, useContext, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
import { ref, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import {
restParams$,
addRESTParam,
@@ -178,11 +182,9 @@ import {
setRESTParams,
} from "~/newstore/RESTSession"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const bulkMode = ref(false)
const bulkParams = ref("")
@@ -194,11 +196,9 @@ watch(bulkParams, () => {
value: item.substring(item.indexOf(":") + 1).trim(),
active: !item.trim().startsWith("//"),
}))
setRESTParams(transformation)
setRESTParams(transformation as HoppRESTParam[])
} catch (e) {
$toast.error(`${t("error.something_went_wrong")}`, {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(e)
}
})
@@ -219,12 +219,13 @@ const params$ = useReadonlyStream(restParams$, [])
watch(
params$,
(newValue) => {
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
)
addParam()
if (!bulkMode.value)
if (
(newValue[newValue.length - 1]?.key !== "" ||
newValue[newValue.length - 1]?.value !== "") &&
newValue.length
)
addParam()
},
{ deep: true }
)
@@ -270,11 +271,10 @@ const deleteParam = (index: number) => {
const deletedItem = parametersBeforeDeletion[index]
if (deletedItem.key || deletedItem.value) {
$toast.success(t("state.deleted").toString(), {
icon: "delete",
toast.success(`${t("state.deleted")}`, {
action: [
{
text: t("action.undo").toString(),
text: `${t("action.undo")}`,
onClick: (_, toastObject) => {
setRESTParams(parametersBeforeDeletion as HoppRESTParam[])
editBulkParamsLine(index, deletedItem)

24
packages/hoppscotch-app/components/http/PreRequestScript.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection id="script" :label="`${$t('preRequest.script')}`">
<AppSection id="script" :label="`${t('preRequest.script')}`">
<div
class="
bg-primary
@@ -14,26 +14,26 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("preRequest.javascript_code") }}
{{ t("preRequest.javascript_code") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/pre-request-script"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
:title="t('action.clear')"
svg="trash-2"
@click.native="clearContent"
/>
@@ -57,15 +57,15 @@
"
>
<div class="text-secondaryLight pb-2">
{{ $t("helpers.pre_request_script") }}
{{ t("helpers.pre_request_script") }}
</div>
<SmartAnchor
:label="`${$t('preRequest.learn')}`"
:label="`${t('preRequest.learn')}`"
to="https://docs.hoppscotch.io/features/pre-request-script"
blank
/>
<h4 class="font-bold text-secondaryLight pt-6">
{{ $t("preRequest.snippets") }}
{{ t("preRequest.snippets") }}
</h4>
<div class="flex flex-col pt-4">
<TabSecondary
@@ -82,17 +82,15 @@
</template>
<script setup lang="ts">
import { reactive, ref, useContext } from "@nuxtjs/composition-api"
import { reactive, ref } from "@nuxtjs/composition-api"
import { usePreRequestScript } from "~/newstore/RESTSession"
import snippets from "~/helpers/preRequestScriptSnippets"
import { useCodemirror } from "~/helpers/editor/codemirror"
import linter from "~/helpers/editor/linting/preRequest"
import completer from "~/helpers/editor/completion/preRequest"
import { useI18n } from "~/helpers/utils/composables"
const {
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const preRequestScript = usePreRequestScript()

36
packages/hoppscotch-app/components/http/RawBody.vue
View File

@@ -14,26 +14,26 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.raw_body") }}
{{ t("request.raw_body") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/body"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
:title="t('action.clear')"
svg="trash-2"
@click.native="clearContent"
/>
@@ -41,14 +41,14 @@
v-if="contentType && contentType.endsWith('json')"
ref="prettifyRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.prettify')"
:title="t('action.prettify')"
:svg="prettifyIcon"
@click.native="prettifyRequestBody"
/>
<label for="payload">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('import.json')"
:title="t('import.json')"
svg="file-plus"
@click.native="$refs.payload.click()"
/>
@@ -67,21 +67,19 @@
</template>
<script setup lang="ts">
import { computed, reactive, ref, useContext } from "@nuxtjs/composition-api"
import { computed, reactive, ref } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { getEditorLangForMimeType } from "~/helpers/editorutils"
import { pluckRef } from "~/helpers/utils/composables"
import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
import { useRESTRequestBody } from "~/newstore/RESTSession"
const t = useI18n()
const props = defineProps<{
contentType: string
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const rawParamsBody = pluckRef(useRESTRequestBody(), "body")
const prettifyIcon = ref("wand")
@@ -118,13 +116,9 @@ const uploadPayload = (e: InputEvent) => {
rawParamsBody.value = target?.result
}
reader.readAsText(file)
$toast.success(`${t("state.file_imported")}`, {
icon: "attach_file",
})
toast.success(`${t("state.file_imported")}`)
} else {
$toast.error(`${t("action.choose_file")}`, {
icon: "attach_file",
})
toast.error(`${t("action.choose_file")}`)
}
}
const prettifyRequestBody = () => {
@@ -135,9 +129,7 @@ const prettifyRequestBody = () => {
setTimeout(() => (prettifyIcon.value = "wand"), 1000)
} catch (e) {
console.error(e)
$toast.error(`${t("error.json_prettify_invalid_body")}`, {
icon: "error_outline",
})
toast.error(`${t("error.json_prettify_invalid_body")}`)
}
}
</script>

49
packages/hoppscotch-app/components/http/Request.vue
View File

@@ -43,7 +43,7 @@
"
:value="newMethod"
:readonly="!isCustomMethod"
:placeholder="`${$t('request.method')}`"
:placeholder="`${t('request.method')}`"
@input="onSelectMethod($event.target.value)"
/>
</span>
@@ -60,7 +60,7 @@
<div class="flex flex-1">
<SmartEnvInput
v-model="newEndpoint"
:placeholder="`${$t('request.url')}`"
:placeholder="`${t('request.url')}`"
styles="
bg-primaryLight
border border-divider
@@ -83,7 +83,7 @@
<ButtonPrimary
id="send"
class="rounded-r-none flex-1 min-w-20"
:label="`${!loading ? $t('action.send') : $t('action.cancel')}`"
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
@click.native="!loading ? newSendRequest() : cancelRequest()"
/>
<span class="flex">
@@ -98,7 +98,7 @@
<ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
</template>
<SmartItem
:label="`${$t('import.curl')}`"
:label="`${t('import.curl')}`"
svg="file-code"
@click.native="
() => {
@@ -108,7 +108,7 @@
"
/>
<SmartItem
:label="`${$t('show.code')}`"
:label="`${t('show.code')}`"
svg="code-2"
@click.native="
() => {
@@ -119,7 +119,7 @@
/>
<SmartItem
ref="clearAll"
:label="`${$t('action.clear_all')}`"
:label="`${t('action.clear_all')}`"
svg="rotate-ccw"
@click.native="
() => {
@@ -134,7 +134,7 @@
class="rounded rounded-r-none ml-2"
:label="
windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
? `${$t('request.save')}`
? `${t('request.save')}`
: ''
"
filled
@@ -159,7 +159,7 @@
<input
id="request-name"
v-model="requestName"
:placeholder="`${$t('request.name')}`"
:placeholder="`${t('request.name')}`"
name="request-name"
type="text"
autocomplete="off"
@@ -179,7 +179,7 @@
/>
<SmartItem
ref="saveRequest"
:label="`${$t('request.save_as')}`"
:label="`${t('request.save_as')}`"
svg="folder-plus"
@click.native="
() => {
@@ -208,7 +208,7 @@
</template>
<script setup lang="ts">
import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
import { computed, ref, watch } from "@nuxtjs/composition-api"
import { isRight } from "fp-ts/lib/Either"
import * as E from "fp-ts/Either"
import {
@@ -228,6 +228,8 @@ import {
useStreamSubscriber,
useStream,
useNuxt,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import { defineActionHandler } from "~/helpers/actions"
import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -237,6 +239,8 @@ import { apolloClient } from "~/helpers/apollo"
import useWindowSize from "~/helpers/utils/useWindowSize"
import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
const t = useI18n()
const methods = [
"GET",
"POST",
@@ -250,12 +254,9 @@ const methods = [
"CUSTOM",
]
const {
$toast,
app: { i18n },
} = useContext()
const toast = useToast()
const nuxt = useNuxt()
const t = i18n.t.bind(i18n)
const { subscribeToStream } = useStreamSubscriber()
const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
@@ -373,7 +374,7 @@ const copyShareLink = (shareLink: string) => {
} else {
copyLinkIcon.value = "check"
copyToClipboard(`https://hopp.sh/r${shareLink}`)
$toast.success(`${t("state.copied_to_clipboard")}`, {
toast.success(`${t("state.copied_to_clipboard")}`, {
icon: "content_paste",
})
setTimeout(() => (copyLinkIcon.value = "copy"), 2000)
@@ -415,9 +416,7 @@ const saveRequest = () => {
if (saveCtx.originLocation === "user-collection") {
editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
$toast.success(`${t("request.saved")}`, {
icon: "playlist_add_check",
})
toast.success(`${t("request.saved")}`)
} else if (saveCtx.originLocation === "team-collection") {
const req = getRESTRequest()
@@ -430,20 +429,14 @@ const saveRequest = () => {
saveCtx.requestID
)
.then(() => {
$toast.success(`${t("request.saved")}`, {
icon: "playlist_add_check",
})
toast.success(`${t("request.saved")}`)
})
.catch(() => {
$toast.error(t("profile.no_permission").toString(), {
icon: "error_outline",
})
toast.error(`${t("profile.no_permission")}`)
})
} catch (error) {
showSaveRequestModal.value = true
$toast.error(t("error.something_went_wrong").toString(), {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(error)
}
}

46
packages/hoppscotch-app/components/http/ResponseMeta.vue
View File

@@ -1,5 +1,18 @@
<template>
<div class="bg-primary flex p-4 top-0 z-10 sticky items-center">
<div
class="
bg-primary
flex
p-4
top-0
z-10
sticky
items-center
overflow-auto
hide-scrollbar
whitespace-nowrap
"
>
<div
v-if="response == null"
class="
@@ -12,16 +25,16 @@
<div class="flex space-x-2 pb-4 my-4">
<div class="flex flex-col space-y-4 text-right items-end">
<span class="flex flex-1 items-center">
{{ $t("shortcut.request.send_request") }}
{{ t("shortcut.request.send_request") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.show_all") }}
{{ t("shortcut.general.show_all") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.command_menu") }}
{{ t("shortcut.general.command_menu") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.help_menu") }}
{{ t("shortcut.general.help_menu") }}
</span>
</div>
<div class="flex flex-col space-y-4">
@@ -42,8 +55,8 @@
</div>
</div>
<ButtonSecondary
:label="$t('app.documentation')"
to="https://docs.hoppscotch.io"
:label="t('app.documentation')"
to="https://docs.hoppscotch.io/features/response"
svg="external-link"
blank
outline
@@ -56,7 +69,7 @@
class="flex flex-col items-center justify-center"
>
<SmartSpinner class="my-4" />
<span class="text-secondaryLight">{{ $t("state.loading") }}</span>
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
v-if="response.type === 'network_fail'"
@@ -73,13 +86,13 @@
w-32
inline-flex
"
:alt="$t('empty.network_fail')"
:alt="`${t('error.network_fail')}`"
/>
<span class="text-center font-semibold mb-2">
{{ $t("error.network_fail") }}
{{ t("error.network_fail") }}
</span>
<span class="text-center text-secondaryLight mb-4 max-w-sm">
{{ $t("helpers.network_fail") }}
{{ t("helpers.network_fail") }}
</span>
<AppInterceptor />
</div>
@@ -89,15 +102,15 @@
class="font-semibold space-x-4"
>
<span v-if="response.statusCode">
<span class="text-secondary"> {{ $t("response.status") }}: </span>
{{ response.statusCode || $t("state.waiting_send_request") }}
<span class="text-secondary"> {{ t("response.status") }}: </span>
{{ response.statusCode || t("state.waiting_send_request") }}
</span>
<span v-if="response.meta && response.meta.responseDuration">
<span class="text-secondary"> {{ $t("response.time") }}: </span>
<span class="text-secondary"> {{ t("response.time") }}: </span>
{{ `${response.meta.responseDuration} ms` }}
</span>
<span v-if="response.meta && response.meta.responseSize">
<span class="text-secondary"> {{ $t("response.size") }}: </span>
<span class="text-secondary"> {{ t("response.size") }}: </span>
{{ `${response.meta.responseSize} B` }}
</span>
</div>
@@ -110,6 +123,9 @@ import { computed } from "@nuxtjs/composition-api"
import findStatusGroup from "~/helpers/findStatusGroup"
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
response: HoppRESTResponse

24
packages/hoppscotch-app/components/http/TestResult.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection :label="`${$t('test.results')}`">
<AppSection :label="`${t('test.results')}`">
<div
v-if="
testResults &&
@@ -20,11 +20,11 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("test.report") }}
{{ t("test.report") }}
</label>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
:title="t('action.clear')"
svg="trash-2"
@click.native="clearContent()"
/>
@@ -64,9 +64,7 @@
<span class="text-secondaryLight">
{{
` \xA0 — \xA0 ${
result.status === "pass"
? $t("test.passed")
: $t("test.failed")
result.status === "pass" ? t("test.passed") : t("test.failed")
}`
}}
</span>
@@ -82,18 +80,18 @@
:src="`/images/states/${$colorMode.value}/validation.svg`"
loading="lazy"
class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
:alt="$t('empty.tests')"
:alt="`${t('empty.tests')}`"
/>
<span class="text-center pb-2">
{{ $t("empty.tests") }}
{{ t("empty.tests") }}
</span>
<span class="text-center pb-4">
{{ $t("helpers.tests") }}
{{ t("helpers.tests") }}
</span>
<ButtonSecondary
outline
:label="`${$t('action.learn_more')}`"
to="https://docs.hoppscotch.io"
:label="`${t('action.learn_more')}`"
to="https://docs.hoppscotch.io/features/tests"
blank
svg="external-link"
reverse
@@ -104,9 +102,11 @@
</template>
<script setup lang="ts">
import { useReadonlyStream } from "~/helpers/utils/composables"
import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
const t = useI18n()
const testResults = useReadonlyStream(restTestResults$, null)
const clearContent = () => setRESTTestResults(null)

24
packages/hoppscotch-app/components/http/Tests.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection id="script" :label="`${$t('test.script')}`">
<AppSection id="script" :label="`${t('test.script')}`">
<div
class="
bg-primary
@@ -14,26 +14,26 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("test.javascript_code") }}
{{ t("test.javascript_code") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/tests"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
:title="t('action.clear')"
svg="trash-2"
@click.native="clearContent"
/>
@@ -57,15 +57,15 @@
"
>
<div class="text-secondaryLight pb-2">
{{ $t("helpers.post_request_tests") }}
{{ t("helpers.post_request_tests") }}
</div>
<SmartAnchor
:label="`${$t('test.learn')}`"
:label="`${t('test.learn')}`"
to="https://docs.hoppscotch.io/features/tests"
blank
/>
<h4 class="font-bold text-secondaryLight pt-6">
{{ $t("test.snippets") }}
{{ t("test.snippets") }}
</h4>
<div class="flex flex-col pt-4">
<TabSecondary
@@ -82,17 +82,15 @@
</template>
<script setup lang="ts">
import { reactive, ref, useContext } from "@nuxtjs/composition-api"
import { reactive, ref } from "@nuxtjs/composition-api"
import { useTestScript } from "~/newstore/RESTSession"
import testSnippets from "~/helpers/testSnippets"
import { useCodemirror } from "~/helpers/editor/codemirror"
import linter from "~/helpers/editor/linting/testScript"
import completer from "~/helpers/editor/completion/testScript"
import { useI18n } from "~/helpers/utils/composables"
const {
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const testScript = useTestScript()

46
packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
View File

@@ -14,14 +14,14 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.header_list") }}
{{ t("request.header_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-if="headers"
ref="copyHeaders"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="copyIcon"
@click.native="copyHeaders"
/>
@@ -69,28 +69,26 @@
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import { ref } from "@nuxtjs/composition-api"
import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { useI18n, useToast } from "~/helpers/utils/composables"
export default defineComponent({
props: {
headers: { type: Array, default: () => [] },
},
data() {
return {
copyIcon: "copy",
}
},
methods: {
copyHeaders() {
copyToClipboard(JSON.stringify(this.headers))
this.copyIcon = "check"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "copy"), 1000)
},
},
})
const t = useI18n()
const toast = useToast()
const props = defineProps<{
headers: Array<HoppRESTHeader>
}>()
const copyIcon = ref("copy")
const copyHeaders = () => {
copyToClipboard(JSON.stringify(props.headers))
copyIcon.value = "check"
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

29
packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -14,13 +14,13 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("response.body") }}
{{ t("response.body") }}
</label>
<div class="flex">
<ButtonSecondary
v-if="response.body"
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -29,7 +29,7 @@
v-if="response.body"
v-tippy="{ theme: 'tooltip' }"
:title="
previewEnabled ? $t('hide.preview') : $t('response.preview_html')
previewEnabled ? t('hide.preview') : t('response.preview_html')
"
:svg="!previewEnabled ? 'eye' : 'eye-off'"
@click.native.prevent="togglePreview"
@@ -38,7 +38,7 @@
v-if="response.body"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:title="t('action.download_file')"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
@@ -46,7 +46,7 @@
v-if="response.body"
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="copyIcon"
@click.native="copyResponse"
/>
@@ -64,20 +64,19 @@
</template>
<script setup lang="ts">
import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
import { computed, ref, reactive } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
response: HoppRESTResponse
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const responseBodyText = computed(() => {
if (
@@ -127,9 +126,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadIcon.value = "check"
$toast.success(`${t("state.download_started")}`, {
icon: "downloading",
})
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
@@ -140,9 +137,7 @@ const downloadResponse = () => {
const copyResponse = () => {
copyToClipboard(responseBodyText.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`, {
icon: "content_paste",
})
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}

4
packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -103,9 +103,7 @@ export default defineComponent({
document.body.appendChild(a)
a.click()
this.downloadIcon = "check"
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
this.$toast.success(this.$t("state.download_started"))
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)

27
packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -14,13 +14,13 @@
"
>
<label class="font-semibold text-secondaryLight">{{
$t("response.body")
t("response.body")
}}</label>
<div class="flex">
<ButtonSecondary
v-if="response.body"
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -29,7 +29,7 @@
v-if="response.body"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:title="t('action.download_file')"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
@@ -37,7 +37,7 @@
v-if="response.body"
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="copyIcon"
@click.native="copyResponse"
/>
@@ -144,7 +144,7 @@
</template>
<script setup lang="ts">
import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
import { computed, ref, reactive } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
@@ -154,16 +154,15 @@ import {
convertIndexToLineCh,
convertLineChToIndex,
} from "~/helpers/editor/utils"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
response: HoppRESTResponse
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const responseBodyText = computed(() => {
if (
@@ -234,9 +233,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadIcon.value = "check"
$toast.success(`${t("state.download_started")}`, {
icon: "downloading",
})
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
@@ -256,9 +253,7 @@ const outlinePath = computed(() => {
const copyResponse = () => {
copyToClipboard(responseBodyText.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`, {
icon: "content_paste",
})
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

27
packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
View File

@@ -14,13 +14,13 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("response.body") }}
{{ t("response.body") }}
</label>
<div class="flex">
<ButtonSecondary
v-if="response.body"
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -29,7 +29,7 @@
v-if="response.body"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:title="t('action.download_file')"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
@@ -37,7 +37,7 @@
v-if="response.body"
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="copyIcon"
@click.native="copyResponse"
/>
@@ -48,20 +48,19 @@
</template>
<script setup lang="ts">
import { ref, useContext, computed, reactive } from "@nuxtjs/composition-api"
import { ref, computed, reactive } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
response: HoppRESTResponse
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const responseBodyText = computed(() => {
if (
@@ -117,9 +116,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadIcon.value = "check"
$toast.success(`${t("state.download_started")}`, {
icon: "downloading",
})
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
@@ -130,9 +127,7 @@ const downloadResponse = () => {
const copyResponse = () => {
copyToClipboard(responseBodyText.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`, {
icon: "content_paste",
})
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

27
packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -14,13 +14,13 @@
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("response.body") }}
{{ t("response.body") }}
</label>
<div class="flex">
<ButtonSecondary
v-if="response.body"
v-tippy="{ theme: 'tooltip' }"
:title="$t('state.linewrap')"
:title="t('state.linewrap')"
:class="{ '!text-accent': linewrapEnabled }"
svg="corner-down-left"
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -29,7 +29,7 @@
v-if="response.body"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:title="t('action.download_file')"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
@@ -37,7 +37,7 @@
v-if="response.body"
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:title="t('action.copy')"
:svg="copyIcon"
@click.native="copyResponse"
/>
@@ -48,20 +48,19 @@
</template>
<script setup lang="ts">
import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
import { computed, ref, reactive } from "@nuxtjs/composition-api"
import { useCodemirror } from "~/helpers/editor/codemirror"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
response: HoppRESTResponse
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const responseBodyText = computed(() => {
if (
@@ -117,9 +116,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadIcon.value = "check"
$toast.success(`${t("state.download_started")}`, {
icon: "downloading",
})
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
@@ -130,9 +127,7 @@ const downloadResponse = () => {
const copyResponse = () => {
copyToClipboard(responseBodyText.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`, {
icon: "content_paste",
})
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

5
packages/hoppscotch-app/components/realtime/Log.vue
View File

@@ -26,7 +26,7 @@
>{{ entry.ts }}{{ source(entry.source) }}{{ entry.payload }}</span
>
</span>
<span v-else>{{ $t("response.waiting_for_connection") }}</span>
<span v-else>{{ t("response.waiting_for_connection") }}</span>
</div>
</div>
</template>
@@ -34,6 +34,9 @@
<script setup lang="ts">
import { nextTick, ref, watch } from "@nuxtjs/composition-api"
import { getSourcePrefix as source } from "~/helpers/utils/string"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps({
log: { type: Array, default: () => [] },

16
packages/hoppscotch-app/components/realtime/Mqtt.vue
View File

@@ -244,7 +244,9 @@ export default defineComponent({
]
const parseUrl = new URL(this.url)
this.client = new Paho.Client(
parseUrl.hostname,
`${parseUrl.hostname}${
parseUrl.pathname !== "/" ? parseUrl.pathname : ""
}`,
parseUrl.port !== "" ? Number(parseUrl.port) : 8081,
"hoppscotch"
)
@@ -286,9 +288,7 @@ export default defineComponent({
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
})
this.$toast.success(this.$t("state.connected"), {
icon: "sync",
})
this.$toast.success(this.$t("state.connected"))
},
onMessageArrived({ payloadString, destinationName }) {
this.log.push({
@@ -319,13 +319,9 @@ export default defineComponent({
this.connectingState = false
this.connectionState = false
if (this.manualDisconnect) {
this.$toast.error(this.$t("state.disconnected"), {
icon: "sync_disabled",
})
this.$toast.error(this.$t("state.disconnected"))
} else {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
}
this.manualDisconnect = false
this.subscriptionState = false

12
packages/hoppscotch-app/components/realtime/Socketio.vue
View File

@@ -325,9 +325,7 @@ export default defineComponent({
ts: new Date().toLocaleTimeString(),
},
]
this.$toast.success(this.$t("state.connected"), {
icon: "sync",
})
this.$toast.success(this.$t("state.connected"))
})
this.io.on("*", ({ data }) => {
const [eventName, message] = data
@@ -355,15 +353,11 @@ export default defineComponent({
color: "#ff5555",
ts: new Date().toLocaleTimeString(),
})
this.$toast.error(this.$t("state.disconnected"), {
icon: "sync_disabled",
})
this.$toast.error(this.$t("state.disconnected"))
})
} catch (e) {
this.handleError(e)
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
}
logHoppRequestRunToAnalytics({

12
packages/hoppscotch-app/components/realtime/Sse.vue
View File

@@ -171,9 +171,7 @@ export default defineComponent({
ts: new Date().toLocaleTimeString(),
},
]
this.$toast.success(this.$t("state.connected"), {
icon: "sync",
})
this.$toast.success(this.$t("state.connected"))
}
this.sse.onerror = () => {
this.handleSSEError()
@@ -188,9 +186,7 @@ export default defineComponent({
color: "#ff5555",
ts: new Date().toLocaleTimeString(),
})
this.$toast.error(this.$t("state.disconnected"), {
icon: "sync_disabled",
})
this.$toast.error(this.$t("state.disconnected"))
}
this.sse.addEventListener(this.eventType, ({ data }) => {
this.events.log.push({
@@ -201,9 +197,7 @@ export default defineComponent({
})
} catch (e) {
this.handleSSEError(e)
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
}
} else {
this.events.log = [

13
packages/hoppscotch-app/components/realtime/Websocket.vue
View File

@@ -319,9 +319,7 @@ export default defineComponent({
ts: new Date().toLocaleTimeString(),
},
]
this.$toast.success(this.$t("state.connected"), {
icon: "sync",
})
this.$toast.success(this.$t("state.connected"))
}
this.socket.onerror = () => {
this.handleError()
@@ -334,9 +332,7 @@ export default defineComponent({
color: "#ff5555",
ts: new Date().toLocaleTimeString(),
})
this.$toast.error(this.$t("state.disconnected"), {
icon: "sync_disabled",
})
this.$toast.error(this.$t("state.disconnected"))
}
this.socket.onmessage = ({ data }) => {
this.communication.log.push({
@@ -347,9 +343,7 @@ export default defineComponent({
}
} catch (e) {
this.handleError(e)
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
}
logHoppRequestRunToAnalytics({
@@ -433,7 +427,6 @@ export default defineComponent({
const oldProtocols = this.protocols.slice()
this.$delete(this.protocols, index)
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
action: {
text: this.$t("action.undo"),
duration: 4000,

24
packages/hoppscotch-app/components/smart/AccentModePicker.vue
View File

@@ -23,8 +23,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import {
HoppAccentColors,
HoppAccentColor,
@@ -32,18 +31,11 @@ import {
useSetting,
} from "~/newstore/settings"
export default defineComponent({
setup() {
return {
accentColors: HoppAccentColors,
active: useSetting("THEME_COLOR"),
}
},
methods: {
setActiveColor(color: HoppAccentColor) {
document.documentElement.setAttribute("data-accent", color)
applySetting("THEME_COLOR", color)
},
},
})
const accentColors = HoppAccentColors
const active = useSetting("THEME_COLOR")
const setActiveColor = (color: HoppAccentColor) => {
document.documentElement.setAttribute("data-accent", color)
applySetting("THEME_COLOR", color)
}
</script>

85
packages/hoppscotch-app/components/smart/ColorModePicker.vue
View File

@@ -4,7 +4,7 @@
v-for="(color, index) of colors"
:key="`color-${index}`"
v-tippy="{ theme: 'tooltip' }"
:title="$t(getColorModeName(color))"
:title="t(getColorModeName(color))"
:class="{
'bg-primaryLight !text-accent hover:text-accent': color === active,
}"
@@ -15,54 +15,51 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import {
applySetting,
HoppBgColor,
HoppBgColors,
useSetting,
} from "~/newstore/settings"
import { useI18n } from "~/helpers/utils/composables"
export default defineComponent({
setup() {
return {
colors: HoppBgColors,
active: useSetting("BG_COLOR"),
}
},
methods: {
setBGMode(color: HoppBgColor) {
applySetting("BG_COLOR", color)
},
getIcon(color: HoppBgColor) {
switch (color) {
case "system":
return "monitor"
case "light":
return "sun"
case "dark":
return "cloud"
case "black":
return "moon"
default:
return "monitor"
}
},
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"
}
},
},
})
const t = useI18n()
const colors = HoppBgColors
const active = useSetting("BG_COLOR")
const setBGMode = (color: HoppBgColor) => {
applySetting("BG_COLOR", color)
}
const getIcon = (color: HoppBgColor) => {
switch (color) {
case "system":
return "monitor"
case "light":
return "sun"
case "dark":
return "cloud"
case "black":
return "moon"
default:
return "monitor"
}
}
const 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>

38
packages/hoppscotch-app/components/smart/FontSizePicker.vue
View File

@@ -5,12 +5,12 @@
<span class="select-wrapper">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('settings.change_font_size')"
:title="t('settings.change_font_size')"
class="pr-8"
svg="type"
outline
:label="`${getFontSizeName(
fontSizes.find((size) => size == active)
fontSizes.find((size) => size === active)
)}`"
/>
</span>
@@ -32,30 +32,26 @@
</span>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import {
HoppFontSizes,
HoppFontSize,
applySetting,
useSetting,
} from "~/newstore/settings"
import { useI18n } from "~/helpers/utils/composables"
export default defineComponent({
setup() {
return {
fontSizes: HoppFontSizes,
active: useSetting("FONT_SIZE"),
}
},
methods: {
getFontSizeName(size: HoppFontSize) {
return this.$t(`settings.font_size_${size}`)
},
setActiveFont(size: HoppFontSize) {
document.documentElement.setAttribute("data-font-size", size)
applySetting("FONT_SIZE", size)
},
},
})
const t = useI18n()
const fontSizes = HoppFontSizes
const active = useSetting("FONT_SIZE")
const getFontSizeName = (size: HoppFontSize) => {
return t(`settings.font_size_${size}`)
}
const setActiveFont = (size: HoppFontSize) => {
document.documentElement.setAttribute("data-font-size", size)
applySetting("FONT_SIZE", size)
}
</script>

22
packages/hoppscotch-app/components/smart/Icon.vue
View File

@@ -2,20 +2,14 @@
<component :is="src" />
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import { computed } from "@nuxtjs/composition-api"
export default defineComponent({
props: {
name: {
type: String,
required: true,
},
},
computed: {
src() {
return require(`~/assets/icons/${this.name}.svg?inline`)
},
},
const props = defineProps<{
name: String
}>()
const src = computed(() => {
return require(`~/assets/icons/${props.name}.svg?inline`)
})
</script>

25
packages/hoppscotch-app/components/teams/Add.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="$t('team.new').toString()" @close="hideModal">
<SmartModal v-if="show" :title="t('team.new')" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<input
@@ -13,18 +13,15 @@
@keyup.enter="addNewTeam"
/>
<label for="selectLabelTeamAdd">
{{ $t("action.label") }}
{{ t("action.label") }}
</label>
</div>
</template>
<template #footer>
<span>
<ButtonPrimary
:label="$t('action.save').toString()"
@click.native="addNewTeam"
/>
<ButtonPrimary :label="t('action.save')" @click.native="addNewTeam" />
<ButtonSecondary
:label="$t('action.cancel').toString()"
:label="t('action.cancel')"
@click.native="hideModal"
/>
</span>
@@ -33,18 +30,16 @@
</template>
<script setup lang="ts">
import { ref, useContext } from "@nuxtjs/composition-api"
import { ref } from "@nuxtjs/composition-api"
import { pipe } from "fp-ts/function"
import * as TE from "fp-ts/TaskEither"
import { createTeam } from "~/helpers/backend/mutations/Team"
import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
import { useI18n, useToast } from "~/helpers/utils/composables"
const {
app: { i18n },
$toast,
} = useContext()
const t = useI18n()
const t = i18n.t.bind(i18n)
const toast = useToast()
defineProps<{
show: boolean
@@ -66,9 +61,7 @@ const addNewTeam = () =>
(err) => {
// err is of type "invalid_name" | GQLError<Err>
if (err === "invalid_name") {
$toast.error(t("team.name_length_insufficient").toString(), {
icon: "error_outline",
})
toast.error(`${t("team.name_length_insufficient")}`)
} else {
// Handle GQL errors (use err obj)
}

73
packages/hoppscotch-app/components/teams/Edit.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
<SmartModal v-if="show" :title="t('team.edit')" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<div class="flex relative">
@@ -14,17 +14,17 @@
@keyup.enter="saveTeam"
/>
<label for="selectLabelTeamEdit">
{{ $t("action.label") }}
{{ t("action.label") }}
</label>
</div>
<div class="flex pt-4 flex-1 justify-between items-center">
<label for="memberList" class="p-4">
{{ $t("team.members") }}
{{ t("team.members") }}
</label>
<div class="flex">
<ButtonSecondary
svg="user-plus"
:label="$t('team.invite')"
:label="t('team.invite')"
filled
@click.native="
() => {
@@ -39,7 +39,7 @@
class="flex flex-col items-center justify-center"
>
<SmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ $t("state.loading") }}</span>
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
v-if="
@@ -70,14 +70,14 @@
w-16
inline-flex
"
:alt="$t('empty.members')"
:alt="`${t('empty.members')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.members") }}
{{ t("empty.members") }}
</span>
<ButtonSecondary
svg="user-plus"
:label="$t('team.invite')"
:label="t('team.invite')"
@click.native="
() => {
emit('invite-team')
@@ -93,7 +93,7 @@
>
<input
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="$t('team.email')"
:placeholder="`${t('team.email')}`"
:name="'param' + index"
:value="member.email"
readonly
@@ -116,7 +116,7 @@
py-2
px-4
"
:placeholder="$t('team.permissions')"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="
typeof member.role === 'string'
@@ -160,7 +160,7 @@
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="removeExistingTeamMember(member.userID)"
@@ -174,15 +174,15 @@
class="flex flex-col items-center"
>
<i class="mb-4 material-icons">help_outline</i>
{{ $t("error.something_went_wrong") }}
{{ t("error.something_went_wrong") }}
</div>
</div>
</template>
<template #footer>
<span>
<ButtonPrimary :label="$t('action.save')" @click.native="saveTeam" />
<ButtonPrimary :label="t('action.save')" @click.native="saveTeam" />
<ButtonSecondary
:label="$t('action.cancel')"
:label="t('action.cancel')"
@click.native="hideModal"
/>
</span>
@@ -191,13 +191,7 @@
</template>
<script setup lang="ts">
import {
computed,
ref,
toRef,
useContext,
watch,
} from "@nuxtjs/composition-api"
import { computed, ref, toRef, watch } from "@nuxtjs/composition-api"
import * as E from "fp-ts/Either"
import {
GetTeamDocument,
@@ -215,6 +209,9 @@ import {
} from "~/helpers/backend/mutations/Team"
import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
import { useGQLQuery } from "~/helpers/backend/GQLClient"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const emit = defineEmits<{
(e: "hide-modal"): void
@@ -230,11 +227,7 @@ const props = defineProps<{
editingTeamID: string
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const name = toRef(props.editingTeam, "name")
@@ -361,13 +354,9 @@ const removeExistingTeamMember = async (userID: string) => {
props.editingTeamID
)()
if (E.isLeft(removeTeamMemberResult)) {
$toast.error(t("error.something_went_wrong"), {
icon: "error",
})
toast.error(`${t("error.something_went_wrong")}`)
} else {
$toast.success(t("team.member_removed"), {
icon: "done",
})
toast.success(`${t("team.member_removed")}`)
}
}
@@ -379,9 +368,7 @@ const saveTeam = async () => {
name.value
)()
if (E.isLeft(updateTeamNameResult)) {
$toast.error(t("error.something_went_wrong"), {
icon: "error",
})
toast.error(`${t("error.something_went_wrong")}`)
} else {
roleUpdates.value.forEach(async (update) => {
const updateMemberRoleResult = await updateTeamMemberRole(
@@ -390,26 +377,18 @@ const saveTeam = async () => {
update.role
)()
if (E.isLeft(updateMemberRoleResult)) {
$toast.error(t("error.something_went_wrong"), {
icon: "error",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(updateMemberRoleResult.left.error)
}
})
}
hideModal()
$toast.success(t("team.saved"), {
icon: "done",
})
toast.success(`${t("team.saved")}`)
} else {
return $toast.error(t("team.name_length_insufficient"), {
icon: "error_outline",
})
return toast.error(`${t("team.name_length_insufficient")}`)
}
} else {
return $toast.error(t("empty.team_name"), {
icon: "error_outline",
})
return toast.error(`${t("empty.team_name")}`)
}
}

87
packages/hoppscotch-app/components/teams/Invite.vue
View File

@@ -1,14 +1,14 @@
<template>
<SmartModal v-if="show" :title="$t('team.invite')" @close="hideModal">
<SmartModal v-if="show" :title="t('team.invite')" @close="hideModal">
<template #body>
<div v-if="sendInvitesResult.length" class="flex flex-col px-4">
<div class="flex flex-col max-w-md justify-center items-center">
<SmartIcon class="h-6 text-accent w-6" name="users" />
<h3 class="my-2 text-center text-lg">
{{ $t("team.we_sent_invite_link") }}
{{ t("team.we_sent_invite_link") }}
</h3>
<p class="text-center">
{{ $t("team.we_sent_invite_link_description") }}
{{ t("team.we_sent_invite_link_description") }}
</p>
</div>
<div
@@ -56,7 +56,7 @@
<div v-else class="flex flex-col px-2">
<div class="flex flex-1 justify-between items-center">
<label for="memberList" class="pb-4 px-4">
{{ $t("team.pending_invites") }}
{{ t("team.pending_invites") }}
</label>
</div>
<div class="divide-y divide-dividerLight border-divider border rounded">
@@ -85,7 +85,7 @@
py-2
px-4
"
:placeholder="`${$t('team.email')}`"
:placeholder="`${t('team.email')}`"
:name="'param' + index"
:value="invitee.inviteeEmail"
readonly
@@ -98,7 +98,7 @@
py-2
px-4
"
:placeholder="`${$t('team.permissions')}`"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="
typeof invitee.inviteeRole === 'string'
@@ -110,7 +110,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="removeInvitee(invitee.id)"
@@ -132,7 +132,7 @@
"
>
<span class="text-center">
{{ $t("empty.pending_invites") }}
{{ t("empty.pending_invites") }}
</span>
</div>
<div
@@ -140,18 +140,18 @@
class="flex flex-col p-4 items-center"
>
<i class="mb-4 material-icons">help_outline</i>
{{ $t("error.something_went_wrong") }}
{{ t("error.something_went_wrong") }}
</div>
</div>
</div>
<div class="flex pt-4 flex-1 justify-between items-center">
<label for="memberList" class="p-4">
{{ $t("team.invite_tooltip") }}
{{ t("team.invite_tooltip") }}
</label>
<div class="flex">
<ButtonSecondary
svg="plus"
:label="$t('add.new')"
:label="t('add.new')"
filled
@click.native="addNewInvitee"
/>
@@ -166,7 +166,7 @@
<input
v-model="invitee.key"
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="$t('team.email')"
:placeholder="`${t('team.email')}`"
:name="'invitee' + index"
autofocus
/>
@@ -188,7 +188,7 @@
py-2
px-4
"
:placeholder="$t('team.permissions')"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="
typeof invitee.value === 'string'
@@ -232,7 +232,7 @@
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="removeNewInvitee(index)"
@@ -260,13 +260,13 @@
w-16
inline-flex
"
:alt="$t('empty.invites')"
:alt="`${t('empty.invites')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.invites") }}
{{ t("empty.invites") }}
</span>
<ButtonSecondary
:label="$t('add.new')"
:label="t('add.new')"
filled
@click.native="addNewInvitee"
/>
@@ -299,11 +299,11 @@
"
>
<i class="text-secondaryLight mr-2 material-icons">help_outline</i>
{{ $t("profile.roles") }}
{{ t("profile.roles") }}
</span>
<p>
<span class="text-secondaryLight">
{{ $t("profile.roles_description") }}
{{ t("profile.roles_description") }}
</span>
</p>
<ul class="mt-4 space-y-4">
@@ -318,10 +318,10 @@
w-1/4
"
>
{{ $t("profile.owner") }}
{{ t("profile.owner") }}
</span>
<span class="flex flex-1">
{{ $t("profile.owner_description") }}
{{ t("profile.owner_description") }}
</span>
</li>
<li class="flex">
@@ -335,10 +335,10 @@
w-1/4
"
>
{{ $t("profile.editor") }}
{{ t("profile.editor") }}
</span>
<span class="flex flex-1">
{{ $t("profile.editor_description") }}
{{ t("profile.editor_description") }}
</span>
</li>
<li class="flex">
@@ -352,10 +352,10 @@
w-1/4
"
>
{{ $t("profile.viewer") }}
{{ t("profile.viewer") }}
</span>
<span class="flex flex-1">
{{ $t("profile.viewer_description") }}
{{ t("profile.viewer_description") }}
</span>
</li>
</ul>
@@ -369,7 +369,7 @@
>
<SmartAnchor
class="link"
:label="`← \xA0 ${$t('team.invite_more')}`"
:label="`← \xA0 ${t('team.invite_more')}`"
@click.native="
() => {
sendInvitesResult = []
@@ -384,14 +384,14 @@
/>
<SmartAnchor
class="link"
:label="`${$t('action.dismiss')}`"
:label="`${t('action.dismiss')}`"
@click.native="hideModal"
/>
</p>
<span v-else>
<ButtonPrimary :label="$t('team.invite')" @click.native="sendInvites" />
<ButtonPrimary :label="t('team.invite')" @click.native="sendInvites" />
<ButtonSecondary
:label="$t('action.cancel')"
:label="t('action.cancel')"
@click.native="hideModal"
/>
</span>
@@ -400,13 +400,7 @@
</template>
<script setup lang="ts">
import {
watch,
ref,
reactive,
useContext,
computed,
} from "@nuxtjs/composition-api"
import { watch, ref, reactive, computed } from "@nuxtjs/composition-api"
import * as T from "fp-ts/Task"
import * as E from "fp-ts/Either"
import * as A from "fp-ts/Array"
@@ -427,12 +421,11 @@ import {
revokeTeamInvitation,
} from "../../helpers/backend/mutations/TeamInvitation"
import { GQLError, useGQLQuery } from "~/helpers/backend/GQLClient"
import { useI18n, useToast } from "~/helpers/utils/composables"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const newInviteeOptions = ref<any | null>(null)
@@ -491,13 +484,9 @@ watch(
const removeInvitee = async (id: string) => {
const result = await revokeTeamInvitation(id)()
if (E.isLeft(result)) {
$toast.error(`${t("error.something_went_wrong")}`, {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
} else {
$toast.success(`${t("team.member_removed")}`, {
icon: "person",
})
toast.success(`${t("team.member_removed")}`)
}
}
@@ -557,9 +546,7 @@ const sendInvites = async () => {
if (O.isNone(validationResult)) {
// Error handling for no validation
$toast.error(`${t("error.incorrect_email")}`, {
icon: "error_outline",
})
toast.error(`${t("error.incorrect_email")}`)
return
}

33
packages/hoppscotch-app/components/teams/Modal.vue
View File

@@ -1,26 +1,25 @@
<template>
<SmartModal
v-if="show"
:title="$t('team.select_a_team')"
@close="$emit('hide-modal')"
>
<SmartModal v-if="show" :title="t('team.select_a_team')" @close="hideModal">
<template #body>
<Teams :modal="true" />
</template>
</SmartModal>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
<script setup lang="ts">
import { useI18n } from "~/helpers/utils/composables"
export default defineComponent({
props: {
show: Boolean,
},
methods: {
hideModal() {
this.$emit("hide-modal")
},
},
})
const t = useI18n()
defineProps<{
show: Boolean
}>()
const emit = defineEmits<{
(e: "hide-modal"): void
}>()
const hideModal = () => {
emit("hide-modal")
}
</script>

47
packages/hoppscotch-app/components/teams/Team.vue
View File

@@ -22,7 +22,7 @@
class="font-semibold text-secondaryDark"
:class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
>
{{ team.name || $t("state.nothing_found") }}
{{ team.name || t("state.nothing_found") }}
</label>
<div class="flex -space-x-1 mt-2 overflow-hidden">
<img
@@ -44,7 +44,7 @@
v-if="team.myRole === 'OWNER'"
svg="edit"
class="rounded-none"
:label="$t('action.edit').toString()"
:label="t('action.edit')"
@click.native="
() => {
$emit('edit-team')
@@ -55,7 +55,7 @@
v-if="team.myRole === 'OWNER'"
svg="user-plus"
class="rounded-none"
:label="$t('team.invite')"
:label="t('team.invite')"
@click.native="
() => {
emit('invite-team')
@@ -68,14 +68,14 @@
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
:title="t('action.more')"
svg="more-vertical"
/>
</template>
<SmartItem
v-if="team.myRole === 'OWNER'"
svg="edit"
:label="$t('action.edit').toString()"
:label="t('action.edit')"
@click.native="
() => {
$emit('edit-team')
@@ -87,7 +87,7 @@
v-if="team.myRole === 'OWNER'"
svg="trash-2"
color="red"
:label="$t('action.delete').toString()"
:label="t('action.delete')"
@click.native="
() => {
deleteTeam()
@@ -98,7 +98,7 @@
<SmartItem
v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
svg="trash"
:label="$t('team.exit').toString()"
:label="t('team.exit')"
@click.native="
() => {
exitTeam()
@@ -113,7 +113,6 @@
</template>
<script setup lang="ts">
import { useContext } from "@nuxtjs/composition-api"
import { pipe } from "fp-ts/function"
import * as TE from "fp-ts/TaskEither"
import { TeamMemberRole } from "~/helpers/backend/graphql"
@@ -121,6 +120,9 @@ import {
deleteTeam as backendDeleteTeam,
leaveTeam,
} from "~/helpers/backend/mutations/Team"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
team: {
@@ -142,30 +144,21 @@ const emit = defineEmits<{
(e: "edit-team"): void
}>()
const {
app: { i18n },
$toast,
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const deleteTeam = () => {
if (!confirm(t("confirm.remove_team").toString())) return
if (!confirm(`${t("confirm.remove_team")}`)) return
pipe(
backendDeleteTeam(props.teamID),
TE.match(
(err) => {
// TODO: Better errors ? We know the possible errors now
$toast.error(t("error.something_went_wrong").toString(), {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(err)
},
() => {
$toast.success(t("team.deleted").toString(), {
icon: "done",
})
toast.success(`${t("team.deleted")}`)
}
)
)() // Tasks (and TEs) are lazy, so call the function returned
@@ -179,23 +172,17 @@ const exitTeam = () => {
TE.match(
(err) => {
// TODO: Better errors ?
$toast.error(t("error.something_went_wrong").toString(), {
icon: "error_outline",
})
toast.error(`${t("error.something_went_wrong")}`)
console.error(err)
},
() => {
$toast.success(t("team.left").toString(), {
icon: "done",
})
toast.success(`${t("team.left")}`)
}
)
)() // Tasks (and TEs) are lazy, so call the function returned
}
const noPermission = () => {
$toast.error(t("profile.no_permission").toString(), {
icon: "error_outline",
})
toast.error(`${t("profile.no_permission")}`)
}
</script>

15
packages/hoppscotch-app/components/teams/index.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="teams">
<div class="space-y-4 p-4">
<ButtonSecondary
:label="`${$t('team.create_new')}`"
:label="`${t('team.create_new')}`"
outline
@click.native="displayModalAdd(true)"
/>
@@ -11,7 +11,7 @@
class="flex flex-col items-center justify-center"
>
<SmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ $t("state.loading") }}</span>
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
v-if="
@@ -38,13 +38,13 @@
w-16
inline-flex
"
:alt="$t('empty.teams')"
:alt="`${t('empty.teams')}`"
/>
<span class="text-center mb-4">
{{ $t("empty.teams") }}
{{ t("empty.teams") }}
</span>
<ButtonSecondary
:label="`${$t('team.create_new')}`"
:label="`${t('team.create_new')}`"
filled
@click.native="displayModalAdd(true)"
/>
@@ -71,7 +71,7 @@
class="flex flex-col items-center"
>
<i class="mb-4 material-icons">help_outline</i>
{{ $t("error.something_went_wrong") }}
{{ t("error.something_went_wrong") }}
</div>
</div>
<TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
@@ -114,6 +114,9 @@ import {
MyTeamsQueryVariables,
} from "~/helpers/backend/graphql"
import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps<{
modal: boolean

12
packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
View File

@@ -91,12 +91,14 @@ export const baseTheme = EditorView.theme({
".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": {
color: "var(--accent-contrast-color)",
},
".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
".cm-activeLine": { backgroundColor: "transparent" },
".cm-searchMatch": {
outline: "1px solid var(--accent-dark-color)",
backgroundColor: "var(--divider-dark-color)",
},
".cm-selectionMatch": {
outline: "1px solid var(--accent-dark-color)",
backgroundColor: "var(--divider-light-color)",
},
".cm-matchingBracket, .cm-nonmatchingBracket": {
backgroundColor: "var(--divider-color)",
@@ -121,14 +123,18 @@ export const baseTheme = EditorView.theme({
".cm-line": {
paddingLeft: "0.5em",
paddingRight: "0.5em",
color: "var(--secondary-dark-color)",
},
".cm-activeLineGutter": {
backgroundColor: "var(--primary-dark-color)",
backgroundColor: "transparent",
},
".cm-scroller::-webkit-scrollbar": {
display: "none",
},
".cm-foldPlaceholder": {
backgroundColor: "var(--divider-light-color)",
color: "var(--secondary-dark-color)",
borderColor: "var(--divider-dark-color)",
},
})
const editorTypeColor = "var(--editor-type-color)"

7
packages/hoppscotch-app/helpers/powerSearchNavigation.ts
View File

@@ -15,17 +15,18 @@ export function useArrowKeysNavigation(searchItems: any, options: any = {}) {
const itemsLength = searchItems.value.length
const lastItemIndex = itemsLength - 1
const itemIndexValue = itemIndex.value
const action = searchItems.value[itemIndexValue].action
const action = searchItems.value[itemIndexValue]?.action
if (action && event.key === "Enter" && options.onEnter) {
options.onEnter(action)
return
}
if (event.key === "ArrowDown") {
if (itemsLength && event.key === "ArrowDown") {
itemIndex.value = itemIndexValue < lastItemIndex ? itemIndexValue + 1 : 0
} else if (itemIndexValue === 0) itemIndex.value = lastItemIndex
else if (event.key === "ArrowUp") itemIndex.value = itemIndexValue - 1
else if (itemsLength && event.key === "ArrowUp")
itemIndex.value = itemIndexValue - 1
}
const preventPropagation = options && options.stopPropagation

13
packages/hoppscotch-app/helpers/utils/composables.ts
View File

@@ -5,6 +5,7 @@ import {
readonly,
Ref,
ref,
useContext,
watch,
wrapProperty,
} from "@nuxtjs/composition-api"
@@ -132,3 +133,15 @@ export function useStreamSubscriber() {
subscribeToStream: runAndSubscribe,
}
}
export function useI18n() {
const {
app: { i18n },
} = useContext()
return i18n.t.bind(i18n)
}
export function useToast() {
const { $toast } = useContext()
return $toast
}

1
packages/hoppscotch-app/layouts/default.vue
View File

@@ -171,7 +171,6 @@ export default defineComponent({
workbox.addEventListener("installed", (event: any) => {
if (event.isUpdate) {
this.$toast.show(`${this.$t("app.new_version_found")}`, {
icon: "download_for_offline",
duration: 0,
action: [
{

396
packages/hoppscotch-app/locales/it.json
View File

@@ -2,61 +2,61 @@
"action": {
"cancel": "Annulla",
"choose_file": "Scegli un file",
"clear": "Chiaro",
"clear": "Cancella",
"clear_all": "Cancella tutto",
"connect": "Collegare",
"copy": "copia",
"connect": "Connetti",
"copy": "Copia",
"delete": "Elimina",
"disconnect": "Disconnetti",
"dismiss": "Congedare",
"download_file": "Download file",
"duplicate": "Duplicate",
"edit": "Modificare",
"dismiss": "Abbandona",
"download_file": "Scarica file",
"duplicate": "Duplica",
"edit": "Modifica",
"go_back": "Torna indietro",
"label": "Etichetta",
"learn_more": "Per saperne di più",
"more": "Di più",
"new": "Nuovo",
"no": "No",
"preserve_current": "Conserva la corrente",
"prettify": "Abbellire",
"remove": "Rimuovere",
"replace_current": "Sostituisci corrente",
"preserve_current": "Conserva attuale",
"prettify": "Abbellisci",
"remove": "Rimuovi",
"replace_current": "Sostituisci attuale",
"replace_json": "Sostituisci con JSON",
"restore": "Ristabilire",
"restore": "Ripristina",
"save": "Salva",
"search": "Ricerca",
"send": "Spedire",
"start": "Cominciare",
"stop": "Fermare",
"search": "Cerca",
"send": "Invia",
"start": "Avvia",
"stop": "Interrompi",
"turn_off": "Spegni",
"turn_on": "Accendere",
"undo": "Annullare",
"yes": "sì"
"turn_on": "Accendi",
"undo": "Annulla",
"yes": "Sì"
},
"add": {
"new": "Aggiungere nuova",
"new": "Aggiungi nuova",
"star": "Aggiungi stella"
},
"app": {
"chat_with_us": "chatta con noi",
"chat_with_us": "Chatta con noi",
"contact_us": "Contattaci",
"copy": "copia",
"copy": "Copia",
"documentation": "Documentazione",
"github": "GitHub",
"help": "Aiuto, feedback e documentazione",
"home": "Casa",
"invite": "Invitare",
"home": "Home",
"invite": "Invita",
"invite_description": "In Hoppscotch, abbiamo progettato un'interfaccia semplice e intuitiva per creare e gestire le tue API. Hoppscotch è uno strumento che ti aiuta a creare, testare, documentare e condividere le tue API.",
"invite_your_friends": "Invita i tuoi amici",
"join_discord_community": "Unisciti alla nostra comunità Discord",
"keyboard_shortcuts": "Tasti rapidi",
"name": "Hoppscotch",
"new_version_found": "Nuova versione trovata. Aggiorna per aggiornare.",
"new_version_found": "Nuova versione trovata. Aggiorna la pagina per aggiornare.",
"proxy_privacy_policy": "Informativa sulla privacy del proxy",
"reload": "Ricaricare",
"search": "Ricerca",
"share": "Condividere",
"reload": "Ricarica",
"search": "Cerca",
"share": "Condividi",
"shortcuts": "Scorciatoie",
"spotlight": "Riflettore",
"status": "Stato",
@@ -76,13 +76,13 @@
"continue_with_google": "Continua con Google",
"email": "E-mail",
"logged_out": "Disconnesso",
"login": "Login",
"login": "Accedi",
"login_success": "Accesso effettuato con successo",
"login_to_hoppscotch": "Accedi a Hoppscotch",
"logout": "Disconnettersi",
"re_enter_email": "Reinserisci l'email",
"send_magic_link": "Invia un link magico",
"sync": "Sincronizzazione",
"sync": "Sincronizza",
"we_sent_magic_link": "Ti abbiamo inviato un link magico!",
"we_sent_magic_link_description": "Controlla la tua casella di posta: abbiamo inviato un'email a {email}. Contiene un collegamento magico che ti consentirà di accedere."
},
@@ -90,24 +90,24 @@
"generate_token": "Genera token",
"include_in_url": "Includi nell'URL",
"learn": "Impara come",
"password": "Parola d'ordine",
"token": "Gettone",
"password": "Password",
"token": "Token",
"type": "Tipo di autorizzazione",
"username": "Nome utente"
},
"collection": {
"created": "Collezione creata",
"created": "Raccolta creata",
"edit": "Modifica raccolta",
"invalid_name": "Si prega di fornire un nome valido per la raccolta",
"my_collections": "Le mie collezioni",
"name": "La mia nuova collezione",
"new": "Nuova collezione",
"renamed": "Collezione rinominata",
"my_collections": "Le Mie Raccolte",
"name": "La mia nuova raccolta",
"new": "Nuova raccolta",
"renamed": "Raccolta rinominata",
"save_as": "Salva come",
"select": "Seleziona una collezione",
"select": "Seleziona una raccolta",
"select_location": "Seleziona la posizione",
"select_team": "Seleziona una squadra",
"team_collections": "Collezioni squadra"
"select_team": "Seleziona un team",
"team_collections": "Raccolte di team"
},
"confirm": {
"logout": "Sei sicuro di voler uscire?",
@@ -116,9 +116,9 @@
"remove_folder": "Sei sicuro di voler eliminare definitivamente questa cartella?",
"remove_history": "Sei sicuro di voler eliminare definitivamente tutta la cronologia?",
"remove_request": "Sei sicuro di voler eliminare definitivamente questa richiesta?",
"remove_team": "Sei sicuro di voler eliminare questa squadra?",
"remove_team": "Sei sicuro di voler eliminare questo team?",
"remove_telemetry": "Sei sicuro di voler disattivare la telemetria?",
"sync": "Sei sicuro di voler sincronizzare questo spazio di lavoro?"
"sync": "Vuoi ripristinare il tuo spazio di lavoro con quello del cloud? Questo annullerà le tue modifiche fatte in locale."
},
"count": {
"header": "Intestazione {count}",
@@ -130,27 +130,27 @@
},
"documentation": {
"generate": "Genera documentazione",
"generate_message": "Importa qualsiasi collezione Hoppscotch per generare documentazione API in movimento."
"generate_message": "Importa qualsiasi raccolta Hoppscotch per generare documentazione API al volo."
},
"empty": {
"authorization": "Questa richiesta non utilizza alcuna autorizzazione",
"body": "Questa richiesta non ha un corpo",
"collection": "La raccolta è vuota",
"collections": "Le raccolte sono vuote",
"documentation": "Connect to a GraphQL endpoint to view documentation",
"documentation": "Connetti ad un endpoint GraphQL per mostrare la documentazione",
"environments": "Gli ambienti sono vuoti",
"folder": "La cartella è vuota",
"headers": "Questa richiesta non ha intestazioni",
"history": "La storia è vuota",
"invites": "Invite list is empty",
"members": "La squadra è vuota",
"history": "La cronologia è vuota",
"invites": "La lista degli inviti è vuota",
"members": "Il team non ha membri",
"parameters": "Questa richiesta non ha parametri",
"pending_invites": "There are no pending invites for this team",
"profile": "Login in to view your profile",
"pending_invites": "Non ci sono inviti pendenti per questo team",
"profile": "Accedi per mostrare il tuo profilo",
"protocols": "I protocolli sono vuoti",
"schema": "Connettiti a un endpoint GraphQL",
"team_name": "Nome della squadra vuoto",
"teams": "Le squadre sono vuote",
"schema": "Connettiti a un endpoint GraphQL per mostrare lo schema",
"team_name": "Il nome del team è vuoto",
"teams": "I team sono vuoti",
"tests": "Non ci sono test per questa richiesta"
},
"environment": {
@@ -164,26 +164,26 @@
"variable_list": "Elenco variabili"
},
"error": {
"browser_support_sse": "Questo browser non sembra supportare gli eventi inviati dal server.",
"check_console_details": "Controlla il registro della console per i dettagli.",
"browser_support_sse": "Questo browser non sembra supportare gli eventi inviati dal server (Server Sent Events).",
"check_console_details": "Controlla il log della console per i dettagli.",
"curl_invalid_format": "cURL non è formattato correttamente",
"empty_req_name": "Nome richiesta vuoto",
"f12_details": "(F12 per i dettagli)",
"gql_prettify_invalid_query": "Impossibile abbellire una query non valida, risolvere gli errori di sintassi della query e riprovare",
"incorrect_email": "Incorrect email",
"incorrect_email": "Indirizzo email errato",
"invalid_link": "Invalid link",
"invalid_link_description": "The link you clicked is invalid or expired.",
"json_prettify_invalid_body": "Impossibile abbellire un corpo non valido, risolvere gli errori di sintassi json e riprovare",
"network_error": "There seems to be a network error. Please try again.",
"json_prettify_invalid_body": "Impossibile abbellire un corpo non valido, risolvere gli errori di sintassi JSON e riprovare",
"network_error": "Sembra ci sia un problema di rete. Per favore prova di nuovo.",
"network_fail": "Impossibile inviare la richiesta",
"no_duration": "Nessuna durata",
"something_went_wrong": "Qualcosa è andato storto"
},
"export": {
"as_json": "Esporta come JSON",
"create_secret_gist": "Crea un segreto Gist",
"create_secret_gist": "Crea un Gist segreto",
"gist_created": "Gist creato",
"require_github": "Accedi con GitHub per creare un segreto"
"require_github": "Accedi con GitHub per creare un Gist segreto"
},
"folder": {
"created": "Cartella creata",
@@ -193,20 +193,20 @@
"renamed": "Cartella rinominata"
},
"graphql": {
"mutations": "mutazioni",
"mutations": "Mutazioni",
"schema": "Schema",
"subscriptions": "Abbonamenti"
"subscriptions": "Sottoscrizioni"
},
"header": {
"account": "Account",
"install_pwa": "Installa l'applicazione",
"login": "Login",
"login": "Accedi",
"save_workspace": "Salva il mio spazio di lavoro"
},
"helpers": {
"authorization": "L'intestazione dell'autorizzazione verrà generata automaticamente quando invii la richiesta.",
"authorization": "L'intestazione di autorizzazione verrà generata automaticamente quando invii la richiesta.",
"generate_documentation_first": "Generare prima la documentazione",
"network_fail": "Impossibile raggiungere l'endpoint API. Controlla la tua connessione di rete e riprova.",
"network_fail": "Impossibile raggiungere l'endpoint API. Controlla la tua connessione di rete o accendi il Proxy Interceptor e riprova.",
"offline": "Sembra che tu sia offline. I dati in questo spazio di lavoro potrebbero non essere aggiornati.",
"offline_short": "Sembra che tu sia offline.",
"post_request_tests": "Gli script di test sono scritti in JavaScript e vengono eseguiti dopo aver ricevuto la risposta.",
@@ -219,42 +219,42 @@
"sidebar": "Nascondi barra laterale"
},
"import": {
"collections": "Importa collezioni",
"collections": "Importa raccolte",
"curl": "Importa cURL",
"failed": "Importazione non riuscita",
"from_gist": "Importa da Gist",
"from_my_collections": "Importa da Le mie raccolte",
"gist_url": "Inserisci l'URL principale",
"from_my_collections": "Importa da Le Mie Raccolte",
"gist_url": "Inserisci l'URL del Gist",
"json": "Importa da JSON",
"title": "Importare"
"title": "Importa"
},
"layout": {
"column": "Vertical layout",
"row": "Horizontal layout",
"zen_mode": "Modalità Zen"
"column": "Disposizione verticale",
"row": "Disposizione orizzontale",
"zen_mode": "Modalità zen"
},
"modal": {
"collections": "Collezioni",
"confirm": "Confermare",
"collections": "Raccolte",
"confirm": "Conferma",
"edit_request": "Modifica richiesta",
"import_export": "Importa/Esporta"
},
"mqtt": {
"communication": "Comunicazione",
"log": "Tronco d'albero",
"log": "Log",
"message": "Messaggio",
"publish": "Pubblicare",
"subscribe": "sottoscrivi",
"publish": "Pubblica",
"subscribe": "Sottoscrivi",
"topic": "Argomento",
"topic_name": "Nome argomento",
"topic_title": "Pubblica / Sottoscrivi argomento",
"unsubscribe": "Annulla l'iscrizione",
"unsubscribe": "Annulla la sottoscrizione",
"url": "URL"
},
"navigation": {
"doc": "Documenti",
"graphql": "GraphQL",
"profile": "Profile",
"profile": "Profilo",
"realtime": "Tempo reale",
"rest": "REST",
"settings": "Impostazioni"
@@ -263,19 +263,19 @@
"javascript_code": "Codice JavaScript",
"learn": "Leggi la documentazione",
"script": "Script di pre-richiesta",
"snippets": "frammenti"
"snippets": "Frammenti"
},
"profile": {
"app_settings": "App Settings",
"editor": "Editor",
"editor_description": "Editors can add, edit, and delete requests.",
"no_permission": "You do not have permission to perform this action.",
"owner": "Owner",
"owner_description": "Owners can add, edit, and delete requests, collections and team members.",
"roles": "Roles",
"roles_description": "Roles are used to control access to the shared collections.",
"viewer": "Viewer",
"viewer_description": "Viewers can only view and use requests."
"app_settings": "Impostazioni della app",
"editor": "Autore",
"editor_description": "Gli Autori possono aggiungere, modificare e cancellare richieste.",
"no_permission": "Non hai i permessi per compiere questa azione.",
"owner": "Proprietario",
"owner_description": "I Proprietari possono aggiungere, modificare e cancellare richieste, raccolte e membri del team.",
"roles": "Ruoli",
"roles_description": "I ruoli sono usati per controllare l'accesso alle raccolte condivise.",
"viewer": "Visualizzatore",
"viewer_description": "I Visualizzatori possono soltanto vedere e invocare richieste."
},
"remove": {
"star": "Rimuovi stella"
@@ -283,10 +283,10 @@
"request": {
"added": "Richiesta aggiunta",
"authorization": "Autorizzazione",
"body": "Richiedi corpo",
"body": "Corpo della richiesta",
"choose_language": "Scegli la lingua",
"content_type": "Tipo di contenuto",
"copy_link": "Copia link",
"content_type": "Tipo di contenuto (Content Type)",
"copy_link": "Copia collegamento",
"duration": "Durata",
"enter_curl": "Inserisci cURL",
"generate_code": "Genera codice",
@@ -295,78 +295,78 @@
"invalid_name": "Si prega di fornire un nome per la richiesta",
"method": "Metodo",
"name": "Nome richiesta",
"parameter_list": "Parametri di query",
"parameter_list": "Parametri della query",
"parameters": "Parametri",
"payload": "Carico utile",
"query": "domanda",
"raw_body": "Corpo della richiesta grezza",
"payload": "Contenuto (Payload)",
"query": "Query",
"raw_body": "Corpo della richiesta non formattato",
"renamed": "Richiesta rinominata",
"run": "Correre",
"run": "Esegui",
"save": "Salva",
"save_as": "Salva come",
"saved": "Richiesta salvata",
"share": "Condividere",
"share": "Condividi",
"title": "Richiesta",
"type": "Tipo di richiesta",
"url": "URL",
"variables": "Variabili"
},
"response": {
"body": "Corpo di risposta",
"headers": "intestazioni",
"body": "Corpo della risposta",
"headers": "Intestazioni",
"html": "HTML",
"image": "Immagine",
"json": "JSON",
"preview_html": "Anteprima HTML",
"raw": "Crudo",
"size": "Taglia",
"raw": "Non formattato",
"size": "Dimensione",
"status": "Stato",
"time": "Volta",
"time": "Tempo impiegato",
"title": "Risposta",
"waiting_for_connection": "in attesa di connessione",
"waiting_for_connection": "In attesa di connessione",
"xml": "XML"
},
"settings": {
"accent_color": "Colore accento",
"accent_color": "Colore in risalto",
"account": "Account",
"account_description": "Personalizza le impostazioni del tuo account.",
"account_email_description": "Il tuo indirizzo email principale.",
"account_name_description": "Questo è il tuo nome visualizzato.",
"account_name_description": "Questo è il tuo nome mostrato.",
"background": "Sfondo",
"black_mode": "Nero",
"change_font_size": "Cambiare la dimensione del font",
"change_font_size": "Cambia la dimensione dei caratteri",
"choose_language": "Scegli la lingua",
"dark_mode": "Buio",
"expand_navigation": "Expand navigation",
"experiments": "esperimenti",
"experiments_notice": "Questa è una raccolta di esperimenti su cui stiamo lavorando che potrebbero rivelarsi utili, divertenti, entrambi o nessuno dei due. Non sono definitivi e potrebbero non essere stabili, quindi se succede qualcosa di eccessivamente strano, niente panico. Spegni solo quella dannata cosa. Scherzi a parte,",
"dark_mode": "Scuro",
"expand_navigation": "Espandi navigazione",
"experiments": "Sperimentale",
"experiments_notice": "Questa è una raccolta di esperimenti su cui stiamo lavorando che potrebbero rivelarsi utili, divertenti, entrambi o nessuno dei due. Non sono definitivi e potrebbero non essere stabili, quindi se succede qualcosa di eccessivamente strano, niente panico. Basta solo disabilitare quella dannata cosa. Scherzi a parte, ",
"extension_ver_not_reported": "Non riportato",
"extension_version": "Versione di estensione",
"extension_version": "Versione dell'estensione",
"extensions": "Estensioni",
"extensions_use_toggle": "Utilizza l'estensione del browser per inviare richieste (se presente)",
"font_size": "Dimensione del font",
"font_size": "Dimensione dei caratteri",
"font_size_large": "Grande",
"font_size_medium": "medio",
"font_size_medium": "Medio",
"font_size_small": "Piccolo",
"interceptor": "Intercettore",
"interceptor": "Interceptor",
"interceptor_description": "Middleware tra applicazione e API.",
"language": "Lingua",
"light_mode": "Leggero",
"light_mode": "Chiaro",
"official_proxy_hosting": "Il proxy ufficiale è ospitato da Hoppscotch.",
"profile": "Profile",
"profile_description": "Update your profile details",
"profile_name": "Profile name",
"proxy": "proxy",
"proxy_url": "URL proxy",
"profile": "Profilo",
"profile_description": "Aggiorna i dettagli del tuo profilo",
"profile_name": "Nome del profilo",
"proxy": "Proxy",
"proxy_url": "URL del proxy",
"proxy_use_toggle": "Usa il middleware proxy per inviare richieste",
"read_the": "Leggi il",
"reset_default": "Riportare alle condizioni originali",
"sidebar_on_left": "Sidebar on left",
"sync": "Sincronizzare",
"sync_collections": "Collezioni",
"reset_default": "Riporta alle impostazioni originali",
"sidebar_on_left": "Barra laterale a sinistra",
"sync": "Sincronizza",
"sync_collections": "Raccolte",
"sync_description": "Queste impostazioni sono sincronizzate con il cloud.",
"sync_environments": "Ambienti",
"sync_history": "Storia",
"sync_history": "Cronologia",
"system_mode": "Sistema",
"telemetry": "Telemetria",
"telemetry_helps_us": "La telemetria ci aiuta a personalizzare le nostre operazioni e a offrirti la migliore esperienza.",
@@ -392,57 +392,57 @@
"documentation": "Vai alla pagina della documentazione",
"forward": "Vai alla pagina successiva",
"graphql": "Vai alla pagina GraphQL",
"realtime": "Vai alla pagina in tempo reale",
"realtime": "Vai alla pagina Real Time",
"rest": "Vai alla pagina REST",
"settings": "Vai alla pagina Impostazioni",
"title": "Navigazione"
},
"request": {
"copy_request_link": "Copia link richiesta",
"delete_method": "Seleziona il metodo ELIMINA",
"get_method": "Seleziona il metodo OTTIENI",
"copy_request_link": "Copia il link alla richiesta",
"delete_method": "Seleziona il metodo DELETE",
"get_method": "Seleziona il metodo GET",
"head_method": "Seleziona il metodo HEAD",
"method": "Metodo",
"next_method": "Seleziona il metodo successivo",
"path": "Il percorso",
"path": "Percorso",
"post_method": "Seleziona il metodo POST",
"previous_method": "Seleziona il metodo precedente",
"put_method": "Seleziona il metodo PUT",
"reset_request": "Richiesta di ripristino",
"reset_request": "Resetta la richiesta",
"save_to_collections": "Salva nelle raccolte",
"send_request": "Invia richiesta",
"title": "Richiesta"
}
},
"show": {
"code": "Mostra codice",
"code": "Mostra il codice",
"more": "Mostra di più",
"sidebar": "Mostra barra laterale"
"sidebar": "Mostra la barra laterale"
},
"socketio": {
"communication": "Comunicazione",
"event_name": "Nome dell'evento",
"events": "Eventi",
"log": "Tronco d'albero",
"log": "Log",
"url": "URL"
},
"sse": {
"event_type": "Tipo di evento",
"log": "Tronco d'albero",
"log": "Log",
"url": "URL"
},
"state": {
"bulk_mode": "Modifica in blocco",
"bulk_mode_placeholder": "Le voci sono separate da newline\nChiavi e valori sono separati da:\nAnteponi // a qualsiasi riga che desideri aggiungere ma mantieni disabilitato",
"bulk_mode_placeholder": "Le voci sono separate tramite Invio\nChiavi e valori sono separati da:\nAnteponi // a qualsiasi riga che desideri aggiungere ma lasciare disabilitata",
"cleared": "Cancellato",
"connected": "Collegato",
"connected_to": "Collegato a {nome}",
"connected": "Connesso",
"connected_to": "Connesso a {nome}",
"connecting_to": "Connessione a {nome}...",
"copied_to_clipboard": "Copiato negli appunti",
"deleted": "Eliminato",
"deprecated": "DEPRECATO",
"disabled": "Disabilitato",
"disconnected": "disconnesso",
"disconnected": "Disconnesso",
"disconnected_from": "Disconnesso da {name}",
"docs_generated": "Documentazione generata",
"download_started": "Download avviato",
@@ -450,19 +450,19 @@
"file_imported": "File importato",
"finished_in": "Finito in {duration}ms",
"history_deleted": "Cronologia cancellata",
"linewrap": "Avvolgere le linee",
"linewrap": "Testo a capo",
"loading": "Caricamento in corso...",
"none": "Nessuno",
"nothing_found": "Niente trovato per",
"waiting_send_request": "In attesa di inviare richiesta"
"nothing_found": "Non è stato trovato nulla per",
"waiting_send_request": "In attesa di inviare la richiesta"
},
"support": {
"changelog": "Maggiori informazioni sulle ultime versioni",
"chat": "Domande? Chatta con noi!",
"community": "Fai domande e aiuta gli altri",
"documentation": "Leggi di più su Hoppscotch",
"documentation": "Maggiori informazioni su Hoppscotch",
"forum": "Fai domande e ottieni risposte",
"shortcuts": "Sfoglia l'app più velocemente",
"shortcuts": "Naviga nella app più velocemente",
"team": "Mettiti in contatto con il team",
"title": "Supporto",
"twitter": "Seguici su Twitter"
@@ -470,84 +470,84 @@
"tab": {
"authorization": "Autorizzazione",
"body": "Corpo",
"collections": "Collezioni",
"collections": "Raccolte",
"documentation": "Documentazione",
"headers": "intestazioni",
"history": "Storia",
"headers": "Intestazioni",
"history": "Cronologia",
"mqtt": "MQTT",
"parameters": "Parametri",
"pre_request_script": "Script di pre-richiesta",
"queries": "Interrogazioni",
"query": "domanda",
"queries": "Query",
"query": "Query",
"schema": "Schema",
"socketio": "Presa.IO",
"socketio": "Socket.IO",
"sse": "SSE",
"tests": "test",
"types": "tipi",
"tests": "Test",
"types": "Tipi",
"variables": "Variabili",
"websocket": "WebSocket"
},
"team": {
"already_member": "You are already a member of this team. Contact your team owner.",
"create_new": "Crea una nuova squadra",
"deleted": "Squadra eliminata",
"edit": "Modifica squadra",
"already_member": "Sei già membro di questo team. Contatta il proprietario del team.",
"create_new": "Crea una nuovo team",
"deleted": "Team eliminato",
"edit": "Modifica team",
"email": "E-mail",
"email_do_not_match": "Email doesn't match with your account details. Contact your team owner.",
"exit": "Esci dalla squadra",
"exit_disabled": "Solo il proprietario non può uscire dalla squadra",
"email_do_not_match": "L'indirizzo email non corrisponde a quella del tuo account. Contatta il proprietario del team.",
"exit": "Lascia il team",
"exit_disabled": "Solo il proprietario non può lasciare il team",
"invalid_email_format": "Il formato dell'email non è valido",
"invalid_id": "Invalid team ID. Contact your team owner.",
"invalid_invite_link": "Invalid invite link",
"invalid_invite_link_description": "The link you followed is invalid. Contact your team owner.",
"invalid_id": "L'ID del team non è valido. Contatta il proprietario del team.",
"invalid_invite_link": "Il link di invito non è valido",
"invalid_invite_link_description": "Il link che hai seguito non è valido. Contatta il proprietario del team.",
"invalid_member_permission": "Si prega di fornire un permesso valido al membro del team",
"invite": "Invite",
"invite_more": "Invite more",
"invite_tooltip": "Invite people to this workspace",
"invited_to_team": "{owner} invited you to join {team}",
"join": "Invitation accepted",
"invite": "Invita",
"invite_more": "Invita altri",
"invite_tooltip": "Invita persone in questo spazio di lavoro",
"invited_to_team": "{owner} ti ha invitato ad unirti al team {team}",
"join": "Invito accettato",
"join_beta": "Partecipa al programma beta per accedere ai team.",
"join_team": "Join {team}",
"joined_team": "You have joined {team}",
"joined_team_description": "You are now a member of this team",
"left": "Hai lasciato la squadra",
"login_to_continue": "Login to continue",
"login_to_continue_description": "You need to be logged in to join a team.",
"logout_and_try_again": "Logout and sign in with another account",
"member_has_invite": "This email ID already has an invite. Contact your team owner.",
"member_not_found": "Member not found. Contact your team owner.",
"join_team": "Unisciti al team {team}",
"joined_team": "Sei parte del team {team}",
"joined_team_description": "Ora sei un membro di questo team",
"left": "Hai lasciato il team",
"login_to_continue": "Accedi per continuare",
"login_to_continue_description": "Devi aver effettuato l'accesso per unirti a un team.",
"logout_and_try_again": "Disconnettiti ed accedi con un altro account",
"member_has_invite": "Questo ID email ha già un invito. Contatta il proprietario del team.",
"member_not_found": "Membro non trovato. Contatta il proprietario del team.",
"member_removed": "Utente rimosso",
"member_role_updated": "Ruoli utente aggiornati",
"member_role_updated": "Ruoli dell'utente aggiornati",
"members": "Membri",
"name_length_insufficient": "Il nome della squadra deve essere lungo almeno 6 caratteri",
"name_updated": "Team name updated",
"new": "Nuova squadra",
"new_created": "Nuova squadra creata",
"new_name": "La mia nuova squadra",
"no_access": "Non hai accesso in modifica a queste raccolte",
"no_invite_found": "Invitation not found. Contact your team owner.",
"not_valid_viewer": "You are not a valid viewer. Contact your team owner.",
"pending_invites": "Pending invites",
"name_length_insufficient": "Il nome del team deve essere lungo almeno 6 caratteri",
"name_updated": "Nome del team aggiornato",
"new": "Nuovo team",
"new_created": "Nuovo team creato",
"new_name": "Il mio nuovo team",
"no_access": "Non sei autorizzato a modificare queste raccolte",
"no_invite_found": "Invito non trovato. Contatta il proprietario del team.",
"not_valid_viewer": "Non sei autorizzato a visualizzare. Contatta il proprietario del team.",
"pending_invites": "Inviti pendenti",
"permissions": "Permessi",
"saved": "Squadra salvata",
"select_a_team": "Select a team",
"title": "Squadre",
"we_sent_invite_link": "We sent an invite link to all invitees!",
"we_sent_invite_link_description": "Ask all invitees to check their inbox. Click on the link to join the team."
"saved": "Team salvato",
"select_a_team": "Seleziona un team",
"title": "Team",
"we_sent_invite_link": "Abbiamo inviato un link di invito a tutti gli invitati!",
"we_sent_invite_link_description": "Chiedi a tutti gli invitati di controllare la loro casella email. Cliccando sul link possono entrare nel team."
},
"test": {
"failed": "test failed",
"failed": "Test fallito",
"javascript_code": "Codice JavaScript",
"learn": "Leggi la documentazione",
"passed": "test passed",
"report": "Rapporto di prova",
"passed": "Test superato",
"report": "Report del test",
"results": "Risultati del test",
"script": "sceneggiatura",
"snippets": "frammenti"
"script": "Script",
"snippets": "Frammenti"
},
"websocket": {
"communication": "Comunicazione",
"log": "Tronco d'albero",
"log": "Log",
"message": "Messaggio",
"protocols": "Protocolli",
"url": "URL"

46
packages/hoppscotch-app/locales/ru.json
View File

@@ -8,29 +8,29 @@
"copy": "Копировать",
"delete": "Удалить",
"disconnect": "Отключить",
"dismiss": "Увольнять",
"dismiss": "Отклонить",
"download_file": "Скачать файл",
"duplicate": "Duplicate",
"duplicate": "Дублировать",
"edit": "Редактировать",
"go_back": "Вернись",
"go_back": "Вернуться",
"label": "Этикетка",
"learn_more": "Выучить больше",
"more": "Более",
"learn_more": "Узнать больше",
"more": "Больше",
"new": "Новый",
"no": "Нет",
"preserve_current": "Сохранить текущий",
"prettify": "Украсить",
"remove": "Удалять",
"prettify": "Форматировать",
"remove": "Удалить",
"replace_current": "Заменить текущий",
"replace_json": "Заменить на JSON",
"restore": "Восстановить",
"save": "Сохранить",
"search": "Поиск",
"send": "послать",
"start": "Начинать",
"send": "Отправить",
"start": "Начать",
"stop": "Стоп",
"turn_off": "Выключить",
"turn_on": "Включи",
"turn_on": "Включить",
"undo": "Отменить",
"yes": "да"
},
@@ -52,7 +52,7 @@
"join_discord_community": "Присоединяйтесь к нашему сообществу Discord",
"keyboard_shortcuts": "Горячие клавиши",
"name": "Hoppscotch",
"new_version_found": "Найдена новая версия. Обновите, чтобы обновить.",
"new_version_found": "Найдена новая версия. Перезагрузите для обновления.",
"proxy_privacy_policy": "Политика конфиденциальности прокси",
"reload": "Перезагрузить",
"search": "Поиск",
@@ -65,7 +65,7 @@
"type_a_command_search": "Введите команду или выполните поиск…",
"version": "v2.0",
"we_use_cookies": "Мы используем куки",
"whats_new": "Какие новости?",
"whats_new": "Что нового?",
"wiki": "Вики"
},
"auth": {
@@ -241,7 +241,7 @@
},
"mqtt": {
"communication": "Коммуникация",
"log": "Бревно",
"log": "Лог",
"message": "Сообщение",
"publish": "Публиковать",
"subscribe": "Подписаться",
@@ -332,7 +332,7 @@
"account_description": "Настройте параметры своей учетной записи.",
"account_email_description": "Ваш основной адрес электронной почты.",
"account_name_description": "Это ваше отображаемое имя.",
"background": "Задний план",
"background": "Задний фон",
"black_mode": "Чернить",
"change_font_size": "Изменить размер шрифта",
"choose_language": "Выберите язык",
@@ -353,7 +353,7 @@
"language": "Язык",
"light_mode": "Свет",
"official_proxy_hosting": "Официальный прокси-сервер размещен на Hoppscotch.",
"profile": "Profile",
"profile": "Профиль",
"profile_description": "Update your profile details",
"profile_name": "Profile name",
"proxy": "Прокси",
@@ -404,7 +404,7 @@
"head_method": "Выберите метод HEAD",
"method": "Методика",
"next_method": "Выберите следующий метод",
"path": "Дорожка",
"path": "Путь",
"post_method": "Выберите метод POST",
"previous_method": "Выбрать предыдущий метод",
"put_method": "Выберите метод PUT",
@@ -423,12 +423,12 @@
"communication": "Коммуникация",
"event_name": "Название события",
"events": "События",
"log": "Бревно",
"log": "Лог",
"url": "URL"
},
"sse": {
"event_type": "Тип события",
"log": "Бревно",
"log": "Лог",
"url": "URL"
},
"state": {
@@ -511,7 +511,7 @@
"joined_team": "You have joined {team}",
"joined_team_description": "You are now a member of this team",
"left": "Ты покинул команду",
"login_to_continue": "Login to continue",
"login_to_continue": "Войдите для продолжения",
"login_to_continue_description": "You need to be logged in to join a team.",
"logout_and_try_again": "Logout and sign in with another account",
"member_has_invite": "This email ID already has an invite. Contact your team owner.",
@@ -536,18 +536,18 @@
"we_sent_invite_link_description": "Ask all invitees to check their inbox. Click on the link to join the team."
},
"test": {
"failed": "test failed",
"failed": "Тест не пройден",
"javascript_code": "Код JavaScript",
"learn": "Читать документацию",
"passed": "test passed",
"passed": "Тест пройден",
"report": "Отчет об испытаниях",
"results": "Результаты теста",
"script": "Сценарий",
"script": "Скрипт",
"snippets": "Фрагменты"
},
"websocket": {
"communication": "Коммуникация",
"log": "Бревно",
"log": "Лог",
"message": "Сообщение",
"protocols": "Протоколы",
"url": "URL"

16
packages/hoppscotch-app/package.json
View File

@@ -64,12 +64,12 @@
"@urql/core": "^2.3.5",
"@urql/exchange-auth": "^0.1.6",
"@urql/exchange-graphcache": "^4.3.5",
"acorn": "^8.5.0",
"acorn": "^8.6.0",
"acorn-walk": "^8.2.0",
"axios": "^0.24.0",
"core-js": "^3.19.1",
"esprima": "^4.0.1",
"firebase": "^9.4.1",
"firebase": "^9.5.0",
"fp-ts": "^2.11.5",
"fuse.js": "^6.4.6",
"graphql": "^15.7.2",
@@ -92,7 +92,7 @@
"subscriptions-transport-ws": "^0.11.0",
"tern": "^0.24.3",
"uuid": "8.3.2",
"vue-apollo": "^3.0.8",
"vue-apollo": "^3.1.0",
"vue-cli-plugin-apollo": "^0.22.2",
"vue-functional-data-merge": "^3.1.0",
"vue-github-button": "^1.3.0",
@@ -104,7 +104,7 @@
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@graphql-codegen/add": "^3.1.0",
"@graphql-codegen/cli": "2.2.2",
"@graphql-codegen/typed-document-node": "^2.2.0",
@@ -132,14 +132,14 @@
"@types/splitpanes": "^2.2.1",
"@urql/devtools": "^2.0.3",
"@vue/runtime-dom": "^3.2.22",
"@vue/test-utils": "^1.2.2",
"@vue/test-utils": "^1.3.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.3.1",
"eslint": "^8.2.0",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.0.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"eslint-plugin-vue": "^8.1.1",
"jest": "^27.3.1",
"jest-serializer-vue": "^2.0.2",
"npm-run-all": "^4.1.5",
@@ -151,7 +151,7 @@
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^24.0.0",
"stylelint-config-standard-scss": "^2.0.1",
"stylelint-config-standard-scss": "^3.0.0",
"ts-jest": "^27.0.7",
"typescript": "^4.4.4",
"vue-jest": "^3.0.7",

24
packages/hoppscotch-app/pages/documentation.vue
View File

@@ -230,15 +230,11 @@ export default defineComponent({
}
)
.then((res) => {
this.$toast.success(this.$t("export.gist_created"), {
icon: "done",
})
this.$toast.success(this.$t("export.gist_created"))
window.open(res.html_url)
})
.catch((e) => {
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
console.error(e)
})
},
@@ -251,13 +247,9 @@ export default defineComponent({
this.collectionJSON = target.result
}
reader.readAsText(file)
this.$toast.success(this.$t("state.file_imported"), {
icon: "attach_file",
})
this.$toast.success(this.$t("state.file_imported"))
} else {
this.$toast.error(this.$t("action.choose_file"), {
icon: "attach_file",
})
this.$toast.error(this.$t("action.choose_file"))
}
this.$refs.collectionUpload.value = ""
},
@@ -288,9 +280,7 @@ export default defineComponent({
this.items = JSON.parse(this.collectionJSON)
this.assignIDs(this.items, "", "#")
this.$toast.clear()
this.$toast.success(this.$t("state.docs_generated"), {
icon: "book",
})
this.$toast.success(this.$t("state.docs_generated"))
const docsMarkdown = Mustache.render(
DocsTemplate,
{
@@ -325,9 +315,7 @@ export default defineComponent({
this.docsMarkdown = docsMarkdown.replace(/^\s*[\r\n]/gm, "\n\n")
} catch (e) {
console.error(e)
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(this.$t("error.something_went_wrong"))
}
},

4
packages/hoppscotch-app/pages/join-team.vue
View File

@@ -238,9 +238,7 @@ export default defineComponent({
TE.matchW(
() => {
this.loading = false
this.$toast.error(this.$t("error.something_went_wrong"), {
icon: "error_outline",
})
this.$toast.error(`${this.$t("error.something_went_wrong")}`)
},
() => {
this.joinTeamSuccess = true

49
packages/hoppscotch-app/pages/profile.vue
View File

@@ -17,13 +17,13 @@
w-24
inline-flex
"
:alt="$t('empty.parameters')"
:alt="`${t('empty.parameters')}`"
/>
<p class="text-center pb-4 text-secondaryLight">
{{ $t("empty.profile") }}
{{ t("empty.profile") }}
</p>
<ButtonPrimary
:label="$t('auth.login')"
:label="t('auth.login')"
class="mb-4"
@click.native="showLogin = true"
/>
@@ -44,7 +44,7 @@
<SmartIcon v-else name="user" class="svg-icons" />
<div class="ml-4">
<label class="heading">
{{ currentUser.displayName || $t("state.nothing_found") }}
{{ currentUser.displayName || t("state.nothing_found") }}
</label>
<p class="flex text-secondaryLight items-center">
{{ currentUser.email }}
@@ -61,7 +61,7 @@
<SmartItem
to="/settings"
svg="settings"
:label="$t('profile.app_settings')"
:label="t('profile.app_settings')"
outline
/>
</div>
@@ -71,19 +71,19 @@
<SmartTabs>
<SmartTab
:id="'sync'"
:label="$t('settings.account')"
:label="t('settings.account')"
:selected="true"
>
<section class="p-4">
<h4 class="font-semibold text-secondaryDark">
{{ $t("settings.profile") }}
{{ t("settings.profile") }}
</h4>
<div class="mt-1 text-secondaryLight">
{{ $t("settings.profile_description") }}
{{ t("settings.profile_description") }}
</div>
<div class="py-4">
<label for="displayName">
{{ $t("settings.profile_name") }}
{{ t("settings.profile_name") }}
</label>
<form
class="flex md:max-w-sm mt-2"
@@ -93,13 +93,13 @@
id="displayName"
v-model="displayName"
class="input"
:placeholder="$t('settings.profile_name')"
:placeholder="`${t('settings.profile_name')}`"
type="text"
autocomplete="off"
required
/>
<ButtonPrimary
:label="$t('action.save').toString()"
:label="t('action.save')"
class="ml-2 min-w-16"
type="submit"
:loading="updatingDisplayName"
@@ -109,10 +109,10 @@
</section>
<section class="p-4">
<h4 class="font-semibold text-secondaryDark">
{{ $t("settings.sync") }}
{{ t("settings.sync") }}
</h4>
<div class="mt-1 text-secondaryLight">
{{ $t("settings.sync_description") }}
{{ t("settings.sync_description") }}
</div>
<div class="space-y-4 py-4">
<div class="flex items-center">
@@ -120,7 +120,7 @@
:on="SYNC_COLLECTIONS"
@change="toggleSetting('syncCollections')"
>
{{ $t("settings.sync_collections") }}
{{ t("settings.sync_collections") }}
</SmartToggle>
</div>
<div class="flex items-center">
@@ -128,7 +128,7 @@
:on="SYNC_ENVIRONMENTS"
@change="toggleSetting('syncEnvironments')"
>
{{ $t("settings.sync_environments") }}
{{ t("settings.sync_environments") }}
</SmartToggle>
</div>
<div class="flex items-center">
@@ -136,13 +136,13 @@
:on="SYNC_HISTORY"
@change="toggleSetting('syncHistory')"
>
{{ $t("settings.sync_history") }}
{{ t("settings.sync_history") }}
</SmartToggle>
</div>
</div>
</section>
</SmartTab>
<SmartTab :id="'teams'" :label="$t('team.title')">
<SmartTab :id="'teams'" :label="t('team.title')">
<AppSection label="teams">
<Teams :modal="false" />
</AppSection>
@@ -156,21 +156,12 @@
</template>
<script setup lang="ts">
import {
ref,
useContext,
useMeta,
defineComponent,
} from "@nuxtjs/composition-api"
import { ref, useMeta, defineComponent } from "@nuxtjs/composition-api"
import { currentUser$, setDisplayName } from "~/helpers/fb/auth"
import { useReadonlyStream } from "~/helpers/utils/composables"
import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
import { toggleSetting, useSetting } from "~/newstore/settings"
const {
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const showLogin = ref(false)

4
packages/hoppscotch-app/pages/settings.vue
View File

@@ -328,9 +328,7 @@ export default defineComponent({
resetProxy() {
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
this.clearIcon = "check"
this.$toast.success(`${this.$t("state.cleared")}`, {
icon: "clear_all",
})
this.$toast.success(`${this.$t("state.cleared")}`)
setTimeout(() => (this.clearIcon = "rotate-ccw"), 1000)
},
getColorModeName(colorMode: string) {