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

refactor: composables for i18n and toast

Browse Source
This commit is contained in:
liyasthomas
2021-11-19 22:49:11 +05:30
parent 26429466e9
commit 47661de974
45 changed files with 579 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
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 }"
@@ -161,7 +161,9 @@ 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"
const t = useI18n()
const showShortcuts = ref(false)
const showShare = ref(false)

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>[]

38
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,7 +162,7 @@ onMounted(() => {
const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
if (!cookiesAllowed) {
$toast.show(`${t("app.we_use_cookies")}`, {
toast.show(`${t("app.we_use_cookies")}`, {
duration: 0,
action: [
{

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

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

@@ -1,12 +1,12 @@
<template>
<SmartModal
v-if="show"
:title="$t('app.invite_your_friends')"
: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>
@@ -35,14 +35,13 @@
</template>
<script setup lang="ts">
import { ref, useContext } from "@nuxtjs/composition-api"
import { ref } from "@nuxtjs/composition-api"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { useI18n, useToast } from "~/helpers/utils/composables"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
defineProps<{
show: Boolean
@@ -92,7 +91,7 @@ const platforms = [
const copyAppLink = () => {
copyToClipboard(url)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}

13
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,7 +35,7 @@
px-4
focus-visible:border-divider
"
:placeholder="`${$t('action.search')}`"
:placeholder="`${t('action.search')}`"
/>
</div>
</div>
@@ -46,7 +46,7 @@
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 +66,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 +85,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 +102,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
}>()

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

@@ -27,14 +27,11 @@
</template>
<script setup lang="ts">
import { useContext } from "@nuxtjs/composition-api"
import useWindowSize from "~/helpers/utils/useWindowSize"
import { useSetting } from "~/newstore/settings"
import { useI18n } from "~/helpers/utils/composables"
const {
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const windowInnerWidth = useWindowSize()
const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")

29
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,17 +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()"
/>
<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
@@ -37,28 +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()"
/>
<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()"
@@ -71,6 +71,9 @@
<script setup lang="ts">
import { invokeAction } from "~/helpers/actions"
import { showChat } from "~/helpers/support"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps<{
show: Boolean

34
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,11 +192,11 @@ const hideModal = () => {
const saveRequestAs = async () => {
if (!requestName.value) {
$toast.error(`${t("error.empty_req_name")}`)
toast.error(`${t("error.empty_req_name")}`)
return
}
if (picked.value === null) {
$toast.error(`${t("collection.select")}`)
toast.error(`${t("collection.select")}`)
return
}
@@ -279,7 +277,7 @@ const saveRequestAs = async () => {
requestSaved()
})
.catch((error) => {
$toast.error(`${t("profile.no_permission")}`)
toast.error(`${t("profile.no_permission")}`)
throw new Error(error)
})
@@ -314,7 +312,7 @@ const saveRequestAs = async () => {
requestSaved()
} catch (error) {
$toast.error(`${t("profile.no_permission")}`)
toast.error(`${t("profile.no_permission")}`)
console.error(error)
}
} else if (picked.value.pickedType === "teams-collection") {
@@ -344,7 +342,7 @@ const saveRequestAs = async () => {
requestSaved()
} catch (error) {
$toast.error(`${t("profile.no_permission")}`)
toast.error(`${t("profile.no_permission")}`)
console.error(error)
}
} else if (picked.value.pickedType === "gql-my-request") {
@@ -376,7 +374,7 @@ const saveRequestAs = async () => {
}
const requestSaved = () => {
$toast.success(`${t("request.added")}`)
toast.success(`${t("request.added")}`)
hideModal()
}

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
}>()

79
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"
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"
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"
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="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)
@@ -337,7 +338,7 @@ watch(bulkHeaders, () => {
}))
setGQLHeaders(transformation as GQLHeader[])
} catch (e) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(e)
}
})
@@ -426,7 +427,7 @@ onMounted(() => {
const copyQuery = () => {
copyToClipboard(gqlQueryString.value)
copyQueryIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
}
@@ -470,12 +471,12 @@ const runQuery = async () => {
})
)
$toast.success(`${t("state.finished_in", { duration })}`)
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")}`,
{}
)
@@ -497,7 +498,7 @@ const prettifyQuery = () => {
gqlQueryString.value = gql.print(gql.parse(gqlQueryString.value))
prettifyQueryIcon.value = "check"
} catch (e) {
$toast.error(`${t("error.gql_prettify_invalid_query")}`)
toast.error(`${t("error.gql_prettify_invalid_query")}`)
prettifyQueryIcon.value = "info"
}
setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
@@ -510,7 +511,7 @@ const saveRequest = () => {
const copyVariables = () => {
copyToClipboard(variableString.value)
copyVariablesIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
}
@@ -538,7 +539,7 @@ const removeRequestHeader = (index: number) => {
const deletedItem = headersBeforeDeletion[index]
if (deletedItem.key || deletedItem.value) {
$toast.success(`${t("state.deleted")}`, {
toast.success(`${t("state.deleted")}`, {
action: [
{
text: `${t("action.undo")}`,

36
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,7 +79,7 @@
</div>
</div>
<ButtonSecondary
:label="`${$t('app.documentation')}`"
:label="`${t('app.documentation')}`"
to="https://docs.hoppscotch.io"
svg="external-link"
blank
@@ -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,7 +130,7 @@ const copyResponseIcon = ref("copy")
const copyResponse = () => {
copyToClipboard(responseString.value!)
copyResponseIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
}
@@ -142,7 +144,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadResponseIcon.value = "check"
$toast.success(`${t("state.download_started")}`)
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)

62
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,7 +445,7 @@ const downloadSchema = () => {
document.body.appendChild(a)
a.click()
downloadSchemaIcon.value = "check"
$toast.success(`${t("state.download_started")}`)
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)

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(() => {

15
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,7 +125,7 @@ const hideModal = () => emit("hide-modal")
const copyRequestCode = () => {
copyToClipboard(requestCode.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

48
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="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("")
@@ -214,7 +216,7 @@ watch(bulkHeaders, () => {
}))
setRESTHeaders(transformation as HoppRESTHeader[])
} catch (e) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(e)
}
})
@@ -276,7 +278,7 @@ const deleteHeader = (index: number) => {
const deletedItem = headersBeforeDeletion[index]
if (deletedItem.key || deletedItem.value) {
$toast.success(`${t("state.deleted")}`, {
toast.success(`${t("state.deleted")}`, {
action: [
{
text: `${t("action.undo")}`,

19
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,7 +122,7 @@ const handleImport = () => {
)
} catch (e) {
console.error(e)
$toast.error(`${t("error.curl_invalid_format")}`)
toast.error(`${t("error.curl_invalid_format")}`)
}
hideModal()
}

22
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,7 +99,7 @@ export default {
oidcDiscoveryURL.value === "" &&
(authURL.value === "" || accessTokenURL.value === "")
) {
$toast.error(`${$t("complete_config_urls")}`)
toast.error(`${t("complete_config_urls")}`)
return
}
try {
@@ -111,7 +113,7 @@ export default {
}
await tokenRequest(tokenReqParams)
} catch (e) {
$toast.error(`${e}`)
toast.error(`${e}`)
}
}

48
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="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("")
@@ -196,7 +198,7 @@ watch(bulkParams, () => {
}))
setRESTParams(transformation as HoppRESTParam[])
} catch (e) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(e)
}
})
@@ -269,7 +271,7 @@ const deleteParam = (index: number) => {
const deletedItem = parametersBeforeDeletion[index]
if (deletedItem.key || deletedItem.value) {
$toast.success(`${t("state.deleted")}`, {
toast.success(`${t("state.deleted")}`, {
action: [
{
text: `${t("action.undo")}`,

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()

30
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,9 +116,9 @@ const uploadPayload = (e: InputEvent) => {
rawParamsBody.value = target?.result
}
reader.readAsText(file)
$toast.success(`${t("state.file_imported")}`)
toast.success(`${t("state.file_imported")}`)
} else {
$toast.error(`${t("action.choose_file")}`)
toast.error(`${t("action.choose_file")}`)
}
}
const prettifyRequestBody = () => {
@@ -131,7 +129,7 @@ const prettifyRequestBody = () => {
setTimeout(() => (prettifyIcon.value = "wand"), 1000)
} catch (e) {
console.error(e)
$toast.error(`${t("error.json_prettify_invalid_body")}`)
toast.error(`${t("error.json_prettify_invalid_body")}`)
}
}
</script>

43
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"
@@ -168,7 +168,7 @@
/>
<SmartItem
ref="copyRequest"
:label="`${$t('request.copy_link')}`"
:label="`${t('request.copy_link')}`"
:svg="hasNavigatorShare ? 'share-2' : 'copy'"
@click.native="
() => {
@@ -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 {
updateRESTResponse,
@@ -227,6 +227,8 @@ import {
useStreamSubscriber,
useStream,
useNuxt,
useI18n,
useToast,
} from "~/helpers/utils/composables"
import { defineActionHandler } from "~/helpers/actions"
import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -235,6 +237,8 @@ import { overwriteRequestTeams } from "~/helpers/teams/utils"
import { apolloClient } from "~/helpers/apollo"
import useWindowSize from "~/helpers/utils/useWindowSize"
const t = useI18n()
const methods = [
"GET",
"POST",
@@ -248,12 +252,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)
@@ -341,7 +342,7 @@ const copyRequest = () => {
.catch(() => {})
} else {
copyToClipboard(window.location.href)
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
}
}
@@ -380,7 +381,7 @@ const saveRequest = () => {
if (saveCtx.originLocation === "user-collection") {
editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
$toast.success(`${t("request.saved")}`)
toast.success(`${t("request.saved")}`)
} else if (saveCtx.originLocation === "team-collection") {
const req = getRESTRequest()
@@ -393,14 +394,14 @@ const saveRequest = () => {
saveCtx.requestID
)
.then(() => {
$toast.success(`${t("request.saved")}`)
toast.success(`${t("request.saved")}`)
})
.catch(() => {
$toast.error(`${t("profile.no_permission")}`)
toast.error(`${t("profile.no_permission")}`)
})
} catch (error) {
showSaveRequestModal.value = true
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(error)
}
}

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

@@ -12,16 +12,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,7 +42,7 @@
</div>
</div>
<ButtonSecondary
:label="$t('app.documentation')"
:label="t('app.documentation')"
to="https://docs.hoppscotch.io"
svg="external-link"
blank
@@ -56,7 +56,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 +73,13 @@
w-32
inline-flex
"
:alt="$t('error.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 +89,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 +110,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

22
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,17 +80,17 @@
: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')}`"
:label="`${t('action.learn_more')}`"
to="https://docs.hoppscotch.io"
blank
svg="external-link"
@@ -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)

5
packages/hoppscotch-app/components/http/TestResultEntry.vue
View File

@@ -28,7 +28,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>
@@ -40,6 +40,9 @@
<script setup lang="ts">
import { PropType } from "@nuxtjs/composition-api"
import { HoppTestResult } from "~/helpers/types/HoppTestResult"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps({
testResults: {

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()

17
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"
/>
@@ -70,15 +70,14 @@
</template>
<script setup lang="ts">
import { ref, useContext } from "@nuxtjs/composition-api"
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"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const props = defineProps<{
headers: Array<HoppRESTHeader>
@@ -89,7 +88,7 @@ const copyIcon = ref("copy")
const copyHeaders = () => {
copyToClipboard(JSON.stringify(props.headers))
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

25
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,7 +126,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadIcon.value = "check"
$toast.success(`${t("state.download_started")}`)
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
@@ -138,7 +137,7 @@ const downloadResponse = () => {
const copyResponse = () => {
copyToClipboard(responseBodyText.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}

23
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,7 +233,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadIcon.value = "check"
$toast.success(`${t("state.download_started")}`)
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
@@ -254,7 +253,7 @@ const outlinePath = computed(() => {
const copyResponse = () => {
copyToClipboard(responseBodyText.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

23
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,7 +116,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadIcon.value = "check"
$toast.success(`${t("state.download_started")}`)
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
@@ -128,7 +127,7 @@ const downloadResponse = () => {
const copyResponse = () => {
copyToClipboard(responseBodyText.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
toast.success(`${t("state.copied_to_clipboard")}`)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

23
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,7 +116,7 @@ const downloadResponse = () => {
document.body.appendChild(a)
a.click()
downloadIcon.value = "check"
$toast.success(`${t("state.download_started")}`)
toast.success(`${t("state.download_started")}`)
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
@@ -128,7 +127,7 @@ const downloadResponse = () => {
const copyResponse = () => {
copyToClipboard(responseBodyText.value)
copyIcon.value = "check"
$toast.success(`${t("state.copied_to_clipboard")}`)
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: () => [] },

5
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,
}"
@@ -22,6 +22,9 @@ import {
HoppBgColors,
useSetting,
} from "~/newstore/settings"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
const colors = HoppBgColors
const active = useSetting("BG_COLOR")

11
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>
@@ -33,18 +33,15 @@
</template>
<script setup lang="ts">
import { useContext } from "@nuxtjs/composition-api"
import {
HoppFontSizes,
HoppFontSize,
applySetting,
useSetting,
} from "~/newstore/settings"
import { useI18n } from "~/helpers/utils/composables"
const {
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const fontSizes = HoppFontSizes
const active = useSetting("FONT_SIZE")

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

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
<SmartModal v-if="show" :title="t('team.new')" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<input
@@ -13,15 +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')" @click.native="addNewTeam" />
<ButtonPrimary :label="t('action.save')" @click.native="addNewTeam" />
<ButtonSecondary
:label="$t('action.cancel')"
:label="t('action.cancel')"
@click.native="hideModal"
/>
</span>
@@ -30,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
@@ -63,7 +61,7 @@ const addNewTeam = () =>
(err) => {
// err is of type "invalid_name" | GQLError<Err>
if (err === "invalid_name") {
$toast.error(`${t("team.name_length_insufficient")}`)
toast.error(`${t("team.name_length_insufficient")}`)
} else {
// Handle GQL errors (use err obj)
}

59
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,9 +354,9 @@ const removeExistingTeamMember = async (userID: string) => {
props.editingTeamID
)()
if (E.isLeft(removeTeamMemberResult)) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
} else {
$toast.success(`${t("team.member_removed")}`)
toast.success(`${t("team.member_removed")}`)
}
}
@@ -375,7 +368,7 @@ const saveTeam = async () => {
name.value
)()
if (E.isLeft(updateTeamNameResult)) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
} else {
roleUpdates.value.forEach(async (update) => {
const updateMemberRoleResult = await updateTeamMemberRole(
@@ -384,18 +377,18 @@ const saveTeam = async () => {
update.role
)()
if (E.isLeft(updateMemberRoleResult)) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(updateMemberRoleResult.left.error)
}
})
}
hideModal()
$toast.success(`${t("team.saved")}`)
toast.success(`${t("team.saved")}`)
} else {
return $toast.error(`${t("team.name_length_insufficient")}`)
return toast.error(`${t("team.name_length_insufficient")}`)
}
} else {
return $toast.error(`${t("empty.team_name")}`)
return toast.error(`${t("empty.team_name")}`)
}
}

81
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,9 +484,9 @@ watch(
const removeInvitee = async (id: string) => {
const result = await revokeTeamInvitation(id)()
if (E.isLeft(result)) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
} else {
$toast.success(`${t("team.member_removed")}`)
toast.success(`${t("team.member_removed")}`)
}
}
@@ -553,7 +546,7 @@ const sendInvites = async () => {
if (O.isNone(validationResult)) {
// Error handling for no validation
$toast.error(`${t("error.incorrect_email")}`)
toast.error(`${t("error.incorrect_email")}`)
return
}

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

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="$t('team.select_a_team')" @close="hideModal">
<SmartModal v-if="show" :title="t('team.select_a_team')" @close="hideModal">
<template #body>
<Teams :modal="true" />
</template>
@@ -7,6 +7,10 @@
</template>
<script setup lang="ts">
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps<{
show: Boolean
}>()

35
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')"
: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')"
: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')"
: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')"
: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,12 +144,7 @@ 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")}`)) return
@@ -157,11 +154,11 @@ const deleteTeam = () => {
TE.match(
(err) => {
// TODO: Better errors ? We know the possible errors now
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(err)
},
() => {
$toast.success(`${t("team.deleted")}`)
toast.success(`${t("team.deleted")}`)
}
)
)() // Tasks (and TEs) are lazy, so call the function returned
@@ -175,17 +172,17 @@ const exitTeam = () => {
TE.match(
(err) => {
// TODO: Better errors ?
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(err)
},
() => {
$toast.success(`${t("team.left")}`)
toast.success(`${t("team.left")}`)
}
)
)() // Tasks (and TEs) are lazy, so call the function returned
}
const noPermission = () => {
$toast.error(`${t("profile.no_permission")}`)
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

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

@@ -140,3 +140,8 @@ export function useI18n() {
} = useContext()
return i18n.t.bind(i18n)
}
export function useToast() {
const { $toast } = useContext()
return $toast
}

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

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