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

Merge branch 'master' into update-proxy-info

Browse Source
This commit is contained in:
John Harker
2020-02-26 23:56:39 +00:00
committed by GitHub
parent f609d36818 679ef22438
commit 4c3248065e
87 changed files with 7368 additions and 3777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
pages/doc.vue
View File

@@ -11,11 +11,7 @@
<ul>
<li>
<label for="collectionUpload">
<button
class="icon"
@click="$refs.collectionUpload.click()"
v-tooltip="$t('json')"
>
<button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="$t('json')">
<i class="material-icons">folder</i>
<span>{{ $t("import_collections") }}</span>
</button>
@@ -39,7 +35,7 @@
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</li>
@@ -59,29 +55,17 @@
{{ $t("generate_docs_first") }}
</p>
<div>
<span
class="collection"
v-for="(collection, index) in this.items"
:key="index"
>
<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"
>
<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"
>
<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") }}
@@ -129,11 +113,7 @@
</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"
>
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
<span>
{{ header.key || $t("none") }}:
<code>{{ header.value || $t("none") }}</code>
@@ -142,11 +122,7 @@
</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"
>
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
<span>
{{ parameter.key || $t("none") }}:
<code>{{ parameter.value || $t("none") }}</code>
@@ -155,11 +131,7 @@
</span>
<h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
<span v-if="request.bodyParam">
<p
v-for="payload in request.bodyParam"
:key="payload.key"
class="doc-desc"
>
<p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
<span>
{{ payload.key || $t("none") }}:
<code>{{ payload.value || $t("none") }}</code>
@@ -237,11 +209,7 @@
</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"
>
<p v-for="header in request.headers" :key="header.key" class="doc-desc">
<span>
{{ header.key || $t("none") }}:
<code>{{ header.value || $t("none") }}</code>
@@ -250,11 +218,7 @@
</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"
>
<p v-for="parameter in request.params" :key="parameter.key" class="doc-desc">
<span>
{{ parameter.key || $t("none") }}:
<code>{{ parameter.value || $t("none") }}</code>
@@ -263,11 +227,7 @@
</span>
<h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
<span v-if="request.bodyParam">
<p
v-for="payload in request.bodyParam"
:key="payload.key"
class="doc-desc"
>
<p v-for="payload in request.bodyParam" :key="payload.key" class="doc-desc">
<span>
{{ payload.key || $t("none") }}:
<code>{{ payload.value || $t("none") }}</code>
@@ -342,53 +302,53 @@
</style>
<script>
import AceEditor from "../components/ace-editor";
import AceEditor from "../components/ace-editor"
export default {
components: {
"pw-section": () => import("../components/section"),
Editor: AceEditor
Editor: AceEditor,
},
data() {
return {
collectionJSON: "[]",
items: []
};
items: [],
}
},
methods: {
uploadCollection() {
this.rawInput = true;
let file = this.$refs.collectionUpload.files[0];
this.rawInput = true
let file = this.$refs.collectionUpload.files[0]
if (file !== undefined && file !== null) {
let reader = new FileReader();
let reader = new FileReader()
reader.onload = ({ target }) => {
this.collectionJSON = target.result;
};
reader.readAsText(file);
this.collectionJSON = target.result
}
reader.readAsText(file)
this.$toast.info(this.$t("file_imported"), {
icon: "attach_file"
});
icon: "attach_file",
})
} else {
this.$toast.error(this.$t("choose_file"), {
icon: "attach_file"
});
icon: "attach_file",
})
}
},
getDoc() {
try {
this.items = JSON.parse(this.collectionJSON);
this.items = JSON.parse(this.collectionJSON)
this.$toast.info(this.$t("docs_generated"), {
icon: "book"
});
icon: "book",
})
} catch (e) {
this.$toast.error(e, {
icon: "code"
});
icon: "code",
})
}
}
}
};
},
},
}
</script>

506
pages/graphql.vue
View File

