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; $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, h1,
h2, h2,
h3 { h3 {
@@ -159,7 +97,7 @@ h3 {
color: black; color: black;
padding: 24px; padding: 24px;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1); box-shadow: 0 5px 30px rgba(black, 0.1);
} }
.popover-arrow { .popover-arrow {
@@ -167,16 +105,16 @@ h3 {
} }
} }
&[aria-hidden='true'] { &[aria-hidden="true"] {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity .15s, visibility .15s; transition: opacity 0.15s, visibility 0.15s;
} }
&[aria-hidden='false'] { &[aria-hidden="false"] {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: opacity .15s; transition: opacity 0.15s;
} }
} }
@@ -515,8 +453,8 @@ fieldset#history {
&.show { &.show {
display: flex; display: flex;
position: fixed; position: fixed;
top: 16px; top: 12px;
right: 16px; right: 12px;
z-index: 1; z-index: 1;
#hidden-message { #hidden-message {

10
assets/js/curlparser.js
View File

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

322
components/autocomplete.vue
View File

@@ -29,182 +29,182 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.autocomplete-wrapper { .autocomplete-wrapper {
position: relative; position: relative;
input:focus + ul.suggestions, input:focus + ul.suggestions,
ul.suggestions:hover { 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; display: block;
} padding: 8px 16px;
font-size: 18px;
font-family: "Roboto Mono", monospace;
white-space: pre-wrap;
ul.suggestions { &:last-child {
display: none; border-radius: 0 0 4px 4px;
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 { &:hover,
width: 100%; &.active {
display: block; background-color: var(--ac-color);
padding: 8px 16px; color: var(--act-color);
font-size: 18px; cursor: pointer;
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;
}
} }
} }
} }
}
</style> </style>
<script> <script>
const KEY_TAB = 9; const KEY_TAB = 9;
const KEY_ESC = 27; const KEY_ESC = 27;
const KEY_ARROW_UP = 38; const KEY_ARROW_UP = 38;
const KEY_ARROW_DOWN = 40; const KEY_ARROW_DOWN = 40;
export default { export default {
props: { props: {
spellcheck: { spellcheck: {
type: Boolean, type: Boolean,
default: true, default: true,
required: false required: false
},
placeholder: {
type: String,
default: "Start typing...",
required: false
},
source: {
type: Array,
required: true
}
}, },
watch: { placeholder: {
value() { type: String,
this.$emit("input", this.value); default: "Start typing...",
} required: false
}, },
data() { source: {
return { type: Array,
value: "application/json", required: true
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
});
} }
}; },
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> </script>

46
components/collections/addCollection.vue
View File

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

52
components/collections/addFolder.vue
View File

@@ -35,33 +35,33 @@
</template> </template>
<script> <script>
import modal from "../../components/modal"; import modal from "../../components/modal";
export default { export default {
props: { props: {
show: Boolean, show: Boolean,
collection: Object, collection: Object,
collectionIndex: Number 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: { hideModal() {
modal this.$emit("hide-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");
}
} }
}; }
};
</script> </script>

76
components/collections/collection.vue
View File

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

58
components/collections/editCollection.vue
View File

