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

Merge branch 'master' into implement-ace-instead-highlightjs

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-12 07:24:47 +05:30
committed by GitHub
parent 4ca78a2fe5 4cca931d9d
commit f9e62f3237
12 changed files with 222 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@@ -23,11 +23,11 @@
---
**Start here: _[Story behind Postwoman](https://dev.to/liyasthomas/i-created-postwoman-an-online-open-source-api-request-builder-41md)_**
**Read: _[Story behind Postwoman](https://dev.to/liyasthomas/i-created-postwoman-an-online-open-source-api-request-builder-41md), [Postwoman v1.0](https://dev.to/liyasthomas/postwoman-v1-0-a-free-fast-beautiful-alternative-to-postman-mn0)_**
**Chat here: _[Telegram](https://t.me/postwoman_app), [Discord](https://discord.gg/GAMWxmR)_**
**Chat: _[Telegram](https://t.me/postwoman_app), [Discord](https://discord.gg/GAMWxmR)_**
**Donate here: _[PayPal](https://www.paypal.me/liyascthomas), [Open Collective](https://opencollective.com/postwoman), [Patreon](https://www.patreon.com/liyasthomas)_**
**Donate: _[PayPal](https://www.paypal.me/liyascthomas), [Open Collective](https://opencollective.com/postwoman), [Patreon](https://www.patreon.com/liyasthomas)_**
<div align="center">
<br>
@@ -64,7 +64,7 @@ _History entries are synced with local session storage_
_Customized themes are also synced with local session storage_
🔥 **PWA**: Install as a [PWA](https://developers.google.com/web/progressive-web-apps) on your device.
🔥 **PWA**: Install as a [PWA](https://developers.google.com/web/progressive-web-apps) (100/100 Lighthouse score) on your device.
**Features:**
- Instant loading with [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers)
@@ -321,13 +321,13 @@ This project is licensed under the [MIT License](https://opensource.org/licenses
## Badges
| Status | Preview | Markdown Code (copy & paste into `readme.md`) |
| Status | Preview | Markdown code (copy & paste into `readme.md`) |
| ----------- | ----------- | ----------- |
| **Default** | [![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-50fa7b?logo=Postwoman)](https://postwoman.io) | `[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-50fa7b?logo=Postwoman)](https://postwoman.io)` |
| **Success** | [![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-success?logo=Postwoman)](https://postwoman.io) | `[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-success?logo=Postwoman)](https://postwoman.io)` |
| **Critical** | [![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-critical?logo=Postwoman)](https://postwoman.io) | `[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-critical?logo=Postwoman)](https://postwoman.io)` |
| **Custom** | [![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-blueviolet?logo=Postwoman)](https://postwoman.io) | `[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-blueviolet?logo=Postwoman)](https://postwoman.io)` |
| Make your own badge! | [![Postwoman](https://img.shields.io/badge/your_text-Postwoman-hex_color_code?logo=Postwoman)](https://postwoman.io) | `[![Postwoman](https://img.shields.io/badge/your_text-Postwoman-hex_color_code?logo=Postwoman)](https://postwoman.io)` |
| Customize | [![Postwoman](https://img.shields.io/badge/your_text-Postwoman-hex_color_code?logo=Postwoman)](https://postwoman.io) | `[![Postwoman](https://img.shields.io/badge/your_text-Postwoman-hex_color_code?logo=Postwoman)](https://postwoman.io)` |
<div align="center">
<br>

35
assets/css/styles.scss
View File

@@ -12,16 +12,23 @@ html {
::-webkit-scrollbar {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: var(--bg-dark-color);
visibility: hidden;
&:hover {
visibility: visible;
}
}
::-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);
&:hover {
background-color: var(--fg-color);
}
}
::placeholder {
@@ -402,7 +409,7 @@ button {
&:not([disabled]):focus {
color: var(--act-color);
fill: var(--act-color);
box-shadow: 0 0 0 2px var(--fg-color);
box-shadow: inset 0 0 0 2px var(--fg-color);
transition: all 0.2s ease-in-out;
}
@@ -595,6 +602,11 @@ ol {
margin: 4px 0 4px;
padding: 0;
list-style-type: none;
ul,
ol {
margin: 0;
}
}
ul li,
@@ -663,19 +675,18 @@ ol li {
background-color: var(--err-color);
}
.virtual-list::-webkit-scrollbar {
width: 0;
}
fieldset#history {
.method-list-item {
position: relative;
span {
position: absolute;
top: 12px;
right: 12px;
top: 8px;
right: 8px;
font-family: 'Roboto Mono', monospace;
background-color: var(--bg-color);
padding: 4px 8px;
border-radius: 8px;
}
}
}
@@ -692,6 +703,10 @@ fieldset#history {
text-align: right;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
#response-details-wrapper {
position: relative;
overflow: hidden;

2
build.js
View File

@@ -21,7 +21,7 @@ try {
let version = {};
// Get the current version name as the tag from Git.
version.name = process.env.TRAVIS_TAG || runCommand("git", ["tag"]);
version.name = process.env.TRAVIS_TAG || runCommand("git", ["tag --sort=committerdate | tail -1"]);
// FALLBACK: If version.name was unset, let's grab it from GitHub.
if (!version.name) {

249
components/history.vue
View File

@@ -2,117 +2,131 @@
<pw-section class="green" icon="history" label="History" ref="history">
<ul>
<li id="filter-history">
<input
aria-label="Search"
type="text"
placeholder="search history"
v-model="filterText"
/>
<input aria-label="Search" type="text" placeholder="search history" v-model="filterText" />
</li>
</ul>
<ul v-if="history.length !== 0">
<li></li>
<li @click="sort_by_label()">
<label>
<ul v-if="history.length !== 0" class="labels">
<div class="show-on-small-screen">
<li>
<button class="icon">
<i class="material-icons">star_half</i>
</button>
</li>
<li>
<button class="icon">
<i class="material-icons">history</i>
</button>
</li>
</div>
<li>
<button class="icon" @click="sort_by_label()">
Label
</label>
</button>
</li>
<li @click="sort_by_time()">
<label>
<li>
<button class="icon" @click="sort_by_time()">
Time
</label>
</button>
</li>
<li @click="sort_by_status_code()">
<label>
<li>
<button class="icon" @click="sort_by_status_code()">
Status
</label>
</button>
</li>
<li @click="sort_by_url()">
<label>
<li>
<button class="icon" @click="sort_by_url()">
URL
</label>
</button>
</li>
<li @click="sort_by_path()">
<label>
<li>
<button class="icon" @click="sort_by_path()">
Path
</label>
</button>
</li>
<li></li>
<transition name="smooth" v-if="show">
<li>
<ul>
<li>
<button class="icon" @click="sort_by_duration()">
Duration
</button>
</li>
<li>
<button class="icon">
Pre-script
</button>
</li>
</ul>
</li>
</transition>
<div class="show-on-small-screen">
<li>
<button class="icon" @click="enableHistoryClearing" v-tooltip="'Clear History'">
<i class="material-icons">clear_all</i>
</button>
</li>
<li>
<button class="icon" @click="toggleCollapse()" v-tooltip="{ content: !show ? 'Show more' : 'Hide more'}">
<i class="material-icons" v-if="!show">first_page</i>
<i class="material-icons" v-else>last_page</i>
</button>
</li>
</div>
</ul>
<virtual-list
class="virtual-list"
:class="{filled: filteredHistory.length}"
:size="56"
:remain="Math.min(5, filteredHistory.length)"
>
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="56" :remain="Math.min(5, filteredHistory.length)">
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<li>
<button v-if="entry.usesScripts"
v-tooltip="'This entry used pre-request scripts'"
class="icon"
>
<i class="material-icons">code</i>
</button>
<button v-else
v-tooltip="'No pre-request scripts'"
class="icon"
>
<i class="material-icons">http</i>
</button>
</li>
<li>
<input
aria-label="Label"
type="text"
readonly
:value="entry.label"
placeholder="No label"
/>
</li>
<li>
<input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
</li>
<div class="show-on-small-screen">
<li>
<button class="icon" :class="{ stared: entry.star }" @click="toggleStar(index)" v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star'}">
<i class="material-icons" v-if="entry.star">star</i>
<i class="material-icons" v-else>star_border</i>
</button>
</li>
<li>
<button class="icon" v-tooltip="{ content: !entry.usesScripts ? 'No pre-request script' : 'Used pre-request script'}">
<i class="material-icons" v-if="!entry.usesScripts">http</i>
<i class="material-icons" v-else>code</i>
</button>
</li>
</div>
<div class="show-on-small-screen">
<li>
<input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
</li>
<li>
<input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
</li>
</div>
<li class="method-list-item">
<input
aria-label="Method"
type="text"
readonly
:value="entry.method"
:class="findEntryStatus(entry).className"
:style="{'--status-code': entry.status}"
/>
<span
class="entry-status-code"
:class="findEntryStatus(entry).className"
:style="{'--status-code': entry.status}"
>{{entry.status}}</span>
</li>
<li>
<input aria-label="URL" type="text" readonly :value="entry.url" />
</li>
<li>
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
<input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}" />
<span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
</li>
<div class="show-on-small-screen">
<li>
<button
v-tooltip="'Delete entry'"
class="icon"
:id="'delete-button#'+index"
@click="deleteHistory(entry)"
aria-label="Delete"
>
<input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
</li>
<li>
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
</li>
</div>
<transition name="smooth">
<div v-if="show" class="show-on-small-screen">
<li>
<input aria-label="Duration" type="text" readonly :value="entry.duration" placeholder="No duration" />
</li>
<li>
<input aria-label="Pre Request Script" type="text" readonly :value="entry.preRequestScript" placeholder="No pre request script" />
</li>
</div>
</transition>
<div class="show-on-small-screen">
<li>
<button v-tooltip="'Delete entry'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
<i class="material-icons">delete</i>
</button>
</li>
<li>
<button
v-tooltip="'Edit entry'"
class="icon"
:id="'use-button#'+index"
@click="useHistory(entry)"
aria-label="Edit"
>
<button v-tooltip="'Edit entry'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
<i class="material-icons">edit</i>
</button>
</li>
@@ -131,12 +145,7 @@
</ul>
<ul v-if="history.length !== 0">
<li v-if="!isClearingHistory">
<button
class="icon"
id="clear-history-button"
:disabled="history.length === 0"
@click="enableHistoryClearing"
>
<button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">
<i class="material-icons">clear_all</i>
<span>Clear All</span>
</button>
@@ -171,17 +180,42 @@
}
}
.smooth-enter-active,
.smooth-leave-active {
transition: all 0.2s;
}
.smooth-enter,
.smooth-leave-to {
opacity: 0;
}
.stared {
color: #F8E81C !important;
}
@media (max-width: 720px) {
.virtual-list.filled {
min-height: 200px;
min-height: 320px;
}
.labels {
display: none;
}
.entry {
border-bottom: 1px solid var(--brd-color);
}
}
</style>
<script>
import VirtualList from "vue-virtual-scroll-list";
import section from "./section";
import { findStatusGroup } from "../pages/index";
import {
findStatusGroup
} from "../pages/index";
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property));
@@ -203,7 +237,8 @@
reverse_sort_time: false,
reverse_sort_status_code: false,
reverse_sort_url: false,
reverse_sort_path: false
reverse_sort_path: false,
show: false
};
},
computed: {
@@ -327,7 +362,25 @@
});
this.history = byPath;
this.reverse_sort_path = !this.reverse_sort_path;
},
sort_by_duration() {
let byDuration = this.history.slice(0);
byDuration.sort((a, b) => {
if (this.reverse_sort_duration)
return a.duration == b.duration ? 0 : +(a.duration < b.duration) || -1;
else return a.duration == b.duration ? 0 : +(a.duration > b.duration) || -1;
});
this.history = byDuration;
this.reverse_sort_duration = !this.reverse_sort_duration;
},
toggleCollapse() {
this.show = !this.show
},
toggleStar(index) {
this.history[index]["star"] = !this.history[index]["star"];
updateOnLocalStorage("history", this.history);
}
}
};
</script>

3
functions/preRequest.js
View File

@@ -7,6 +7,9 @@ export default function getEnvironmentVariablesFromScript(script) {
environment: {
set: (key, value) => _variables[key] = value,
},
env: {
set: (key, value) => _variables[key] = value,
},
// globals that the script is allowed to have access to.
};

13
layouts/default.vue
View File

@@ -131,25 +131,25 @@
</button>
</div>
<!-- Bottom section of footer: version/author information -->
<p class="align-center">
<p class="align-center mono">
<span v-if="version.name">
<a
v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name"
target="_blank"
rel="noopener"
>{{version.name}}</a>
<span v-if="version.hash">
<!-- <span v-if="version.hash">
-
<a
v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
target="_blank"
rel="noopener"
>{{version.hash}}</a>
</span>
<span v-if="version.variant">({{version.variant}})</span>
</span> -->
<!-- <span v-if="version.variant">({{version.variant}})</span> -->
&#x2022;
</span> by
<a href="https://liyasthomas.web.app" target="_blank" rel="noopener">Liyas Thomas 🦄</a> &#x2022;
</span>
<a href="https://liyasthomas.web.app" target="_blank" rel="noopener">🦄</a> &#x2022;
<a href="https://postwoman.launchaco.com" target="_blank" rel="noopener">Subscribe</a>
</p>
</footer>
@@ -259,6 +259,7 @@
let section = document.querySelector(link.hash);
if (
section &&
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {

14
nuxt.config.js
View File

@@ -34,7 +34,7 @@ export default {
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no, minimal-ui'
content: 'width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover, minimal-ui'
},
{
hid: 'description',
@@ -59,7 +59,7 @@ export default {
},
{
itemprop: "image",
content: `${routerBase.router.base}icons/icon-192x192.png`
content: `${routerBase.router.base}logo.jpg`
},
// Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt)
{
@@ -115,12 +115,12 @@ export default {
},
{
property: 'og:image',
content: `${routerBase.router.base}icons/icon-144x144.png`
content: `${routerBase.router.base}logo.jpg`
},
// Twitter
{
name: 'twitter:card',
content: "summary"
content: "summary_large_image"
},
{
name: 'twitter:site',
@@ -136,15 +136,15 @@ export default {
},
{
name: 'twitter:title',
content: meta.name
content: `${meta.name} \u2022 ${meta.shortDescription}`
},
{
name: 'twitter:description',
content: meta.shortDescription
content: meta.description
},
{
name: 'twitter:image',
content: `${routerBase.router.base}icons/icon-144x144.png`
content: `${routerBase.router.base}logo.jpg`
},
],
link: [{

6
package-lock.json generated
View File

@@ -3666,9 +3666,9 @@
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
},
"cypress": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-3.6.0.tgz",
"integrity": "sha512-ODhbOrH1XZx0DUoYmJSvOSbEQjycNOpFYe7jOnHkT1+sdsn2+uqwAjZ1x982q3H4R/5iZjpSd50gd/iw2bofzg==",
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/cypress/-/cypress-3.6.1.tgz",
"integrity": "sha512-6n0oqENdz/oQ7EJ6IgESNb2M7Bo/70qX9jSJsAziJTC3kICfEMmJUlrAnP9bn+ut24MlXQST5nRXhUP5nRIx6A==",
"dev": true,
"requires": {
"@cypress/listr-verbose-renderer": "0.4.1",

2
package.json
View File

@@ -34,7 +34,7 @@
"yargs-parser": "^16.1.0"
},
"devDependencies": {
"cypress": "^3.6.0",
"cypress": "^3.6.1",
"node-sass": "^4.13.0",
"sass-loader": "^7.3.1",
"start-server-and-test": "^1.10.6"

24
pages/index.vue
View File

@@ -64,7 +64,7 @@
v-model="preRequestScript"
v-textarea-auto-height="preRequestScript"
spellcheck="false"
placeholder="pw.environment.set('variable', 'value');"
placeholder="pw.env.set('variable', 'value');"
></textarea>
</li>
</ul>
@@ -230,7 +230,7 @@
v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code'}"
>
<i class="material-icons" v-if="isHidden">flash_on</i>
<i class="material-icons" v-if="!isHidden">flash_off</i>
<i class="material-icons" v-else>flash_off</i>
</button>
<button
:class="'icon' + (showPreRequestScript ? ' info-response' : '')"
@@ -246,7 +246,7 @@
<i
class="material-icons"
:class="showPreRequestScript"
v-if="showPreRequestScript"
v-else
>close</i>
</button>
</div>
@@ -373,7 +373,7 @@
</li>
</div>
</ul>
<ul v-if="auth === 'Bearer Token'">
<ul v-else-if="auth === 'Bearer Token'">
<li>
<input placeholder="Token" name="bearer_token" v-model="bearerToken" />
</li>
@@ -591,7 +591,7 @@
<div class="align-right" v-if="response.body && responseType === 'text/html'">
<button class="icon" @click.prevent="togglePreview">
<i class="material-icons" v-if="!previewEnabled">visibility</i>
<i class="material-icons" v-if="previewEnabled">visibility_off</i>
<i class="material-icons" v-else>visibility_off</i>
<span>{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</span>
</button>
</div>
@@ -978,7 +978,7 @@ export default {
);
const validHostname = new RegExp(
protocol +
"(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$"
"(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$"
);
return validIP.test(this.url) || validHostname.test(this.url);
},
@@ -1183,11 +1183,13 @@ export default {
behavior: "smooth"
});
},
handleUseHistory({ label, method, url, path }) {
handleUseHistory({ label, method, url, path, usesScripts, preRequestScript }) {
this.label = label;
this.method = method;
this.url = url;
this.path = path;
this.showPreRequestScript = usesScripts;
this.preRequestScript = preRequestScript;
this.scrollInto("request");
},
getVariablesFromPreRequestScript() {
@@ -1346,7 +1348,10 @@ export default {
method: this.method,
url: this.url,
path: this.path,
usesScripts: Boolean(this.preRequestScript)
usesScripts: Boolean(this.preRequestScript),
preRequestScript: this.preRequestScript,
duration,
star: false
};
this.$refs.historyComponent.addEntry(entry);
})();
@@ -1366,7 +1371,8 @@ export default {
method: this.method,
url: this.url,
path: this.path,
usesScripts: Boolean(this.preRequestScript)
usesScripts: Boolean(this.preRequestScript),
preRequestScript: this.preRequestScript
};
this.$refs.historyComponent.addEntry(entry);
return;

4
pages/websocket.vue
View File

@@ -88,6 +88,8 @@ div.log {
span {
display: block;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
}
</style>
@@ -118,7 +120,7 @@ export default {
"^(wss?:\\/\\/)?" +
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
"((\\d{1,3}\\.){3}\\d{1,3}))" +
"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
"(\\:\\d+)?(\\/[-a-z\\d%_.~+@]*)*" +
"(\\?[;&a-z\\d%_.~+=-]*)?" +
"(\\#[-a-z\\d_]*)?$",
"i"

BIN
static/logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB