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

Refactor: Modularize home page (#1372)

Browse Source 
* Move HTTP headers section to component

* Move import cURL modal to component

* Move Notes, OAuth token modal to seperate components

* Fix deepcode analysis

* Move parameters section to seperate component

* Move codegen modal to component

* ES6
This commit is contained in:
Liyas Thomas
2020-12-11 05:59:29 +05:30
committed by GitHub
parent a95d37d610
commit 1e6773deb5
19 changed files with 660 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/js/regex.worker.js
View File

@@ -16,16 +16,14 @@ const regex = { ws, sse, socketio }
// type = ws/sse/socketio
async function validator(type, url) {
console.time("validator " + url)
console.time(`validator ${url}`)
const [res1, res2] = await Promise.all([regex[type][0].test(url), regex[type][1].test(url)])
console.timeEnd("validator " + url)
console.timeEnd(`validator ${url}`)
return res1 || res2
}
onmessage = async function (event) {
var { type, url } = event.data
onmessage = async ({ data }) => {
const { type, url } = data
const result = await validator(type, url)
postMessage({ type, url, result })
}

8
components/collections/import-export-collections.vue
View File

@@ -149,11 +149,11 @@ export default {
},
}
)
.then((response) => {
.then(({ html_url }) => {
this.$toast.success(this.$t("gist_created"), {
icon: "done",
})
window.open(response.html_url)
window.open(html_url)
})
.catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), {
@@ -171,8 +171,8 @@ export default {
Accept: "application/vnd.github.v3+json",
},
})
.then((response) => {
let collections = JSON.parse(Object.values(response.files)[0].content)
.then(({ files }) => {
let collections = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceCollections", collections)
this.fileImported()
this.syncToFBCollections()

1
components/collections/save-request-as.vue
View File

@@ -188,7 +188,6 @@ export default {
},
hideModal() {
this.$emit("hide-modal")
this.$emit("hide-model") // for backward compatibility // TODO: use fixed event
},
},
}

8
components/environments/import-export-environment.vue
View File

@@ -149,11 +149,11 @@ export default {
},
}
)
.then((response) => {
.then(({ html_url }) => {
this.$toast.success(this.$t("gist_created"), {
icon: "done",
})
window.open(response.html_url)
window.open(html_url)
})
.catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), {
@@ -171,8 +171,8 @@ export default {
Accept: "application/vnd.github.v3+json",
},
})
.then((response) => {
let environments = JSON.parse(Object.values(response.files)[0].content)
.then(({ files }) => {
let environments = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceEnvironments", environments)
this.fileImported()
this.syncToFBEnvironments()

118
components/http/codegen-modal.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("generate_code") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<label for="requestType">{{ $t("request_type") }}</label>
<span class="select-wrapper">
<v-popover>
<pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
<input
v-else
id="requestType"
v-model="requestType"
:placeholder="$t('choose_language')"
class="cursor-pointer"
readonly
autofocus
/>
<template slot="popover">
<div v-for="gen in codegens" :key="gen.id">
<button class="icon" @click="requestType = gen.id" v-close-popover>
{{ gen.name }}
</button>
</div>
</template>
</v-popover>
</span>
</li>
</ul>
<ul>
<li>
<div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
class="icon"
@click="copyRequestCode"
id="copyRequestCode"
ref="copyRequestCode"
v-tooltip="$t('copy_code')"
>
<i class="material-icons">content_copy</i>
</button>
</div>
</div>
<textarea
id="generatedCode"
ref="generatedCode"
name="generatedCode"
rows="8"
v-model="requestCode"
readonly
></textarea>
</li>
</ul>
</div>
</modal>
</template>
<script>
import { codegens } from "~/helpers/codegen/codegen"
export default {
props: {
show: Boolean,
requestCode: String,
requestTypeProp: { type: String, default: "" },
},
data() {
return {
codegens,
copyButton: '<i class="material-icons">content_copy</i>',
doneButton: '<i class="material-icons">done</i>',
}
},
computed: {
requestType: {
get() {
return this.requestTypeProp
},
set(val) {
this.$emit("set-request-type", val)
},
},
},
methods: {
hideModal() {
this.$emit("hide-modal")
},
handleImport() {
this.$emit("handle-import")
},
copyRequestCode() {
this.$refs.copyRequestCode.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
this.$refs.generatedCode.select()
document.execCommand("copy")
setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
},
},
}
</script>

101
components/http/http-headers.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<pw-section class="orange" label="Headers" ref="headers">
<ul v-if="headers.length !== 0">
<li>
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button
class="icon"
@click="clearContent('headers', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
<li>
<autocomplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@input="
$store.commit('setKeyHeader', {
index,
value: $event,
})
"
@keyup.prevent="setRouteQueryState"
autofocus
/>
</li>
<li>
<input
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="header.value"
@change="
$store.commit('setValueHeader', {
index,
value: $event.target.value,
})
"
@keyup.prevent="setRouteQueryState"
/>
</li>
<div>
<li>
<button
class="icon"
@click="removeRequestHeader(index)"
v-tooltip.bottom="$t('delete')"
id="header"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon" @click="addRequestHeader">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
</li>
</ul>
</pw-section>
</template>
<script>
import { commonHeaders } from "~/helpers/headers"
export default {
props: {
headers: { type: Array, default: () => [] },
},
data() {
return {
commonHeaders,
}
},
methods: {
clearContent(headers, $event) {
this.$emit("clear-content", headers, $event)
},
setRouteQueryState() {
this.$emit("set-route-query-state")
},
removeRequestHeader(index) {
this.$emit("remove-request-header", index)
},
addRequestHeader() {
this.$emit("add-request-header")
},
},
}
</script>

108
components/http/http-parameters.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<pw-section class="pink" label="Parameters" ref="parameters">
<ul v-if="params.length !== 0">
<li>
<div class="row-wrapper">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<button
class="icon"
@click="clearContent('parameters', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul v-for="(param, index) in params" :key="index">
<li>
<input
:placeholder="$t('parameter_count', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value,
})
"
autofocus
/>
</li>
<li>
<input
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="decodeURI(param.value)"
@change="
$store.commit('setValueParams', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<span class="select-wrapper">
<select
:name="'type' + index"
@change="
$store.commit('setTypeParams', {
index,
value: $event.target.value,
})
"
>
<option value="query" :selected="param.type === 'query'">
{{ $t("query") }}
</option>
<option value="path" :selected="param.type === 'path'">
{{ $t("path") }}
</option>
</select>
</span>
</li>
<div>
<li>
<button
class="icon"
@click="removeRequestParam(index)"
v-tooltip.bottom="$t('delete')"
id="param"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon" @click="addRequestParam">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
</li>
</ul>
</pw-section>
</template>
<script>
export default {
props: {
params: { type: Array, default: () => [] },
},
methods: {
clearContent(parameters, $event) {
this.$emit("clear-content", parameters, $event)
},
removeRequestParam(index) {
this.$emit("remove-request-param", index)
},
addRequestParam() {
this.$emit("add-request-param")
},
},
}
</script>

54
components/http/import-curl.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("import_curl") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon primary" @click="handleImport">
{{ $t("import") }}
</button>
</span>
</div>
</div>
</modal>
</template>
<script>
export default {
props: {
show: Boolean,
},
methods: {
hideModal() {
this.$emit("hide-modal")
},
handleImport() {
this.$emit("handle-import")
},
},
}
</script>

30
components/http/notes.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<pw-section class="pink" :label="$t('notes')" ref="sync">
<div v-if="fb.currentUser">
<inputform />
<feeds />
</div>
<div v-else>
<ul>
<li>
<label>{{ $t("login_first") }}</label>
<p>
<login />
</p>
</li>
</ul>
</div>
</pw-section>
</template>
<script>
import { fb } from "~/helpers/fb"
export default {
data() {
return {
fb,
}
},
}
</script>

95
components/http/token-list.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("manage_token") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<div class="row-wrapper">
<label for="token-list">{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
class="icon"
@click="clearContent('tokens', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul id="token-list" v-for="(token, index) in tokens" :key="index">
<li>
<input
:placeholder="'name ' + (index + 1)"
:value="token.name"
@change="
$store.commit('setOAuthTokenName', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<input :value="token.value" readonly />
</li>
<div class="row-wrapper">
<li>
<button
class="icon"
@click="useOAuthToken(token.value)"
v-tooltip.bottom="$t('use_token')"
>
<i class="material-icons">input</i>
</button>
</li>
<li>
<button class="icon" @click="removeOAuthToken(index)" v-tooltip.bottom="$t('delete')">
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<p v-if="tokens.length === 0" class="info">
{{ $t("empty") }}
</p>
</div>
</modal>
</template>
<script>
export default {
props: {
show: Boolean,
tokens: { type: Array, default: () => [] },
},
methods: {
clearContent(tokens, $event) {
this.$emit("clear-content", tokens, $event)
},
useOAuthToken(token) {
this.$emit("use-oauth-token", token)
},
removeOAuthToken(index) {
this.$emit("remove-oauth-token", index)
},
hideModal() {
this.$emit("hide-modal")
},
},
}
</script>

8
components/realtime/mqtt.vue
View File

@@ -116,8 +116,8 @@ export default {
debouncer: debounce(function () {
this.worker.postMessage({ type: "ws", url: this.url })
}, 1000),
workerResponseHandler(message) {
if (message.data.url === this.url) this.isUrlValid = message.data.result
workerResponseHandler({ data }) {
if (data.url === this.url) this.isUrlValid = data.result
},
connect() {
this.log = [
@@ -163,9 +163,9 @@ export default {
icon: "sync",
})
},
onMessageArrived(message) {
onMessageArrived({ payloadString, destinationName }) {
this.log.push({
payload: `Message: ${message.payloadString} arrived on topic: ${message.destinationName}`,
payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString(),

4
components/realtime/socketio.vue
View File

@@ -147,8 +147,8 @@ export default {
debouncer: debounce(function () {
this.worker.postMessage({ type: "socketio", url: this.url })
}, 1000),
workerResponseHandler(message) {
if (message.data.url === this.url) this.isUrlValid = message.data.result
workerResponseHandler({ data }) {
if (data.url === this.url) this.isUrlValid = data.result
},
removeCommunicationInput({ index }) {
this.$delete(this.communication.inputs, index)

4
components/realtime/sse.vue
View File

@@ -78,8 +78,8 @@ export default {
debouncer: debounce(function () {
this.worker.postMessage({ type: "sse", url: this.server })
}, 1000),
workerResponseHandler(message) {
if (message.data.url === this.url) this.isUrlValid = message.data.result
workerResponseHandler({ data }) {
if (data.url === this.url) this.isUrlValid = data.result
},
toggleSSEConnection() {
// If it is connecting:

4
components/realtime/websocket.vue
View File

@@ -105,8 +105,8 @@ export default {
debouncer: debounce(function () {
this.worker.postMessage({ type: "ws", url: this.url })
}, 1000),
workerResponseHandler(message) {
if (message.data.url === this.url) this.isUrlValid = message.data.result
workerResponseHandler({ data }) {
if (data.url === this.url) this.isUrlValid = data.result
},
toggleConnection() {
// If it is connecting:

4
helpers/postwomanTesting.js
View File

@@ -157,7 +157,7 @@ class Expectation {
toBeType(expectedType) {
const actualType = typeof this.expectValue
if (
[
![
"string",
"boolean",
"number",
@@ -166,7 +166,7 @@ class Expectation {
"bigint",
"symbol",
"function",
].indexOf(expectedType) < 0
].includes(expectedType)
) {
return this._fail(
this._fmtNot(

1
lang/en-US.json
View File

@@ -31,7 +31,6 @@
"parameter_list": "Parameter List",
"raw_request_body": "Raw Request Body",
"show_code": "Show Code",
"hide_code": "Hide Code",
"show_prerequest_script": "Show Pre-Request Script",
"hide_prerequest_script": "Hide Pre-Request Script",
"authentication": "Authentication",

6
nuxt.config.js
View File

@@ -306,16 +306,16 @@ export default {
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
// You can extend webpack config here
extend(config, ctx) {
extend(config, { isDev, isClient }) {
// Sets webpack's mode to development if `isDev` is true.
if (ctx.isDev) {
if (isDev) {
config.mode = "development"
}
config.node = {
fs: "empty",
}
if (ctx.isClient) {
if (isClient) {
config.module.rules.unshift({
test: /\.worker\.(c|m)?js$/i,
use: { loader: "worker-loader" },

4
pages/doc.vue
View File

@@ -384,11 +384,11 @@ export default {
},
}
)
.then((response) => {
.then(({ html_url }) => {
this.$toast.success(this.$t("gist_created"), {
icon: "done",
})
window.open(response.html_url)
window.open(html_url)
})
.catch((error) => {
this.$toast.error(this.$t("something_went_wrong"), {

452
pages/index.vue
View File

@@ -252,7 +252,7 @@
<button
class="icon"
id="show-modal"
@click="showModal = true"
@click="showCurlImportModal = !showCurlImportModal"
v-tooltip.bottom="$t('import_curl')"
>
<i class="material-icons">import_export</i>
@@ -260,11 +260,9 @@
<button
class="icon"
id="code"
@click="isHidden = !isHidden"
@click="showCodegenModal = !showCodegenModal"
:disabled="!isValidURL"
v-tooltip.bottom="{
content: isHidden ? $t('show_code') : $t('hide_code'),
}"
v-tooltip.bottom="$t('show_code')"
>
<i class="material-icons">code</i>
</button>
@@ -312,93 +310,12 @@
"
:selected="true"
>
<pw-section class="pink" label="Parameters" ref="parameters">
<ul v-if="params.length !== 0">
<li>
<div class="row-wrapper">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<button
class="icon"
@click="clearContent('parameters', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul v-for="(param, index) in params" :key="index">
<li>
<input
:placeholder="$t('parameter_count', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value,
})
"
autofocus
<http-parameters
:params="params"
@clear-content="clearContent"
@remove-request-param="removeRequestParam"
@add-request-param="addRequestParam"
/>
</li>
<li>
<input
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="decodeURI(param.value)"
@change="
$store.commit('setValueParams', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<span class="select-wrapper">
<select
:name="'type' + index"
@change="
$store.commit('setTypeParams', {
index,
value: $event.target.value,
})
"
>
<option value="query" :selected="param.type === 'query'">
{{ $t("query") }}
</option>
<option value="path" :selected="param.type === 'path'">
{{ $t("path") }}
</option>
</select>
</span>
</li>
<div>
<li>
<button
class="icon"
@click="removeRequestParam(index)"
v-tooltip.bottom="$t('delete')"
id="param"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon" @click="addRequestParam">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
</li>
</ul>
</pw-section>
</tab>
<tab :id="'authentication'" :label="$t('authentication')">
@@ -462,7 +379,7 @@
<button
v-if="auth === 'OAuth 2.0'"
class="icon"
@click="showTokenList = !showTokenList"
@click="showTokenListModal = !showTokenListModal"
v-tooltip.bottom="$t('use_token')"
>
<i class="material-icons">open_in_new</i>
@@ -611,76 +528,13 @@
$t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
"
>
<pw-section class="orange" label="Headers" ref="headers">
<ul v-if="headers.length !== 0">
<li>
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button
class="icon"
@click="clearContent('headers', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
<li>
<autocomplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
@input="
$store.commit('setKeyHeader', {
index,
value: $event,
})
"
@keyup.prevent="setRouteQueryState"
autofocus
<http-headers
:headers="headers"
@clear-content="clearContent"
@set-route-query-state="setRouteQueryState"
@remove-request-header="removeRequestHeader"
@add-request-header="addRequestHeader"
/>
</li>
<li>
<input
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="header.value"
@change="
$store.commit('setValueHeader', {
index,
value: $event.target.value,
})
"
@keyup.prevent="setRouteQueryState"
/>
</li>
<div>
<li>
<button
class="icon"
@click="removeRequestHeader(index)"
v-tooltip.bottom="$t('delete')"
id="header"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon" @click="addRequestHeader">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
</li>
</ul>
</pw-section>
</tab>
<tab :id="'pre_request_script'" :label="$t('pre_request_script')">
@@ -832,221 +686,41 @@
</tab>
<tab :id="'notes'" :label="$t('notes')">
<pw-section class="pink" :label="$t('notes')" ref="sync">
<div v-if="fb.currentUser">
<inputform />
<feeds />
</div>
<div v-else>
<ul>
<li>
<label>{{ $t("login_first") }}</label>
<p>
<login />
</p>
</li>
</ul>
</div>
</pw-section>
<notes />
</tab>
</tabs>
</section>
</aside>
</div>
<save-request-as
:show="showRequestModal"
@hide-model="hideRequestModal"
:show="showSaveRequestModal"
@hide-modal="hideRequestModal"
:editing-request="editRequest"
/>
<modal v-if="showModal" @close="showModal = false">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("import_curl") }}</h3>
<div>
<button class="icon" @click="showModal = false">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<textarea
id="import-text"
autofocus
rows="8"
:placeholder="$t('enter_curl')"
></textarea>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon" @click="showModal = false">
{{ $t("cancel") }}
</button>
<button class="icon primary" @click="handleImport">
{{ $t("import") }}
</button>
</span>
</div>
</div>
</modal>
<modal v-if="!isHidden" @close="isHidden = true">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("generate_code") }}</h3>
<div>
<button class="icon" @click="isHidden = true">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<label for="requestType">{{ $t("request_type") }}</label>
<span class="select-wrapper">
<v-popover>
<pre v-if="requestType">{{
codegens.find((x) => x.id === requestType).name
}}</pre>
<input
v-else
id="requestType"
v-model="requestType"
:placeholder="$t('choose_language')"
class="cursor-pointer"
readonly
autofocus
<import-curl
:show="showCurlImportModal"
@hide-modal="showCurlImportModal = false"
@handle-import="handleImport"
/>
<template slot="popover">
<div v-for="gen in codegens" :key="gen.id">
<button class="icon" @click="requestType = gen.id" v-close-popover>
{{ gen.name }}
</button>
</div>
</template>
</v-popover>
</span>
</li>
</ul>
<ul>
<li>
<div class="row-wrapper">
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
class="icon"
@click="copyRequestCode"
id="copyRequestCode"
ref="copyRequestCode"
v-tooltip="$t('copy_code')"
>
<i class="material-icons">content_copy</i>
</button>
</div>
</div>
<textarea
id="generatedCode"
ref="generatedCode"
name="generatedCode"
rows="8"
v-model="requestCode"
></textarea>
</li>
</ul>
</div>
</modal>
<modal v-if="showTokenList" @close="showTokenList = false">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("manage_token") }}</h3>
<div>
<button class="icon" @click="showTokenList = false">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<div class="row-wrapper">
<label for="token-list">{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
class="icon"
@click="clearContent('tokens', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
</div>
</div>
</li>
</ul>
<ul id="token-list" v-for="(token, index) in tokens" :key="index">
<li>
<input
:placeholder="'name ' + (index + 1)"
:value="token.name"
@change="
$store.commit('setOAuthTokenName', {
index,
value: $event.target.value,
})
"
<codegen-modal
:show="showCodegenModal"
:requestTypeProp="requestType"
:requestCode="requestCode"
@hide-modal="showCodegenModal = false"
@set-request-type="setRequestType"
/>
<token-list
:show="showTokenListModal"
:tokens="tokens"
@clear-content="clearContent"
@use-oauth-token="useOAuthToken"
@remove-oauth-token="removeOAuthToken"
@hide-modal="showTokenListModal = false"
/>
</li>
<li>
<input :value="token.value" readonly />
</li>
<div class="row-wrapper">
<li>
<button
class="icon"
@click="useOAuthToken(token.value)"
v-tooltip.bottom="$t('use_token')"
>
<i class="material-icons">input</i>
</button>
</li>
<li>
<button
class="icon"
@click="removeOAuthToken(index)"
v-tooltip.bottom="$t('delete')"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<p v-if="tokens.length === 0" class="info">
{{ $t("empty") }}
</p>
</div>
</modal>
<modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
<div slot="header">
@@ -1112,12 +786,7 @@
<label for="token-req-details">
{{ $t("token_req_details") }}
</label>
<textarea
id="token-req-details"
readonly
rows="7"
v-model="tokenReqDetails"
></textarea>
<textarea id="token-req-details" readonly rows="7" v-model="tokenReqDetails"></textarea>
</li>
</ul>
</div>
@@ -1133,13 +802,11 @@
</div>
</modal>
</div>
</div>
</template>
<script>
import url from "url"
import querystring from "querystring"
import { commonHeaders } from "~/helpers/headers"
import parseCurlCommand from "~/helpers/curlparser"
import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
import runTestScriptWithVariables from "~/helpers/postwomanTesting"
@@ -1152,13 +819,13 @@ import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpe
import { parseUrlAndPath } from "~/helpers/utils/uri"
import { httpValid } from "~/helpers/utils/valid"
import { knownContentTypes, isJSONContentType } from "~/helpers/utils/contenttypes"
import { codegens, generateCodeWithGenerator } from "~/helpers/codegen/codegen"
import { generateCodeWithGenerator } from "~/helpers/codegen/codegen"
import findStatusGroup from "~/helpers/findStatusGroup"
export default {
data() {
return {
showModal: false,
showCurlImportModal: false,
showPreRequestScript: true,
testsEnabled: true,
testScript: "// pw.expect('variable').toBe('value');",
@@ -1167,7 +834,7 @@ export default {
copyButton: '<i class="material-icons">content_copy</i>',
downloadButton: '<i class="material-icons">save_alt</i>',
doneButton: '<i class="material-icons">done</i>',
isHidden: true,
showCodegenModal: false,
response: {
status: "",
headers: "",
@@ -1175,11 +842,10 @@ export default {
},
validContentTypes: knownContentTypes,
paramsWatchEnabled: true,
showTokenList: false,
showTokenListModal: false,
showTokenRequest: false,
showTokenRequestList: false,
commonHeaders,
showRequestModal: false,
showSaveRequestModal: false,
editRequest: {},
urlExcludes: {},
activeSidebar: true,
@@ -1196,7 +862,6 @@ export default {
: true,
},
currentMethodIndex: 0,
codegens,
methodMenuItems: [
"GET",
"HEAD",
@@ -1301,7 +966,7 @@ export default {
},
editingRequest(newValue) {
this.editRequest = newValue
this.showRequestModal = true
this.showSaveRequestModal = true
},
method() {
this.contentType = ["POST", "PUT", "PATCH", "DELETE"].includes(this.method)
@@ -2117,15 +1782,6 @@ export default {
setTimeout(() => (this.$refs.copyRequest.innerHTML = this.copyButton), 1000)
}
},
copyRequestCode() {
this.$refs.copyRequestCode.innerHTML = this.doneButton
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
this.$refs.generatedCode.select()
document.execCommand("copy")
setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
},
setRouteQueryState() {
const flat = (key) => (this[key] !== "" ? `${key}=${this[key]}&` : "")
const deep = (key) => {
@@ -2188,7 +1844,7 @@ export default {
observer.observe(requestElement)
},
handleImport() {
const { value: text } = document.getElementById("import-text")
const { value: text } = document.getElementById("import-curl")
try {
const parsedCurl = parseCurlCommand(text)
const { origin, pathname } = new URL(parsedCurl.url.replace(/"/g, "").replace(/'/g, ""))
@@ -2209,9 +1865,9 @@ export default {
this.rawInput = true
this.rawParams = parsedCurl["data"]
}
this.showModal = false
this.showCurlImportModal = false
} catch (error) {
this.showModal = false
this.showCurlImportModal = false
this.$toast.error(this.$t("curl_invalid_format"), {
icon: "error",
})
@@ -2321,10 +1977,10 @@ export default {
if (this.selectedRequest.url) {
this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest)
}
this.showRequestModal = true
this.showSaveRequestModal = true
},
hideRequestModal() {
this.showRequestModal = false
this.showSaveRequestModal = false
this.editRequest = {}
},
setExclude(excludedField, excluded) {
@@ -2429,7 +2085,7 @@ export default {
},
useOAuthToken(value) {
this.bearerToken = value
this.showTokenList = false
this.showTokenListModal = false
},
addOAuthTokenReq() {
try {
@@ -2473,6 +2129,9 @@ export default {
this.clientId = clientId
this.scope = scope
},
setRequestType(val) {
this.requestType = val
},
},
async mounted() {
this.observeRequestButton()
@@ -2499,8 +2158,7 @@ export default {
}
if (e.key === "Escape") {
e.preventDefault()
this.showModal = this.showTokenList = this.showTokenRequestList = this.showRequestModal = false
this.isHidden = true
this.showCurlImportModal = this.showTokenListModal = this.showTokenRequestList = this.showSaveRequestModal = this.showCodegenModal = false
}
if ((e.key === "g" || e.key === "G") && e.altKey) {
this.method = "GET"