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

76
assets/css/styles.scss
View File

@@ -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 {

10
assets/js/curlparser.js
View File

@@ -9,7 +9,7 @@ import * as querystring from "querystring";
*/
function joinDataArguments(dataArguments) {
let data = "";
dataArguments.forEach(function(argument, i) {
dataArguments.forEach(function (argument, i) {
if (i === 0) {
data += argument;
} else {
@@ -47,7 +47,7 @@ function parseCurlCommand(curlCommand) {
}
let headers;
let parseHeaders = function(headerFieldName) {
let parseHeaders = function (headerFieldName) {
if (parsedArguments[headerFieldName]) {
if (!headers) {
headers = {};
@@ -55,7 +55,7 @@ function parseCurlCommand(curlCommand) {
if (!Array.isArray(parsedArguments[headerFieldName])) {
parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
}
parsedArguments[headerFieldName].forEach(function(header) {
parsedArguments[headerFieldName].forEach(function (header) {
if (header.includes("Cookie")) {
// stupid javascript tricks: closure
cookieString = header;
@@ -95,7 +95,7 @@ function parseCurlCommand(curlCommand) {
if (!Array.isArray(parsedArguments.F)) {
parsedArguments.F = [parsedArguments.F];
}
parsedArguments.F.forEach(function(multipartArgument) {
parsedArguments.F.forEach(function (multipartArgument) {
// input looks like key=value. value could be json or a file path prepended with an @
const [key, value] = multipartArgument.split("=", 2);
multipartUploads[key] = value;
@@ -103,7 +103,7 @@ function parseCurlCommand(curlCommand) {
}
if (cookieString) {
let cookieParseOptions = {
decode: function(s) {
decode: function (s) {
return s;
}
};

322
components/autocomplete.vue
View File

@@ -29,182 +29,182 @@
</template>
<style lang="scss" scoped>
.autocomplete-wrapper {
position: relative;
.autocomplete-wrapper {
position: relative;
input:focus + ul.suggestions,
ul.suggestions:hover {
input:focus + ul.suggestions,
ul.suggestions:hover {
display: block;
}
ul.suggestions {
display: none;
background-color: var(--atc-color);
position: absolute;
top: calc(100% - 4px);
margin: 0 4px;
left: 0;
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
li {
width: 100%;
display: block;
}
padding: 8px 16px;
font-size: 18px;
font-family: "Roboto Mono", monospace;
white-space: pre-wrap;
ul.suggestions {
display: none;
background-color: var(--atc-color);
position: absolute;
top: calc(100% - 4px);
margin: 0 4px;
left: 0;
padding: 0;
border-radius: 0 0 4px 4px;
z-index: 9999;
transition: transform 200ms ease-out;
&:last-child {
border-radius: 0 0 4px 4px;
}
li {
width: 100%;
display: block;
padding: 8px 16px;
font-size: 18px;
font-family: "Roboto Mono", monospace;
white-space: pre-wrap;
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
}
&:hover,
&.active {
background-color: var(--ac-color);
color: var(--act-color);
cursor: pointer;
}
}
}
}
</style>
<script>
const KEY_TAB = 9;
const KEY_ESC = 27;
const KEY_TAB = 9;
const KEY_ESC = 27;
const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40;
const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40;
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false
},
placeholder: {
type: String,
default: "Start typing...",
required: false
},
source: {
type: Array,
required: true
}
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false
},
watch: {
value() {
this.$emit("input", this.value);
}
placeholder: {
type: String,
default: "Start typing...",
required: false
},
data() {
return {
value: "application/json",
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false
};
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.which && event.which === KEY_ESC) {
event.preventDefault();
this.suggestionsVisible = false;
this.currentSuggestionIndex = -1;
return;
}
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart;
this.suggestionsOffsetLeft = 12 * this.selectionStart;
this.suggestionsVisible = true;
},
forceSuggestion(text) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + text;
this.selectionStart = this.value.length;
this.suggestionsVisible = true;
this.currentSuggestionIndex = -1;
},
handleKeystroke(event) {
switch (event.which) {
case KEY_ARROW_UP:
event.preventDefault();
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0;
break;
case KEY_ARROW_DOWN:
event.preventDefault();
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1;
break;
case KEY_TAB:
event.preventDefault();
let activeSuggestion = this.suggestions[
this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
];
if (activeSuggestion) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion;
}
break;
default:
break;
}
}
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.value.substring(0, this.selectionStart);
return (
this.source
.filter(entry => {
return (
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
);
})
// Cut off the part that's already been typed.
.map(entry => entry.substring(this.selectionStart))
// We only want the top 3 suggestions.
.slice(0, 3)
);
}
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput
});
source: {
type: Array,
required: true
}
};
},
watch: {
value() {
this.$emit("input", this.value);
}
},
data() {
return {
value: "application/json",
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false
};
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.which && event.which === KEY_ESC) {
event.preventDefault();
this.suggestionsVisible = false;
this.currentSuggestionIndex = -1;
return;
}
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart;
this.suggestionsOffsetLeft = 12 * this.selectionStart;
this.suggestionsVisible = true;
},
forceSuggestion(text) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + text;
this.selectionStart = this.value.length;
this.suggestionsVisible = true;
this.currentSuggestionIndex = -1;
},
handleKeystroke(event) {
switch (event.which) {
case KEY_ARROW_UP:
event.preventDefault();
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0;
break;
case KEY_ARROW_DOWN:
event.preventDefault();
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1;
break;
case KEY_TAB:
event.preventDefault();
let activeSuggestion = this.suggestions[
this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
];
if (activeSuggestion) {
let input = this.value.substring(0, this.selectionStart);
this.value = input + activeSuggestion;
}
break;
default:
break;
}
}
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.value.substring(0, this.selectionStart);
return (
this.source
.filter(entry => {
return (
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
);
})
// Cut off the part that's already been typed.
.map(entry => entry.substring(this.selectionStart))
// We only want the top 3 suggestions.
.slice(0, 3)
);
}
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput
});
}
};
</script>

46
components/collections/addCollection.vue
View File

@@ -35,30 +35,30 @@
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
props: {
show: Boolean
export default {
props: {
show: Boolean
},
components: {
modal
},
data() {
return {
name: undefined
};
},
methods: {
addNewCollection() {
this.$store.commit("postwoman/addNewCollection", {
name: this.$data.name
});
this.$emit("hide-modal");
},
components: {
modal
},
data() {
return {
name: undefined
};
},
methods: {
addNewCollection() {
this.$store.commit("postwoman/addNewCollection", {
name: this.$data.name
});
this.$emit("hide-modal");
},
hideModal() {
this.$emit("hide-modal");
}
hideModal() {
this.$emit("hide-modal");
}
};
}
};
</script>

52
components/collections/addFolder.vue
View File

@@ -35,33 +35,33 @@
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
props: {
show: Boolean,
collection: Object,
collectionIndex: Number
export default {
props: {
show: Boolean,
collection: Object,
collectionIndex: Number
},
components: {
modal
},
data() {
return {
name: undefined
};
},
methods: {
addNewFolder() {
this.$store.commit("postwoman/addNewFolder", {
folder: { name: this.$data.name },
collectionIndex: this.$props.collectionIndex
});
this.hideModal();
},
components: {
modal
},
data() {
return {
name: undefined
};
},
methods: {
addNewFolder() {
this.$store.commit("postwoman/addNewFolder", {
folder: { name: this.$data.name },
collectionIndex: this.$props.collectionIndex
});
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
}
hideModal() {
this.$emit("hide-modal");
}
};
}
};
</script>

76
components/collections/collection.vue
View File

@@ -54,50 +54,50 @@
</template>
<style scoped>
ul {
display: flex;
flex-direction: column;
}
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
margin-left: 32px;
border-left: 1px solid var(--brd-color);
}
ul li {
display: flex;
margin-left: 32px;
border-left: 1px solid var(--brd-color);
}
</style>
<script>
import folder from "./folder";
import request from "./request";
import folder from "./folder";
import request from "./request";
export default {
components: {
folder,
request
export default {
components: {
folder,
request
},
props: {
collectionIndex: Number,
collection: Object
},
data() {
return {
showChildren: false,
selectedFolder: {}
};
},
methods: {
toggleShowChildren() {
this.showChildren = !this.showChildren;
},
props: {
collectionIndex: Number,
collection: Object
removeCollection() {
if (!confirm("Are you sure you want to remove this collection?")) return;
this.$store.commit("postwoman/removeCollection", {
collectionIndex: this.collectionIndex
});
},
data() {
return {
showChildren: false,
selectedFolder: {}
};
},
methods: {
toggleShowChildren() {
this.showChildren = !this.showChildren;
},
removeCollection() {
if (!confirm("Are you sure you want to remove this collection?")) return;
this.$store.commit("postwoman/removeCollection", {
collectionIndex: this.collectionIndex
});
},
editFolder(collectionIndex, folder, folderIndex) {
this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
}
editFolder(collectionIndex, folder, folderIndex) {
this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
}
};
}
};
</script>

58
components/collections/editCollection.vue
View File

@@ -35,37 +35,37 @@
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
props: {
show: Boolean,
editingCollection: Object,
editingCollectionIndex: Number
},
components: {
modal
},
data() {
return {
name: undefined
export default {
props: {
show: Boolean,
editingCollection: Object,
editingCollectionIndex: Number
},
components: {
modal
},
data() {
return {
name: undefined
};
},
methods: {
saveCollection() {
const collectionUpdated = {
...this.$props.editingCollection,
name: this.$data.name
};
this.$store.commit("postwoman/editCollection", {
collection: collectionUpdated,
collectionIndex: this.$props.editingCollectionIndex
});
this.$emit("hide-modal");
},
methods: {
saveCollection() {
const collectionUpdated = {
...this.$props.editingCollection,
name: this.$data.name
};
this.$store.commit("postwoman/editCollection", {
collection: collectionUpdated,
collectionIndex: this.$props.editingCollectionIndex
});
this.$emit("hide-modal");
},
hideModel() {
this.$emit("hide-modal");
}
hideModel() {
this.$emit("hide-modal");
}
};
}
};
</script>

58
components/collections/editFolder.vue
View File

@@ -35,36 +35,36 @@
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
props: {
show: Boolean,
collection: Object,
collectionIndex: Number,
folder: Object,
folderIndex: Number
export default {
props: {
show: Boolean,
collection: Object,
collectionIndex: Number,
folder: Object,
folderIndex: Number
},
components: {
modal
},
data() {
return {
name: undefined
};
},
methods: {
editFolder() {
this.$store.commit("postwoman/editFolder", {
collectionIndex: this.$props.collectionIndex,
folder: { ...this.$props.folder, name: this.$data.name },
folderIndex: this.$props.folderIndex
});
this.hideModal();
},
components: {
modal
},
data() {
return {
name: undefined
};
},
methods: {
editFolder() {
this.$store.commit("postwoman/editFolder", {
collectionIndex: this.$props.collectionIndex,
folder: { ...this.$props.folder, name: this.$data.name },
folderIndex: this.$props.folderIndex
});
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
}
hideModal() {
this.$emit("hide-modal");
}
};
}
};
</script>

140
components/collections/editRequest.vue
View File

@@ -46,77 +46,77 @@
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
props: {
show: Boolean,
collectionIndex: Number,
folderIndex: Number,
request: Object,
requestIndex: Number
},
components: {
modal
},
data() {
return {
requestUpdateData: {
name: undefined,
collectionIndex: undefined,
folderIndex: undefined
}
};
},
watch: {
"requestUpdateData.collectionIndex": function resetFolderIndex() {
// if user choosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderIndex` won't be reseted
this.$data.requestUpdateData.folderIndex = undefined;
}
},
computed: {
folders() {
const userSelectedAnyCollection =
this.$data.requestUpdateData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
return this.$store.state.postwoman.collections[
this.$data.requestUpdateData.collectionIndex
].folders;
}
},
methods: {
saveRequest() {
const userSelectedAnyCollection =
this.$data.requestUpdateData.collectionIndex !== undefined;
const requestUpdated = {
...this.$props.request,
name: this.$data.requestUpdateData.name || this.$props.request.name,
collection: userSelectedAnyCollection
? this.$data.requestUpdateData.collectionIndex
: this.$props.collectionIndex,
folder: this.$data.requestUpdateData.folderIndex
};
// pass data separately to don't depend on request's collection, folder fields
// probably, they should be deprecated because they don't describe request itself
this.$store.commit("postwoman/editRequest", {
requestOld: this.$props.request,
requestOldCollectionIndex: this.$props.collectionIndex,
requestOldFolderIndex: this.$props.folderIndex,
requestOldIndex: this.$props.requestIndex,
requestNew: requestUpdated,
requestNewCollectionIndex: requestUpdated.collection,
requestNewFolderIndex: requestUpdated.folder
});
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
export default {
props: {
show: Boolean,
collectionIndex: Number,
folderIndex: Number,
request: Object,
requestIndex: Number
},
components: {
modal
},
data() {
return {
requestUpdateData: {
name: undefined,
collectionIndex: undefined,
folderIndex: undefined
}
};
},
watch: {
"requestUpdateData.collectionIndex": function resetFolderIndex() {
// if user choosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderIndex` won't be reseted
this.$data.requestUpdateData.folderIndex = undefined;
}
};
},
computed: {
folders() {
const userSelectedAnyCollection =
this.$data.requestUpdateData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
return this.$store.state.postwoman.collections[
this.$data.requestUpdateData.collectionIndex
].folders;
}
},
methods: {
saveRequest() {
const userSelectedAnyCollection =
this.$data.requestUpdateData.collectionIndex !== undefined;
const requestUpdated = {
...this.$props.request,
name: this.$data.requestUpdateData.name || this.$props.request.name,
collection: userSelectedAnyCollection
? this.$data.requestUpdateData.collectionIndex
: this.$props.collectionIndex,
folder: this.$data.requestUpdateData.folderIndex
};
// pass data separately to don't depend on request's collection, folder fields
// probably, they should be deprecated because they don't describe request itself
this.$store.commit("postwoman/editRequest", {
requestOld: this.$props.request,
requestOldCollectionIndex: this.$props.collectionIndex,
requestOldFolderIndex: this.$props.folderIndex,
requestOldIndex: this.$props.requestIndex,
requestNew: requestUpdated,
requestNewCollectionIndex: requestUpdated.collection,
requestNewFolderIndex: requestUpdated.folder
});
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
}
}
};
</script>

78
components/collections/folder.vue
View File

@@ -39,52 +39,52 @@
</template>
<style scoped>
ul {
display: flex;
flex-direction: column;
}
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
margin-left: 32px;
border-left: 1px solid var(--brd-color);
}
ul li {
display: flex;
margin-left: 32px;
border-left: 1px solid var(--brd-color);
}
</style>
<script>
import request from "./request";
import request from "./request";
export default {
props: {
folder: Object,
collectionIndex: Number,
folderIndex: Number
export default {
props: {
folder: Object,
collectionIndex: Number,
folderIndex: Number
},
components: {
request
},
data() {
return {
showChildren: false
};
},
methods: {
toggleShowChildren() {
this.showChildren = !this.showChildren;
},
components: {
request
selectRequest(request) {
this.$store.commit("postwoman/selectRequest", { request });
},
data() {
return {
showChildren: false
};
removeFolder() {
if (!confirm("Are you sure you want to remove this folder?")) return;
this.$store.commit("postwoman/removeFolder", {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex
});
},
methods: {
toggleShowChildren() {
this.showChildren = !this.showChildren;
},
selectRequest(request) {
this.$store.commit("postwoman/selectRequest", { request });
},
removeFolder() {
if (!confirm("Are you sure you want to remove this folder?")) return;
this.$store.commit("postwoman/removeFolder", {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex
});
},
editFolder() {
this.$emit("edit-folder");
}
editFolder() {
this.$emit("edit-folder");
}
};
}
};
</script>

126
components/collections/importExportCollections.vue
View File

@@ -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
@@ -55,63 +63,63 @@
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
props: {
show: Boolean
},
components: {
modal
},
computed: {
collectionJson() {
return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
}
},
methods: {
hideModel() {
this.$emit("hide-modal");
},
openDialogChooseFileToReplaceWith() {
this.$refs.inputChooseFileToReplaceWith.click();
},
openDialogChooseFileToImportFrom() {
this.$refs.inputChooseFileToImportFrom.click();
},
replaceWithJSON() {
let reader = new FileReader();
reader.onload = event => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit("postwoman/replaceCollections", collections);
};
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
},
importFromJSON() {
let reader = new FileReader();
reader.onload = event => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit("postwoman/importCollections", collections);
};
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
},
exportJSON() {
let text = this.collectionJson;
text = text.replace(/\n/g, "\r\n");
let blob = new Blob([text], {
type: "text/json"
});
let anchor = document.createElement("a");
anchor.download = "postwoman-collection.json";
anchor.href = window.URL.createObjectURL(blob);
anchor.target = "_blank";
anchor.style.display = "none";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}
export default {
props: {
show: Boolean
},
components: {
modal
},
computed: {
collectionJson() {
return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
}
};
},
methods: {
hideModel() {
this.$emit("hide-modal");
},
openDialogChooseFileToReplaceWith() {
this.$refs.inputChooseFileToReplaceWith.click();
},
openDialogChooseFileToImportFrom() {
this.$refs.inputChooseFileToImportFrom.click();
},
replaceWithJSON() {
let reader = new FileReader();
reader.onload = event => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit("postwoman/replaceCollections", collections);
};
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
},
importFromJSON() {
let reader = new FileReader();
reader.onload = event => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit("postwoman/importCollections", collections);
};
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
},
exportJSON() {
let text = this.collectionJson;
text = text.replace(/\n/g, "\r\n");
let blob = new Blob([text], {
type: "text/json"
});
let anchor = document.createElement("a");
anchor.download = "postwoman-collection.json";
anchor.href = window.URL.createObjectURL(blob);
anchor.target = "_blank";
anchor.style.display = "none";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}
}
};
</script>

208
components/collections/index.vue
View File

@@ -73,113 +73,113 @@ TODO:
</template>
<style lang="scss" scoped>
ul {
display: flex;
flex-direction: column;
}
ul {
display: flex;
flex-direction: column;
}
</style>
<script>
import addCollection from "./addCollection";
import addFolder from "./addFolder";
import collection from "./collection";
import editCollection from "./editCollection";
import editFolder from "./editFolder";
import editRequest from "./editRequest";
import importExportCollections from "./importExportCollections";
import addCollection from "./addCollection";
import addFolder from "./addFolder";
import collection from "./collection";
import editCollection from "./editCollection";
import editFolder from "./editFolder";
import editRequest from "./editRequest";
import importExportCollections from "./importExportCollections";
export default {
components: {
addCollection,
addFolder,
collection,
editCollection,
editFolder,
editRequest,
importExportCollections
},
data() {
return {
showModalAdd: false,
showModalEdit: false,
showModalImportExport: false,
showModalAddFolder: false,
showModalEditFolder: false,
showModalEditRequest: false,
editingCollection: undefined,
editingCollectionIndex: undefined,
editingFolder: undefined,
editingFolderIndex: undefined,
editingRequest: undefined,
editingRequestIndex: undefined
};
},
computed: {
collections() {
return this.$store.state.postwoman.collections;
}
},
methods: {
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay;
},
displayModalEdit(shouldDisplay) {
this.showModalEdit = shouldDisplay;
if (!shouldDisplay) this.resetSelectedData();
},
displayModalImportExport(shouldDisplay) {
this.showModalImportExport = shouldDisplay;
},
displayModalAddFolder(shouldDisplay) {
this.showModalAddFolder = shouldDisplay;
if (!shouldDisplay) this.resetSelectedData();
},
displayModalEditFolder(shouldDisplay) {
this.showModalEditFolder = shouldDisplay;
if (!shouldDisplay) this.resetSelectedData();
},
displayModalEditRequest(shouldDisplay) {
this.showModalEditRequest = shouldDisplay;
if (!shouldDisplay) this.resetSelectedData();
},
editCollection(collection, collectionIndex) {
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.displayModalEdit(true);
},
addFolder(collection, collectionIndex) {
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.displayModalAddFolder(true);
},
editFolder(payload) {
const { collectionIndex, folder, folderIndex } = payload;
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.$data.editingFolder = folder;
this.$data.editingFolderIndex = folderIndex;
this.displayModalEditFolder(true);
},
editRequest(payload) {
const { request, collectionIndex, folderIndex, requestIndex } = payload;
this.$data.editingCollectionIndex = collectionIndex;
this.$data.editingFolderIndex = folderIndex;
this.$data.editingRequest = request;
this.$data.editingRequestIndex = requestIndex;
this.displayModalEditRequest(true);
},
resetSelectedData() {
this.$data.editingCollection = undefined;
this.$data.editingCollectionIndex = undefined;
this.$data.editingFolder = undefined;
this.$data.editingFolderIndex = undefined;
this.$data.editingRequest = undefined;
this.$data.editingRequestIndex = undefined;
}
export default {
components: {
addCollection,
addFolder,
collection,
editCollection,
editFolder,
editRequest,
importExportCollections
},
data() {
return {
showModalAdd: false,
showModalEdit: false,
showModalImportExport: false,
showModalAddFolder: false,
showModalEditFolder: false,
showModalEditRequest: false,
editingCollection: undefined,
editingCollectionIndex: undefined,
editingFolder: undefined,
editingFolderIndex: undefined,
editingRequest: undefined,
editingRequestIndex: undefined
};
},
computed: {
collections() {
return this.$store.state.postwoman.collections;
}
};
},
methods: {
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay;
},
displayModalEdit(shouldDisplay) {
this.showModalEdit = shouldDisplay;
if (!shouldDisplay) this.resetSelectedData();
},
displayModalImportExport(shouldDisplay) {
this.showModalImportExport = shouldDisplay;
},
displayModalAddFolder(shouldDisplay) {
this.showModalAddFolder = shouldDisplay;
if (!shouldDisplay) this.resetSelectedData();
},
displayModalEditFolder(shouldDisplay) {
this.showModalEditFolder = shouldDisplay;
if (!shouldDisplay) this.resetSelectedData();
},
displayModalEditRequest(shouldDisplay) {
this.showModalEditRequest = shouldDisplay;
if (!shouldDisplay) this.resetSelectedData();
},
editCollection(collection, collectionIndex) {
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.displayModalEdit(true);
},
addFolder(collection, collectionIndex) {
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.displayModalAddFolder(true);
},
editFolder(payload) {
const { collectionIndex, folder, folderIndex } = payload;
this.$data.editingCollection = collection;
this.$data.editingCollectionIndex = collectionIndex;
this.$data.editingFolder = folder;
this.$data.editingFolderIndex = folderIndex;
this.displayModalEditFolder(true);
},
editRequest(payload) {
const { request, collectionIndex, folderIndex, requestIndex } = payload;
this.$data.editingCollectionIndex = collectionIndex;
this.$data.editingFolderIndex = folderIndex;
this.$data.editingRequest = request;
this.$data.editingRequestIndex = requestIndex;
this.displayModalEditRequest(true);
},
resetSelectedData() {
this.$data.editingCollection = undefined;
this.$data.editingCollectionIndex = undefined;
this.$data.editingFolder = undefined;
this.$data.editingFolderIndex = undefined;
this.$data.editingRequest = undefined;
this.$data.editingRequestIndex = undefined;
}
}
};
</script>

56
components/collections/request.vue
View File

@@ -18,38 +18,38 @@
</template>
<style scoped>
ul {
display: flex;
flex-direction: column;
}
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>
<script>
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
requestIndex: Number
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
requestIndex: Number
},
methods: {
selectRequest() {
this.$store.commit("postwoman/selectRequest", { request: this.request });
},
methods: {
selectRequest() {
this.$store.commit("postwoman/selectRequest", { request: this.request });
},
removeRequest() {
if (!confirm("Are you sure you want to remove this request?")) return;
this.$store.commit("postwoman/removeRequest", {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex,
requestIndex: this.requestIndex
});
}
removeRequest() {
if (!confirm("Are you sure you want to remove this request?")) return;
this.$store.commit("postwoman/removeRequest", {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex,
requestIndex: this.requestIndex
});
}
};
}
};
</script>

187
components/collections/saveRequestAs.vue
View File

@@ -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
@@ -58,101 +63,101 @@
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
props: {
show: Boolean,
editingRequest: Object
},
components: {
modal
},
data() {
return {
defaultRequestName: "My New Request",
requestData: {
name: undefined,
collectionIndex: undefined,
folderIndex: undefined,
requestIndex: undefined
}
};
},
watch: {
"requestData.collectionIndex": function resetFolderAndRequestIndex() {
// if user choosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderIndex` won't be reseted
this.$data.requestData.folderIndex = undefined;
this.$data.requestData.requestIndex = undefined;
},
"requestData.folderIndex": function resetRequestIndex() {
this.$data.requestData.requestIndex = undefined;
export default {
props: {
show: Boolean,
editingRequest: Object
},
components: {
modal
},
data() {
return {
defaultRequestName: "My New Request",
requestData: {
name: undefined,
collectionIndex: undefined,
folderIndex: undefined,
requestIndex: undefined
}
};
},
watch: {
"requestData.collectionIndex": function resetFolderAndRequestIndex() {
// if user choosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderIndex` won't be reseted
this.$data.requestData.folderIndex = undefined;
this.$data.requestData.requestIndex = undefined;
},
computed: {
folders() {
const userSelectedAnyCollection =
this.$data.requestData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
"requestData.folderIndex": function resetRequestIndex() {
this.$data.requestData.requestIndex = undefined;
}
},
computed: {
folders() {
const userSelectedAnyCollection =
this.$data.requestData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
return this.$store.state.postwoman.collections[
return this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
].folders;
},
requests() {
const userSelectedAnyCollection =
this.$data.requestData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
const userSelectedAnyFolder =
this.$data.requestData.folderIndex !== undefined;
if (userSelectedAnyFolder) {
const collection = this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
].folders;
},
requests() {
const userSelectedAnyCollection =
this.$data.requestData.collectionIndex !== undefined;
if (!userSelectedAnyCollection) return [];
const userSelectedAnyFolder =
this.$data.requestData.folderIndex !== undefined;
if (userSelectedAnyFolder) {
const collection = this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
];
const folder = collection.folders[this.$data.requestData.folderIndex];
const requests = folder.requests;
return requests;
} else {
const collection = this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
];
const requests = collection.requests;
return requests;
}
}
},
methods: {
saveRequestAs() {
const userDidntSpecifyCollection =
this.$data.requestData.collectionIndex === undefined;
if (userDidntSpecifyCollection) {
this.$toast.error("Select a Collection", {
icon: "error"
});
return;
}
const requestUpdated = {
...this.$props.editingRequest,
name: this.$data.requestData.name || this.$data.defaultRequestName,
collection: this.$data.requestData.collectionIndex
};
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.$data.requestData.collectionIndex,
folderIndex: this.$data.requestData.folderIndex,
requestIndex: this.$data.requestData.requestIndex
});
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
this.$emit("hide-model"); // for backward compatibility // TODO: use fixed event
];
const folder = collection.folders[this.$data.requestData.folderIndex];
const requests = folder.requests;
return requests;
} else {
const collection = this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
];
const requests = collection.requests;
return requests;
}
}
};
},
methods: {
saveRequestAs() {
const userDidntSpecifyCollection =
this.$data.requestData.collectionIndex === undefined;
if (userDidntSpecifyCollection) {
this.$toast.error("Select a Collection", {
icon: "error"
});
return;
}
const requestUpdated = {
...this.$props.editingRequest,
name: this.$data.requestData.name || this.$data.defaultRequestName,
collection: this.$data.requestData.collectionIndex
};
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.$data.requestData.collectionIndex,
folderIndex: this.$data.requestData.folderIndex,
requestIndex: this.$data.requestData.requestIndex
});
this.hideModal();
},
hideModal() {
this.$emit("hide-modal");
this.$emit("hide-model"); // for backward compatibility // TODO: use fixed event
}
}
};
</script>

2
components/history.vue
View File

@@ -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>

22
components/logo.vue
View File

@@ -36,21 +36,21 @@
</template>
<style>
#circle3814 {
/* fill: var(--fg-color); */
fill: transparent;
}
/* #path3816 {
#circle3814 {
/* fill: var(--fg-color); */
fill: transparent;
}
/* #path3816 {
fill: var(--bg-color);
} */
</style>
<script>
export default {
props: {
color: {
type: String
}
export default {
props: {
color: {
type: String
}
};
}
};
</script>

82
components/modal.vue
View File

@@ -18,41 +18,41 @@
</transition>
</template>
<style scoped>
.modal-backdrop {
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-backdrop {
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
max-width: 800px;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
max-width: 800px;
}
.modal-container {
display: flex;
flex-grow: 1;
flex-direction: column;
margin: 8px;
padding: 12px;
transition: all 0.2s ease;
background-color: var(--bg-color);
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
}
.modal-container {
display: flex;
flex-grow: 1;
flex-direction: column;
margin: 8px;
padding: 12px;
transition: all 0.2s ease;
background-color: var(--bg-color);
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
}
/*
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
@@ -61,14 +61,14 @@
* these styles.
*/
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-fade-enter .modal-container,
.modal-fade-leave-active .modal-container {
transform: scale(0.9);
transition: all 0.1s ease-in-out;
}
.modal-fade-enter .modal-container,
.modal-fade-leave-active .modal-container {
transform: scale(0.8);
transition: all 0.2s ease-in-out;
}
</style>

66
components/section.vue
View File

@@ -12,41 +12,41 @@
</template>
<style>
fieldset.no-colored-frames legend {
color: var(--fg-color);
}
fieldset.no-colored-frames legend {
color: var(--fg-color);
}
</style>
<script>
export default {
computed: {
frameColorsEnabled() {
return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
}
},
data() {
return {
isCollapsed: false
};
},
props: {
label: {
type: String,
default: "Section"
},
collapsed: {
type: Boolean
}
},
methods: {
collapse({ target }) {
const parent = target.parentNode.parentNode;
parent.querySelector(".collapsible").classList.toggle("hidden");
this.isCollapsed = !this.isCollapsed;
}
export default {
computed: {
frameColorsEnabled() {
return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
}
};
},
data() {
return {
isCollapsed: false
};
},
props: {
label: {
type: String,
default: "Section"
},
collapsed: {
type: Boolean
}
},
methods: {
collapse({ target }) {
const parent = target.parentNode.parentNode;
parent.querySelector(".collapsible").classList.toggle("hidden");
this.isCollapsed = !this.isCollapsed;
}
}
};
</script>

94
components/settings/swatch.vue
View File

@@ -8,61 +8,61 @@
</template>
<style lang="scss">
.color {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 16px 0 4px;
margin: 4px;
.color {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 16px 0 4px;
margin: 4px;
background-color: var(--bg-dark-color);
color: var(--fg-color);
border-radius: 20px;
cursor: pointer;
height: 40px;
&.active {
background-color: var(--bg-dark-color);
color: var(--fg-color);
border-radius: 20px;
cursor: pointer;
height: 40px;
&.active {
background-color: var(--bg-dark-color);
}
.preview {
vertical-align: middle;
display: inline-block;
border-radius: 100%;
margin-right: 8px;
padding: 16px;
position: relative;
.activeTick {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
}
}
}
.color.vibrant {
.preview .activeTick {
color: var(--act-color);
.preview {
vertical-align: middle;
display: inline-block;
border-radius: 100%;
margin-right: 8px;
padding: 16px;
position: relative;
.activeTick {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
}
}
}
.color.vibrant {
.preview .activeTick {
color: var(--act-color);
}
}
</style>
<script>
export default {
props: {
'color': {
type: String,
required: true
},
'name': {
type: String
},
'active': {
type: Boolean,
default: false
}
export default {
props: {
color: {
type: String,
required: true
},
name: {
type: String
},
active: {
type: Boolean,
default: false
}
}
};
</script>

138
components/toggle.vue
View File

@@ -10,89 +10,89 @@
</template>
<style lang="scss" scoped>
$useBorder: false;
$borderColor: var(--fg-light-color);
$activeColor: var(--ac-color);
$inactiveColor: var(--fg-light-color);
$useBorder: false;
$borderColor: var(--fg-light-color);
$activeColor: var(--ac-color);
$inactiveColor: var(--fg-light-color);
$inactiveHandleColor: var(--bg-color);
$activeHandleColor: var(--act-color);
$inactiveHandleColor: var(--bg-color);
$activeHandleColor: var(--act-color);
$width: 32px;
$height: 16px;
$handleSpacing: 4px;
$width: 32px;
$height: 16px;
$handleSpacing: 4px;
$transition: all 0.2s ease-in-out;
$transition: all 0.2s ease-in-out;
div {
div {
display: inline-block;
cursor: pointer;
}
label.caption {
vertical-align: middle;
cursor: pointer;
}
label.toggle {
position: relative;
display: inline-block;
width: $width;
height: $height;
border: if($useBorder, 2px solid $borderColor, none);
background-color: if($useBorder, transparent, $inactiveColor);
vertical-align: middle;
border-radius: 32px;
transition: $transition;
box-sizing: initial;
padding: 0;
margin: 8px 4px;
cursor: pointer;
.handle {
position: absolute;
display: inline-block;
cursor: pointer;
}
top: 0;
bottom: 0;
left: 0;
margin: $handleSpacing;
background-color: $inactiveHandleColor;
label.caption {
vertical-align: middle;
cursor: pointer;
}
width: #{$height - ($handleSpacing * 2)};
height: #{$height - ($handleSpacing * 2)};
border-radius: 100px;
label.toggle {
position: relative;
display: inline-block;
width: $width;
height: $height;
border: if($useBorder, 2px solid $borderColor, none);
background-color: if($useBorder, transparent, $inactiveColor);
vertical-align: middle;
border-radius: 32px;
pointer-events: none;
transition: $transition;
box-sizing: initial;
padding: 0;
margin: 8px 4px;
cursor: pointer;
}
&.on {
background-color: $activeColor;
border-color: $activeColor;
.handle {
position: absolute;
display: inline-block;
top: 0;
bottom: 0;
left: 0;
margin: $handleSpacing;
background-color: $inactiveHandleColor;
width: #{$height - ($handleSpacing * 2)};
height: #{$height - ($handleSpacing * 2)};
border-radius: 100px;
pointer-events: none;
transition: $transition;
}
&.on {
background-color: $activeColor;
border-color: $activeColor;
.handle {
background-color: $activeHandleColor;
left: #{$width - $height};
}
background-color: $activeHandleColor;
left: #{$width - $height};
}
}
}
</style>
<script>
export default {
props: {
on: {
type: Boolean,
default: false
}
},
methods: {
toggle() {
const containsOnClass = this.$refs.toggle.classList.toggle("on");
this.$emit("change", containsOnClass);
}
export default {
props: {
on: {
type: Boolean,
default: false
}
};
},
methods: {
toggle() {
const containsOnClass = this.$refs.toggle.classList.toggle("on");
this.$emit("change", containsOnClass);
}
}
};
</script>

194
layouts/default.vue
View File

@@ -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.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;
align-items: center;
justify-content: center;
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) {

52
layouts/error.vue
View File

@@ -15,36 +15,36 @@
</template>
<style lang="scss">
// Center the error page in the viewport.
.page-error {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
// Center the error page in the viewport.
.page-error {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.error_banner {
width: 256px;
}
.error_banner {
width: 256px;
}
</style>
<script>
export default {
props: ["error"],
export default {
props: ["error"],
methods: {
reloadApplication() {
this.$router.push("/", () => window.location.reload());
}
},
head() {
return {
bodyAttrs: {
class: "sticky-footer"
}
};
methods: {
reloadApplication() {
this.$router.push("/", () => window.location.reload());
}
};
},
head() {
return {
bodyAttrs: {
class: "sticky-footer"
}
};
}
};
</script>

16
nuxt.config.js
View File

@@ -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: {

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>

4
store/index.js
View File

@@ -9,7 +9,9 @@ export default {
const vuexLocalStorage = new VuexPersist({
key: 'vuex',
storage: window.localStorage,
reducer: ({ ...request }) => ({
reducer: ({
...request
}) => ({
...request
})
})

2
store/mutations.js
View File

@@ -1,5 +1,5 @@
export default {
setState(state, object){
setState(state, object) {
state.request[object.attribute] = object.value
},