@@ -10,6 +10,7 @@
id="url"
type="url"
v-model="url"
spellcheck="false"
@keyup.enter="getSchema()"
/>
</li>
@@ -31,11 +32,7 @@
<div class="flex-wrap">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button
class="icon"
@click="headers = []"
v-tooltip.bottom="$t('clear')"
>
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
<i class="material-icons">clear_all</i>
</button>
</div>
@@ -60,7 +57,7 @@
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event
value: $event,
})
"
autofocus
@@ -74,7 +71,7 @@
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value
value: $event.target.value,
})
"
autofocus
@@ -112,9 +109,7 @@
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse
? $t('expand_response')
: $t('collapse_response')
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
}"
>
<i class="material-icons">
@@ -140,7 +135,7 @@
</div>
</div>
<Editor
:value="schemaString"
:value="schema"
:lang="'graphqlschema'"
:options="{
maxLines: responseBodyMaxLines,
@@ -149,20 +144,16 @@
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</pw-section>
<pw-section class="cyan" :label="$t('query')" ref="query">
<div class="flex-wrap">
<div class="flex-wrap gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<button
class="icon"
@click="runQuery()"
v-tooltip.bottom="$t('run_query')"
>
<button @click="runQuery()" v-tooltip.bottom="$t('run_query')">
<i class="material-icons">play_arrow</i>
</button>
<button
@@ -184,7 +175,7 @@
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</pw-section>
@@ -199,7 +190,7 @@
fontSize: '16px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</pw-section>
@@ -219,8 +210,9 @@
</div>
</div>
<Editor
:value="responseString"
:value="response"
:lang="'json'"
:lint="false"
:options="{
maxLines: responseBodyMaxLines,
minLines: '16',
@@ -228,7 +220,7 @@
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false
useWorker: false,
}"
/>
</pw-section>
@@ -248,10 +240,7 @@
</label>
<div v-if="queryFields.length > 0" class="tab">
<div v-for="field in queryFields" :key="field.name">
<gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -267,10 +256,7 @@
</label>
<div v-if="mutationFields.length > 0" class="tab">
<div v-for="field in mutationFields" :key="field.name">
<gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -286,10 +272,7 @@
</label>
<div v-if="subscriptionFields.length > 0" class="tab">
<div v-for="field in subscriptionFields" :key="field.name">
<gql-field
:gqlField="field"
:jumpTypeCallback="handleJumpToType"
/>
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
@@ -304,15 +287,8 @@
{{ $t("types") }}
</label>
<div v-if="gqlTypes.length > 0" class="tab">
<div
v-for="type in gqlTypes"
:key="type.name"
:id="`type_${type.name}`"
>
<gql-type
:gqlType="type"
:jumpTypeCallback="handleJumpToType"
/>
<div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
<gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
</section>
@@ -339,20 +315,23 @@
max-height: calc(100vh - 186px);
overflow: auto;
}
.gqlRunQuery {
margin-bottom: 12px;
}
</style>
<script>
import axios from "axios";
import * as gql from "graphql";
import textareaAutoHeight from "../directives/textareaAutoHeight";
import { commonHeaders } from "../functions/headers";
import AceEditor from "../components/ace-editor";
import QueryEditor from "../components/graphql/queryeditor";
import { sendNetworkRequest } from "../functions/network";
import axios from "axios"
import * as gql from "graphql"
import textareaAutoHeight from "../directives/textareaAutoHeight"
import { commonHeaders } from "../functions/headers"
import AceEditor from "../components/ace-editor"
import QueryEditor from "../components/graphql/queryeditor"
import { sendNetworkRequest } from "../functions/network"
export default {
directives: {
textareaAutoHeight
textareaAutoHeight,
},
components: {
"pw-section": () => import("../components/section"),
@@ -360,212 +339,225 @@ export default {
"gql-type": () => import("../components/graphql/type"),
autocomplete: () => import("../components/autocomplete"),
Editor: AceEditor,
QueryEditor: QueryEditor
QueryEditor: QueryEditor,
},
data() {
return {
schemaString: "",
commonHeaders,
queryFields: [],
mutationFields: [],
subscriptionFields: [],
gqlTypes: [],
responseString: "",
copyButton: '<i class="material-icons">file_copy</i>',
downloadButton: '<i class="material-icons">get_app</i>',
doneButton: '<i class="material-icons">done</i>',
expandResponse: false,
responseBodyMaxLines: 16
};
responseBodyMaxLines: 16,
settings: {
SCROLL_INTO_ENABLED:
typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !== "undefined"
? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
: true,
},
}
},
computed: {
url: {
get() {
return this.$store.state.gql.url;
return this.$store.state.gql.url
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "url" });
}
this.$store.commit("setGQLState", { value, attribute: "url" })
},
},
headers: {
get() {
return this.$store.state.gql.headers;
return this.$store.state.gql.headers
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "headers" });
}
this.$store.commit("setGQLState", { value, attribute: "headers" })
},
},
gqlQueryString: {
get() {
return this.$store.state.gql.query;
return this.$store.state.gql.query
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "query" });
}
this.$store.commit("setGQLState", { value, attribute: "query" })
},
},
response: {
get() {
return this.$store.state.gql.response
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "response" })
},
},
schema: {
get() {
return this.$store.state.gql.schema
},
set(value) {
this.$store.commit("setGQLState", { value, attribute: "schema" })
},
},
variableString: {
get() {
return this.$store.state.gql.variablesJSONString;
return this.$store.state.gql.variablesJSONString
},
set(value) {
this.$store.commit("setGQLState", {
value,
attribute: "variablesJSONString"
});
}
attribute: "variablesJSONString",
})
},
},
headerString() {
const result = this.headers
.filter(({ key }) => !!key)
.map(({ key, value }) => `${key}: ${value}`)
.join(",\n");
return result === "" ? "" : `${result}`;
}
.join(",\n")
return result === "" ? "" : `${result}`
},
},
methods: {
handleJumpToType(type) {
const typesTab = document.getElementById("gqltypes-tab");
typesTab.checked = true;
const typesTab = document.getElementById("gqltypes-tab")
typesTab.checked = true
const rootTypeName = this.resolveRootType(type).name;
const rootTypeName = this.resolveRootType(type).name
const target = document.getElementById(`type_${rootTypeName}`);
if (target && this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED) {
const target = document.getElementById(`type_${rootTypeName}`)
if (target && this.settings.SCROLL_INTO_ENABLED) {
target.scrollIntoView({
behavior: "smooth"
});
behavior: "smooth",
})
}
},
resolveRootType(type) {
let t = type;
while (t.ofType != null) t = t.ofType;
return t;
let t = type
while (t.ofType != null) t = t.ofType
return t
},
copySchema() {
this.$refs.copySchemaCode.innerHTML = this.doneButton;
const aux = document.createElement("textarea");
aux.innerText = this.schemaString;
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$refs.copySchemaCode.innerHTML = this.doneButton
const aux = document.createElement("textarea")
aux.innerText = this.schema
document.body.appendChild(aux)
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
() => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
1000
);
icon: "done",
})
setTimeout(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000)
},
copyQuery() {
this.$refs.copyQueryButton.innerHTML = this.doneButton;
const aux = document.createElement("textarea");
aux.innerText = this.gqlQueryString;
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$refs.copyQueryButton.innerHTML = this.doneButton
const aux = document.createElement("textarea")
aux.innerText = this.gqlQueryString
document.body.appendChild(aux)
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
() => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
1000
);
icon: "done",
})
setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
},
copyResponse() {
this.$refs.copyResponseButton.innerHTML = this.doneButton;
const aux = document.createElement("textarea");
aux.innerText = this.responseString;
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
this.$refs.copyResponseButton.innerHTML = this.doneButton
const aux = document.createElement("textarea")
aux.innerText = this.response
document.body.appendChild(aux)
aux.select()
document.execCommand("copy")
document.body.removeChild(aux)
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done"
});
setTimeout(
() => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
1000
);
icon: "done",
})
setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
},
async runQuery() {
const startTime = Date.now();
this.$nuxt.$loading.start();
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED &&
this.scrollInto("response");
try {
let headers = {};
this.headers.forEach(header => {
headers[header.key] = header.value;
});
let variables = JSON.parse(this.variableString);
const gqlQueryString = this.gqlQueryString;
const reqOptions = {
method: "post",
url: this.url,
headers: {
...headers,
"content-type": "application/json"
},
data: JSON.stringify({ query: gqlQueryString, variables })
};
const data = await sendNetworkRequest(reqOptions, this.$store);
this.responseString = JSON.stringify(data.data, null, 2);
this.$nuxt.$loading.finish();
const duration = Date.now() - startTime;
this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done"
});
} catch (error) {
this.$nuxt.$loading.finish();
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error"
});
console.log("Error", error);
}
},
async getSchema() {
const startTime = Date.now();
this.schemaString = this.$t("loading");
this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED &&
this.scrollInto("schema");
const startTime = Date.now()
// Start showing the loading bar as soon as possible.
// The nuxt axios module will hide it when the request is made.
this.$nuxt.$loading.start();
this.$nuxt.$loading.start()
this.response = this.$t("loading")
if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("response")
try {
const query = JSON.stringify({
query: gql.getIntrospectionQuery()
});
let headers = {};
let headers = {}
this.headers.forEach(header => {
headers[header.key] = header.value;
});
headers[header.key] = header.value
})
let variables = JSON.parse(this.variableString)
const gqlQueryString = this.gqlQueryString
const reqOptions = {
method: "post",
url: this.url,
headers: {
...headers,
"content-type": "application/json"
"content-type": "application/json",
},
data: query
};
data: JSON.stringify({ query: gqlQueryString, variables }),
}
// console.log(reqOptions);
const data = await sendNetworkRequest(reqOptions, this.$store)
this.response = JSON.stringify(data.data, null, 2)
this.$nuxt.$loading.finish()
const duration = Date.now() - startTime
this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done",
})
} catch (error) {
this.response = `${error}. ${this.$t("check_console_details")}`
this.$nuxt.$loading.finish()
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error",
})
console.log("Error", error)
}
},
async getSchema() {
const startTime = Date.now()
// Start showing the loading bar as soon as possible.
// The nuxt axios module will hide it when the request is made.
this.$nuxt.$loading.start()
this.schema = this.$t("loading")
if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("schema")
try {
const query = JSON.stringify({
query: gql.getIntrospectionQuery(),
})
let headers = {}
this.headers.forEach(header => {
headers[header.key] = header.value
})
const reqOptions = {
method: "post",
url: this.url,
headers: {
...headers,
"content-type": "application/json",
},
data: query,
}
const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
? {
@@ -575,140 +567,130 @@ export default {
`https://postwoman.apollosoftware.xyz/`,
data: reqOptions
}
: reqOptions;
: reqOptions
const res = await axios(reqConfig);
const res = await axios(reqConfig)
const data = this.$store.state.postwoman.settings.PROXY_ENABLED
? res.data
: res;
const schema = gql.buildClientSchema(data.data.data);
this.schemaString = gql.printSchema(schema, {
commentDescriptions: true
});
const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
const schema = gql.buildClientSchema(data.data.data)
this.schema = gql.printSchema(schema, {
commentDescriptions: true,
})
if (schema.getQueryType()) {
const fields = schema.getQueryType().getFields();
const qFields = [];
const fields = schema.getQueryType().getFields()
const qFields = []
for (const field in fields) {
qFields.push(fields[field]);
qFields.push(fields[field])
}
this.queryFields = qFields;
this.queryFields = qFields
}
if (schema.getMutationType()) {
const fields = schema.getMutationType().getFields();
const mFields = [];
const fields = schema.getMutationType().getFields()
const mFields = []
for (const field in fields) {
mFields.push(fields[field]);
mFields.push(fields[field])
}
this.mutationFields = mFields;
this.mutationFields = mFields
}
if (schema.getSubscriptionType()) {
const fields = schema.getSubscriptionType().getFields();
const sFields = [];
const fields = schema.getSubscriptionType().getFields()
const sFields = []
for (const field in fields) {
sFields.push(fields[field]);
sFields.push(fields[field])
}
this.subscriptionFields = sFields;
this.subscriptionFields = sFields
}
const typeMap = schema.getTypeMap();
const types = [];
const typeMap = schema.getTypeMap()
const types = []
const queryTypeName = schema.getQueryType()
? schema.getQueryType().name
: "";
const mutationTypeName = schema.getMutationType()
? schema.getMutationType().name
: "";
const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ""
const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ""
const subscriptionTypeName = schema.getSubscriptionType()
? schema.getSubscriptionType().name
: "";
: ""
for (const type in typeMap) {
if (
!typeMap[type].name.startsWith("__") &&
![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
typeMap[type].name
) &&
![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
typeMap[type] instanceof gql.GraphQLObjectType
) {
types.push(typeMap[type]);
types.push(typeMap[type])
}
}
this.gqlTypes = types;
this.$refs.queryEditor.setValidationSchema(schema);
this.$nuxt.$loading.finish();
const duration = Date.now() - startTime;
this.gqlTypes = types
this.$refs.queryEditor.setValidationSchema(schema)
this.$nuxt.$loading.finish()
const duration = Date.now() - startTime
this.$toast.info(this.$t("finished_in", { duration }), {
icon: "done"
});
icon: "done",
})
} catch (error) {
this.$nuxt.$loading.finish();
this.schemaString = `${error}. ${this.$t("check_console_details")}`;
this.$nuxt.$loading.finish()
this.schema = `${error}. ${this.$t("check_console_details")}`
this.$toast.error(`${error} ${this.$t("f12_details")}`, {
icon: "error"
});
console.log("Error", error);
icon: "error",
})
console.log("Error", error)
}
},
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse;
this.responseBodyMaxLines =
this.responseBodyMaxLines == Infinity ? 16 : Infinity;
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = JSON.stringify(this.schemaString, null, 2);
const file = new Blob([dataToWrite], { type: "application/json" });
const a = document.createElement("a");
const url = URL.createObjectURL(file);
a.href = url;
a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]");
document.body.appendChild(a);
a.click();
this.$refs.downloadResponse.innerHTML = this.doneButton;
const dataToWrite = JSON.stringify(this.schema, null, 2)
const file = new Blob([dataToWrite], { type: "application/json" })
const a = document.createElement("a")
const url = URL.createObjectURL(file)
a.href = url
a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]")
document.body.appendChild(a)
a.click()
this.$refs.downloadResponse.innerHTML = this.doneButton
this.$toast.success(this.$t("download_started"), {
icon: "done"
});
icon: "done",
})
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
this.$refs.downloadResponse.innerHTML = this.downloadButton;
}, 1000);
document.body.removeChild(a)
window.URL.revokeObjectURL(url)
this.$refs.downloadResponse.innerHTML = this.downloadButton
}, 1000)
},
addRequestHeader(index) {
this.$store.commit("addGQLHeader", {
key: "",
value: ""
});
return false;
value: "",
})
return false
},
removeRequestHeader(index) {
// .slice() is used so we get a separate array, rather than just a reference
const oldHeaders = this.headers.slice();
const oldHeaders = this.headers.slice()
this.$store.commit("removeGQLHeader", index);
this.$store.commit("removeGQLHeader", index)
this.$toast.error(this.$t("deleted"), {
icon: "delete",
action: {
text: this.$t("undo"),
duration: 4000,
onClick: (e, toastObject) => {
this.headers = oldHeaders;
toastObject.remove();
}
}
});
// console.log(oldHeaders);
this.headers = oldHeaders
toastObject.remove()
},
},
})
},
scrollInto(view) {
this.$refs[view].$el.scrollIntoView({
behavior: "smooth"
});
}
}
};
behavior: "smooth",
})
},
},
}
</script>

