chore(refactor): modern UI
This commit is contained in:
Liyas Thomas
376
pages/doc.vue
376
pages/doc.vue
@@ -2,110 +2,188 @@
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div class="page-columns inner-left">
|
||||
<pw-section class="blue" :label="$t('import')" ref="import">
|
||||
<ul>
|
||||
<li>
|
||||
<p class="info">
|
||||
{{ $t("generate_docs_message") }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<label for="collectionUpload">
|
||||
<button
|
||||
class="icon"
|
||||
@click="$refs.collectionUpload.click()"
|
||||
v-tooltip="$t('json')"
|
||||
>
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{ $t("import_collections") }}</span>
|
||||
</button>
|
||||
</label>
|
||||
<input
|
||||
ref="collectionUpload"
|
||||
name="collectionUpload"
|
||||
type="file"
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="collectionJSON = '[]'"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<ace-editor
|
||||
v-model="collectionJSON"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: '16',
|
||||
minLines: '8',
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
<pw-section class="blue" :label="$t('import')" ref="import" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("collection") }}</label>
|
||||
<p class="info">
|
||||
{{ $t("generate_docs_message") }}
|
||||
</p>
|
||||
<div class="row-wrapper">
|
||||
<label for="collectionUpload">
|
||||
<button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="$t('json')">
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{ $t("import_collections") }}</span>
|
||||
</button>
|
||||
</label>
|
||||
<input
|
||||
ref="collectionUpload"
|
||||
name="collectionUpload"
|
||||
type="file"
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="getDoc">
|
||||
<i class="material-icons">topic</i>
|
||||
<span>{{ $t("generate_docs") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<button class="icon" @click="collectionJSON = '[]'" v-tooltip.bottom="$t('clear')">
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ace-editor
|
||||
v-model="collectionJSON"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: '16',
|
||||
minLines: '8',
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
<button class="icon" @click="getDoc">
|
||||
<i class="material-icons">topic</i>
|
||||
<span>{{ $t("generate_docs") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="green" :label="$t('documentation')" ref="documentation">
|
||||
<p v-if="this.items.length === 0" class="info">
|
||||
{{ $t("generate_docs_first") }}
|
||||
</p>
|
||||
<div v-else class="row-wrapper">
|
||||
<div
|
||||
v-tooltip.bottom="{
|
||||
content: !fb.currentUser
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: fb.currentUser.provider !== 'github.com'
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
:disabled="
|
||||
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
|
||||
"
|
||||
class="icon"
|
||||
@click="createDocsGist"
|
||||
<pw-section class="green" :label="$t('documentation')" ref="documentation" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("documentation") }}</label>
|
||||
<p v-if="this.items.length === 0" class="info">
|
||||
{{ $t("generate_docs_first") }}
|
||||
</p>
|
||||
<div v-else class="row-wrapper">
|
||||
<div
|
||||
v-tooltip.bottom="{
|
||||
content: !fb.currentUser
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: fb.currentUser.provider !== 'github.com'
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<i class="material-icons">assignment</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="
|
||||
!fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
|
||||
"
|
||||
class="icon"
|
||||
@click="createDocsGist"
|
||||
>
|
||||
<i class="material-icons">assignment</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="collection" v-for="(collection, index) in this.items" :key="index">
|
||||
<h2>
|
||||
<i class="material-icons">folder</i>
|
||||
{{ collection.name || $t("none") }}
|
||||
</h2>
|
||||
<span class="folder" v-for="(folder, index) in collection.folders" :key="index">
|
||||
<h3>
|
||||
<i class="material-icons">folder_open</i>
|
||||
{{ folder.name || $t("none") }}
|
||||
</h3>
|
||||
<span class="request" v-for="(request, index) in folder.requests" :key="index">
|
||||
<div>
|
||||
<span class="collection" v-for="(collection, index) in this.items" :key="index">
|
||||
<h2>
|
||||
<i class="material-icons">folder</i>
|
||||
{{ collection.name || $t("none") }}
|
||||
</h2>
|
||||
<span class="folder" v-for="(folder, index) in collection.folders" :key="index">
|
||||
<h3>
|
||||
<i class="material-icons">folder_open</i>
|
||||
{{ folder.name || $t("none") }}
|
||||
</h3>
|
||||
<span class="request" v-for="(request, index) in folder.requests" :key="index">
|
||||
<h4>
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
{{ request.name || $t("none") }}
|
||||
</h4>
|
||||
<p class="doc-desc" v-if="request.url">
|
||||
<span>
|
||||
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.path">
|
||||
<span>
|
||||
{{ $t("path") }}:
|
||||
<code>{{ request.path || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.method">
|
||||
<span>
|
||||
{{ $t("method") }}:
|
||||
<code>{{ request.method || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.auth">
|
||||
<span>
|
||||
{{ $t("authentication") }}:
|
||||
<code>{{ request.auth || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.httpUser">
|
||||
<span>
|
||||
{{ $t("username") }}:
|
||||
<code>{{ request.httpUser || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.httpPassword">
|
||||
<span>
|
||||
{{ $t("password") }}:
|
||||
<code>{{ request.httpPassword || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.bearerToken">
|
||||
<span>
|
||||
{{ $t("token") }}:
|
||||
<code>{{ request.bearerToken || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
|
||||
<span v-if="request.headers">
|
||||
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
|
||||
<span>
|
||||
{{ header.key || $t("none") }}:
|
||||
<code>{{ header.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
|
||||
<span v-if="request.params">
|
||||
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
|
||||
<span>
|
||||
{{ parameter.key || $t("none") }}:
|
||||
<code>{{ parameter.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
|
||||
<span v-if="request.bodyParams">
|
||||
<p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
|
||||
<span>
|
||||
{{ payload.key || $t("none") }}:
|
||||
<code>{{ payload.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<p class="doc-desc" v-if="request.rawParams">
|
||||
<span>
|
||||
{{ $t("parameters") }}:
|
||||
<code>{{ request.rawParams || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.contentType">
|
||||
<span>
|
||||
{{ $t("content_type") }}:
|
||||
<code>{{ request.contentType || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.requestType">
|
||||
<span>
|
||||
{{ $t("request_type") }}:
|
||||
<code>{{ request.requestType || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="request"
|
||||
v-for="(request, index) in collection.requests"
|
||||
:key="`request-${index}`"
|
||||
>
|
||||
<h4>
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
{{ request.name || $t("none") }}
|
||||
@@ -117,8 +195,7 @@
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.path">
|
||||
<span>
|
||||
{{ $t("path") }}:
|
||||
<code>{{ request.path || $t("none") }}</code>
|
||||
{{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.method">
|
||||
@@ -198,102 +275,7 @@
|
||||
</p>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="request"
|
||||
v-for="(request, index) in collection.requests"
|
||||
:key="`request-${index}`"
|
||||
>
|
||||
<h4>
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
{{ request.name || $t("none") }}
|
||||
</h4>
|
||||
<p class="doc-desc" v-if="request.url">
|
||||
<span>
|
||||
{{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.path">
|
||||
<span>
|
||||
{{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.method">
|
||||
<span>
|
||||
{{ $t("method") }}:
|
||||
<code>{{ request.method || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.auth">
|
||||
<span>
|
||||
{{ $t("authentication") }}:
|
||||
<code>{{ request.auth || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.httpUser">
|
||||
<span>
|
||||
{{ $t("username") }}:
|
||||
<code>{{ request.httpUser || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.httpPassword">
|
||||
<span>
|
||||
{{ $t("password") }}:
|
||||
<code>{{ request.httpPassword || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.bearerToken">
|
||||
<span>
|
||||
{{ $t("token") }}:
|
||||
<code>{{ request.bearerToken || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
|
||||
<span v-if="request.headers">
|
||||
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
|
||||
<span>
|
||||
{{ header.key || $t("none") }}:
|
||||
<code>{{ header.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
|
||||
<span v-if="request.params">
|
||||
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
|
||||
<span>
|
||||
{{ parameter.key || $t("none") }}:
|
||||
<code>{{ parameter.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
|
||||
<span v-if="request.bodyParams">
|
||||
<p v-for="payload in request.bodyParams" :key="payload.key" class="doc-desc">
|
||||
<span>
|
||||
{{ payload.key || $t("none") }}:
|
||||
<code>{{ payload.value || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
<p class="doc-desc" v-if="request.rawParams">
|
||||
<span>
|
||||
{{ $t("parameters") }}:
|
||||
<code>{{ request.rawParams || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.contentType">
|
||||
<span>
|
||||
{{ $t("content_type") }}:
|
||||
<code>{{ request.contentType || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
<p class="doc-desc" v-if="request.requestType">
|
||||
<span>
|
||||
{{ $t("request_type") }}:
|
||||
<code>{{ request.requestType || $t("none") }}</code>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</pw-section>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div class="page-columns inner-left">
|
||||
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint">
|
||||
<pw-section class="blue" :label="$t('endpoint')" ref="endpoint" no-legend>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
@@ -12,12 +12,18 @@
|
||||
v-model="url"
|
||||
spellcheck="false"
|
||||
@keyup.enter="onPollSchemaClick()"
|
||||
class="md:rounded-bl-lg"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="get" class="hide-on-small-screen"> </label>
|
||||
<button id="get" name="get" @click="onPollSchemaClick">
|
||||
<button
|
||||
id="get"
|
||||
name="get"
|
||||
@click="onPollSchemaClick"
|
||||
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
>
|
||||
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
|
||||
<span
|
||||
><i class="material-icons">{{
|
||||
@@ -30,73 +36,76 @@
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="orange" :label="$t('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="headers = []" 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('setGQLHeaderKey', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setGQLHeaderValue', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<pw-section class="orange" :label="$t('headers')" ref="headers" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("headers") }}</label>
|
||||
<ul v-if="headers.length !== 0">
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeRequestHeader(index)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="header"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button class="icon" @click="headers = []" 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('setGQLHeaderKey', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setGQLHeaderValue', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="green" :label="$t('schema')" ref="schema">
|
||||
<pw-section class="green" :label="$t('schema')" ref="schema" no-legend>
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("schema") }}</label>
|
||||
<div v-if="schema">
|
||||
@@ -143,10 +152,11 @@
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
class="missing-data-response"
|
||||
class="rounded-b-lg missing-data-response"
|
||||
:value="$t('waiting_receive_schema')"
|
||||
ref="status"
|
||||
id="status"
|
||||
@@ -156,7 +166,7 @@
|
||||
/>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="teal" :label="$t('query')" ref="query">
|
||||
<pw-section class="teal" :label="$t('query')" ref="query" no-legend>
|
||||
<div class="row-wrapper gqlRunQuery">
|
||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||
<div>
|
||||
@@ -195,80 +205,95 @@
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="yellow" label="Variables" ref="variables">
|
||||
<ace-editor
|
||||
v-model="variableString"
|
||||
:lang="'json'"
|
||||
:options="{
|
||||
maxLines: 10,
|
||||
minLines: 5,
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" label="Response" ref="response">
|
||||
<div class="row-wrapper">
|
||||
<label for="responseField">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="downloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-if="response"
|
||||
v-tooltip="$t('download_file')"
|
||||
>
|
||||
<i class="material-icons">save_alt</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="copyResponse"
|
||||
ref="copyResponseButton"
|
||||
v-if="response"
|
||||
v-tooltip="$t('copy_response')"
|
||||
>
|
||||
<i class="material-icons">content_copy</i>
|
||||
</button>
|
||||
</div>
|
||||
<pw-section class="yellow" :label="$t('variables')" ref="variables" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("variables") }}</label>
|
||||
<ace-editor
|
||||
v-model="variableString"
|
||||
:lang="'json'"
|
||||
:options="{
|
||||
maxLines: 10,
|
||||
minLines: 5,
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" :label="$t('response')" ref="response" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("response") }}</label>
|
||||
<div class="row-wrapper">
|
||||
<label for="responseField">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="downloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-if="response"
|
||||
v-tooltip="$t('download_file')"
|
||||
>
|
||||
<i class="material-icons">save_alt</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="copyResponse"
|
||||
ref="copyResponseButton"
|
||||
v-if="response"
|
||||
v-tooltip="$t('copy_response')"
|
||||
>
|
||||
<i class="material-icons">content_copy</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ace-editor
|
||||
v-if="response"
|
||||
:value="response"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 10,
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
class="rounded-b-lg missing-data-response"
|
||||
:value="$t('waiting_receive_response')"
|
||||
ref="status"
|
||||
id="status"
|
||||
name="status"
|
||||
readonly
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<ace-editor
|
||||
v-if="response"
|
||||
:value="response"
|
||||
:lang="'json'"
|
||||
:lint="false"
|
||||
:options="{
|
||||
maxLines: responseBodyMaxLines,
|
||||
minLines: 10,
|
||||
fontSize: '16px',
|
||||
autoScrollEditorIntoView: true,
|
||||
readOnly: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
class="missing-data-response"
|
||||
:value="$t('waiting_receive_response')"
|
||||
ref="status"
|
||||
id="status"
|
||||
name="status"
|
||||
readonly
|
||||
type="text"
|
||||
/>
|
||||
</pw-section>
|
||||
</div>
|
||||
|
||||
<aside class="sticky-inner inner-right lg:max-w-md">
|
||||
<pw-section class="purple" :label="$t('docs')" ref="docs">
|
||||
<pw-section class="purple" :label="$t('docs')" ref="docs" no-legend>
|
||||
<section class="flex-col">
|
||||
<input type="text" :placeholder="$t('search')" v-model="graphqlFieldsFilterText" />
|
||||
<tabs ref="gqlTabs">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
v-model="graphqlFieldsFilterText"
|
||||
class="rounded-t-lg"
|
||||
/>
|
||||
<tabs ref="gqlTabs" styles="m-4">
|
||||
<div class="gqlTabs">
|
||||
<tab
|
||||
v-if="queryFields.length > 0"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div class="page-columns inner-left">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request" no-legend>
|
||||
<ul>
|
||||
<li class="shrink">
|
||||
<label for="method">{{ $t("method") }}</label>
|
||||
@@ -40,6 +40,7 @@
|
||||
<input
|
||||
v-if="!this.$store.state.postwoman.settings.EXPERIMENTAL_URL_BAR_ENABLED"
|
||||
:class="{ error: !isValidURL }"
|
||||
class="rounded-none"
|
||||
@keyup.enter="isValidURL ? sendRequest() : null"
|
||||
id="url"
|
||||
name="url"
|
||||
@@ -47,6 +48,7 @@
|
||||
v-model="uri"
|
||||
spellcheck="false"
|
||||
@input="pathInputHandler"
|
||||
:placeholder="$t('url')"
|
||||
/>
|
||||
<url-field v-model="uri" v-else />
|
||||
</li>
|
||||
@@ -72,18 +74,27 @@
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<label for="name">{{ $t("token_req_name") }}</label>
|
||||
<input id="name" name="name" type="text" v-model="name" />
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="name" class="text-sm">{{ $t("token_req_name") }}</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
v-model="name"
|
||||
class="text-sm rounded-none"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<div label="Request Body" v-if="['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="contentType">{{ $t("content_type") }}</label>
|
||||
<label for="contentType" class="text-sm">{{ $t("content_type") }}</label>
|
||||
<autocomplete
|
||||
:source="validContentTypes"
|
||||
:spellcheck="false"
|
||||
v-model="contentType"
|
||||
styles="text-sm rounded-none"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -96,7 +107,7 @@
|
||||
</pw-toggle>
|
||||
</span>
|
||||
<div>
|
||||
<label for="attachment">
|
||||
<label for="attachment" class="p-0">
|
||||
<button
|
||||
class="icon"
|
||||
@click="$refs.attachment.click()"
|
||||
@@ -123,7 +134,7 @@
|
||||
@change="uploadAttachment"
|
||||
multiple
|
||||
/>
|
||||
<label for="payload">
|
||||
<label for="payload" class="p-0">
|
||||
<button
|
||||
class="icon"
|
||||
@click="$refs.payload.click()"
|
||||
@@ -318,8 +329,23 @@
|
||||
/>
|
||||
</tab>
|
||||
|
||||
<tab
|
||||
:id="'headers'"
|
||||
:label="
|
||||
$t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
|
||||
"
|
||||
>
|
||||
<http-headers
|
||||
:headers="headers"
|
||||
@clear-content="clearContent"
|
||||
@set-route-query-state="setRouteQueryState"
|
||||
@remove-request-header="removeRequestHeader"
|
||||
@add-request-header="addRequestHeader"
|
||||
/>
|
||||
</tab>
|
||||
|
||||
<tab :id="'authentication'" :label="$t('authentication')">
|
||||
<pw-section class="teal" :label="$t('authentication')" ref="authentication">
|
||||
<pw-section class="teal" :label="$t('authentication')" ref="authentication" no-legend>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
@@ -401,6 +427,7 @@
|
||||
</pw-toggle>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section
|
||||
v-if="showTokenRequest"
|
||||
class="red"
|
||||
@@ -522,27 +549,13 @@
|
||||
</pw-section>
|
||||
</tab>
|
||||
|
||||
<tab
|
||||
:id="'headers'"
|
||||
:label="
|
||||
$t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
|
||||
"
|
||||
>
|
||||
<http-headers
|
||||
:headers="headers"
|
||||
@clear-content="clearContent"
|
||||
@set-route-query-state="setRouteQueryState"
|
||||
@remove-request-header="removeRequestHeader"
|
||||
@add-request-header="addRequestHeader"
|
||||
/>
|
||||
</tab>
|
||||
|
||||
<tab :id="'pre_request_script'" :label="$t('pre_request_script')">
|
||||
<pw-section
|
||||
v-if="showPreRequestScript"
|
||||
class="orange"
|
||||
:label="$t('pre_request_script')"
|
||||
ref="preRequest"
|
||||
no-legend
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -570,6 +583,7 @@
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -582,6 +596,7 @@
|
||||
class="orange"
|
||||
:label="$t('tests')"
|
||||
ref="postRequestTests"
|
||||
no-legend
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -609,6 +624,7 @@
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
styles="rounded-b-lg"
|
||||
/>
|
||||
<div v-if="testReports.length !== 0">
|
||||
<div class="row-wrapper">
|
||||
@@ -654,7 +670,10 @@
|
||||
<li>
|
||||
<label for="status">{{ $t("status") }}</label>
|
||||
<input
|
||||
:class="statusCategory ? statusCategory.className : ''"
|
||||
:class="[
|
||||
statusCategory ? statusCategory.className : '',
|
||||
response.status ? '' : 'rounded-b-lg',
|
||||
]"
|
||||
:value="response.status || $t('waiting_send_req')"
|
||||
ref="status"
|
||||
id="status"
|
||||
@@ -733,7 +752,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<div slot="body" class="flex flex-col">
|
||||
<div class="row-wrapper">
|
||||
<label for="token-req-list">{{ $t("token_req_list") }}</label>
|
||||
<div>
|
||||
|
||||
@@ -1,173 +1,147 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<pw-section class="green" :label="$t('account')" ref="account">
|
||||
<ul>
|
||||
<li>
|
||||
<div v-if="fb.currentUser">
|
||||
<button class="icon">
|
||||
<img
|
||||
v-if="fb.currentUser.photoURL"
|
||||
:src="fb.currentUser.photoURL"
|
||||
class="rounded-full material-icons"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
<span>
|
||||
{{ fb.currentUser.displayName || $t("nothing_found") }}
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<button class="icon">
|
||||
<i class="material-icons">email</i>
|
||||
<span>
|
||||
{{ fb.currentUser.email || $t("nothing_found") }}
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<logout />
|
||||
<p v-for="setting in fb.currentSettings" :key="setting.id">
|
||||
<pw-toggle
|
||||
:key="setting.name"
|
||||
:on="setting.value"
|
||||
@change="toggleSettings(setting.name, setting.value)"
|
||||
>
|
||||
{{ $t(setting.name) + " " + $t("sync") }}
|
||||
{{ setting.value ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</p>
|
||||
<p v-if="fb.currentSettings.length !== 3">
|
||||
<button class="" @click="initSettings">
|
||||
<i class="material-icons">sync</i>
|
||||
<span>{{ $t("turn_on") + " " + $t("sync") }}</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<label>{{ $t("login_with") }}</label>
|
||||
<p>
|
||||
<login />
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="teal" :label="$t('theme')" ref="theme">
|
||||
<ul>
|
||||
<color-mode-picker />
|
||||
</ul>
|
||||
<ul>
|
||||
<accent-mode-picker />
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<span>
|
||||
<pw-toggle
|
||||
:on="settings.FRAME_COLORS_ENABLED"
|
||||
@change="toggleSetting('FRAME_COLORS_ENABLED')"
|
||||
>
|
||||
{{ $t("multi_color") }}
|
||||
{{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<span>
|
||||
<pw-toggle
|
||||
:on="settings.SCROLL_INTO_ENABLED"
|
||||
@change="toggleSetting('SCROLL_INTO_ENABLED')"
|
||||
>
|
||||
{{ $t("scrollInto_use_toggle") }}
|
||||
{{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" :label="$t('extensions')" ref="extensions">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<pw-toggle
|
||||
:on="settings.EXTENSIONS_ENABLED"
|
||||
@change="toggleSetting('EXTENSIONS_ENABLED')"
|
||||
>
|
||||
{{ $t("extensions_use_toggle") }}
|
||||
</pw-toggle>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="info">
|
||||
<li v-if="extensionVersion != null">
|
||||
<p>
|
||||
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
|
||||
extensionVersion.minor
|
||||
}}
|
||||
</p>
|
||||
</li>
|
||||
<li v-else>
|
||||
<p>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="blue" :label="$t('proxy')" ref="proxy">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<pw-section class="green" :label="$t('account')" ref="account" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("account") }}</label>
|
||||
<div v-if="fb.currentUser">
|
||||
<button class="icon">
|
||||
<img
|
||||
v-if="fb.currentUser.photoURL"
|
||||
:src="fb.currentUser.photoURL"
|
||||
class="rounded-full material-icons"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
<span>
|
||||
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
|
||||
{{ $t("proxy") }}
|
||||
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
{{ fb.currentUser.displayName || $t("nothing_found") }}
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
</button>
|
||||
<br />
|
||||
<button class="icon">
|
||||
<i class="material-icons">email</i>
|
||||
<span>
|
||||
{{ fb.currentUser.email || $t("nothing_found") }}
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<logout />
|
||||
<p v-for="setting in fb.currentSettings" :key="setting.id">
|
||||
<pw-toggle
|
||||
:key="setting.name"
|
||||
:on="setting.value"
|
||||
@change="toggleSettings(setting.name, setting.value)"
|
||||
>
|
||||
<button class="icon" v-tooltip="$t('wiki')">
|
||||
<i class="material-icons">help_outline</i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
id="url"
|
||||
type="url"
|
||||
v-model="settings.PROXY_URL"
|
||||
:disabled="!settings.PROXY_ENABLED"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="info">
|
||||
<li>
|
||||
<p>
|
||||
{{ $t("postwoman_official_proxy_hosting") }}
|
||||
<br />
|
||||
{{ $t("read_the") }}
|
||||
<a
|
||||
class="link"
|
||||
href="https://apollosoftware.xyz/legal/postwoman"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{{ $t("apollosw_privacy_policy") }} </a
|
||||
>.
|
||||
{{ $t(setting.name) + " " + $t("sync") }}
|
||||
{{ setting.value ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="fb.currentSettings.length !== 3">
|
||||
<button class="" @click="initSettings">
|
||||
<i class="material-icons">sync</i>
|
||||
<span>{{ $t("turn_on") + " " + $t("sync") }}</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<label>{{ $t("login_with") }}</label>
|
||||
<p>
|
||||
<login />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="teal" :label="$t('theme')" ref="theme" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("theme") }}</label>
|
||||
<color-mode-picker />
|
||||
<accent-mode-picker />
|
||||
<span>
|
||||
<pw-toggle
|
||||
:on="settings.FRAME_COLORS_ENABLED"
|
||||
@change="toggleSetting('FRAME_COLORS_ENABLED')"
|
||||
>
|
||||
{{ $t("multi_color") }}
|
||||
{{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</span>
|
||||
<span>
|
||||
<pw-toggle
|
||||
:on="settings.SCROLL_INTO_ENABLED"
|
||||
@change="toggleSetting('SCROLL_INTO_ENABLED')"
|
||||
>
|
||||
{{ $t("scrollInto_use_toggle") }}
|
||||
{{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</span>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" :label="$t('extensions')" ref="extensions" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("extensions") }}</label>
|
||||
<div class="row-wrapper">
|
||||
<pw-toggle
|
||||
:on="settings.EXTENSIONS_ENABLED"
|
||||
@change="toggleSetting('EXTENSIONS_ENABLED')"
|
||||
>
|
||||
{{ $t("extensions_use_toggle") }}
|
||||
</pw-toggle>
|
||||
</div>
|
||||
<p v-if="extensionVersion != null" class="info">
|
||||
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
|
||||
</p>
|
||||
<p v-else class="info">
|
||||
{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
|
||||
</p>
|
||||
</div>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="blue" :label="$t('proxy')" ref="proxy" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("proxy") }}</label>
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
|
||||
{{ $t("proxy") }}
|
||||
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
|
||||
</pw-toggle>
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button class="icon" v-tooltip="$t('wiki')">
|
||||
<i class="material-icons">help_outline</i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
id="url"
|
||||
type="url"
|
||||
v-model="settings.PROXY_URL"
|
||||
:disabled="!settings.PROXY_ENABLED"
|
||||
/>
|
||||
<p class="info">
|
||||
{{ $t("postwoman_official_proxy_hosting") }}
|
||||
<br />
|
||||
{{ $t("read_the") }}
|
||||
<a
|
||||
class="link"
|
||||
href="https://apollosoftware.xyz/legal/postwoman"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{{ $t("apollosw_privacy_policy") }} </a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<!--
|
||||
PROXY SETTINGS URL AND KEY
|
||||
--------------
|
||||
@@ -185,33 +159,28 @@
|
||||
-->
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="red" :label="$t('experiments')" ref="experiments">
|
||||
<ul class="info">
|
||||
<li>
|
||||
<p>
|
||||
{{ $t("experiments_notice") }}
|
||||
<a
|
||||
class="link"
|
||||
href="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ $t("contact_us") }}</a
|
||||
>.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="row-wrapper">
|
||||
<pw-toggle
|
||||
:on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
|
||||
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
|
||||
>
|
||||
{{ $t("use_experimental_url_bar") }}
|
||||
</pw-toggle>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<pw-section class="red" :label="$t('experiments')" ref="experiments" no-legend>
|
||||
<div class="flex flex-col">
|
||||
<label>{{ $t("experiments") }}</label>
|
||||
<p class="info">
|
||||
{{ $t("experiments_notice") }}
|
||||
<a
|
||||
class="link"
|
||||
href="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ $t("contact_us") }}</a
|
||||
>.
|
||||
</p>
|
||||
<div class="row-wrapper">
|
||||
<pw-toggle
|
||||
:on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
|
||||
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
|
||||
>
|
||||
{{ $t("use_experimental_url_bar") }}
|
||||
</pw-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</pw-section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user