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

refactor: lint

Browse Source
This commit is contained in:
liyasthomas
2021-05-18 11:56:59 +05:30
parent 79a0002594
commit 7f248da0b3
18 changed files with 588 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/app/Contributors.vue
View File

@@ -9,10 +9,10 @@
<div class="px-2 row-wrapper"> <div class="px-2 row-wrapper">
<span> <span>
<a <a
v-tooltip.right="$t('recurring')"
href="https://github.com/sponsors/hoppscotch" href="https://github.com/sponsors/hoppscotch"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
v-tooltip.right="$t('recurring')"
> >
<button class="icon"> <button class="icon">
<i class="material-icons"> <i class="material-icons">
@@ -36,10 +36,10 @@
<div class="px-2 row-wrapper"> <div class="px-2 row-wrapper">
<span> <span>
<a <a
v-tooltip.right="$t('one_time_recurring')"
href="https://opencollective.com/hoppscotch" href="https://opencollective.com/hoppscotch"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
v-tooltip.right="$t('one_time_recurring')"
> >
<button class="icon"> <button class="icon">
<i class="material-icons">donut_large</i> <i class="material-icons">donut_large</i>
@@ -51,10 +51,10 @@
<div class="px-2 row-wrapper"> <div class="px-2 row-wrapper">
<span> <span>
<a <a
v-tooltip.right="$t('recurring')"
href="https://www.patreon.com/liyasthomas" href="https://www.patreon.com/liyasthomas"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
v-tooltip.right="$t('recurring')"
> >
<button class="icon"> <button class="icon">
<i class="material-icons">local_parking</i> <i class="material-icons">local_parking</i>
@@ -66,10 +66,10 @@
<div class="px-2 row-wrapper"> <div class="px-2 row-wrapper">
<span> <span>
<a <a
v-tooltip.right="$t('one_time')"
href="https://www.paypal.me/liyascthomas" href="https://www.paypal.me/liyascthomas"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
v-tooltip.right="$t('one_time')"
> >
<button class="icon"> <button class="icon">
<i class="material-icons">payment</i> <i class="material-icons">payment</i>
@@ -82,7 +82,11 @@
<div class="p-2"> <div class="p-2">
<h3 class="title">Financial Contributors</h3> <h3 class="title">Financial Contributors</h3>
<div class="contributors"> <div class="contributors">
<a href="https://oss.capital/?ref=hoppscotch" target="_blank" rel="noopener"> <a
href="https://oss.capital/?ref=hoppscotch"
target="_blank"
rel="noopener"
>
<img <img
style="height: 100%; width: 300px" style="height: 100%; width: 300px"
src="~assets/images/ossc-banner.svg" src="~assets/images/ossc-banner.svg"
@@ -100,8 +104,16 @@
alt="Appwrite" alt="Appwrite"
/> />
</a> </a>
<a href="https://pipedream.com/?ref=hoppscotch" target="_blank" rel="noopener"> <a
<img style="max-width: 100px" src="~assets/images/pipedream.png" alt="pipedream" /> href="https://pipedream.com/?ref=hoppscotch"
target="_blank"
rel="noopener"
>
<img
style="max-width: 100px"
src="~assets/images/pipedream.png"
alt="pipedream"
/>
</a> </a>
<a <a
href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship" href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
@@ -114,7 +126,11 @@
alt="Paw" alt="Paw"
/> />
</a> </a>
<a href="https://simplescraper.io/?utm_source=hs" target="_blank" rel="noopener"> <a
href="https://simplescraper.io/?utm_source=hs"
target="_blank"
rel="noopener"
>
<img <img
style="max-height: 50px" style="max-height: 50px"
src="~assets/images/Simplescraper_dark.png" src="~assets/images/Simplescraper_dark.png"

38
components/app/Extensions.vue
View File

@@ -21,13 +21,22 @@
rel="noopener" rel="noopener"
> >
<button class="icon"> <button class="icon">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <svg
class="material-icons"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path <path
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181C6.36 3.312 9.027 2 12 2c5.912 0 8.263 4.283 8.003 6.657z" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181C6.36 3.312 9.027 2 12 2c5.912 0 8.263 4.283 8.003 6.657z"
/> />
</svg> </svg>
<span>Firefox</span> <span>Firefox</span>
<span class="icon" v-if="hasFirefoxExtInstalled" v-tooltip="$t('installed')"> <span
v-if="hasFirefoxExtInstalled"
v-tooltip="$t('installed')"
class="icon"
>
<i class="material-icons">done</i> <i class="material-icons">done</i>
</span> </span>
</button> </button>
@@ -40,13 +49,22 @@
rel="noopener" rel="noopener"
> >
<button class="icon"> <button class="icon">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <svg
class="material-icons"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path <path
d="M2.897 4.181A11.87 11.87 0 0111.969 0c4.288 0 8.535 2.273 10.717 6.554h-9.293c-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644L2.897 4.181zM8.007 12c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991S8.007 9.8 8.007 12zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225A11.856 11.856 0 000 11.956c0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214a5.463 5.463 0 011.007 6.719 1815.43 1815.43 0 01-5.46 9.248C18.437 24.419 24 18.616 24 12.004c0-1.313-.22-2.66-.69-3.995h-7.609z" d="M2.897 4.181A11.87 11.87 0 0111.969 0c4.288 0 8.535 2.273 10.717 6.554h-9.293c-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644L2.897 4.181zM8.007 12c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991S8.007 9.8 8.007 12zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225A11.856 11.856 0 000 11.956c0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214a5.463 5.463 0 011.007 6.719 1815.43 1815.43 0 01-5.46 9.248C18.437 24.419 24 18.616 24 12.004c0-1.313-.22-2.66-.69-3.995h-7.609z"
/> />
</svg> </svg>
<span>Chrome</span> <span>Chrome</span>
<span class="icon" v-if="hasChromeExtInstalled" v-tooltip="$t('installed')"> <span
v-if="hasChromeExtInstalled"
v-tooltip="$t('installed')"
class="icon"
>
<i class="material-icons">done</i> <i class="material-icons">done</i>
</span> </span>
</button> </button>
@@ -67,18 +85,18 @@ export default {
props: { props: {
show: Boolean, show: Boolean,
}, },
watch: {
show() {
this.hasChromeExtInstalled = hasChromeExtensionInstalled()
this.hasFirefoxExtInstalled = hasFirefoxExtensionInstalled()
},
},
data() { data() {
return { return {
hasChromeExtInstalled: hasChromeExtensionInstalled(), hasChromeExtInstalled: hasChromeExtensionInstalled(),
hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(), hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
} }
}, },
watch: {
show() {
this.hasChromeExtInstalled = hasChromeExtensionInstalled()
this.hasFirefoxExtInstalled = hasFirefoxExtensionInstalled()
},
},
methods: { methods: {
hideModal() { hideModal() {
this.$emit("hide-modal") this.$emit("hide-modal")

43
components/app/Footer.vue
View File

@@ -1,8 +1,16 @@
<template> <template>
<footer class="footer"> <footer class="footer">
<div class="row-wrapper"> <div class="row-wrapper">
<span class="flex flex-col font-mono md:flex-row" style="align-items: start"> <span
<a class="footer-link" href="https://www.netlify.com" target="_blank" rel="noopener"> class="flex flex-col font-mono md:flex-row"
style="align-items: start"
>
<a
class="footer-link"
href="https://www.netlify.com"
target="_blank"
rel="noopener"
>
Powered by Netlify Powered by Netlify
</a> </a>
<span> <span>
@@ -42,20 +50,23 @@
loading="lazy" loading="lazy"
></iframe> ></iframe>
</span> </span>
<span class="flex flex-col font-mono md:flex-row" style="align-items: start"> <span
class="flex flex-col font-mono md:flex-row"
style="align-items: start"
>
<a href="mailto:support@hoppscotch.io" target="_blank" rel="noopener"> <a href="mailto:support@hoppscotch.io" target="_blank" rel="noopener">
<button class="icon" v-tooltip="$t('contact_us')"> <button v-tooltip="$t('contact_us')" class="icon">
<i class="material-icons">email</i> <i class="material-icons">email</i>
</button> </button>
</a> </a>
<v-popover> <v-popover>
<button class="icon" v-tooltip="$t('choose_language')"> <button v-tooltip="$t('choose_language')" class="icon">
<i class="material-icons">translate</i> <i class="material-icons">translate</i>
</button> </button>
<template slot="popover"> <template slot="popover">
<div v-for="locale in availableLocales" :key="locale.code"> <div v-for="locale in availableLocales" :key="locale.code">
<nuxt-link :to="switchLocalePath(locale.code)"> <nuxt-link :to="switchLocalePath(locale.code)">
<button class="icon" v-close-popover> <button v-close-popover class="icon">
{{ locale.name }} {{ locale.name }}
</button> </button>
</nuxt-link> </nuxt-link>
@@ -67,6 +78,16 @@
</footer> </footer>
</template> </template>
<script>
export default {
computed: {
availableLocales() {
return this.$i18n.locales.filter(({ code }) => code !== this.$i18n.locale)
},
},
}
</script>
<style scoped lang="scss"> <style scoped lang="scss">
.footer-link { .footer-link {
@apply inline-flex; @apply inline-flex;
@@ -81,13 +102,3 @@
} }
} }
</style> </style>
<script>
export default {
computed: {
availableLocales() {
return this.$i18n.locales.filter(({ code }) => code !== this.$i18n.locale)
},
},
}
</script>

315
components/app/Header.vue
View File

@@ -36,13 +36,17 @@
" "
> >
Appwrite - Open-Source Backend as a Service Appwrite - Open-Source Backend as a Service
<img class="w-8 ml-2" src="~assets/images/appwrite-icon.svg" alt="Appwrite" /> <img
class="w-8 ml-2"
src="~assets/images/appwrite-icon.svg"
alt="Appwrite"
/>
</a> </a>
<button <button
class="icon"
id="installPWA" id="installPWA"
@click.prevent="showInstallPrompt()"
v-tooltip="$t('install_pwa')" v-tooltip="$t('install_pwa')"
class="icon"
@click.prevent="showInstallPrompt()"
> >
<i class="material-icons">offline_bolt</i> <i class="material-icons">offline_bolt</i>
</button> </button>
@@ -52,8 +56,13 @@
aria-label="GitHub" aria-label="GitHub"
rel="noopener" rel="noopener"
> >
<button class="icon" aria-label="GitHub" v-tooltip="'GitHub'"> <button v-tooltip="'GitHub'" class="icon" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="material-icons"> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
class="material-icons"
>
<path <path
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
/> />
@@ -61,7 +70,7 @@
</button> </button>
</a> </a>
<v-popover v-if="fb.currentUser === null"> <v-popover v-if="fb.currentUser === null">
<button class="icon" v-tooltip="$t('login_with')"> <button v-tooltip="$t('login_with')" class="icon">
<i class="material-icons">login</i> <i class="material-icons">login</i>
</button> </button>
<template slot="popover"> <template slot="popover">
@@ -70,12 +79,13 @@
</v-popover> </v-popover>
<v-popover v-else> <v-popover v-else>
<button <button
class="icon"
v-tooltip=" v-tooltip="
(fb.currentUser.displayName || '<label><i>Name not found</i></label>') + (fb.currentUser.displayName ||
'<label><i>Name not found</i></label>') +
'<br>' + '<br>' +
(fb.currentUser.email || '<label><i>Email not found</i></label>') (fb.currentUser.email || '<label><i>Email not found</i></label>')
" "
class="icon"
aria-label="Account" aria-label="Account"
> >
<img <img
@@ -88,7 +98,7 @@
</button> </button>
<template slot="popover"> <template slot="popover">
<div> <div>
<nuxt-link :to="localePath('settings')" v-close-popover> <nuxt-link v-close-popover :to="localePath('settings')">
<button class="icon"> <button class="icon">
<i class="material-icons">settings</i> <i class="material-icons">settings</i>
<span> <span>
@@ -103,26 +113,26 @@
</template> </template>
</v-popover> </v-popover>
<v-popover> <v-popover>
<button class="icon" v-tooltip="$t('more')"> <button v-tooltip="$t('more')" class="icon">
<i class="material-icons">drag_indicator</i> <i class="material-icons">drag_indicator</i>
</button> </button>
<template slot="popover"> <template slot="popover">
<button class="icon" @click="showExtensions = true" v-close-popover> <button v-close-popover class="icon" @click="showExtensions = true">
<i class="material-icons">extension</i> <i class="material-icons">extension</i>
<span>{{ $t("extensions") }}</span> <span>{{ $t("extensions") }}</span>
</button> </button>
<button class="icon" @click="showShortcuts = true" v-close-popover> <button v-close-popover class="icon" @click="showShortcuts = true">
<i class="material-icons">keyboard</i> <i class="material-icons">keyboard</i>
<span>{{ $t("shortcuts") }}</span> <span>{{ $t("shortcuts") }}</span>
</button> </button>
<button class="icon" @click="showSupport = true" v-close-popover> <button v-close-popover class="icon" @click="showSupport = true">
<i class="material-icons">favorite</i> <i class="material-icons">favorite</i>
<span>{{ $t("support_us") }}</span> <span>{{ $t("support_us") }}</span>
</button> </button>
<button <button
v-close-popover
class="icon" class="icon"
onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');" onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
v-close-popover
> >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path <path
@@ -133,10 +143,10 @@
</button> </button>
<button <button
v-if="navigatorShare" v-if="navigatorShare"
class="icon"
@click="nativeShare"
v-close-popover v-close-popover
v-tooltip="$t('more')" v-tooltip="$t('more')"
class="icon"
@click="nativeShare"
> >
<i class="material-icons">share</i> <i class="material-icons">share</i>
<span>Share</span> <span>Share</span>
@@ -145,12 +155,149 @@
</v-popover> </v-popover>
</span> </span>
</div> </div>
<AppExtensions :show="showExtensions" @hide-modal="showExtensions = false" /> <AppExtensions
:show="showExtensions"
@hide-modal="showExtensions = false"
/>
<AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" /> <AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
<AppSupport :show="showSupport" @hide-modal="showSupport = false" /> <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
</header> </header>
</template> </template>
<script>
import intializePwa from "~/helpers/pwa"
import { fb } from "~/helpers/fb"
// import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
export default {
data() {
return {
// Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation
// prompt.
showInstallPrompt: null,
showExtensions: false,
showShortcuts: false,
showSupport: false,
navigatorShare: navigator.share,
fb,
}
},
async mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
this.showExtensions = this.showShortcuts = this.showSupport = false
}
}
document.addEventListener("keydown", this._keyListener.bind(this))
// Initializes the PWA code - checks if the app is installed,
// etc.
this.showInstallPrompt = await intializePwa()
const cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
if (!cookiesAllowed) {
this.$toast.show(this.$t("we_use_cookies"), {
icon: "info",
duration: 5000,
theme: "toasted-primary",
action: [
{
text: this.$t("dismiss"),
onClick: (_, toastObject) => {
localStorage.setItem("cookiesAllowed", "yes")
toastObject.goAway(0)
},
},
],
})
}
// let showAd = localStorage.getItem("showAd") === "no"
// if (!showAd) {
// setTimeout(() => {
// this.$toast.clear()
// this.$toast.show(
// "<span><a href='https://github.com/sponsors/hoppscotch' target='_blank' rel='noopener'>Sponsor us to support Hoppscotch open source project 💖</a><br><sub>Whoosh this away to dismiss.</sub></span>",
// {
// icon: "",
// duration: 0,
// theme: "toasted-ad",
// action: [
// {
// text: "Sponsor",
// icon: "chevron_right",
// onClick: (_, toastObject) => {
// localStorage.setItem("showAd", "no")
// toastObject.goAway(0)
// window.open("https://github.com/sponsors/hoppscotch")
// },
// },
// ],
// onComplete() {
// localStorage.setItem("showAd", "no")
// },
// }
// )
// }, 8000)
// }
// let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
// if (!showExtensionsToast) {
// setTimeout(() => {
// if (!hasExtensionInstalled()) {
// this.$toast.show(this.$t("extensions_info2"), {
// icon: "extension",
// duration: 5000,
// theme: "toasted-primary",
// action: [
// {
// text: this.$t("yes"),
// onClick: (_, toastObject) => {
// this.showExtensions = true
// localStorage.setItem("showExtensionsToast", "yes")
// toastObject.goAway(0)
// },
// },
// {
// text: this.$t("no"),
// onClick: (_, toastObject) => {
// this.$store.commit("setMiscState", {
// value: false,
// attribute: "showExtensionsToast",
// })
// localStorage.setItem("showExtensionsToast", "no")
// toastObject.goAway(0)
// },
// },
// ],
// })
// }
// }, 5000)
// }
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
nativeShare() {
if (navigator.share) {
navigator
.share({
title: "Hoppscotch",
text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
url: "https://hoppscotch.io",
})
.then(() => {})
.catch(console.error)
} else {
// fallback
}
},
},
}
</script>
<style scoped lang="scss"> <style scoped lang="scss">
$responsiveWidth: 768px; $responsiveWidth: 768px;
@@ -193,137 +340,3 @@ $responsiveWidth: 768px;
} }
} }
</style> </style>
<script>
import intializePwa from "~/helpers/pwa"
import { fb } from "~/helpers/fb"
// import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
export default {
data() {
return {
// Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation
// prompt.
showInstallPrompt: null,
showExtensions: false,
showShortcuts: false,
showSupport: false,
navigatorShare: navigator.share,
fb,
}
},
async mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
this.showExtensions = this.showShortcuts = this.showSupport = false
}
}
document.addEventListener("keydown", this._keyListener.bind(this))
// Initializes the PWA code - checks if the app is installed,
// etc.
this.showInstallPrompt = await intializePwa()
let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
if (!cookiesAllowed) {
this.$toast.show(this.$t("we_use_cookies"), {
icon: "info",
duration: 5000,
theme: "toasted-primary",
action: [
{
text: this.$t("dismiss"),
onClick: (e, toastObject) => {
localStorage.setItem("cookiesAllowed", "yes")
toastObject.goAway(0)
},
},
],
})
}
// let showAd = localStorage.getItem("showAd") === "no"
// if (!showAd) {
// setTimeout(() => {
// this.$toast.clear()
// this.$toast.show(
// "<span><a href='https://github.com/sponsors/hoppscotch' target='_blank' rel='noopener'>Sponsor us to support Hoppscotch open source project 💖</a><br><sub>Whoosh this away to dismiss.</sub></span>",
// {
// icon: "",
// duration: 0,
// theme: "toasted-ad",
// action: [
// {
// text: "Sponsor",
// icon: "chevron_right",
// onClick: (e, toastObject) => {
// localStorage.setItem("showAd", "no")
// toastObject.goAway(0)
// window.open("https://github.com/sponsors/hoppscotch")
// },
// },
// ],
// onComplete() {
// localStorage.setItem("showAd", "no")
// },
// }
// )
// }, 8000)
// }
// let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
// if (!showExtensionsToast) {
// setTimeout(() => {
// if (!hasExtensionInstalled()) {
// this.$toast.show(this.$t("extensions_info2"), {
// icon: "extension",
// duration: 5000,
// theme: "toasted-primary",
// action: [
// {
// text: this.$t("yes"),
// onClick: (e, toastObject) => {
// this.showExtensions = true
// localStorage.setItem("showExtensionsToast", "yes")
// toastObject.goAway(0)
// },
// },
// {
// text: this.$t("no"),
// onClick: (e, toastObject) => {
// this.$store.commit("setMiscState", {
// value: false,
// attribute: "showExtensionsToast",
// })
// localStorage.setItem("showExtensionsToast", "no")
// toastObject.goAway(0)
// },
// },
// ],
// })
// }
// }, 5000)
// }
},
methods: {
nativeShare() {
if (navigator.share) {
navigator
.share({
title: "Hoppscotch",
text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
url: "https://hoppscotch.io",
})
.then(() => {})
.catch(console.error)
} else {
// fallback
}
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>

1
components/app/Logo.vue
View File

@@ -15,6 +15,7 @@ export default {
props: { props: {
color: { color: {
type: String, type: String,
default: "",
}, },
}, },
} }

75
components/app/Section.vue
View File

@@ -6,12 +6,51 @@
{{ isCollapsed(label) ? "expand_more" : "expand_less" }} {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
</i> </i>
</legend> </legend>
<div class="collapsible" :class="{ hidden: isCollapsed(label.toLowerCase()) }"> <div
<slot /> class="collapsible"
:class="{ hidden: isCollapsed(label.toLowerCase()) }"
>
<slot></slot>
</div> </div>
</fieldset> </fieldset>
</template> </template>
<script lang="ts">
import Vue from "vue"
export default Vue.extend({
props: {
label: {
type: String,
default: "Section",
},
noLegend: {
type: Boolean,
default: false,
},
},
computed: {
sectionString(): string {
return `${this.$route.path.replace(/\/+$/, "")}/${this.label}`
},
},
methods: {
collapse() {
// Save collapsed section into the collapsedSections array
this.$store.commit("setCollapsedSection", this.sectionString)
},
isCollapsed(_label: string) {
return (
this.$store.state.theme.collapsedSections.includes(
this.sectionString
) || false
)
},
},
})
</script>
<style scoped lang="scss"> <style scoped lang="scss">
fieldset { fieldset {
@apply my-4; @apply my-4;
@@ -33,35 +72,3 @@ fieldset {
} }
} }
</style> </style>
<script lang="ts">
import Vue from "vue"
export default Vue.extend({
computed: {
sectionString(): string {
return `${this.$route.path.replace(/\/+$/, "")}/${this.label}`
},
},
props: {
label: {
type: String,
default: "Section",
},
noLegend: {
type: Boolean,
default: false,
},
},
methods: {
collapse() {
// Save collapsed section into the collapsedSections array
this.$store.commit("setCollapsedSection", this.sectionString)
},
isCollapsed(_label: string) {
return this.$store.state.theme.collapsedSections.includes(this.sectionString) || false
},
},
})
</script>

24
components/app/Shortcuts.vue
View File

@@ -73,18 +73,6 @@
</SmartModal> </SmartModal>
</template> </template>
<style scoped lang="scss">
kbd {
@apply inline-flex;
@apply resize-none;
@apply m-2;
@apply rounded-lg;
@apply py-2;
@apply px-4;
@apply text-sm;
}
</style>
<script> <script>
import { getPlatformSpecialKey } from "~/helpers/platformutils" import { getPlatformSpecialKey } from "~/helpers/platformutils"
@@ -100,3 +88,15 @@ export default {
}, },
} }
</script> </script>
<style scoped lang="scss">
kbd {
@apply inline-flex;
@apply resize-none;
@apply m-2;
@apply rounded-lg;
@apply py-2;
@apply px-4;
@apply text-sm;
}
</style>

114
components/app/Sidenav.vue
View File

@@ -6,27 +6,32 @@
seems to mess up the nuxt-link active class. seems to mess up the nuxt-link active class.
--> -->
<nuxt-link <nuxt-link
v-tooltip.right="$t('home')"
:to="localePath('index')" :to="localePath('index')"
:class="linkActive('/')" :class="linkActive('/')"
v-tooltip.right="$t('home')"
:aria-label="$t('home')" :aria-label="$t('home')"
> >
<AppLogo alt class="material-icons" style="height: 24px" /> <AppLogo alt class="material-icons" style="height: 24px" />
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
v-tooltip.right="$t('realtime')"
:to="localePath('realtime')" :to="localePath('realtime')"
:class="linkActive('/realtime')" :class="linkActive('/realtime')"
v-tooltip.right="$t('realtime')"
> >
<i class="material-icons">language</i> <i class="material-icons">language</i>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
v-tooltip.right="$t('graphql')"
:to="localePath('graphql')" :to="localePath('graphql')"
:class="linkActive('/graphql')" :class="linkActive('/graphql')"
v-tooltip.right="$t('graphql')"
:aria-label="$t('graphql')" :aria-label="$t('graphql')"
> >
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 29.999 30"> <svg
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
viewBox="0 0 29.999 30"
>
<path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" /> <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
<path d="M2.727 20.53h24.538v1.272H2.727z" /> <path d="M2.727 20.53h24.538v1.272H2.727z" />
<path <path
@@ -43,80 +48,111 @@
</svg> </svg>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
v-tooltip.right="$t('documentation')"
:to="localePath('doc')" :to="localePath('doc')"
:class="linkActive('/doc')" :class="linkActive('/doc')"
v-tooltip.right="$t('documentation')"
:aria-label="$t('documentation')" :aria-label="$t('documentation')"
> >
<i class="material-icons">topic</i> <i class="material-icons">topic</i>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
v-tooltip.right="$t('settings')"
:to="localePath('settings')" :to="localePath('settings')"
:class="linkActive('/settings')" :class="linkActive('/settings')"
v-tooltip.right="$t('settings')"
:aria-label="$t('settings')" :aria-label="$t('settings')"
> >
<i class="material-icons">settings</i> <i class="material-icons">settings</i>
</nuxt-link> </nuxt-link>
</nav> </nav>
<nav v-if="$route.path == '/'" class="secondary-nav"> <nav v-if="$route.path == '/'" class="secondary-nav">
<a href="#request" v-tooltip.right="$t('request')"> <a v-tooltip.right="$t('request')" href="#request">
<i class="material-icons">cloud_upload</i> <i class="material-icons">cloud_upload</i>
</a> </a>
<a href="#options" v-tooltip.right="$t('options')"> <a v-tooltip.right="$t('options')" href="#options">
<i class="material-icons">toc</i> <i class="material-icons">toc</i>
</a> </a>
<a href="#response" v-tooltip.right="$t('response')"> <a v-tooltip.right="$t('response')" href="#response">
<i class="material-icons">cloud_download</i> <i class="material-icons">cloud_download</i>
</a> </a>
</nav> </nav>
<nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav"> <nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
<a href="#request" v-tooltip.right="$t('request')"> <a v-tooltip.right="$t('request')" href="#request">
<i class="material-icons">cloud_upload</i> <i class="material-icons">cloud_upload</i>
</a> </a>
<a href="#response" v-tooltip.right="$t('communication')"> <a v-tooltip.right="$t('communication')" href="#response">
<i class="material-icons">cloud_download</i> <i class="material-icons">cloud_download</i>
</a> </a>
</nav> </nav>
<nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav"> <nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
<a href="#endpoint" v-tooltip.right="$t('endpoint')"> <a v-tooltip.right="$t('endpoint')" href="#endpoint">
<i class="material-icons">cloud</i> <i class="material-icons">cloud</i>
</a> </a>
<a href="#schema" v-tooltip.right="$t('schema')"> <a v-tooltip.right="$t('schema')" href="#schema">
<i class="material-icons">assignment_returned</i> <i class="material-icons">assignment_returned</i>
</a> </a>
<a href="#query" v-tooltip.right="$t('query')"> <a v-tooltip.right="$t('query')" href="#query">
<i class="material-icons">cloud_upload</i> <i class="material-icons">cloud_upload</i>
</a> </a>
<a href="#response" v-tooltip.right="$t('response')"> <a v-tooltip.right="$t('response')" href="#response">
<i class="material-icons">cloud_download</i> <i class="material-icons">cloud_download</i>
</a> </a>
</nav> </nav>
<nav v-else-if="$route.path.includes('/doc')" class="secondary-nav"> <nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
<a href="#import" v-tooltip.right="$t('import')"> <a v-tooltip.right="$t('import')" href="#import">
<i class="material-icons">folder</i> <i class="material-icons">folder</i>
</a> </a>
<a href="#documentation" v-tooltip.right="$t('documentation')"> <a v-tooltip.right="$t('documentation')" href="#documentation">
<i class="material-icons">insert_drive_file</i> <i class="material-icons">insert_drive_file</i>
</a> </a>
</nav> </nav>
<nav v-else-if="$route.path.includes('/settings')" class="secondary-nav"> <nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
<a href="#account" v-tooltip.right="$t('account')"> <a v-tooltip.right="$t('account')" href="#account">
<i class="material-icons">person</i> <i class="material-icons">person</i>
</a> </a>
<a href="#theme" v-tooltip.right="$t('theme')"> <a v-tooltip.right="$t('theme')" href="#theme">
<i class="material-icons">brush</i> <i class="material-icons">brush</i>
</a> </a>
<a href="#extensions" v-tooltip.right="$t('extensions')"> <a v-tooltip.right="$t('extensions')" href="#extensions">
<i class="material-icons">extension</i> <i class="material-icons">extension</i>
</a> </a>
<a href="#proxy" v-tooltip.right="$t('proxy')"> <a v-tooltip.right="$t('proxy')" href="#proxy">
<i class="material-icons">public</i> <i class="material-icons">public</i>
</a> </a>
</nav> </nav>
</aside> </aside>
</template> </template>
<script>
export default {
mounted() {
window.addEventListener("scroll", () => {
const mainNavLinks = document.querySelectorAll("nav.secondary-nav a")
const fromTop = window.scrollY
mainNavLinks.forEach(({ hash, classList }) => {
const section = document.querySelector(hash)
if (
section &&
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
classList.add("current")
} else {
classList.remove("current")
}
})
})
},
methods: {
linkActive(path) {
return {
"nuxt-link-exact-active": this.$route.path === path,
"nuxt-link-active": this.$route.path === path,
}
},
},
}
</script>
<style scoped lang="scss"> <style scoped lang="scss">
$responsiveWidth: 768px; $responsiveWidth: 768px;
@@ -269,39 +305,3 @@ nav.secondary-nav {
} }
} }
</style> </style>
<script>
export default {
methods: {
linkActive(path) {
return {
"nuxt-link-exact-active": this.$route.path === path,
"nuxt-link-active": this.$route.path === path,
}
},
},
mounted() {
window.addEventListener("scroll", (event) => {
let mainNavLinks = document.querySelectorAll("nav ul li a")
let fromTop = window.scrollY
mainNavLinks.forEach(({ hash, classList }) => {
let section = document.querySelector(hash)
if (
section &&
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
classList.add("current")
} else {
classList.remove("current")
}
})
})
},
// watch: {
// $route() {
// // this.$toast.clear();
// },
// },
}
</script>

