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

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