1917
pages/index.vue
View File

File diff suppressed because it is too large Load Diff

2937
pages/index.vue.orig Normal file
View File

File diff suppressed because it is too large Load Diff

236
pages/realtime.vue
View File

@@ -11,6 +11,7 @@
<input
id="url"
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -19,12 +20,7 @@
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
>
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
{{ !connectionState ? $t("connect") : $t("disconnect") }}
<span>
<i class="material-icons">
@@ -37,12 +33,7 @@
</ul>
</pw-section>
<pw-section
class="purple"
:label="$t('communication')"
id="response"
ref="response"
>
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
<ul>
<li>
<label for="log">{{ $t("log") }}</label>
@@ -75,12 +66,7 @@
<div>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
>
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
{{ $t("send") }}
<span>
<i class="material-icons">send</i>
@@ -127,12 +113,7 @@
</ul>
</pw-section>
<pw-section
class="purple"
:label="$t('communication')"
id="response"
ref="response"
>
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
<ul>
<li>
<label for="log">{{ $t("events") }}</label>
@@ -187,7 +168,7 @@ div.log {
<script>
export default {
components: {
"pw-section": () => import("../components/section")
"pw-section": () => import("../components/section"),
},
data() {
return {
@@ -196,132 +177,132 @@ export default {
socket: null,
communication: {
log: null,
input: ""
input: "",
},
connectionSSEState: false,
server: "https://express-eventsource.herokuapp.com/events",
sse: null,
events: {
log: null,
input: ""
}
};
input: "",
},
}
},
computed: {
urlValid() {
const protocol = "^(wss?:\\/\\/)?";
const protocol = "^(wss?:\\/\\/)?"
const validIP = new RegExp(
`${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
);
)
const validHostname = new RegExp(
`${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
);
return validIP.test(this.url) || validHostname.test(this.url);
)
return validIP.test(this.url) || validHostname.test(this.url)
},
serverValid() {
const protocol = "^(https?:\\/\\/)?";
const protocol = "^(https?:\\/\\/)?"
const validIP = new RegExp(
`${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
);
)
const validHostname = new RegExp(
`${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
);
return validIP.test(this.server) || validHostname.test(this.server);
}
)
return validIP.test(this.server) || validHostname.test(this.server)
},
},
methods: {
toggleConnection() {
// If it is connecting:
if (!this.connectionState) return this.connect();
if (!this.connectionState) return this.connect()
// Otherwise, it's disconnecting.
else return this.disconnect();
else return this.disconnect()
},
connect() {
this.communication.log = [
{
payload: this.$t("connecting_to", { name: this.url }),
source: "info",
color: "var(--ac-color)"
}
];
color: "var(--ac-color)",
},
]
try {
this.socket = new WebSocket(this.url);
this.socket = new WebSocket(this.url)
this.socket.onopen = event => {
this.connectionState = true;
this.connectionState = true
this.communication.log = [
{
payload: this.$t("connected_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
ts: new Date().toLocaleTimeString(),
},
]
this.$toast.success(this.$t("connected"), {
icon: "sync"
});
};
icon: "sync",
})
}
this.socket.onerror = event => {
this.handleError();
};
this.handleError()
}
this.socket.onclose = event => {
this.connectionState = false;
this.connectionState = false
this.communication.log.push({
payload: this.$t("disconnected_from", { name: this.url }),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
ts: new Date().toLocaleTimeString(),
})
this.$toast.error(this.$t("disconnected"), {
icon: "sync_disabled"
});
};
icon: "sync_disabled",
})
}
this.socket.onmessage = event => {
this.communication.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
ts: new Date().toLocaleTimeString(),
})
}
} catch (ex) {
this.handleError(ex);
this.handleError(ex)
this.$toast.error(this.$t("something_went_wrong"), {
icon: "error"
});
icon: "error",
})
}
},
disconnect() {
this.socket.close();
this.socket.close()
},
handleError(error) {
this.disconnect();
this.connectionState = false;
this.disconnect()
this.connectionState = false
this.communication.log.push({
payload: this.$t("error_occurred"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
ts: new Date().toLocaleTimeString(),
})
if (error !== null)
this.communication.log.push({
payload: error,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
ts: new Date().toLocaleTimeString(),
})
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
const message = this.communication.input
this.socket.send(message)
this.communication.log.push({
payload: message,
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
ts: new Date().toLocaleTimeString(),
})
this.communication.input = ""
},
collapse({ target }) {
const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle("hidden");
const el = target.parentNode.className
document.getElementsByClassName(el)[0].classList.toggle("hidden")
},
getSourcePrefix(source) {
const sourceEmojis = {
@@ -330,70 +311,69 @@ export default {
// Source used for client to server messages.
client: "\t👽 [SENT]:\t",
// Source used for server to client messages.
server: "\t📥 [RECEIVED]:\t"
};
if (Object.keys(sourceEmojis).includes(source))
return sourceEmojis[source];
return "";
server: "\t📥 [RECEIVED]:\t",
}
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
return ""
},
toggleSSEConnection() {
// If it is connecting:
if (!this.connectionSSEState) return this.start();
if (!this.connectionSSEState) return this.start()
// Otherwise, it's disconnecting.
else return this.stop();
else return this.stop()
},
start() {
this.events.log = [
{
payload: this.$t("connecting_to", { name: this.server }),
source: "info",
color: "var(--ac-color)"
}
];
color: "var(--ac-color)",
},
]
if (typeof EventSource !== "undefined") {
try {
this.sse = new EventSource(this.server);
this.sse = new EventSource(this.server)
this.sse.onopen = event => {
this.connectionSSEState = true;
this.connectionSSEState = true
this.events.log = [
{
payload: this.$t("connected_to", { name: this.server }),
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
ts: new Date().toLocaleTimeString(),
},
]
this.$toast.success(this.$t("connected"), {
icon: "sync"
});
};
icon: "sync",
})
}
this.sse.onerror = event => {
this.handleSSEError();
};
this.handleSSEError()
}
this.sse.onclose = event => {
this.connectionSSEState = false;
this.connectionSSEState = false
this.events.log.push({
payload: this.$t("disconnected_from", { name: this.server }),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
ts: new Date().toLocaleTimeString(),
})
this.$toast.error(this.$t("disconnected"), {
icon: "sync_disabled"
});
};
icon: "sync_disabled",
})
}
this.sse.onmessage = event => {
this.events.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
ts: new Date().toLocaleTimeString(),
})
}
} catch (ex) {
this.handleSSEError(ex);
this.handleSSEError(ex)
this.$toast.error(this.$t("something_went_wrong"), {
icon: "error"
});
icon: "error",
})
}
} else {
this.events.log = [
@@ -401,38 +381,38 @@ export default {
payload: this.$t("browser_support_sse"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
}
];
ts: new Date().toLocaleTimeString(),
},
]
}
},
handleSSEError(error) {
this.stop();
this.connectionSSEState = false;
this.stop()
this.connectionSSEState = false
this.events.log.push({
payload: this.$t("error_occurred"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
ts: new Date().toLocaleTimeString(),
})
if (error !== null)
this.events.log.push({
payload: error,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
ts: new Date().toLocaleTimeString(),
})
},
stop() {
this.sse.onclose();
this.sse.close();
}
this.sse.onclose()
this.sse.close()
},
},
updated: function() {
this.$nextTick(function() {
const divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
});
}
};
const divLog = document.getElementById("log")
divLog.scrollBy(0, divLog.scrollHeight + 100)
})
},
}
</script>