@@ -35,37 +35,37 @@
</template> </template>
<script> <script>
import modal from "../../components/modal"; import modal from "../../components/modal";
export default { export default {
props: { props: {
show: Boolean, show: Boolean,
editingCollection: Object, editingCollection: Object,
editingCollectionIndex: Number editingCollectionIndex: Number
}, },
components: { components: {
modal modal
}, },
data() { data() {
return { return {
name: undefined 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: { hideModel() {
saveCollection() { this.$emit("hide-modal");
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");
}
} }
}; }
};
</script> </script>

58
components/collections/editFolder.vue
View File

@@ -35,36 +35,36 @@
</template> </template>
<script> <script>
import modal from "../../components/modal"; import modal from "../../components/modal";
export default { export default {
props: { props: {
show: Boolean, show: Boolean,
collection: Object, collection: Object,
collectionIndex: Number, collectionIndex: Number,
folder: Object, folder: Object,
folderIndex: Number 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: { hideModal() {
modal this.$emit("hide-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");
}
} }
}; }
};
</script> </script>

140
components/collections/editRequest.vue
View File

@@ -46,77 +46,77 @@
</template> </template>
<script> <script>
import modal from "../../components/modal"; import modal from "../../components/modal";
export default { export default {
props: { props: {
show: Boolean, show: Boolean,
collectionIndex: Number, collectionIndex: Number,
folderIndex: Number, folderIndex: Number,
request: Object, request: Object,
requestIndex: Number requestIndex: Number
}, },
components: { components: {
modal modal
}, },
data() { data() {
return { return {
requestUpdateData: { requestUpdateData: {
name: undefined, name: undefined,
collectionIndex: undefined, collectionIndex: undefined,
folderIndex: 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");
} }
};
},
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> </script>

78
components/collections/folder.vue
View File

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

126
components/collections/importExportCollections.vue
View File

@@ -20,7 +20,11 @@
<div slot="footer"> <div slot="footer">
<ul> <ul>
<li> <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> <i class="material-icons">create_new_folder</i>
<span>Replace with JSON</span> <span>Replace with JSON</span>
<input <input
@@ -32,7 +36,11 @@
</button> </button>
</li> </li>
<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> <i class="material-icons">folder_shared</i>
<span>Import from JSON</span> <span>Import from JSON</span>
<input <input
@@ -55,63 +63,63 @@
</template> </template>
<script> <script>
import modal from "../../components/modal"; import modal from "../../components/modal";
export default { export default {
props: { props: {
show: Boolean show: Boolean
}, },
components: { components: {
modal modal
}, },
computed: { computed: {
collectionJson() { collectionJson() {
return JSON.stringify(this.$store.state.postwoman.collections, null, 2); 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);
}
} }
}; },
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> </script>

208
components/collections/index.vue
View File

@@ -73,113 +73,113 @@ TODO:
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
ul { ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
</style> </style>
<script> <script>
import addCollection from "./addCollection"; import addCollection from "./addCollection";
import addFolder from "./addFolder"; import addFolder from "./addFolder";
import collection from "./collection"; import collection from "./collection";
import editCollection from "./editCollection"; import editCollection from "./editCollection";
import editFolder from "./editFolder"; import editFolder from "./editFolder";
import editRequest from "./editRequest"; import editRequest from "./editRequest";
import importExportCollections from "./importExportCollections"; import importExportCollections from "./importExportCollections";
export default { export default {
components: { components: {
addCollection, addCollection,
addFolder, addFolder,
collection, collection,
editCollection, editCollection,
editFolder, editFolder,
editRequest, editRequest,
importExportCollections importExportCollections
}, },
data() { data() {
return { return {
showModalAdd: false, showModalAdd: false,
showModalEdit: false, showModalEdit: false,
showModalImportExport: false, showModalImportExport: false,
showModalAddFolder: false, showModalAddFolder: false,
showModalEditFolder: false, showModalEditFolder: false,
showModalEditRequest: false, showModalEditRequest: false,
editingCollection: undefined, editingCollection: undefined,
editingCollectionIndex: undefined, editingCollectionIndex: undefined,
editingFolder: undefined, editingFolder: undefined,
editingFolderIndex: undefined, editingFolderIndex: undefined,
editingRequest: undefined, editingRequest: undefined,
editingRequestIndex: undefined editingRequestIndex: undefined
}; };
}, },
computed: { computed: {
collections() { collections() {
return this.$store.state.postwoman.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;
}
} }
}; },
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> </script>

56
components/collections/request.vue
View File

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

187
components/collections/saveRequestAs.vue
View File

@@ -18,7 +18,12 @@
<ul> <ul>
<li> <li>
<label for="selectLabel">Label</label> <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> <label for="selectCollection">Collection</label>
<select type="text" id="selectCollection" v-model="requestData.collectionIndex"> <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
<option <option
@@ -58,101 +63,101 @@
</template> </template>
<script> <script>
import modal from "../../components/modal"; import modal from "../../components/modal";
export default { export default {
props: { props: {
show: Boolean, show: Boolean,
editingRequest: Object editingRequest: Object
}, },
components: { components: {
modal modal
}, },
data() { data() {
return { return {
defaultRequestName: "My New Request", defaultRequestName: "My New Request",
requestData: { requestData: {
name: undefined, name: undefined,
collectionIndex: undefined, collectionIndex: undefined,
folderIndex: undefined, folderIndex: undefined,
requestIndex: 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;
} }
};
},
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: { "requestData.folderIndex": function resetRequestIndex() {
folders() { this.$data.requestData.requestIndex = undefined;
const userSelectedAnyCollection = }
this.$data.requestData.collectionIndex !== undefined; },
if (!userSelectedAnyCollection) return []; 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 this.$data.requestData.collectionIndex
].folders; ];
}, const folder = collection.folders[this.$data.requestData.folderIndex];
requests() { const requests = folder.requests;
const userSelectedAnyCollection = return requests;
this.$data.requestData.collectionIndex !== undefined; } else {
if (!userSelectedAnyCollection) return []; const collection = this.$store.state.postwoman.collections[
this.$data.requestData.collectionIndex
const userSelectedAnyFolder = ];
this.$data.requestData.folderIndex !== undefined; const requests = collection.requests;
if (userSelectedAnyFolder) { return requests;
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
} }
} }
}; },
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> </script>

2
components/history.vue
View File

@@ -143,7 +143,7 @@
</button> </button>
</li> </li>
<li v-else> <li v-else>
<div> <div class="flex-wrap">
<label for="clear-history-button">Are you sure?</label> <label for="clear-history-button">Are you sure?</label>
<div> <div>
<button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button> <button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>

22
components/logo.vue
View File

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

82
components/modal.vue
View File

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

66
components/section.vue
View File

@@ -12,41 +12,41 @@
</template> </template>
<style> <style>
fieldset.no-colored-frames legend { fieldset.no-colored-frames legend {
color: var(--fg-color); color: var(--fg-color);
} }
</style> </style>
<script> <script>
export default { export default {
computed: { computed: {
frameColorsEnabled() { frameColorsEnabled() {
return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false; 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;
}
} }
}; },
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> </script>

94
components/settings/swatch.vue
View File

@@ -8,61 +8,61 @@
</template> </template>
<style lang="scss"> <style lang="scss">
.color { .color {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 16px 0 4px; padding: 0 16px 0 4px;
margin: 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); 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 {
.preview .activeTick { vertical-align: middle;
color: var(--act-color); 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> </style>
<script> <script>
export default { export default {
props: { props: {
'color': { color: {
type: String, type: String,
required: true required: true
}, },
'name': { name: {
type: String type: String
}, },
'active': { active: {
type: Boolean, type: Boolean,
default: false default: false
}
} }
} }
};
</script> </script>

138
components/toggle.vue
View File

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

194
layouts/default.vue
View File

@@ -27,7 +27,11 @@
<nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'"> <nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'">
<logo alt style="height: 24px;"></logo> <logo alt style="height: 24px;"></logo>
</nuxt-link> </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> <i class="material-icons">cloud</i>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
@@ -157,6 +161,70 @@
scroll-behavior: smooth; 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, header,
footer { footer {
& > div { & > div {
@@ -168,10 +236,6 @@
} }
} }
body.sticky-footer footer {
opacity: 0.25;
}
.wrapper { .wrapper {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@@ -186,6 +250,23 @@
flex: 1; 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 { .logo {
font-size: 22px; font-size: 22px;
color: var(--ac-color); color: var(--ac-color);
@@ -220,14 +301,53 @@
display: none; 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 { nav.secondary-nav {
display: flex; display: flex;
align-items: center;
justify-content: center;
ul { ul {
display: flex; display: flex;
flex-flow: column; flex-flow: column nowrap;
li { li {
display: flex; display: flex;
@@ -236,6 +356,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
padding: 16px; padding: 16px;
border-radius: 50%; border-radius: 50%;
background-color: var(--bg-dark-color); 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 { .footer {
flex-direction: column; 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; $responsiveWidth: 720px;
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {

52
layouts/error.vue
View File

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

16
nuxt.config.js
View File

@@ -29,8 +29,7 @@ export default {
}, },
head: { head: {
title: `${meta.name} \u2022 ${meta.shortDescription}`, title: `${meta.name} \u2022 ${meta.shortDescription}`,
meta: [ meta: [{
{
charset: 'utf-8' charset: 'utf-8'
}, },
{ {
@@ -148,8 +147,7 @@ export default {
content: `${routerBase.router.base}icons/icon-144x144.png` content: `${routerBase.router.base}icons/icon-144x144.png`
}, },
], ],
link: [ link: [{
{
rel: 'icon', rel: 'icon',
type: 'image/x-icon', type: 'image/x-icon',
href: `${routerBase.router.base}favicon.ico` href: `${routerBase.router.base}favicon.ico`
@@ -206,8 +204,7 @@ export default {
/* /*
** Plugins to load before mounting the App ** Plugins to load before mounting the App
*/ */
plugins: [ plugins: [{
{
src: '~/plugins/vuex-persist' src: '~/plugins/vuex-persist'
}, },
{ {
@@ -217,8 +214,7 @@ export default {
/* /*
** Nuxt.js dev-modules ** Nuxt.js dev-modules
*/ */
buildModules: [ buildModules: [],
],
/* /*
** Nuxt.js modules ** Nuxt.js modules
*/ */
@@ -229,7 +225,9 @@ export default {
['@nuxtjs/toast'], ['@nuxtjs/toast'],
['@nuxtjs/google-analytics'], ['@nuxtjs/google-analytics'],
['@nuxtjs/sitemap'], ['@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: { pwa: {
manifest: { manifest: {

305
pages/index.vue
View File

@@ -40,8 +40,21 @@
</div> </div>
</pw-modal> </pw-modal>
<pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request • β (experimental)" ref="preRequest"> <pw-section
<textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="preRequestScript" spellcheck="false" placeholder='pw.environment.set("variable", "value");'></textarea> 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>
<pw-section class="blue" label="Request" ref="request"> <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'}" v-tooltip.bottom="{ content: !showPreRequestScript ? 'Show Pre-Request Script' : 'Hide Pre-Request Script'}"
@click="showPreRequestScript = !showPreRequestScript" @click="showPreRequestScript = !showPreRequestScript"
> >
<i class="material-icons" :class="showPreRequestScript" v-if="!showPreRequestScript">code</i> <i
<i class="material-icons" :class="showPreRequestScript" v-if="showPreRequestScript">close</i> class="material-icons"
:class="showPreRequestScript"
v-if="!showPreRequestScript"
>code</i>
<i
class="material-icons"
:class="showPreRequestScript"
v-if="showPreRequestScript"
>close</i>
</button> </button>
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
@@ -282,14 +303,13 @@
</ul> </ul>
</pw-section> </pw-section>
<br> <br />
<section id="options"> <section id="options">
<input id="tab-one" type="radio" name="grp" checked="checked" /> <input id="tab-one" type="radio" name="grp" checked="checked" />
<label for="tab-one">Authentication</label> <label for="tab-one">Authentication</label>
<div class="tab"> <div class="tab">
<br />
<br>
<pw-section class="cyan" label="Authentication" ref="authentication"> <pw-section class="cyan" label="Authentication" ref="authentication">
<ul> <ul>
@@ -342,19 +362,14 @@
</li> </li>
</ul> </ul>
<div class="flex-wrap"> <div class="flex-wrap">
<pw-toggle <pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">Include in URL</pw-toggle>
:on="!urlExcludes.auth"
@change="setExclude('auth', !$event)">
Include in URL
</pw-toggle>
</div> </div>
</pw-section> </pw-section>
</div> </div>
<input id="tab-two" type="radio" name="grp" /> <input id="tab-two" type="radio" name="grp" />
<label for="tab-two">Headers</label> <label for="tab-two">Headers</label>
<div class="tab"> <div class="tab">
<br />
<br>
<pw-section class="orange" label="Headers" ref="headers"> <pw-section class="orange" label="Headers" ref="headers">
<ul> <ul>
@@ -419,8 +434,7 @@
<input id="tab-three" type="radio" name="grp" /> <input id="tab-three" type="radio" name="grp" />
<label for="tab-three">Parameters</label> <label for="tab-three">Parameters</label>
<div class="tab"> <div class="tab">
<br />
<br>
<pw-section class="pink" label="Parameters" ref="parameters"> <pw-section class="pink" label="Parameters" ref="parameters">
<ul> <ul>
@@ -482,7 +496,7 @@
</div> </div>
</section> </section>
<br> <br />
<pw-section class="purple" id="response" label="Response" ref="response"> <pw-section class="purple" id="response" label="Response" ref="response">
<ul> <ul>
@@ -518,11 +532,11 @@
</div> </div>
<div id="response-details-wrapper"> <div id="response-details-wrapper">
<pre><code <pre><code
ref="responseBody" ref="responseBody"
id="body" id="body"
rows="16" rows="16"
placeholder="(waiting to send request)" placeholder="(waiting to send request)"
>{{response.body}}</code></pre> >{{response.body}}</code></pre>
<iframe <iframe
:class="{hidden: !previewEnabled}" :class="{hidden: !previewEnabled}"
class="covers-response" class="covers-response"
@@ -541,13 +555,13 @@
</ul> </ul>
</pw-section> </pw-section>
<br> <br />
<pw-section class="yellow" label="Collections" ref="collections"> <pw-section class="yellow" label="Collections" ref="collections">
<collections /> <collections />
</pw-section> </pw-section>
<br> <br />
<history @useHistory="handleUseHistory" ref="historyComponent"></history> <history @useHistory="handleUseHistory" ref="historyComponent"></history>
</div> </div>
@@ -567,7 +581,7 @@ import parseCurlCommand from "../assets/js/curlparser.js";
import hljs from "highlight.js"; import hljs from "highlight.js";
import "highlight.js/styles/dracula.css"; import "highlight.js/styles/dracula.css";
import getEnvironmentVariablesFromScript from "../functions/preRequest"; import getEnvironmentVariablesFromScript from "../functions/preRequest";
import parseTemplateString from '../functions/templating' import parseTemplateString from "../functions/templating";
const statusCategories = [ const statusCategories = [
{ {
@@ -633,11 +647,11 @@ export default {
collections, collections,
saveRequestAs saveRequestAs
}, },
data () { data() {
return { return {
showModal: false, showModal: false,
showPreRequestScript: false, showPreRequestScript: false,
preRequestScript: '', preRequestScript: "",
copyButton: '<i class="material-icons">file_copy</i>', copyButton: '<i class="material-icons">file_copy</i>',
copiedButton: '<i class="material-icons">done</i>', copiedButton: '<i class="material-icons">done</i>',
isHidden: true, isHidden: true,
@@ -677,10 +691,13 @@ export default {
}, },
watch: { watch: {
urlExcludes: { urlExcludes: {
deep: true, deep: true,
handler () { handler() {
this.$store.commit("postwoman/applySetting", ['URL_EXCLUDES', Object.assign({}, this.urlExcludes)]); this.$store.commit("postwoman/applySetting", [
} "URL_EXCLUDES",
Object.assign({}, this.urlExcludes)
]);
}
}, },
contentType(val) { contentType(val) {
this.rawInput = !this.knownContentTypes.includes(val); this.rawInput = !this.knownContentTypes.includes(val);
@@ -769,68 +786,135 @@ export default {
}, },
computed: { computed: {
url: { url: {
get() { return this.$store.state.request.url; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'url' }) }, return this.$store.state.request.url;
}, },
set(value) {
this.$store.commit("setState", { value, attribute: "url" });
}
},
method: { method: {
get() { return this.$store.state.request.method; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'method' }) }, return this.$store.state.request.method;
},
set(value) {
this.$store.commit("setState", { value, attribute: "method" });
}
}, },
path: { path: {
get() { return this.$store.state.request.path; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'path' }) }, return this.$store.state.request.path;
},
set(value) {
this.$store.commit("setState", { value, attribute: "path" });
}
}, },
label: { label: {
get() { return this.$store.state.request.label; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'label' }) }, return this.$store.state.request.label;
},
set(value) {
this.$store.commit("setState", { value, attribute: "label" });
}
}, },
auth: { auth: {
get() { return this.$store.state.request.auth; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'auth' }) }, return this.$store.state.request.auth;
},
set(value) {
this.$store.commit("setState", { value, attribute: "auth" });
}
}, },
httpUser: { httpUser: {
get() { return this.$store.state.request.httpUser; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'httpUser' }) }, return this.$store.state.request.httpUser;
},
set(value) {
this.$store.commit("setState", { value, attribute: "httpUser" });
}
}, },
httpPassword: { httpPassword: {
get() { return this.$store.state.request.httpPassword; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'httpPassword' }) }, return this.$store.state.request.httpPassword;
},
set(value) {
this.$store.commit("setState", { value, attribute: "httpPassword" });
}
}, },
bearerToken: { bearerToken: {
get() { return this.$store.state.request.bearerToken; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'bearerToken' }) }, return this.$store.state.request.bearerToken;
},
set(value) {
this.$store.commit("setState", { value, attribute: "bearerToken" });
}
}, },
headers: { headers: {
get() { return this.$store.state.request.headers; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'headers' }) }, return this.$store.state.request.headers;
},
set(value) {
this.$store.commit("setState", { value, attribute: "headers" });
}
}, },
params: { params: {
get() { return this.$store.state.request.params; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'params' }) }, return this.$store.state.request.params;
},
set(value) {
this.$store.commit("setState", { value, attribute: "params" });
}
}, },
bodyParams: { bodyParams: {
get() { return this.$store.state.request.bodyParams; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'bodyParams' }) }, return this.$store.state.request.bodyParams;
},
set(value) {
this.$store.commit("setState", { value, attribute: "bodyParams" });
}
}, },
rawParams: { rawParams: {
get() { return this.$store.state.request.rawParams; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'rawParams' }) }, return this.$store.state.request.rawParams;
},
set(value) {
this.$store.commit("setState", { value, attribute: "rawParams" });
}
}, },
rawInput: { rawInput: {
get() { return this.$store.state.request.rawInput; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'rawInput' }) }, return this.$store.state.request.rawInput;
},
set(value) {
this.$store.commit("setState", { value, attribute: "rawInput" });
}
}, },
requestType: { requestType: {
get() { return this.$store.state.request.requestType; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'requestType' }) }, return this.$store.state.request.requestType;
},
set(value) {
this.$store.commit("setState", { value, attribute: "requestType" });
}
}, },
contentType: { contentType: {
get() { return this.$store.state.request.contentType; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'contentType' }) }, return this.$store.state.request.contentType;
},
set(value) {
this.$store.commit("setState", { value, attribute: "contentType" });
}
}, },
passwordFieldType: { passwordFieldType: {
get() { return this.$store.state.request.passwordFieldType; }, get() {
set(value) { this.$store.commit('setState', { value, 'attribute': 'passwordFieldType' }) } return this.$store.state.request.passwordFieldType;
},
set(value) {
this.$store.commit("setState", {
value,
attribute: "passwordFieldType"
});
}
}, },
selectedRequest() { selectedRequest() {
@@ -970,21 +1054,38 @@ export default {
requestString.push(' method: "' + this.method + '",\n'); requestString.push(' method: "' + this.method + '",\n');
if (this.auth === "Basic") { if (this.auth === "Basic") {
var basic = this.httpUser + ":" + this.httpPassword; 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") { } 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)) { if (["POST", "PUT", "PATCH"].includes(this.method)) {
const requestBody = this.rawInput const requestBody = this.rawInput
? this.rawParams ? this.rawParams
: this.rawRequestBody; : this.rawRequestBody;
requestString.push(" body: " + requestBody + ",\n"); requestString.push(" body: " + requestBody + ",\n");
this.$store.commit('addHeaders', ' "Content-Length": ' + requestBody.length + ",\n") this.$store.commit(
this.$store.commit('addHeaders', ' "Content-Type": "' + this.contentType + '; charset=utf-8",\n') "addHeaders",
' "Content-Length": ' + requestBody.length + ",\n"
);
this.$store.commit(
"addHeaders",
' "Content-Type": "' + this.contentType + '; charset=utf-8",\n'
);
} }
if (this.headers) { if (this.headers) {
this.headers.forEach(function(element) { 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); headers = headers.join("").slice(0, -3);
@@ -1052,7 +1153,7 @@ export default {
}); });
}, },
getVariablesFromPreRequestScript() { getVariablesFromPreRequestScript() {
if(!this.preRequestScript) { if (!this.preRequestScript) {
return {}; return {};
} }
return getEnvironmentVariablesFromScript(this.preRequestScript); return getEnvironmentVariablesFromScript(this.preRequestScript);
@@ -1066,18 +1167,28 @@ export default {
data: requestBody ? requestBody.toString() : null data: requestBody ? requestBody.toString() : null
}; };
if (preRequestScript) { if (preRequestScript) {
const environmentVariables = getEnvironmentVariablesFromScript(preRequestScript); const environmentVariables = getEnvironmentVariablesFromScript(
requestOptions.url = parseTemplateString(requestOptions.url, environmentVariables); preRequestScript
requestOptions.data = parseTemplateString(requestOptions.data, environmentVariables); );
requestOptions.url = parseTemplateString(
requestOptions.url,
environmentVariables
);
requestOptions.data = parseTemplateString(
requestOptions.data,
environmentVariables
);
for (let k in requestOptions.headers) { for (let k in requestOptions.headers) {
const kParsed = parseTemplateString(k, environmentVariables); const kParsed = parseTemplateString(k, environmentVariables);
const valParsed = parseTemplateString(requestOptions.headers[k], environmentVariables); const valParsed = parseTemplateString(
requestOptions.headers[k],
environmentVariables
);
delete requestOptions.headers[k]; delete requestOptions.headers[k];
requestOptions.headers[kParsed] = valParsed; requestOptions.headers[kParsed] = valParsed;
} }
} }
if (typeof requestOptions.data === 'string') { if (typeof requestOptions.data === "string") {
requestOptions.data = parseTemplateString(requestOptions.data); requestOptions.data = parseTemplateString(requestOptions.data);
} }
const config = this.$store.state.postwoman.settings.PROXY_ENABLED const config = this.$store.state.postwoman.settings.PROXY_ENABLED
@@ -1168,7 +1279,12 @@ export default {
try { try {
const startTime = Date.now(); 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; const duration = Date.now() - startTime;
this.$toast.info(`Finished in ${duration}ms`, { this.$toast.info(`Finished in ${duration}ms`, {
@@ -1259,34 +1375,34 @@ export default {
this.params = params; this.params = params;
}, },
addRequestHeader() { addRequestHeader() {
this.$store.commit('addHeaders', { this.$store.commit("addHeaders", {
key: "", key: "",
value: "" value: ""
}); });
return false; return false;
}, },
removeRequestHeader(index) { removeRequestHeader(index) {
this.$store.commit('removeHeaders', index) this.$store.commit("removeHeaders", index);
this.$toast.error("Deleted", { this.$toast.error("Deleted", {
icon: "delete" icon: "delete"
}); });
}, },
addRequestParam() { addRequestParam() {
this.$store.commit('addParams', { key: "", value: "" }) this.$store.commit("addParams", { key: "", value: "" });
return false; return false;
}, },
removeRequestParam(index) { removeRequestParam(index) {
this.$store.commit('removeParams', index) this.$store.commit("removeParams", index);
this.$toast.error("Deleted", { this.$toast.error("Deleted", {
icon: "delete" icon: "delete"
}); });
}, },
addRequestBodyParam() { addRequestBodyParam() {
this.$store.commit('addBodyParams', { key: "", value: "" }) this.$store.commit("addBodyParams", { key: "", value: "" });
return false; return false;
}, },
removeRequestBodyParam(index) { removeRequestBodyParam(index) {
this.$store.commit('removeBodyParams', index) this.$store.commit("removeBodyParams", index);
this.$toast.error("Deleted", { this.$toast.error("Deleted", {
icon: "delete" icon: "delete"
}); });
@@ -1441,7 +1557,9 @@ export default {
!this.urlExcludes.httpPassword ? "httpPassword" : null, !this.urlExcludes.httpPassword ? "httpPassword" : null,
!this.urlExcludes.bearerToken ? "bearerToken" : null, !this.urlExcludes.bearerToken ? "bearerToken" : null,
"contentType" "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 deeps = ["headers", "params"].map(item => deep(item));
let bodyParams = this.rawInput let bodyParams = this.rawInput
? [flat("rawParams")] ? [flat("rawParams")]
@@ -1498,7 +1616,10 @@ export default {
this.path = ""; this.path = "";
this.headers = []; this.headers = [];
for (const key of Object.keys(parsedCurl.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(); this.method = parsedCurl.method.toUpperCase();
if (parsedCurl["data"]) { if (parsedCurl["data"]) {
@@ -1586,7 +1707,7 @@ export default {
this.showRequestModal = false; this.showRequestModal = false;
this.editRequest = {}; this.editRequest = {};
}, },
setExclude (excludedField, excluded) { setExclude(excludedField, excluded) {
if (excludedField === "auth") { if (excludedField === "auth") {
this.urlExcludes.auth = excluded; this.urlExcludes.auth = excluded;
this.urlExcludes.httpUser = excluded; this.urlExcludes.httpUser = excluded;
@@ -1599,7 +1720,9 @@ export default {
}, },
methodChange() { methodChange() {
// this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' }) // 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() { mounted() {
@@ -1607,11 +1730,11 @@ export default {
}, },
created() { created() {
this.urlExcludes = this.$store.state.postwoman.settings.URL_EXCLUDES || { this.urlExcludes = this.$store.state.postwoman.settings.URL_EXCLUDES || {
// Exclude authentication by default for security reasons. // Exclude authentication by default for security reasons.
auth: true, auth: true,
httpUser: true, httpUser: true,
httpPassword: true, httpPassword: true,
bearerToken: true bearerToken: true
}; };
if (Object.keys(this.$route.query).length) if (Object.keys(this.$route.query).length)

353
pages/settings.vue
View File

@@ -5,7 +5,11 @@
<li> <li>
<h3 class="title">Background</h3> <h3 class="title">Background</h3>
<div class="backgrounds"> <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 <swatch
:active="settings.THEME_CLASS === theme.class" :active="settings.THEME_CLASS === theme.class"
:class="{ vibrant: theme.vibrant }" :class="{ vibrant: theme.vibrant }"
@@ -48,7 +52,7 @@
</ul> </ul>
</pw-section> </pw-section>
<br> <br />
<pw-section class="blue" label="Proxy" ref="proxy"> <pw-section class="blue" label="Proxy" ref="proxy">
<ul> <ul>
@@ -62,7 +66,16 @@
</li> </li>
</ul> </ul>
<ul class="info"> <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> </ul>
<!-- <!--
PROXY SETTINGS URL AND KEY PROXY SETTINGS URL AND KEY
@@ -84,181 +97,183 @@
</template> </template>
<style scoped> <style scoped>
.info { .info {
margin-left: 4px; margin-left: 4px;
color: var(--fg-light-color); color: var(--fg-light-color);
} }
</style> </style>
<script> <script>
import section from "../components/section"; import section from "../components/section";
import swatch from "../components/settings/swatch"; import swatch from "../components/settings/swatch";
import toggle from "../components/toggle"; import toggle from "../components/toggle";
export default { export default {
components: { components: {
"pw-section": section, "pw-section": section,
"pw-toggle": toggle, "pw-toggle": toggle,
swatch: swatch swatch: swatch
}, },
data() { data() {
return { return {
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss // 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 // You should copy the existing light theme as a template and then just
// set the relevant values. // set the relevant values.
themes: [ themes: [
{ {
color: "rgb(37, 38, 40)", color: "#252628",
name: "Kinda Dark", name: "Kinda Dark",
class: "" class: ""
}, },
{ {
color: "#ffffff", color: "#ffffff",
name: "Clearly White", name: "Clearly White",
vibrant: true, vibrant: true,
class: "light" class: "light"
}, },
{ {
color: "#000000", color: "#000000",
name: "Just Black", name: "Just Black",
class: "black" class: "black"
}, },
{ {
color: "var(--bg-color)", color: "var(--bg-color)",
name: "Auto (system)", name: "Auto (system)",
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches, vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
class: "auto" 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 || ""
} }
}; ],
}, // You can define a new color here! It will simply store the color value.
colors: [
watch: { // If the color is vibrant, black is used as the active foreground color.
proxySettings: { {
deep: true, color: "#50fa7b",
handler(value) { name: "Green",
this.applySetting("PROXY_URL", value.url); vibrant: true
this.applySetting("PROXY_KEY", value.key); },
{
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: { watch: {
applyTheme(name, color) { proxySettings: {
this.applySetting("THEME_CLASS", name); deep: true,
document.querySelector('meta[name=theme-color]').setAttribute('content', color) handler(value) {
this.applySetting("THEME_TAB_COLOR", color); this.applySetting("PROXY_URL", value.url);
document.documentElement.className = name; this.applySetting("PROXY_KEY", value.key);
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
};
} }
} }
}; },
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> </script>

317
pages/websocket.vue
View File

@@ -25,14 +25,9 @@
</ul> </ul>
</pw-section> </pw-section>
<br> <br />
<pw-section <pw-section class="purple" label="Communication" id="response" ref="response">
class="purple"
label="Communication"
id="response"
ref="response"
>
<ul> <ul>
<li> <li>
<label for="log">Log</label> <label for="log">Log</label>
@@ -74,176 +69,176 @@
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
div.log { div.log {
margin: 4px; margin: 4px;
padding: 8px 16px; padding: 8px 16px;
width: calc(100% - 8px); width: calc(100% - 8px);
border-radius: 8px; border-radius: 8px;
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);
color: var(--fg-color); color: var(--fg-color);
height: 256px; height: 256px;
overflow: auto; overflow: auto;
&, &,
span { span {
font-size: 18px; font-size: 18px;
font-family: "Roboto Mono", monospace; font-family: "Roboto Mono", monospace;
}
span {
display: block;
white-space: pre-wrap;
}
} }
span {
display: block;
white-space: pre-wrap;
}
}
</style> </style>
<script> <script>
import section from "../components/section"; import section from "../components/section";
export default { export default {
components: { components: {
"pw-section": section "pw-section": section
}, },
data() { data() {
return { return {
connectionState: false, connectionState: false,
url: "wss://echo.websocket.org", url: "wss://echo.websocket.org",
socket: null, socket: null,
communication: { communication: {
log: null, log: null,
input: "" 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);
} }
};
},
computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
}, },
methods: { urlValid() {
toggleConnection() { const pattern = new RegExp(
// If it is connecting: "^(wss?:\\/\\/)?" +
if (!this.connectionState) return this.connect(); "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
// Otherwise, it's disconnecting. "((\\d{1,3}\\.){3}\\d{1,3}))" +
else return this.disconnect(); "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
}, "(\\?[;&a-z\\d%_.~+=-]*)?" +
connect() { "(\\#[-a-z\\d_]*)?$",
this.communication.log = [ "i"
{ );
payload: `Connecting to ${this.url}...`, return pattern.test(this.url);
source: "info", }
color: "var(--ac-color)" },
} methods: {
]; toggleConnection() {
try { // If it is connecting:
this.socket = new WebSocket(this.url); if (!this.connectionState) return this.connect();
this.socket.onopen = event => { // Otherwise, it's disconnecting.
this.connectionState = true; else return this.disconnect();
this.communication.log = [ },
{ connect() {
payload: `Connected to ${this.url}.`, this.communication.log = [
source: "info", {
color: "var(--ac-color)", payload: `Connecting to ${this.url}...`,
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.`,
source: "info", source: "info",
color: "#ff5555", color: "var(--ac-color)"
ts: new Date().toLocaleTimeString() }
}); ];
if (error != null) 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({ this.communication.log.push({
payload: error, payload: `Disconnected from ${this.url}.`,
source: "info", source: "info",
color: "#ff5555", color: "#ff5555",
ts: new Date().toLocaleTimeString() ts: new Date().toLocaleTimeString()
}); });
}, this.$toast.error("Disconnected", {
sendMessage() { icon: "sync_disabled"
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)) this.socket.onmessage = event => {
return sourceEmojis[source]; this.communication.log.push({
return ""; payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
} catch (ex) {
this.handleError(ex);
this.$toast.error("Something went wrong!", {
icon: "error"
});
} }
}, },
updated: function() { disconnect() {
this.$nextTick(function() { if (this.socket != null) this.socket.close();
var divLog = document.getElementById("log"); },
divLog.scrollBy(0, divLog.scrollHeight + 100); 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> </script>

4
store/index.js
View File

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

2
store/mutations.js
View File

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