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

🚨 Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-02 11:02:21 +05:30
parent 9023e62fb4
commit b95eaf1aed
28 changed files with 1644 additions and 1496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
pages/index.vue
View File

@@ -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>
@@ -518,11 +532,11 @@
</div>
<div id="response-details-wrapper">
<pre><code
ref="responseBody"
id="body"
rows="16"
placeholder="(waiting to send request)"
>{{response.body}}</code></pre>
ref="responseBody"
id="body"
rows="16"
placeholder="(waiting to send request)"
>{{response.body}}</code></pre>
<iframe
:class="{hidden: !previewEnabled}"
class="covers-response"
@@ -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 = [
{
@@ -633,11 +647,11 @@ export default {
collections,
saveRequestAs
},
data () {
data() {
return {
showModal: false,
showPreRequestScript: false,
preRequestScript: '',
preRequestScript: "",
copyButton: '<i class="material-icons">file_copy</i>',
copiedButton: '<i class="material-icons">done</i>',
isHidden: true,
@@ -677,10 +691,13 @@ export default {
},
watch: {
urlExcludes: {
deep: true,
handler () {
this.$store.commit("postwoman/applySetting", ['URL_EXCLUDES', Object.assign({}, this.urlExcludes)]);
}
deep: true,
handler() {
this.$store.commit("postwoman/applySetting", [
"URL_EXCLUDES",
Object.assign({}, this.urlExcludes)
]);
}
},
contentType(val) {
this.rawInput = !this.knownContentTypes.includes(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);
@@ -1052,7 +1153,7 @@ export default {
});
},
getVariablesFromPreRequestScript() {
if(!this.preRequestScript) {
if (!this.preRequestScript) {
return {};
}
return getEnvironmentVariablesFromScript(this.preRequestScript);
@@ -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"]) {
@@ -1586,7 +1707,7 @@ export default {
this.showRequestModal = false;
this.editRequest = {};
},
setExclude (excludedField, excluded) {
setExclude(excludedField, excluded) {
if (excludedField === "auth") {
this.urlExcludes.auth = excluded;
this.urlExcludes.httpUser = excluded;
@@ -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() {
@@ -1607,11 +1730,11 @@ export default {
},
created() {
this.urlExcludes = this.$store.state.postwoman.settings.URL_EXCLUDES || {
// Exclude authentication by default for security reasons.
auth: true,
httpUser: true,
httpPassword: true,
bearerToken: true
// Exclude authentication by default for security reasons.
auth: true,
httpUser: true,
httpPassword: true,
bearerToken: true
};
if (Object.keys(this.$route.query).length)

353
pages/settings.vue
View File

@@ -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
@@ -84,181 +97,183 @@
</template>
<style scoped>
.info {
margin-left: 4px;
color: var(--fg-light-color);
}
.info {
margin-left: 4px;
color: var(--fg-light-color);
}
</style>
<script>
import section from "../components/section";
import swatch from "../components/settings/swatch";
import toggle from "../components/toggle";
import section from "../components/section";
import swatch from "../components/settings/swatch";
import toggle from "../components/toggle";
export default {
components: {
"pw-section": section,
"pw-toggle": toggle,
swatch: swatch
},
export default {
components: {
"pw-section": section,
"pw-toggle": toggle,
swatch: swatch
},
data() {
return {
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
// You should copy the existing light theme as a template and then just
// set the relevant values.
themes: [
{
color: "rgb(37, 38, 40)",
name: "Kinda Dark",
class: ""
},
{
color: "#ffffff",
name: "Clearly White",
vibrant: true,
class: "light"
},
{
color: "#000000",
name: "Just Black",
class: "black"
},
{
color: "var(--bg-color)",
name: "Auto (system)",
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
class: "auto"
}
],
// You can define a new color here! It will simply store the color value.
colors: [
// If the color is vibrant, black is used as the active foreground color.
{
color: "#50fa7b",
name: "Green",
vibrant: true
},
{
color: "#f1fa8c",
name: "Yellow",
vibrant: true
},
{
color: "#ff79c6",
name: "Pink",
vibrant: true
},
{
color: "#ff5555",
name: "Red",
vibrant: false
},
{
color: "#bd93f9",
name: "Purple",
vibrant: true
},
{
color: "#ffb86c",
name: "Orange",
vibrant: true
},
{
color: "#8be9fd",
name: "Cyan",
vibrant: true
},
{
color: "#57b5f9",
name: "Blue",
vibrant: false
}
],
settings: {
THEME_CLASS: this.$store.state.postwoman.settings.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 || "",
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
data() {
return {
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
// You should copy the existing light theme as a template and then just
// set the relevant values.
themes: [
{
color: "#252628",
name: "Kinda Dark",
class: ""
},
{
color: "#ffffff",
name: "Clearly White",
vibrant: true,
class: "light"
},
{
color: "#000000",
name: "Just Black",
class: "black"
},
{
color: "var(--bg-color)",
name: "Auto (system)",
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
class: "auto"
}
};
},
watch: {
proxySettings: {
deep: true,
handler(value) {
this.applySetting("PROXY_URL", value.url);
this.applySetting("PROXY_KEY", value.key);
],
// You can define a new color here! It will simply store the color value.
colors: [
// If the color is vibrant, black is used as the active foreground color.
{
color: "#50fa7b",
name: "Green",
vibrant: true
},
{
color: "#f1fa8c",
name: "Yellow",
vibrant: true
},
{
color: "#ff79c6",
name: "Pink",
vibrant: true
},
{
color: "#ff5555",
name: "Red",
vibrant: false
},
{
color: "#bd93f9",
name: "Purple",
vibrant: true
},
{
color: "#ffb86c",
name: "Orange",
vibrant: true
},
{
color: "#8be9fd",
name: "Cyan",
vibrant: true
},
{
color: "#57b5f9",
name: "Blue",
vibrant: false
}
],
settings: {
THEME_CLASS: this.$store.state.postwoman.settings.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 || "",
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
}
},
};
},
methods: {
applyTheme(name, color) {
this.applySetting("THEME_CLASS", name);
document.querySelector('meta[name=theme-color]').setAttribute('content', color)
this.applySetting("THEME_TAB_COLOR", color);
document.documentElement.className = name;
let imgGitHub = document.getElementById("imgGitHub");
imgGitHub.style["filter"] = "";
imgGitHub.style["webkit-filter"] = "invert(100%)";
if (name.includes("light")) {
imgGitHub.style["filter"] = "invert(100%)";
imgGitHub.style["webkit-filter"] = "invert(100%)";
}
},
setActiveColor(color, vibrant) {
// By default, the color is vibrant.
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
);
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, "");
return `#${strip(
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--ac-color")
).toUpperCase()}`;
},
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.$router.replace('/settings', {
force: true
});
}
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
},
computed: {
proxySettings() {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
};
watch: {
proxySettings: {
deep: true,
handler(value) {
this.applySetting("PROXY_URL", value.url);
this.applySetting("PROXY_KEY", value.key);
}
}
};
},
methods: {
applyTheme(name, color) {
this.applySetting("THEME_CLASS", name);
document
.querySelector("meta[name=theme-color]")
.setAttribute("content", color);
this.applySetting("THEME_TAB_COLOR", color);
document.documentElement.className = name;
let imgGitHub = document.getElementById("imgGitHub");
imgGitHub.style["filter"] = "";
imgGitHub.style["webkit-filter"] = "invert(100%)";
if (name.includes("light")) {
imgGitHub.style["filter"] = "invert(100%)";
imgGitHub.style["webkit-filter"] = "invert(100%)";
}
},
setActiveColor(color, vibrant) {
// By default, the color is vibrant.
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
);
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, "");
return `#${strip(
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--ac-color")
).toUpperCase()}`;
},
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.$router.replace("/settings", {
force: true
});
}
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
},
computed: {
proxySettings() {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
};
}
}
};
</script>

317
pages/websocket.vue
View File

@@ -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>
@@ -74,176 +69,176 @@
</div>
</template>
<style lang="scss">
div.log {
margin: 4px;
padding: 8px 16px;
width: calc(100% - 8px);
border-radius: 8px;
background-color: var(--bg-dark-color);
color: var(--fg-color);
height: 256px;
overflow: auto;
div.log {
margin: 4px;
padding: 8px 16px;
width: calc(100% - 8px);
border-radius: 8px;
background-color: var(--bg-dark-color);
color: var(--fg-color);
height: 256px;
overflow: auto;
&,
span {
font-size: 18px;
font-family: "Roboto Mono", monospace;
}
span {
display: block;
white-space: pre-wrap;
}
&,
span {
font-size: 18px;
font-family: "Roboto Mono", monospace;
}
span {
display: block;
white-space: pre-wrap;
}
}
</style>
<script>
import section from "../components/section";
export default {
components: {
"pw-section": section
},
data() {
return {
connectionState: false,
url: "wss://echo.websocket.org",
socket: null,
communication: {
log: null,
input: ""
}
};
},
computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
},
urlValid() {
const pattern = new RegExp(
"^(wss?:\\/\\/)?" +
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
"((\\d{1,3}\\.){3}\\d{1,3}))" +
"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
"(\\?[;&a-z\\d%_.~+=-]*)?" +
"(\\#[-a-z\\d_]*)?$",
"i"
);
return pattern.test(this.url);
import section from "../components/section";
export default {
components: {
"pw-section": section
},
data() {
return {
connectionState: false,
url: "wss://echo.websocket.org",
socket: null,
communication: {
log: null,
input: ""
}
};
},
computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
},
methods: {
toggleConnection() {
// If it is connecting:
if (!this.connectionState) return this.connect();
// Otherwise, it's disconnecting.
else return this.disconnect();
},
connect() {
this.communication.log = [
{
payload: `Connecting to ${this.url}...`,
source: "info",
color: "var(--ac-color)"
}
];
try {
this.socket = new WebSocket(this.url);
this.socket.onopen = event => {
this.connectionState = true;
this.communication.log = [
{
payload: `Connected to ${this.url}.`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success("Connected", {
icon: "sync"
});
};
this.socket.onerror = event => {
this.handleError();
};
this.socket.onclose = event => {
this.connectionState = false;
this.communication.log.push({
payload: `Disconnected from ${this.url}.`,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
this.$toast.error("Disconnected", {
icon: "sync_disabled"
});
};
this.socket.onmessage = event => {
this.communication.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
} catch (ex) {
this.handleError(ex);
this.$toast.error("Something went wrong!", {
icon: "error"
});
}
},
disconnect() {
if (this.socket != null) this.socket.close();
},
handleError(error) {
this.disconnect();
this.connectionState = false;
this.communication.log.push({
payload: `An error has occurred.`,
urlValid() {
const pattern = new RegExp(
"^(wss?:\\/\\/)?" +
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
"((\\d{1,3}\\.){3}\\d{1,3}))" +
"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
"(\\?[;&a-z\\d%_.~+=-]*)?" +
"(\\#[-a-z\\d_]*)?$",
"i"
);
return pattern.test(this.url);
}
},
methods: {
toggleConnection() {
// If it is connecting:
if (!this.connectionState) return this.connect();
// Otherwise, it's disconnecting.
else return this.disconnect();
},
connect() {
this.communication.log = [
{
payload: `Connecting to ${this.url}...`,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
if (error != null)
color: "var(--ac-color)"
}
];
try {
this.socket = new WebSocket(this.url);
this.socket.onopen = event => {
this.connectionState = true;
this.communication.log = [
{
payload: `Connected to ${this.url}.`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success("Connected", {
icon: "sync"
});
};
this.socket.onerror = event => {
this.handleError();
};
this.socket.onclose = event => {
this.connectionState = false;
this.communication.log.push({
payload: error,
payload: `Disconnected from ${this.url}.`,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
this.communication.log.push({
payload: message,
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
},
collapse({ target }) {
const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle("hidden");
},
getSourcePrefix(source) {
const sourceEmojis = {
// Source used for info messages.
info: "\tℹ️ [INFO]:\t",
// Source used for client to server messages.
client: "\t👽 [SENT]:\t",
// Source used for server to client messages.
server: "\t📥 [RECEIVED]:\t"
this.$toast.error("Disconnected", {
icon: "sync_disabled"
});
};
if (Object.keys(sourceEmojis).includes(source))
return sourceEmojis[source];
return "";
this.socket.onmessage = event => {
this.communication.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
} catch (ex) {
this.handleError(ex);
this.$toast.error("Something went wrong!", {
icon: "error"
});
}
},
updated: function() {
this.$nextTick(function() {
var divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
disconnect() {
if (this.socket != null) this.socket.close();
},
handleError(error) {
this.disconnect();
this.connectionState = false;
this.communication.log.push({
payload: `An error has occurred.`,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
if (error != null)
this.communication.log.push({
payload: error,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
this.communication.log.push({
payload: message,
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
},
collapse({ target }) {
const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle("hidden");
},
getSourcePrefix(source) {
const sourceEmojis = {
// Source used for info messages.
info: "\tℹ️ [INFO]:\t",
// 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 "";
}
};
},
updated: function() {
this.$nextTick(function() {
var divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
});
}
};
</script>