9
components/docs/Collection.vue
View File

@@ -5,13 +5,16 @@
{{ collection.name || $t("none") }} {{ collection.name || $t("none") }}
</h2> </h2>
<span <span
class="folder"
v-for="(folder, index) in collection.folders" v-for="(folder, index) in collection.folders"
:key="`sub-collection-${index}`" :key="`sub-collection-${index}`"
class="folder"
> >
<DocsFolder :folder="folder" /> <DocsFolder :folder="folder" />
</span> </span>
<div v-for="(request, index) in collection.requests" :key="`request-${index}`"> <div
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
>
<DocsRequest :request="request" /> <DocsRequest :request="request" />
</div> </div>
</div> </div>
@@ -20,7 +23,7 @@
<script> <script>
export default { export default {
props: { props: {
collection: Object, collection: { type: Object, default: () => {} },
}, },
} }
</script> </script>

8
components/environments/Add.vue
View File

@@ -13,9 +13,9 @@
<div slot="body" class="flex flex-col"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text"
id="selectLabel" id="selectLabel"
v-model="name" v-model="name"
type="text"
:placeholder="$t('my_new_environment')" :placeholder="$t('my_new_environment')"
@keyup.enter="addNewEnvironment" @keyup.enter="addNewEnvironment"
/> />
@@ -57,7 +57,9 @@ export default {
methods: { methods: {
syncEnvironments() { syncEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) { if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))) fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
} }
}, },
addNewEnvironment() { addNewEnvironment() {
@@ -65,7 +67,7 @@ export default {
this.$toast.info(this.$t("invalid_environment_name")) this.$toast.info(this.$t("invalid_environment_name"))
return return
} }
let newEnvironment = [ const newEnvironment = [
{ {
name: this.$data.name, name: this.$data.name,
variables: [], variables: [],

62
components/environments/Edit.vue
View File

@@ -13,22 +13,26 @@
<div slot="body" class="flex flex-col"> <div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label> <label for="selectLabel">{{ $t("label") }}</label>
<input <input
type="text"
id="selectLabel" id="selectLabel"
v-model="name" v-model="name"
type="text"
:placeholder="editingEnvironment.name" :placeholder="editingEnvironment.name"
@keyup.enter="saveEnvironment" @keyup.enter="saveEnvironment"
/> />
<div class="row-wrapper"> <div class="row-wrapper">
<label for="variableList">{{ $t("env_variable_list") }}</label> <label for="variableList">{{ $t("env_variable_list") }}</label>
<div> <div>
<button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')"> <button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="clearContent($event)"
>
<i class="material-icons">clear_all</i> <i class="material-icons">clear_all</i>
</button> </button>
</div> </div>
</div> </div>
<ul <ul
v-for="(variable, index) in this.editingEnvCopy.variables" v-for="(variable, index) in editingEnvCopy.variables"
:key="index" :key="index"
class=" class="
border-b border-dashed border-b border-dashed
@@ -45,13 +49,13 @@
:placeholder="$t('variable_count', { count: index + 1 })" :placeholder="$t('variable_count', { count: index + 1 })"
:name="'param' + index" :name="'param' + index"
:value="variable.key" :value="variable.key"
autofocus
@change=" @change="
$store.commit('postwoman/setVariableKey', { $store.commit('postwoman/setVariableKey', {
index, index,
value: $event.target.value, value: $event.target.value,
}) })
" "
autofocus
/> />
</li> </li>
<li> <li>
@@ -59,7 +63,9 @@
:placeholder="$t('value_count', { count: index + 1 })" :placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index" :name="'value' + index"
:value=" :value="
typeof variable.value === 'string' ? variable.value : JSON.stringify(variable.value) typeof variable.value === 'string'
? variable.value
: JSON.stringify(variable.value)
" "
@change=" @change="
$store.commit('postwoman/setVariableValue', { $store.commit('postwoman/setVariableValue', {
@@ -72,10 +78,10 @@
<div> <div>
<li> <li>
<button <button
id="variable"
v-tooltip.bottom="$t('delete')"
class="icon" class="icon"
@click="removeEnvironmentVariable(index)" @click="removeEnvironmentVariable(index)"
v-tooltip.bottom="$t('delete')"
id="variable"
> >
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
</button> </button>
@@ -114,8 +120,8 @@ import { getSettingSubject } from "~/newstore/settings"
export default { export default {
props: { props: {
show: Boolean, show: Boolean,
editingEnvironment: Object, editingEnvironment: { type: Object, default: () => {} },
editingEnvironmentIndex: Number, editingEnvironmentIndex: { type: Number, default: null },
}, },
data() { data() {
return { return {
@@ -128,15 +134,6 @@ export default {
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"), SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
} }
}, },
watch: {
editingEnvironment(update) {
this.name =
this.$props.editingEnvironment && this.$props.editingEnvironment.name
? this.$props.editingEnvironment.name
: undefined
this.$store.commit("postwoman/setEditingEnvironment", this.$props.editingEnvironment)
},
},
computed: { computed: {
editingEnvCopy() { editingEnvCopy() {
return this.$store.state.postwoman.editingEnvironment return this.$store.state.postwoman.editingEnvironment
@@ -146,10 +143,24 @@ export default {
return result === "" ? "" : JSON.stringify(result) return result === "" ? "" : JSON.stringify(result)
}, },
}, },
watch: {
editingEnvironment() {
this.name =
this.$props.editingEnvironment && this.$props.editingEnvironment.name
? this.$props.editingEnvironment.name
: undefined
this.$store.commit(
"postwoman/setEditingEnvironment",
this.$props.editingEnvironment
)
},
},
methods: { methods: {
syncEnvironments() { syncEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) { if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))) fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
} }
}, },
clearContent({ target }) { clearContent({ target }) {
@@ -158,18 +169,21 @@ export default {
this.$toast.info(this.$t("cleared"), { this.$toast.info(this.$t("cleared"), {
icon: "clear_all", icon: "clear_all",
}) })
setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000) setTimeout(
() => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
1000
)
}, },
addEnvironmentVariable() { addEnvironmentVariable() {
let value = { key: "", value: "" } const value = { key: "", value: "" }
this.$store.commit("postwoman/addVariable", value) this.$store.commit("postwoman/addVariable", value)
this.syncEnvironments() this.syncEnvironments()
}, },
removeEnvironmentVariable(index) { removeEnvironmentVariable(index) {
let variableIndex = index const variableIndex = index
const oldVariables = this.editingEnvCopy.variables.slice() const oldVariables = this.editingEnvCopy.variables.slice()
const newVariables = this.editingEnvCopy.variables.filter( const newVariables = this.editingEnvCopy.variables.filter(
(variable, index) => variableIndex !== index (_, index) => variableIndex !== index
) )
this.$store.commit("postwoman/removeVariable", newVariables) this.$store.commit("postwoman/removeVariable", newVariables)
@@ -177,7 +191,7 @@ export default {
icon: "delete", icon: "delete",
action: { action: {
text: this.$t("undo"), text: this.$t("undo"),
onClick: (e, toastObject) => { onClick: (_, toastObject) => {
this.$store.commit("postwoman/removeVariable", oldVariables) this.$store.commit("postwoman/removeVariable", oldVariables)
toastObject.remove() toastObject.remove()
}, },

18
components/environments/Environment.vue
View File

@@ -8,18 +8,22 @@
</button> </button>
</div> </div>
<v-popover> <v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')"> <button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<template slot="popover"> <template slot="popover">
<div> <div>
<button class="icon" @click="$emit('edit-environment')" v-close-popover> <button
v-close-popover
class="icon"
@click="$emit('edit-environment')"
>
<i class="material-icons">create</i> <i class="material-icons">create</i>
<span>{{ $t("edit") }}</span> <span>{{ $t("edit") }}</span>
</button> </button>
</div> </div>
<div> <div>
<button class="icon" @click="confirmRemove = true" v-close-popover> <button v-close-popover class="icon" @click="confirmRemove = true">
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span> <span>{{ $t("delete") }}</span>
</button> </button>
@@ -42,8 +46,8 @@ import { getSettingSubject } from "~/newstore/settings"
export default { export default {
props: { props: {
environment: Object, environment: { type: Object, default: () => {} },
environmentIndex: Number, environmentIndex: { type: Number, default: null },
}, },
data() { data() {
return { return {
@@ -58,7 +62,9 @@ export default {
methods: { methods: {
syncEnvironments() { syncEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) { if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))) fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
} }
}, },
removeEnvironment() { removeEnvironment() {

105
components/environments/ImportExport.vue
View File

@@ -2,15 +2,21 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<div slot="header"> <div slot="header">
<div class="row-wrapper"> <div class="row-wrapper">
<h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3> <h3 class="title">
{{ $t("import_export") }} {{ $t("environments") }}
</h3>
<div> <div>
<v-popover> <v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')"> <button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<template slot="popover"> <template slot="popover">
<div> <div>
<button class="icon" @click="readEnvironmentGist" v-close-popover> <button
v-close-popover
class="icon"
@click="readEnvironmentGist"
>
<i class="material-icons">assignment_returned</i> <i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span> <span>{{ $t("import_from_gist") }}</span>
</button> </button>
@@ -25,12 +31,16 @@
}" }"
> >
<button <button
v-close-popover
:disabled=" :disabled="
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false !fb.currentUser
? true
: fb.currentUser.provider !== 'github.com'
? true
: false
" "
class="icon" class="icon"
@click="createEnvironmentGist" @click="createEnvironmentGist"
v-close-popover
> >
<i class="material-icons">assignment_turned_in</i> <i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span> <span>{{ $t("create_secret_gist") }}</span>
@@ -48,42 +58,48 @@
<div class="flex flex-col items-start p-2"> <div class="flex flex-col items-start p-2">
<span <span
v-tooltip="{ v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'), content: !fb.currentUser
? $t('login_first')
: $t('replace_current'),
}" }"
> >
<button :disabled="!fb.currentUser" class="icon" @click="syncEnvironments"> <button
:disabled="!fb.currentUser"
class="icon"
@click="syncEnvironments"
>
<i class="material-icons">folder_shared</i> <i class="material-icons">folder_shared</i>
<span>{{ $t("import_from_sync") }}</span> <span>{{ $t("import_from_sync") }}</span>
</button> </button>
</span> </span>
<button <button
v-tooltip="$t('replace_current')"
class="icon" class="icon"
@click="openDialogChooseFileToReplaceWith" @click="openDialogChooseFileToReplaceWith"
v-tooltip="$t('replace_current')"
> >
<i class="material-icons">create_new_folder</i> <i class="material-icons">create_new_folder</i>
<span>{{ $t("replace_json") }}</span> <span>{{ $t("replace_json") }}</span>
<input <input
type="file"
@change="replaceWithJSON"
style="display: none"
ref="inputChooseFileToReplaceWith" ref="inputChooseFileToReplaceWith"
type="file"
style="display: none"
accept="application/json" accept="application/json"
@change="replaceWithJSON"
/> />
</button> </button>
<button <button
v-tooltip="$t('preserve_current')"
class="icon" class="icon"
@click="openDialogChooseFileToImportFrom" @click="openDialogChooseFileToImportFrom"
v-tooltip="$t('preserve_current')"
> >
<i class="material-icons">folder_special</i> <i class="material-icons">folder_special</i>
<span>{{ $t("import_json") }}</span> <span>{{ $t("import_json") }}</span>
<input <input
type="file"
@change="importFromJSON"
style="display: none"
ref="inputChooseFileToImportFrom" ref="inputChooseFileToImportFrom"
type="file"
style="display: none"
accept="application/json" accept="application/json"
@change="importFromJSON"
/> />
</button> </button>
</div> </div>
@@ -102,7 +118,11 @@
<button class="icon" @click="hideModal"> <button class="icon" @click="hideModal">
{{ $t("cancel") }} {{ $t("cancel") }}
</button> </button>
<button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')"> <button
v-tooltip="$t('download_file')"
class="icon primary"
@click="exportJSON"
>
{{ $t("export") }} {{ $t("export") }}
</button> </button>
</span> </span>
@@ -116,6 +136,9 @@ import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings" import { getSettingSubject } from "~/newstore/settings"
export default { export default {
props: {
show: Boolean,
},
data() { data() {
return { return {
fb, fb,
@@ -127,9 +150,6 @@ export default {
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"), SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
} }
}, },
props: {
show: Boolean,
},
computed: { computed: {
environmentJson() { environmentJson() {
return JSON.stringify(this.$store.state.postwoman.environments, null, 2) return JSON.stringify(this.$store.state.postwoman.environments, null, 2)
@@ -154,11 +174,11 @@ export default {
}, },
} }
) )
.then(({ html_url }) => { .then((res) => {
this.$toast.success(this.$t("gist_created"), { this.$toast.success(this.$t("gist_created"), {
icon: "done", icon: "done",
}) })
window.open(html_url) window.open(res.html_url)
}) })
.catch((error) => { .catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), { this.$toast.error(this.$t("something_went_wrong"), {
@@ -168,7 +188,7 @@ export default {
}) })
}, },
async readEnvironmentGist() { async readEnvironmentGist() {
let gist = prompt(this.$t("enter_gist_url")) const gist = prompt(this.$t("enter_gist_url"))
if (!gist) return if (!gist) return
await this.$axios await this.$axios
.$get(`https://api.github.com/gists/${gist.split("/").pop()}`, { .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -177,7 +197,7 @@ export default {
}, },
}) })
.then(({ files }) => { .then(({ files }) => {
let environments = JSON.parse(Object.values(files)[0].content) const environments = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceEnvironments", environments) this.$store.commit("postwoman/replaceEnvironments", environments)
this.fileImported() this.fileImported()
this.syncToFBEnvironments() this.syncToFBEnvironments()
@@ -197,10 +217,10 @@ export default {
this.$refs.inputChooseFileToImportFrom.click() this.$refs.inputChooseFileToImportFrom.click()
}, },
replaceWithJSON() { replaceWithJSON() {
let reader = new FileReader() const reader = new FileReader()
reader.onload = ({ target }) => { reader.onload = ({ target }) => {
let content = target.result const content = target.result
let environments = JSON.parse(content) const environments = JSON.parse(content)
this.$store.commit("postwoman/replaceEnvironments", environments) this.$store.commit("postwoman/replaceEnvironments", environments)
} }
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]) reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
@@ -209,13 +229,13 @@ export default {
this.$refs.inputChooseFileToReplaceWith.value = "" this.$refs.inputChooseFileToReplaceWith.value = ""
}, },
importFromJSON() { importFromJSON() {
let reader = new FileReader() const reader = new FileReader()
reader.onload = ({ target }) => { reader.onload = ({ target }) => {
let content = target.result const content = target.result
let importFileObj = JSON.parse(content) const importFileObj = JSON.parse(content)
if ( if (
importFileObj["_postman_variable_scope"] === "environment" || importFileObj._postman_variable_scope === "environment" ||
importFileObj["_postman_variable_scope"] === "globals" importFileObj._postman_variable_scope === "globals"
) { ) {
this.importFromPostman(importFileObj) this.importFromPostman(importFileObj)
} else { } else {
@@ -227,25 +247,27 @@ export default {
this.$refs.inputChooseFileToImportFrom.value = "" this.$refs.inputChooseFileToImportFrom.value = ""
}, },
importFromPostwoman(environments) { importFromPostwoman(environments) {
let confirmation = this.$t("file_imported") const confirmation = this.$t("file_imported")
this.$store.commit("postwoman/importAddEnvironments", { this.$store.commit("postwoman/importAddEnvironments", {
environments, environments,
confirmation, confirmation,
}) })
}, },
importFromPostman({ name, values }) { importFromPostman({ name, values }) {
let environment = { name, variables: [] } const environment = { name, variables: [] }
values.forEach(({ key, value }) => environment.variables.push({ key, value })) values.forEach(({ key, value }) =>
let environments = [environment] environment.variables.push({ key, value })
)
const environments = [environment]
this.importFromPostwoman(environments) this.importFromPostwoman(environments)
}, },
exportJSON() { exportJSON() {
let text = this.environmentJson let text = this.environmentJson
text = text.replace(/\n/g, "\r\n") text = text.replace(/\n/g, "\r\n")
let blob = new Blob([text], { const blob = new Blob([text], {
type: "text/json", type: "text/json",
}) })
let anchor = document.createElement("a") const anchor = document.createElement("a")
anchor.download = "hoppscotch-environment.json" anchor.download = "hoppscotch-environment.json"
anchor.href = window.URL.createObjectURL(blob) anchor.href = window.URL.createObjectURL(blob)
anchor.target = "_blank" anchor.target = "_blank"
@@ -258,12 +280,17 @@ export default {
}) })
}, },
syncEnvironments() { syncEnvironments() {
this.$store.commit("postwoman/replaceEnvironments", fb.currentEnvironments) this.$store.commit(
"postwoman/replaceEnvironments",
fb.currentEnvironments
)
this.fileImported() this.fileImported()
}, },
syncToFBEnvironments() { syncToFBEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) { if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))) fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
} }
}, },
fileImported() { fileImported() {

75
components/environments/index.vue
View File

@@ -1,5 +1,10 @@
<template> <template>
<AppSection icon="history" :label="$t('environments')" ref="environments" no-legend> <AppSection
ref="environments"
icon="history"
:label="$t('environments')"
no-legend
>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<span class="select-wrapper"> <span class="select-wrapper">
<select <select
@@ -11,17 +16,24 @@
<option v-if="environments.length === 0" value="0"> <option v-if="environments.length === 0" value="0">
{{ $t("create_new_environment") }} {{ $t("create_new_environment") }}
</option> </option>
<option v-for="(environment, index) in environments" :value="index" :key="index"> <option
v-for="(environment, index) in environments"
:key="index"
:value="index"
>
{{ environment.name }} {{ environment.name }}
</option> </option>
</select> </select>
</span> </span>
</div> </div>
<EnvironmentsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" /> <EnvironmentsAdd
:show="showModalAdd"
@hide-modal="displayModalAdd(false)"
/>
<EnvironmentsEdit <EnvironmentsEdit
:show="showModalEdit" :show="showModalEdit"
:editingEnvironment="editingEnvironment" :editing-environment="editingEnvironment"
:editingEnvironmentIndex="editingEnvironmentIndex" :editing-environment-index="editingEnvironmentIndex"
@hide-modal="displayModalEdit(false)" @hide-modal="displayModalEdit(false)"
/> />
<EnvironmentsImportExport <EnvironmentsImportExport
@@ -42,13 +54,17 @@
</div> </div>
</div> </div>
<p v-if="environments.length === 0" class="info"> <p v-if="environments.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_environment") }} <i class="material-icons">help_outline</i>
{{ $t("create_new_environment") }}
</p> </p>
<div class="virtual-list"> <div class="virtual-list">
<ul class="flex-col"> <ul class="flex-col">
<li v-for="(environment, index) in environments" :key="environment.name"> <li
v-for="(environment, index) in environments"
:key="environment.name"
>
<EnvironmentsEnvironment <EnvironmentsEnvironment
:environmentIndex="index" :environment-index="index"
:environment="environment" :environment="environment"
@edit-environment="editEnvironment(environment, index)" @edit-environment="editEnvironment(environment, index)"
/> />
@@ -58,12 +74,6 @@
</AppSection> </AppSection>
</template> </template>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>
<script> <script>
import { fb } from "~/helpers/fb" import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings" import { getSettingSubject } from "~/newstore/settings"
@@ -116,26 +126,30 @@ export default {
environment: this.defaultEnvironment, environment: this.defaultEnvironment,
environments: this.environments, environments: this.environments,
}) })
} else { } else if (this.environments[this.selectedEnvironmentIndex])
if (this.environments[this.selectedEnvironmentIndex]) this.$emit("use-environment", {
this.$emit("use-environment", { environment: this.environments[this.selectedEnvironmentIndex],
environment: this.environments[this.selectedEnvironmentIndex], environments: this.environments,
environments: this.environments, })
}) else this.selectedEnvironmentIndex = -1
else this.selectedEnvironmentIndex = -1
}
}, },
}, },
}, },
async mounted() { mounted() {
this._keyListener = function (e) { this._keyListener = function (e) {
if (e.key === "Escape") { if (e.key === "Escape") {
e.preventDefault() e.preventDefault()
this.showModalImportExport = this.showModalAdd = this.showModalEdit = false this.showModalImportExport =
this.showModalAdd =
this.showModalEdit =
false
} }
} }
document.addEventListener("keydown", this._keyListener.bind(this)) document.addEventListener("keydown", this._keyListener.bind(this))
}, },
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: { methods: {
displayModalAdd(shouldDisplay) { displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay this.showModalAdd = shouldDisplay
@@ -160,12 +174,17 @@ export default {
}, },
syncEnvironments() { syncEnvironments() {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) { if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))) fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
} }
}, },
}, },
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
} }
</script> </script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>