234
pages/settings.vue
View File

@@ -12,14 +12,14 @@
/>
<i v-else class="material-icons">account_circle</i>
<span>
{{ fb.currentUser.displayName || "Name not found" }}
{{ fb.currentUser.displayName || $t("nothing_found") }}
</span>
</button>
<br />
<button class="icon">
<i class="material-icons">email</i>
<span>
{{ fb.currentUser.email || "Email not found" }}
{{ fb.currentUser.email || $t("nothing_found") }}
</span>
</button>
<br />
@@ -88,18 +88,14 @@
<li>
<label>{{ $t("background") }}</label>
<div class="backgrounds">
<span
:key="theme.class"
@click="applyTheme(theme)"
v-for="theme in themes"
>
<span :key="theme.class" @click="applyTheme(theme)" v-for="theme in themes">
<swatch
:active="settings.THEME_CLASS === theme.class"
:class="{ vibrant: theme.vibrant }"
:color="theme.color"
:name="theme.name"
class="bg"
></swatch>
/>
</span>
</div>
</li>
@@ -110,7 +106,7 @@
<div class="colors">
<span
:key="entry.color"
@click.prevent="setActiveColor(entry.color, entry.vibrant)"
@click="setActiveColor(entry.color, entry.vibrant)"
v-for="entry in colors"
>
<swatch
@@ -132,14 +128,12 @@
@change="toggleSetting('FRAME_COLORS_ENABLED')"
>
{{ $t("multi_color") }}
{{
settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled")
}}
{{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
</li>
</ul>
<ul>
</ul>
<ul>
<li>
<span>
<pw-toggle
@@ -147,9 +141,7 @@
@change="toggleSetting('SCROLL_INTO_ENABLED')"
>
{{ $t("scrollInto_use_toggle") }}
{{
settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled")
}}
{{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
</span>
</li>
@@ -176,10 +168,7 @@
<li>
<div class="flex-wrap">
<span>
<pw-toggle
:on="settings.PROXY_ENABLED"
@change="toggleSetting('PROXY_ENABLED')"
>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
{{ $t("proxy") }}
{{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
</pw-toggle>
@@ -200,11 +189,7 @@
<li>
<div class="flex-wrap">
<label for="url">{{ $t("url") }}</label>
<button
class="icon"
@click="resetProxy"
v-tooltip.bottom="$t('reset_default')"
>
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
<i class="material-icons">clear_all</i>
</button>
</div>
@@ -226,10 +211,8 @@
class="link"
href="https://apollosoftware.xyz/legal/postwoman"
target="_blank"
rel="noopener"
>
{{ $t("apollosw_privacy_policy") }} </a
>.
rel="noopener">
{{ $t("apollosw_privacy_policy") }} </a>.
</p>
</li>
</ul>
@@ -255,14 +238,14 @@
<style scoped lang="scss"></style>
<script>
import firebase from "firebase/app";
import { fb } from "../functions/fb";
import firebase from "firebase/app"
import { fb } from "../functions/fb"
export default {
components: {
"pw-section": () => import("../components/section"),
"pw-toggle": () => import("../components/toggle"),
swatch: () => import("../components/settings/swatch")
swatch: () => import("../components/settings/swatch"),
},
data() {
@@ -275,20 +258,20 @@ export default {
color: "#202124",
name: this.$t("kinda_dark"),
class: "",
aceEditor: "twilight"
aceEditor: "twilight",
},
{
color: "#ffffff",
name: this.$t("clearly_white"),
vibrant: true,
class: "light",
aceEditor: "iplastic"
aceEditor: "iplastic",
},
{
color: "#000000",
name: this.$t("just_black"),
class: "black",
aceEditor: "vibrant_ink"
aceEditor: "vibrant_ink",
},
{
color: "var(--ac-color)",
@@ -297,8 +280,8 @@ export default {
class: "auto",
aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
? "iplastic"
: "twilight"
}
: "twilight",
},
],
// You can define a new color here! It will simply store the color value.
colors: [
@@ -306,43 +289,43 @@ export default {
{
color: "#50fa7b",
name: this.$t("green"),
vibrant: true
vibrant: true,
},
{
color: "#f1fa8c",
name: this.$t("yellow"),
vibrant: true
vibrant: true,
},
{
color: "#ff79c6",
name: this.$t("pink"),
vibrant: true
vibrant: true,
},
{
color: "#ff5555",
name: this.$t("red"),
vibrant: false
vibrant: false,
},
{
color: "#bd93f9",
name: this.$t("purple"),
vibrant: true
vibrant: true,
},
{
color: "#ffb86c",
name: this.$t("orange"),
vibrant: true
vibrant: true,
},
{
color: "#8be9fd",
name: this.$t("cyan"),
vibrant: true
vibrant: true,
},
{
color: "#57b5f9",
name: this.$t("blue"),
vibrant: false
}
vibrant: false,
},
],
settings: {
@@ -352,95 +335,87 @@ export default {
? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
: true,
THEME_CLASS: "",
THEME_COLOR: "",
THEME_TAB_COLOR: "",
THEME_COLOR_VIBRANT: true,
FRAME_COLORS_ENABLED:
this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
PROXY_ENABLED:
this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL:
this.$store.state.postwoman.settings.PROXY_URL ||
"https://postwoman.apollosoftware.xyz/",
FRAME_COLORS_ENABLED: this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "https://postwoman.apollosoftware.xyz/",
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || "",
EXTENSIONS_ENABLED:
typeof this.$store.state.postwoman.settings.EXTENSIONS_ENABLED !==
"undefined"
typeof this.$store.state.postwoman.settings.EXTENSIONS_ENABLED !== "undefined"
? this.$store.state.postwoman.settings.EXTENSIONS_ENABLED
: true
: true,
},
doneButton: '<i class="material-icons">done</i>',
fb
};
fb,
}
},
watch: {
proxySettings: {
deep: true,
handler(value) {
this.applySetting("PROXY_URL", value.url);
this.applySetting("PROXY_KEY", value.key);
}
}
this.applySetting("PROXY_URL", value.url)
this.applySetting("PROXY_KEY", value.key)
},
},
},
methods: {
applyTheme({ class: name, color, aceEditor }) {
this.applySetting("THEME_CLASS", name);
this.applySetting("THEME_ACE_EDITOR", aceEditor);
document
.querySelector("meta[name=theme-color]")
.setAttribute("content", color);
this.applySetting("THEME_TAB_COLOR", color);
document.documentElement.className = name;
this.applySetting("THEME_CLASS", name)
this.applySetting("THEME_ACE_EDITOR", aceEditor)
document.querySelector("meta[name=theme-color]").setAttribute("content", color)
this.applySetting("THEME_TAB_COLOR", color)
document.documentElement.className = name
},
setActiveColor(color, vibrant) {
// By default, the color is vibrant.
if (vibrant === null) vibrant = true;
document.documentElement.style.setProperty("--ac-color", color);
if (vibrant === null) vibrant = true
document.documentElement.style.setProperty("--ac-color", color)
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
);
this.applySetting("THEME_COLOR", color.toUpperCase());
this.applySetting("THEME_COLOR_VIBRANT", vibrant);
)
this.applySetting("THEME_COLOR", color.toUpperCase())
this.applySetting("THEME_COLOR_VIBRANT", vibrant)
},
getActiveColor() {
// This strips extra spaces and # signs from the strings.
const strip = str => str.replace(/#/g, "").replace(/ /g, "");
const strip = str => str.replace(/#/g, "").replace(/ /g, "")
return `#${strip(
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--ac-color")
).toUpperCase()}`;
window.getComputedStyle(document.documentElement).getPropertyValue("--ac-color")
).toUpperCase()}`
},
applySetting(key, value) {
this.settings[key] = value;
this.$store.commit("postwoman/applySetting", [key, value]);
this.settings[key] = value
this.$store.commit("postwoman/applySetting", [key, value])
},
toggleSetting(key) {
this.settings[key] = !this.settings[key];
this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
this.settings[key] = !this.settings[key]
this.$store.commit("postwoman/applySetting", [key, this.settings[key]])
},
logout() {
fb.currentUser = null;
fb.currentUser = null
firebase
.auth()
.signOut()
.catch(err => {
this.$toast.show(err.message || err, {
icon: "error"
});
});
icon: "error",
})
})
this.$toast.info(this.$t("logged_out"), {
icon: "vpn_key"
});
icon: "vpn_key",
})
},
signInWithGoogle() {
const provider = new firebase.auth.GoogleAuthProvider();
const provider = new firebase.auth.GoogleAuthProvider()
firebase
.auth()
.signInWithPopup(provider)
@@ -453,24 +428,24 @@ export default {
action: {
text: this.$t("yes"),
onClick: (e, toastObject) => {
fb.writeSettings("syncHistory", true);
fb.writeSettings("syncCollections", true);
fb.writeSettings("syncEnvironments", true);
this.$router.push({ path: "/settings" });
toastObject.remove();
}
}
});
fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true)
this.$router.push({ path: "/settings" })
toastObject.remove()
},
},
})
}
})
.catch(err => {
this.$toast.show(err.message || err, {
icon: "error"
});
});
icon: "error",
})
})
},
signInWithGithub() {
const provider = new firebase.auth.GithubAuthProvider();
const provider = new firebase.auth.GithubAuthProvider()
firebase
.auth()
.signInWithPopup(provider)
@@ -483,54 +458,51 @@ export default {
action: {
text: this.$t("yes"),
onClick: (e, toastObject) => {
fb.writeSettings("syncHistory", true);
fb.writeSettings("syncCollections", true);
fb.writeSettings("syncEnvironments", true);
this.$router.push({ path: "/settings" });
toastObject.remove();
}
}
});
fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true)
this.$router.push({ path: "/settings" })
toastObject.remove()
},
},
})
}
})
.catch(err => {
this.$toast.show(err.message || err, {
icon: "error"
});
});
icon: "error",
})
})
},
toggleSettings(s, v) {
fb.writeSettings(s, !v);
fb.writeSettings(s, !v)
},
initSettings() {
fb.writeSettings("syncHistory", true);
fb.writeSettings("syncCollections", true);
fb.writeSettings("syncEnvironments", true);
fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true)
},
resetProxy({ target }) {
this.settings.PROXY_URL = `https://postwoman.apollosoftware.xyz/`;
target.innerHTML = this.doneButton;
this.$toast.info(this.$t("cleared"), {
icon: "clear_all"
});
setTimeout(
() => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
1000
);
}
icon: "clear_all",
})
setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
},
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
this.settings.THEME_COLOR = this.getActiveColor()
},
computed: {
proxySettings() {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
};
}
}
};
key: this.settings.PROXY_KEY,
}
},
},
}
</script>