🚨 Lint
This commit is contained in:
Liyas Thomas
@@ -1,67 +1,5 @@
|
||||
$responsiveWidth: 720px;
|
||||
|
||||
// Make theme transition smoother.
|
||||
body.afterLoad {
|
||||
|
||||
&,
|
||||
& * {
|
||||
transition: background-color 0.2s ease-in-out,
|
||||
border 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--ac-sel-color);
|
||||
color: var(--act-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--fg-light-color);
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--bg-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--fg-color);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--fg-light-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
font-family: "Poppins", "Roboto", "Noto", sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
@@ -159,7 +97,7 @@ h3 {
|
||||
color: black;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 30px rgba(black, .1);
|
||||
box-shadow: 0 5px 30px rgba(black, 0.1);
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
@@ -167,16 +105,16 @@ h3 {
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden='true'] {
|
||||
&[aria-hidden="true"] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
transition: opacity 0.15s, visibility 0.15s;
|
||||
}
|
||||
|
||||
&[aria-hidden='false'] {
|
||||
&[aria-hidden="false"] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -515,8 +453,8 @@ fieldset#history {
|
||||
&.show {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 1;
|
||||
|
||||
#hidden-message {
|
||||
|
||||
@@ -20,7 +20,11 @@
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="openDialogChooseFileToReplaceWith" v-tooltip="'Replace current'">
|
||||
<button
|
||||
class="icon"
|
||||
@click="openDialogChooseFileToReplaceWith"
|
||||
v-tooltip="'Replace current'"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>Replace with JSON</span>
|
||||
<input
|
||||
@@ -32,7 +36,11 @@
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="icon" @click="openDialogChooseFileToImportFrom" v-tooltip="'Preserve current'">
|
||||
<button
|
||||
class="icon"
|
||||
@click="openDialogChooseFileToImportFrom"
|
||||
v-tooltip="'Preserve current'"
|
||||
>
|
||||
<i class="material-icons">folder_shared</i>
|
||||
<span>Import from JSON</span>
|
||||
<input
|
||||
|
||||
@@ -18,7 +18,12 @@
|
||||
<ul>
|
||||
<li>
|
||||
<label for="selectLabel">Label</label>
|
||||
<input type="text" id="selectLabel" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
|
||||
<input
|
||||
type="text"
|
||||
id="selectLabel"
|
||||
v-model="requestData.name"
|
||||
v-bind:placeholder="defaultRequestName"
|
||||
/>
|
||||
<label for="selectCollection">Collection</label>
|
||||
<select type="text" id="selectCollection" v-model="requestData.collectionIndex">
|
||||
<option
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
</button>
|
||||
</li>
|
||||
<li v-else>
|
||||
<div>
|
||||
<div class="flex-wrap">
|
||||
<label for="clear-history-button">Are you sure?</label>
|
||||
<div>
|
||||
<button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
|
||||
.modal-fade-enter .modal-container,
|
||||
.modal-fade-leave-active .modal-container {
|
||||
transform: scale(0.9);
|
||||
transition: all 0.1s ease-in-out;
|
||||
transform: scale(0.8);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -52,17 +52,17 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
'color': {
|
||||
color: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
'name': {
|
||||
name: {
|
||||
type: String
|
||||
},
|
||||
'active': {
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -27,7 +27,11 @@
|
||||
<nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'">
|
||||
<logo alt style="height: 24px;"></logo>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/websocket" :class="linkActive('/websocket')" v-tooltip.right="'WebSocket'">
|
||||
<nuxt-link
|
||||
to="/websocket"
|
||||
:class="linkActive('/websocket')"
|
||||
v-tooltip.right="'WebSocket'"
|
||||
>
|
||||
<i class="material-icons">cloud</i>
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
@@ -157,6 +161,70 @@
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--ac-sel-color);
|
||||
color: var(--act-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--fg-light-color);
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--bg-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--fg-color);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--fg-light-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
font-family: "Poppins", "Roboto", "Noto", sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Make theme transition smoother.
|
||||
body.afterLoad {
|
||||
&,
|
||||
& * {
|
||||
transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
body.sticky-footer footer {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
& > div {
|
||||
@@ -168,10 +236,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
body.sticky-footer footer {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
@@ -186,6 +250,23 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
position: relative;
|
||||
animation: slideIn 0.2s forwards ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: -16px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 22px;
|
||||
color: var(--ac-color);
|
||||
@@ -220,14 +301,53 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav.secondary-nav {
|
||||
nav.primary-nav {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
border-bottom: 1px solid var(--brd-color);
|
||||
|
||||
svg {
|
||||
fill: var(--fg-light-color);
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--brd-color);
|
||||
color: var(--fg-light-color);
|
||||
margin: 8px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-color);
|
||||
|
||||
svg {
|
||||
fill: var(--fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
background-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
border-radius: 16px;
|
||||
|
||||
svg {
|
||||
fill: var(--act-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.secondary-nav {
|
||||
display: flex;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
@@ -236,6 +356,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-dark-color);
|
||||
@@ -255,67 +376,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
position: relative;
|
||||
animation: slideIn 0.2s forwards ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: -16px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nav.primary-nav {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-bottom: 1px solid var(--brd-color);
|
||||
|
||||
svg {
|
||||
fill: var(--fg-light-color);
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--brd-color);
|
||||
color: var(--fg-light-color);
|
||||
margin: 8px;
|
||||
transition: all .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-color);
|
||||
|
||||
svg {
|
||||
fill: var(--fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
background-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
border-radius: 8px;
|
||||
|
||||
svg {
|
||||
fill: var(--act-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$responsiveWidth: 720px;
|
||||
|
||||
@media (max-width: $responsiveWidth) {
|
||||
|
||||
@@ -29,8 +29,7 @@ export default {
|
||||
},
|
||||
head: {
|
||||
title: `${meta.name} \u2022 ${meta.shortDescription}`,
|
||||
meta: [
|
||||
{
|
||||
meta: [{
|
||||
charset: 'utf-8'
|
||||
},
|
||||
{
|
||||
@@ -148,8 +147,7 @@ export default {
|
||||
content: `${routerBase.router.base}icons/icon-144x144.png`
|
||||
},
|
||||
],
|
||||
link: [
|
||||
{
|
||||
link: [{
|
||||
rel: 'icon',
|
||||
type: 'image/x-icon',
|
||||
href: `${routerBase.router.base}favicon.ico`
|
||||
@@ -206,8 +204,7 @@ export default {
|
||||
/*
|
||||
** Plugins to load before mounting the App
|
||||
*/
|
||||
plugins: [
|
||||
{
|
||||
plugins: [{
|
||||
src: '~/plugins/vuex-persist'
|
||||
},
|
||||
{
|
||||
@@ -217,8 +214,7 @@ export default {
|
||||
/*
|
||||
** Nuxt.js dev-modules
|
||||
*/
|
||||
buildModules: [
|
||||
],
|
||||
buildModules: [],
|
||||
/*
|
||||
** Nuxt.js modules
|
||||
*/
|
||||
@@ -229,7 +225,9 @@ export default {
|
||||
['@nuxtjs/toast'],
|
||||
['@nuxtjs/google-analytics'],
|
||||
['@nuxtjs/sitemap'],
|
||||
['@nuxtjs/google-tag-manager', { id: process.env.GTM_ID || 'GTM-MXWD8NQ' }]
|
||||
['@nuxtjs/google-tag-manager', {
|
||||
id: process.env.GTM_ID || 'GTM-MXWD8NQ'
|
||||
}]
|
||||
],
|
||||
pwa: {
|
||||
manifest: {
|
||||
|
||||
273
pages/index.vue
273
pages/index.vue
@@ -40,8 +40,21 @@
|
||||
</div>
|
||||
</pw-modal>
|
||||
|
||||
<pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request • β (experimental)" ref="preRequest">
|
||||
<textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="preRequestScript" spellcheck="false" placeholder='pw.environment.set("variable", "value");'></textarea>
|
||||
<pw-section
|
||||
v-if="showPreRequestScript"
|
||||
class="orange"
|
||||
label="Pre-Request • β (experimental)"
|
||||
ref="preRequest"
|
||||
>
|
||||
<textarea
|
||||
id="preRequestScript"
|
||||
@keydown="formatRawParams"
|
||||
rows="8"
|
||||
v-model="preRequestScript"
|
||||
v-textarea-auto-height="preRequestScript"
|
||||
spellcheck="false"
|
||||
placeholder="pw.environment.set('variable', 'value');"
|
||||
></textarea>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="blue" label="Request" ref="request">
|
||||
@@ -212,8 +225,16 @@
|
||||
v-tooltip.bottom="{ content: !showPreRequestScript ? 'Show Pre-Request Script' : 'Hide Pre-Request Script'}"
|
||||
@click="showPreRequestScript = !showPreRequestScript"
|
||||
>
|
||||
<i class="material-icons" :class="showPreRequestScript" v-if="!showPreRequestScript">code</i>
|
||||
<i class="material-icons" :class="showPreRequestScript" v-if="showPreRequestScript">close</i>
|
||||
<i
|
||||
class="material-icons"
|
||||
:class="showPreRequestScript"
|
||||
v-if="!showPreRequestScript"
|
||||
>code</i>
|
||||
<i
|
||||
class="material-icons"
|
||||
:class="showPreRequestScript"
|
||||
v-if="showPreRequestScript"
|
||||
>close</i>
|
||||
</button>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
@@ -282,14 +303,13 @@
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<section id="options">
|
||||
<input id="tab-one" type="radio" name="grp" checked="checked" />
|
||||
<label for="tab-one">Authentication</label>
|
||||
<div class="tab">
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<pw-section class="cyan" label="Authentication" ref="authentication">
|
||||
<ul>
|
||||
@@ -342,19 +362,14 @@
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex-wrap">
|
||||
<pw-toggle
|
||||
:on="!urlExcludes.auth"
|
||||
@change="setExclude('auth', !$event)">
|
||||
Include in URL
|
||||
</pw-toggle>
|
||||
<pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">Include in URL</pw-toggle>
|
||||
</div>
|
||||
</pw-section>
|
||||
</div>
|
||||
<input id="tab-two" type="radio" name="grp" />
|
||||
<label for="tab-two">Headers</label>
|
||||
<div class="tab">
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<pw-section class="orange" label="Headers" ref="headers">
|
||||
<ul>
|
||||
@@ -419,8 +434,7 @@
|
||||
<input id="tab-three" type="radio" name="grp" />
|
||||
<label for="tab-three">Parameters</label>
|
||||
<div class="tab">
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<pw-section class="pink" label="Parameters" ref="parameters">
|
||||
<ul>
|
||||
@@ -482,7 +496,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<pw-section class="purple" id="response" label="Response" ref="response">
|
||||
<ul>
|
||||
@@ -541,13 +555,13 @@
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<pw-section class="yellow" label="Collections" ref="collections">
|
||||
<collections />
|
||||
</pw-section>
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<history @useHistory="handleUseHistory" ref="historyComponent"></history>
|
||||
</div>
|
||||
@@ -567,7 +581,7 @@ import parseCurlCommand from "../assets/js/curlparser.js";
|
||||
import hljs from "highlight.js";
|
||||
import "highlight.js/styles/dracula.css";
|
||||
import getEnvironmentVariablesFromScript from "../functions/preRequest";
|
||||
import parseTemplateString from '../functions/templating'
|
||||
import parseTemplateString from "../functions/templating";
|
||||
|
||||
const statusCategories = [
|
||||
{
|
||||
@@ -637,7 +651,7 @@ export default {
|
||||
return {
|
||||
showModal: false,
|
||||
showPreRequestScript: false,
|
||||
preRequestScript: '',
|
||||
preRequestScript: "",
|
||||
copyButton: '<i class="material-icons">file_copy</i>',
|
||||
copiedButton: '<i class="material-icons">done</i>',
|
||||
isHidden: true,
|
||||
@@ -679,7 +693,10 @@ export default {
|
||||
urlExcludes: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.$store.commit("postwoman/applySetting", ['URL_EXCLUDES', Object.assign({}, this.urlExcludes)]);
|
||||
this.$store.commit("postwoman/applySetting", [
|
||||
"URL_EXCLUDES",
|
||||
Object.assign({}, this.urlExcludes)
|
||||
]);
|
||||
}
|
||||
},
|
||||
contentType(val) {
|
||||
@@ -769,68 +786,135 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
url: {
|
||||
get() { return this.$store.state.request.url; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'url' }) },
|
||||
get() {
|
||||
return this.$store.state.request.url;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "url" });
|
||||
}
|
||||
},
|
||||
method: {
|
||||
get() { return this.$store.state.request.method; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'method' }) },
|
||||
get() {
|
||||
return this.$store.state.request.method;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "method" });
|
||||
}
|
||||
},
|
||||
path: {
|
||||
get() { return this.$store.state.request.path; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'path' }) },
|
||||
get() {
|
||||
return this.$store.state.request.path;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "path" });
|
||||
}
|
||||
},
|
||||
label: {
|
||||
get() { return this.$store.state.request.label; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'label' }) },
|
||||
get() {
|
||||
return this.$store.state.request.label;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "label" });
|
||||
}
|
||||
},
|
||||
auth: {
|
||||
get() { return this.$store.state.request.auth; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'auth' }) },
|
||||
get() {
|
||||
return this.$store.state.request.auth;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "auth" });
|
||||
}
|
||||
},
|
||||
httpUser: {
|
||||
get() { return this.$store.state.request.httpUser; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'httpUser' }) },
|
||||
get() {
|
||||
return this.$store.state.request.httpUser;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "httpUser" });
|
||||
}
|
||||
},
|
||||
httpPassword: {
|
||||
get() { return this.$store.state.request.httpPassword; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'httpPassword' }) },
|
||||
get() {
|
||||
return this.$store.state.request.httpPassword;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "httpPassword" });
|
||||
}
|
||||
},
|
||||
bearerToken: {
|
||||
get() { return this.$store.state.request.bearerToken; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'bearerToken' }) },
|
||||
get() {
|
||||
return this.$store.state.request.bearerToken;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "bearerToken" });
|
||||
}
|
||||
},
|
||||
headers: {
|
||||
get() { return this.$store.state.request.headers; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'headers' }) },
|
||||
get() {
|
||||
return this.$store.state.request.headers;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "headers" });
|
||||
}
|
||||
},
|
||||
params: {
|
||||
get() { return this.$store.state.request.params; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'params' }) },
|
||||
get() {
|
||||
return this.$store.state.request.params;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "params" });
|
||||
}
|
||||
},
|
||||
bodyParams: {
|
||||
get() { return this.$store.state.request.bodyParams; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'bodyParams' }) },
|
||||
get() {
|
||||
return this.$store.state.request.bodyParams;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "bodyParams" });
|
||||
}
|
||||
},
|
||||
rawParams: {
|
||||
get() { return this.$store.state.request.rawParams; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'rawParams' }) },
|
||||
get() {
|
||||
return this.$store.state.request.rawParams;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "rawParams" });
|
||||
}
|
||||
},
|
||||
rawInput: {
|
||||
get() { return this.$store.state.request.rawInput; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'rawInput' }) },
|
||||
get() {
|
||||
return this.$store.state.request.rawInput;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "rawInput" });
|
||||
}
|
||||
},
|
||||
requestType: {
|
||||
get() { return this.$store.state.request.requestType; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'requestType' }) },
|
||||
get() {
|
||||
return this.$store.state.request.requestType;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "requestType" });
|
||||
}
|
||||
},
|
||||
contentType: {
|
||||
get() { return this.$store.state.request.contentType; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'contentType' }) },
|
||||
get() {
|
||||
return this.$store.state.request.contentType;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", { value, attribute: "contentType" });
|
||||
}
|
||||
},
|
||||
passwordFieldType: {
|
||||
get() { return this.$store.state.request.passwordFieldType; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'passwordFieldType' }) }
|
||||
get() {
|
||||
return this.$store.state.request.passwordFieldType;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("setState", {
|
||||
value,
|
||||
attribute: "passwordFieldType"
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
selectedRequest() {
|
||||
@@ -970,21 +1054,38 @@ export default {
|
||||
requestString.push(' method: "' + this.method + '",\n');
|
||||
if (this.auth === "Basic") {
|
||||
var basic = this.httpUser + ":" + this.httpPassword;
|
||||
this.$store.commit('addHeaders', ' "Authorization": "Basic ' + window.btoa(unescape(encodeURIComponent(basic))) + ",\n")
|
||||
this.$store.commit(
|
||||
"addHeaders",
|
||||
' "Authorization": "Basic ' +
|
||||
window.btoa(unescape(encodeURIComponent(basic))) +
|
||||
",\n"
|
||||
);
|
||||
} else if (this.auth === "Bearer Token") {
|
||||
this.$store.commit('addHeaders', ' "Authorization": "Bearer Token ' + this.bearerToken + ",\n")
|
||||
this.$store.commit(
|
||||
"addHeaders",
|
||||
' "Authorization": "Bearer Token ' + this.bearerToken + ",\n"
|
||||
);
|
||||
}
|
||||
if (["POST", "PUT", "PATCH"].includes(this.method)) {
|
||||
const requestBody = this.rawInput
|
||||
? this.rawParams
|
||||
: this.rawRequestBody;
|
||||
requestString.push(" body: " + requestBody + ",\n");
|
||||
this.$store.commit('addHeaders', ' "Content-Length": ' + requestBody.length + ",\n")
|
||||
this.$store.commit('addHeaders', ' "Content-Type": "' + this.contentType + '; charset=utf-8",\n')
|
||||
this.$store.commit(
|
||||
"addHeaders",
|
||||
' "Content-Length": ' + requestBody.length + ",\n"
|
||||
);
|
||||
this.$store.commit(
|
||||
"addHeaders",
|
||||
' "Content-Type": "' + this.contentType + '; charset=utf-8",\n'
|
||||
);
|
||||
}
|
||||
if (this.headers) {
|
||||
this.headers.forEach(function(element) {
|
||||
this.$store.commit('addHeaders', ' "' + element.key + '": "' + element.value + '",\n')
|
||||
this.$store.commit(
|
||||
"addHeaders",
|
||||
' "' + element.key + '": "' + element.value + '",\n'
|
||||
);
|
||||
});
|
||||
}
|
||||
headers = headers.join("").slice(0, -3);
|
||||
@@ -1066,18 +1167,28 @@ export default {
|
||||
data: requestBody ? requestBody.toString() : null
|
||||
};
|
||||
if (preRequestScript) {
|
||||
const environmentVariables = getEnvironmentVariablesFromScript(preRequestScript);
|
||||
requestOptions.url = parseTemplateString(requestOptions.url, environmentVariables);
|
||||
requestOptions.data = parseTemplateString(requestOptions.data, environmentVariables);
|
||||
const environmentVariables = getEnvironmentVariablesFromScript(
|
||||
preRequestScript
|
||||
);
|
||||
requestOptions.url = parseTemplateString(
|
||||
requestOptions.url,
|
||||
environmentVariables
|
||||
);
|
||||
requestOptions.data = parseTemplateString(
|
||||
requestOptions.data,
|
||||
environmentVariables
|
||||
);
|
||||
for (let k in requestOptions.headers) {
|
||||
const kParsed = parseTemplateString(k, environmentVariables);
|
||||
const valParsed = parseTemplateString(requestOptions.headers[k], environmentVariables);
|
||||
const valParsed = parseTemplateString(
|
||||
requestOptions.headers[k],
|
||||
environmentVariables
|
||||
);
|
||||
delete requestOptions.headers[k];
|
||||
requestOptions.headers[kParsed] = valParsed;
|
||||
}
|
||||
|
||||
}
|
||||
if (typeof requestOptions.data === 'string') {
|
||||
if (typeof requestOptions.data === "string") {
|
||||
requestOptions.data = parseTemplateString(requestOptions.data);
|
||||
}
|
||||
const config = this.$store.state.postwoman.settings.PROXY_ENABLED
|
||||
@@ -1168,7 +1279,12 @@ export default {
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
|
||||
const payload = await this.makeRequest(auth, headers, requestBody, this.showPreRequestScript && this.preRequestScript);
|
||||
const payload = await this.makeRequest(
|
||||
auth,
|
||||
headers,
|
||||
requestBody,
|
||||
this.showPreRequestScript && this.preRequestScript
|
||||
);
|
||||
|
||||
const duration = Date.now() - startTime;
|
||||
this.$toast.info(`Finished in ${duration}ms`, {
|
||||
@@ -1259,34 +1375,34 @@ export default {
|
||||
this.params = params;
|
||||
},
|
||||
addRequestHeader() {
|
||||
this.$store.commit('addHeaders', {
|
||||
this.$store.commit("addHeaders", {
|
||||
key: "",
|
||||
value: ""
|
||||
});
|
||||
return false;
|
||||
},
|
||||
removeRequestHeader(index) {
|
||||
this.$store.commit('removeHeaders', index)
|
||||
this.$store.commit("removeHeaders", index);
|
||||
this.$toast.error("Deleted", {
|
||||
icon: "delete"
|
||||
});
|
||||
},
|
||||
addRequestParam() {
|
||||
this.$store.commit('addParams', { key: "", value: "" })
|
||||
this.$store.commit("addParams", { key: "", value: "" });
|
||||
return false;
|
||||
},
|
||||
removeRequestParam(index) {
|
||||
this.$store.commit('removeParams', index)
|
||||
this.$store.commit("removeParams", index);
|
||||
this.$toast.error("Deleted", {
|
||||
icon: "delete"
|
||||
});
|
||||
},
|
||||
addRequestBodyParam() {
|
||||
this.$store.commit('addBodyParams', { key: "", value: "" })
|
||||
this.$store.commit("addBodyParams", { key: "", value: "" });
|
||||
return false;
|
||||
},
|
||||
removeRequestBodyParam(index) {
|
||||
this.$store.commit('removeBodyParams', index)
|
||||
this.$store.commit("removeBodyParams", index);
|
||||
this.$toast.error("Deleted", {
|
||||
icon: "delete"
|
||||
});
|
||||
@@ -1441,7 +1557,9 @@ export default {
|
||||
!this.urlExcludes.httpPassword ? "httpPassword" : null,
|
||||
!this.urlExcludes.bearerToken ? "bearerToken" : null,
|
||||
"contentType"
|
||||
].filter((item) => item !== null).map(item => flat(item));
|
||||
]
|
||||
.filter(item => item !== null)
|
||||
.map(item => flat(item));
|
||||
let deeps = ["headers", "params"].map(item => deep(item));
|
||||
let bodyParams = this.rawInput
|
||||
? [flat("rawParams")]
|
||||
@@ -1498,7 +1616,10 @@ export default {
|
||||
this.path = "";
|
||||
this.headers = [];
|
||||
for (const key of Object.keys(parsedCurl.headers)) {
|
||||
this.$store.commit('addHeaders', { key: key, value: parsedCurl.headers[key] })
|
||||
this.$store.commit("addHeaders", {
|
||||
key: key,
|
||||
value: parsedCurl.headers[key]
|
||||
});
|
||||
}
|
||||
this.method = parsedCurl.method.toUpperCase();
|
||||
if (parsedCurl["data"]) {
|
||||
@@ -1599,7 +1720,9 @@ export default {
|
||||
},
|
||||
methodChange() {
|
||||
// this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' })
|
||||
this.contentType = ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '';
|
||||
this.contentType = ["POST", "PUT", "PATCH"].includes(this.method)
|
||||
? "application/json"
|
||||
: "";
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -5,7 +5,11 @@
|
||||
<li>
|
||||
<h3 class="title">Background</h3>
|
||||
<div class="backgrounds">
|
||||
<span :key="theme.class" @click="applyTheme(theme.class, theme.color)" v-for="theme in themes">
|
||||
<span
|
||||
:key="theme.class"
|
||||
@click="applyTheme(theme.class, theme.color)"
|
||||
v-for="theme in themes"
|
||||
>
|
||||
<swatch
|
||||
:active="settings.THEME_CLASS === theme.class"
|
||||
:class="{ vibrant: theme.vibrant }"
|
||||
@@ -48,7 +52,7 @@
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<pw-section class="blue" label="Proxy" ref="proxy">
|
||||
<ul>
|
||||
@@ -62,7 +66,16 @@
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="info">
|
||||
<li><p>Postwoman's Proxy is hosted by ApolloTV.<br>Read the ApolloTV privacy policy <a href="https://apollotv.xyz/legal" target="_blank">here</a>.</p></li>
|
||||
<li>
|
||||
<p>
|
||||
Postwoman's Proxy is hosted by ApolloTV.
|
||||
<br />Read the ApolloTV privacy policy
|
||||
<a
|
||||
href="https://apollotv.xyz/legal"
|
||||
target="_blank"
|
||||
>here</a>.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<!--
|
||||
PROXY SETTINGS URL AND KEY
|
||||
@@ -109,7 +122,7 @@
|
||||
// set the relevant values.
|
||||
themes: [
|
||||
{
|
||||
color: "rgb(37, 38, 40)",
|
||||
color: "#252628",
|
||||
name: "Kinda Dark",
|
||||
class: ""
|
||||
},
|
||||
@@ -205,7 +218,9 @@
|
||||
methods: {
|
||||
applyTheme(name, color) {
|
||||
this.applySetting("THEME_CLASS", name);
|
||||
document.querySelector('meta[name=theme-color]').setAttribute('content', color)
|
||||
document
|
||||
.querySelector("meta[name=theme-color]")
|
||||
.setAttribute("content", color);
|
||||
this.applySetting("THEME_TAB_COLOR", color);
|
||||
document.documentElement.className = name;
|
||||
let imgGitHub = document.getElementById("imgGitHub");
|
||||
@@ -243,7 +258,7 @@
|
||||
toggleSetting(key) {
|
||||
this.settings[key] = !this.settings[key];
|
||||
this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
|
||||
this.$router.replace('/settings', {
|
||||
this.$router.replace("/settings", {
|
||||
force: true
|
||||
});
|
||||
}
|
||||
|
||||
@@ -25,14 +25,9 @@
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<pw-section
|
||||
class="purple"
|
||||
label="Communication"
|
||||
id="response"
|
||||
ref="response"
|
||||
>
|
||||
<pw-section class="purple" label="Communication" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="log">Log</label>
|
||||
|
||||
@@ -9,7 +9,9 @@ export default {
|
||||
const vuexLocalStorage = new VuexPersist({
|
||||
key: 'vuex',
|
||||
storage: window.localStorage,
|
||||
reducer: ({ ...request }) => ({
|
||||
reducer: ({
|
||||
...request
|
||||
}) => ({
|
||||
...request
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user