29
components/firebase/Login.vue
View File

@@ -1,8 +1,13 @@
<template> <template>
<div> <div>
<div> <div>
<button class="icon" @click="signInWithGoogle" v-close-popover> <button v-close-popover class="icon" @click="signInWithGoogle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="material-icons"> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
class="material-icons"
>
<path <path
d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z" d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
/> />
@@ -11,8 +16,13 @@
</button> </button>
</div> </div>
<div> <div>
<button class="icon" @click="signInWithGithub" v-close-popover> <button v-close-popover class="icon" @click="signInWithGithub">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="material-icons"> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
class="material-icons"
>
<path <path
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
/> />
@@ -49,7 +59,7 @@ export default {
closeOnSwipe: false, closeOnSwipe: false,
action: { action: {
text: this.$t("yes"), text: this.$t("yes"),
onClick: (e, toastObject) => { onClick: (_, toastObject) => {
fb.writeSettings("syncHistory", true) fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true) fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true) fb.writeSettings("syncEnvironments", true)
@@ -96,7 +106,7 @@ export default {
closeOnSwipe: false, closeOnSwipe: false,
action: { action: {
text: this.$t("yes"), text: this.$t("yes"),
onClick: async (e, toastObject) => { onClick: async (_, toastObject) => {
const { user } = await fb.signInWithGithub() const { user } = await fb.signInWithGithub()
await user.linkAndRetrieveDataWithCredential(pendingCred) await user.linkAndRetrieveDataWithCredential(pendingCred)
@@ -111,7 +121,8 @@ export default {
}, },
async signInWithGithub() { async signInWithGithub() {
try { try {
const { credential, additionalUserInfo } = await fb.signInUserWithGithub() const { credential, additionalUserInfo } =
await fb.signInUserWithGithub()
fb.setProviderInfo(credential.providerId, credential.accessToken) fb.setProviderInfo(credential.providerId, credential.accessToken)
@@ -122,7 +133,7 @@ export default {
closeOnSwipe: false, closeOnSwipe: false,
action: { action: {
text: this.$t("yes"), text: this.$t("yes"),
onClick: (e, toastObject) => { onClick: (_, toastObject) => {
fb.writeSettings("syncHistory", true) fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true) fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true) fb.writeSettings("syncEnvironments", true)
@@ -169,7 +180,7 @@ export default {
closeOnSwipe: false, closeOnSwipe: false,
action: { action: {
text: this.$t("yes"), text: this.$t("yes"),
onClick: async (e, toastObject) => { onClick: async (_, toastObject) => {
const { user } = await fb.signInUserWithGoogle() const { user } = await fb.signInUserWithGoogle()
await user.linkAndRetrieveDataWithCredential(pendingCred) await user.linkAndRetrieveDataWithCredential(pendingCred)

62
components/realtime/Socketio.vue
View File

@@ -1,35 +1,35 @@
<template> <template>
<div> <div>
<AppSection :label="$t('request')" ref="request" no-legend> <AppSection ref="request" :label="$t('request')" no-legend>
<ul> <ul>
<li> <li>
<label for="socketio-url">{{ $t("url") }}</label> <label for="socketio-url">{{ $t("url") }}</label>
<input <input
id="socketio-url" id="socketio-url"
v-model="url"
type="url" type="url"
spellcheck="false" spellcheck="false"
:class="{ error: !urlValid }" :class="{ error: !urlValid }"
v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null"
class="md:rounded-bl-lg" class="md:rounded-bl-lg"
:placeholder="$t('url')" :placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/> />
</li> </li>
<div> <div>
<li> <li>
<label for="socketio-path">{{ $t("path") }}</label> <label for="socketio-path">{{ $t("path") }}</label>
<input id="socketio-path" spellcheck="false" v-model="path" /> <input id="socketio-path" v-model="path" spellcheck="false" />
</li> </li>
</div> </div>
<div> <div>
<li> <li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label> <label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button <button
:disabled="!urlValid"
id="connect" id="connect"
:disabled="!urlValid"
name="connect" name="connect"
@click="toggleConnection"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg" class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
@click="toggleConnection"
> >
{{ !connectionState ? $t("connect") : $t("disconnect") }} {{ !connectionState ? $t("connect") : $t("disconnect") }}
<span> <span>
@@ -43,7 +43,12 @@
</ul> </ul>
</AppSection> </AppSection>
<AppSection :label="$t('communication')" id="response" ref="response" no-legend> <AppSection
id="response"
ref="response"
:label="$t('communication')"
no-legend
>
<ul> <ul>
<li> <li>
<RealtimeLog :title="$t('log')" :log="communication.log" /> <RealtimeLog :title="$t('log')" :log="communication.log" />
@@ -54,9 +59,9 @@
<label for="event_name">{{ $t("event_name") }}</label> <label for="event_name">{{ $t("event_name") }}</label>
<input <input
id="event_name" id="event_name"
v-model="communication.eventName"
name="event_name" name="event_name"
type="text" type="text"
v-model="communication.eventName"
:readonly="!connectionState" :readonly="!connectionState"
/> />
</li> </li>
@@ -71,6 +76,7 @@
<ul <ul
v-for="(input, index) of communication.inputs" v-for="(input, index) of communication.inputs"
:key="`input-${index}`" :key="`input-${index}`"
:class="{ 'border-t': index == 0 }"
class=" class="
border-b border-dashed border-b border-dashed
divide-y divide-y
@@ -79,13 +85,12 @@
divide-dashed divide-brdColor divide-dashed divide-brdColor
md:divide-y-0 md:divide-y-0
" "
:class="{ 'border-t': index == 0 }"
> >
<li> <li>
<input <input
v-model="communication.inputs[index]"
name="message" name="message"
type="text" type="text"
v-model="communication.inputs[index]"
:readonly="!connectionState" :readonly="!connectionState"
@keyup.enter="connectionState ? sendMessage() : null" @keyup.enter="connectionState ? sendMessage() : null"
/> />
@@ -93,9 +98,9 @@
<div v-if="index + 1 !== communication.inputs.length"> <div v-if="index + 1 !== communication.inputs.length">
<li> <li>
<button <button
v-tooltip.bottom="$t('delete')"
class="icon" class="icon"
@click="removeCommunicationInput({ index })" @click="removeCommunicationInput({ index })"
v-tooltip.bottom="$t('delete')"
> >
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
</button> </button>
@@ -103,7 +108,12 @@
</div> </div>
<div v-if="index + 1 === communication.inputs.length"> <div v-if="index + 1 === communication.inputs.length">
<li> <li>
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage"> <button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
>
{{ $t("send") }} {{ $t("send") }}
<span> <span>
<i class="material-icons">send</i> <i class="material-icons">send</i>
@@ -125,7 +135,7 @@
</template> </template>
<script> <script>
import io from "socket.io-client" import { io as Client } from "socket.io-client"
import wildcard from "socketio-wildcard" import wildcard from "socketio-wildcard"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"
@@ -144,6 +154,16 @@ export default {
}, },
} }
}, },
computed: {
urlValid() {
return this.isUrlValid
},
},
watch: {
url() {
this.debouncer()
},
},
mounted() { mounted() {
if (process.browser) { if (process.browser) {
this.worker = this.$worker.createRejexWorker() this.worker = this.$worker.createRejexWorker()
@@ -153,16 +173,6 @@ export default {
destroyed() { destroyed() {
this.worker.terminate() this.worker.terminate()
}, },
computed: {
urlValid() {
return this.isUrlValid
},
},
watch: {
url(val) {
this.debouncer()
},
},
methods: { methods: {
debouncer: debounce(function () { debouncer: debounce(function () {
this.worker.postMessage({ type: "socketio", url: this.url }) this.worker.postMessage({ type: "socketio", url: this.url })
@@ -195,11 +205,11 @@ export default {
if (!this.path) { if (!this.path) {
this.path = "/socket.io" this.path = "/socket.io"
} }
this.io = new io(this.url, { this.io = new Client(this.url, {
path: this.path, path: this.path,
}) })
// Add ability to listen to all events // Add ability to listen to all events
wildcard(io.Manager)(this.io) wildcard(Client.Manager)(this.io)
this.io.on("connect", () => { this.io.on("connect", () => {
this.connectionState = true this.connectionState = true
this.communication.log = [ this.communication.log = [
@@ -228,7 +238,7 @@ export default {
this.io.on("reconnect_error", (error) => { this.io.on("reconnect_error", (error) => {
this.handleError(error) this.handleError(error)
}) })
this.io.on("error", (data) => { this.io.on("error", () => {
this.handleError() this.handleError()
}) })
this.io.on("disconnect", () => { this.io.on("disconnect", () => {

8
layouts/default.vue
View File

@@ -23,13 +23,11 @@ export default {
beforeMount() { beforeMount() {
registerApolloAuthUpdate() registerApolloAuthUpdate()
let color = localStorage.getItem("THEME_COLOR") || "green" const color = localStorage.getItem("THEME_COLOR") || "green"
document.documentElement.setAttribute("data-accent", color) document.documentElement.setAttribute("data-accent", color)
}, },
async mounted() { async mounted() {
if (process.client) { document.body.classList.add("afterLoad")
document.body.classList.add("afterLoad")
}
performMigrations() performMigrations()
@@ -53,7 +51,7 @@ export default {
action: [ action: [
{ {
text: this.$t("reload"), text: this.$t("reload"),
onClick: (e, toastObject) => { onClick: (_, toastObject) => {
toastObject.goAway(0) toastObject.goAway(0)
this.$router.push("/", () => window.location.reload()) this.$router.push("/", () => window.location.reload())
}, },

2
package.json
View File

@@ -19,7 +19,7 @@
"pre-commit": "lint-staged" "pre-commit": "lint-staged"
}, },
"lint-staged": { "lint-staged": {
"*.{js,vue}": "eslint", "*.{ts,js,vue}": "eslint",
"*.{css,vue}": "stylelint" "*.{css,vue}": "stylelint"
}, },
"dependencies": { "dependencies": {