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

Merge remote-tracking branch 'upstream/master' into history-fieldset-virtualscroll

Browse Source 
# Conflicts:
#	pages/index.vue
This commit is contained in:
izerozlu
2019-08-28 12:48:31 +03:00
parent 515ea7e83d f004a9c322
commit b1588d4553
7 changed files with 668 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
README.md
View File

@@ -17,7 +17,9 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
# <img src="static/icon.png" alt="postwoman" width="32"> Postwoman # <img src="static/icon.png" alt="postwoman" width="32"> Postwoman
### 👽 API request builder by [Liyas Thomas](https://github.com/liyasthomas) ### API request builder
**Start here: _[Story behind Postwoman](https://dev.to/liyasthomas/i-created-postwoman-an-online-open-source-api-request-builder-41md)_**
<div align="center"> <div align="center">
<br> <br>
@@ -28,13 +30,72 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
### Features :sparkles: ### Features :sparkles:
:heart: **Lightweight and minimal**: Crafted with minimalistic UI design :heart: **Lightweight**: Crafted with minimalistic UI design
:electric_plug: **Real-time demo**: Send requests and get response right away! - Faster, lighter, cleaner, minimal & responsive
:robot: **VIBGYOR**: Neon combination of colors for background and foreground :zap: **Real-time**: Send requests and get/copy responses right away!
:sparkles: **PWA**: Install as a PWA on your device **Methods:**
- GET - Retrieve information about the REST API resource
- POST - Create a REST API resource
- PUT - Update a REST API resource
- DELETE - Delete a REST API resource or related component
- OPTIONS - Describe the communication options for the target resource.
_History entries are synced with local session storage_
:rainbow: **VIBGYOR**: Neon combination background, foreground & accent colors - because customization === freedom :sparkles:
**Customizations:**
- Dark and Light background themes
- Choose accent color
- Toggle multi-colored frames
_Customized themes are also synced with local session storage_
:fire: **PWA**: Install as a **[PWA](https://developers.google.com/web/progressive-web-apps)** on your device
**Features:**
- Instant loading with Service Workers
- Offline support
- Low RAM/memory and CUP usage
:electric_plug: **Web Socket**: Establish full-duplex communication channels over a single TCP connection
- Send and receive data
:closed_lock_with_key: **Authentication**: Allows to identity the end user
**Types:**
- None
- Basic authentication using username and password
- Token based authentication
:loudspeaker: **Headers**: Describes the format the body of your request is being sent as
:mailbox: **Parameters**: Use request parameters to set varying parts in simulated requests
:page_with_curl: **Request Body**: Used to send and receive data via the REST API
**Options:**
- Set content Type
- Toggle between RAW input and parameter list
:wave: **Responses**: Contains the status line, headers and the message/response body
_HTML responses have "Preview HTML" feature_
:: **History**: Request entries are synced with local session storage to reuse with a single click
**Fields**
- Timestamp
- Method
- Status code
- URL
- Path
_History entries can be deleted one-by-one or all together_
--- ---
@@ -111,6 +172,7 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
### Testing and Debugging ### Testing and Debugging
* [Liyas Thomas](https://github.com/liyasthomas) * [Liyas Thomas](https://github.com/liyasthomas)
* ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
### Contributors ### Contributors
* [NBTX](https://github.com/NBTX) * [NBTX](https://github.com/NBTX)

133
assets/css/styles.scss
View File

@@ -20,16 +20,6 @@ $responsiveWidth: 720px;
font-family: "Poppins", "Roboto", "Noto", sans-serif; font-family: "Poppins", "Roboto", "Noto", sans-serif;
} }
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
a { a {
display: inline-flex; display: inline-flex;
color: inherit; color: inherit;
@@ -42,7 +32,6 @@ body {
color: var(--fg-color); color: var(--fg-color);
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
animation: fadein 0.2s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@@ -56,6 +45,10 @@ h3 {
font-weight: 700; font-weight: 700;
} }
h3.title {
margin: 4px;
}
header, header,
footer { footer {
display: flex; display: flex;
@@ -65,20 +58,6 @@ footer {
justify-content: space-between; justify-content: space-between;
} }
@media(max-width: $responsiveWidth){
header {
display: block;
text-align: center;
nav {
display: inline-flex;
margin-top: 20px;
}
}
}
nav { nav {
a:not(:last-of-type) { a:not(:last-of-type) {
margin-right: 15px; margin-right: 15px;
@@ -87,9 +66,9 @@ nav {
body.sticky-footer footer { body.sticky-footer footer {
position: fixed; position: fixed;
right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0;
} }
.logo { .logo {
@@ -172,7 +151,15 @@ fieldset.purple legend {
color: #C198FB; color: #C198FB;
} }
.collapsible.hidden { fieldset.orange {
border-color: #F5A623;
}
fieldset.orange legend {
color: #F5A623;
}
.hidden {
display: none; display: none;
} }
@@ -183,8 +170,8 @@ textarea,
pre { pre {
margin: 4px; margin: 4px;
padding: 8px 16px; padding: 8px 16px;
width: calc(100% - 8px);
border-radius: 4px; border-radius: 4px;
width: calc(100% - 8px);
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);
color: var(--fg-color); color: var(--fg-color);
font-weight: 700; font-weight: 700;
@@ -196,14 +183,36 @@ pre {
select, select,
input, input,
option { option {
height: 38px; height: 41px;
} }
input[type="checkbox"] { input[type="checkbox"] {
width: initial; display: none;
&, & + label { &,
& + label {
vertical-align: middle; vertical-align: middle;
cursor: pointer;
&:before {
content: "\2714";
border: 2px solid var(--fg-color);
border-radius: 4px;
display: inline-flex;
height: 16px;
width: 16px;
align-items: center;
justify-content: center;
margin: 8px 8px 8px 0;
color: transparent;
transition: .2s;
}
}
&:checked + label:before {
background-color: var(--ac-color);
border-color: var(--ac-color);
color: var(--act-color);
} }
} }
@@ -234,18 +243,24 @@ ol li {
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }
.flex-wrap{
.flex-wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} align-items: center;
.btn-copy{
padding: 6px 14px;
font-size: 11px;
margin-right: 15px;
} }
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {
header {
display: block;
text-align: center;
nav {
display: inline-flex;
margin-top: 20px;
}
}
ul, ul,
ol { ol {
flex-direction: column; flex-direction: column;
@@ -255,6 +270,10 @@ ol li {
ol li { ol li {
display: flex; display: flex;
} }
.hide-on-small-screen {
display: none;
}
} }
#installPWA { #installPWA {
@@ -281,6 +300,10 @@ ol li {
background-color: #B71C1C; background-color: #B71C1C;
} }
.missing-data-response {
background-color: #676767;
}
fieldset#history { fieldset#history {
.method-list-item { .method-list-item {
position: relative; position: relative;
@@ -293,3 +316,37 @@ fieldset#history {
} }
} }
} }
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
#response-details-wrapper {
position: relative;
overflow: hidden;
border-radius: 4px;
margin: 4px;
textarea {
width: 100%;
}
#response-details {
margin: 0;
}
.covers-response {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
height: 100%;
width: 100%;
}
}

11
components/settings/swatch.vue
View File

@@ -12,10 +12,11 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 8px 15px; padding: 8px 16px;
margin: 5px; margin: 4px;
background-color: rgba(93, 93, 93, 0.2); background-color: rgba(93, 93, 93, 0.2);
border-radius: 4px; border-radius: 4px;
cursor: pointer;
&.active { &.active {
background-color: rgba(93, 93, 93, 0.3); background-color: rgba(93, 93, 93, 0.3);
@@ -24,10 +25,10 @@
.preview { .preview {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
width: 36px; width: 32px;
height: 36px; height: 32px;
border-radius: 100%; border-radius: 100%;
margin-right: 10px; margin-right: 8px;
position: relative; position: relative;
.activeTick { .activeTick {

54
layouts/default.vue
View File

@@ -3,55 +3,54 @@
<header> <header>
<div class="slide-in"> <div class="slide-in">
<nuxt-link to="/"> <nuxt-link to="/">
<h1 class="logo"><logo alt="" style="height: 24px; margin-right: 16px"/>Postwoman</h1> <h1 class="logo">
<logo alt="" style="height: 24px; margin-right: 16px" />Postwoman</h1>
</nuxt-link> </nuxt-link>
<h3>API request builder</h3> <h3>API request builder</h3>
</div> </div>
<nav> <nav>
<nuxt-link to="/">HTTP</nuxt-link> <nuxt-link to="/">HTTP</nuxt-link>
<nuxt-link to="/websocket">WebSocket</nuxt-link> <nuxt-link to="/websocket">WebSocket</nuxt-link>
<nuxt-link to="/settings"> <nuxt-link to="/settings">
<!-- Settings cog --> <!-- Settings cog -->
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z"/> <path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" />
</svg> </svg>
</nuxt-link> </nuxt-link>
</nav> </nav>
</header> </header>
<nuxt id="main" /> <nuxt id="main" />
<footer> <footer>
<div> <div>
<a href="https://github.com/liyasthomas/postwoman" target="_blank"><img src="~static/icons/github.svg" alt="" style="margin-right: 16px">GitHub</a> <a href="https://github.com/liyasthomas/postwoman" target="_blank"><img src="~static/icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>
</div> </div>
<button id="installPWA" @click.prevent="showInstallPrompt()"> <button id="installPWA" @click.prevent="showInstallPrompt()">
Install PWA Install PWA
</button> </button>
</footer> </footer>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.slide-in { .slide-in {
position: relative; position: relative;
animation: slideIn 0.4s forwards ease-in-out; animation: slideIn 0.2s forwards ease-in-out;
} }
@keyframes slideIn { @keyframes slideIn {
0% { 0% {
opacity: 0; opacity: 0;
left: -30px; left: -16px;
} }
100% { 100% {
opacity: 1; opacity: 1;
left: 0px; left: 0px;
} }
} }
header, #main, footer { header,
#main,
footer {
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
} }
@@ -71,7 +70,11 @@
&.nuxt-link-exact-active { &.nuxt-link-exact-active {
color: var(--act-color); color: var(--act-color);
fill: var(--act-color); fill: var(--act-color);
&:before { width: 100%; height: 100% }
&:before {
width: 100%;
height: 100%
}
} }
&:before { &:before {
@@ -81,7 +84,6 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: -1; z-index: -1;
background-color: var(--ac-color); background-color: var(--ac-color);
border-radius: 4px; border-radius: 4px;
margin: auto; margin: auto;
@@ -92,23 +94,28 @@
} }
@keyframes linkHover { @keyframes linkHover {
0% { width: 0; height: 2px; } 0% {
100% { width: 100%; height: 2px; } width: 0;
height: 2px;
}
100% {
width: 100%;
height: 2px;
}
} }
} }
} }
</style>
</style>
<script> <script>
import intializePwa from '../assets/js/pwa'; import intializePwa from '../assets/js/pwa';
import logo from "../components/logo"; import logo from "../components/logo";
export default { export default {
components: { components: {
logo logo
}, },
data() {
data () {
return { return {
// Once the PWA code is initialized, this holds a method // Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation // that can be called to show the user the installation
@@ -116,24 +123,20 @@
showInstallPrompt: null showInstallPrompt: null
} }
}, },
beforeMount() {
beforeMount () {
// Load theme settings // Load theme settings
(() => { (() => {
// Apply theme from settings. // Apply theme from settings.
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || ''; document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
// Load theme color data from settings, or use default color. // Load theme color data from settings, or use default color.
let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D'; let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT; let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
if(vibrant == null) vibrant = true; if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color); document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff'); document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
})(); })();
}, },
mounted() {
mounted () {
// Initializes the PWA code - checks if the app is installed, // Initializes the PWA code - checks if the app is installed,
// etc. // etc.
(async () => { (async () => {
@@ -141,4 +144,5 @@
})(); })();
} }
} }
</script> </script>

436
pages/index.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Request" ref="request"> <pw-section class="blue" label="Request" ref="request">
<ul> <ul>
<li> <li>
@@ -22,12 +21,11 @@
<input id="path" v-model="path" v-on:keyup.enter="sendRequest"> <input id="path" v-model="path" v-on:keyup.enter="sendRequest">
</li> </li>
<li> <li>
<label for="action">&nbsp;</label> <label for="action" class="hide-on-small-screen">&nbsp;</label>
<button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button> <button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT'"> <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT'">
<ul> <ul>
<li> <li>
@@ -53,7 +51,7 @@
<input :name="'bvalue'+index" v-model="param.value"> <input :name="'bvalue'+index" v-model="param.value">
</li> </li>
<li> <li>
<label for="request">&nbsp;</label> <label for="request" class="hide-on-small-screen">&nbsp;</label>
<button name="request" @click="removeRequestBodyParam(index)">Remove</button> <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
</li> </li>
</ol> </ol>
@@ -69,11 +67,11 @@
<textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea> <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
</li> </li>
</ul> </ul>
</div><div v-else> </div>
<div v-else>
<textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea> <textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
</div> </div>
</pw-section> </pw-section>
<pw-section class="green" label="Authentication" collapsed> <pw-section class="green" label="Authentication" collapsed>
<ul> <ul>
<li> <li>
@@ -102,7 +100,34 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="orange" label="Headers" collapsed>
<ol v-for="(header, index) in headers">
<li>
<label :for="'header'+index">Key {{index + 1}}</label>
<input :name="'header'+index" v-model="header.key">
</li>
<li>
<label :for="'value'+index">Value {{index + 1}}</label>
<input :name="'value'+index" v-model="header.value">
</li>
<li>
<label for="header" class="hide-on-small-screen">&nbsp;</label>
<button name="header" @click="removeRequestHeader(index)">Remove</button>
</li>
</ol>
<ul>
<li>
<label for="add">Action</label>
<button name="add" @click="addRequestHeader">Add</button>
</li>
</ul>
<ul>
<li>
<label for="request">Header List</label>
<textarea name="request" rows="1" readonly>{{headerString || '(add at least one header)'}}</textarea>
</li>
</ul>
</pw-section>
<pw-section class="cyan" label="Parameters" collapsed> <pw-section class="cyan" label="Parameters" collapsed>
<ol v-for="(param, index) in params"> <ol v-for="(param, index) in params">
<li> <li>
@@ -114,7 +139,7 @@
<input :name="'value'+index" v-model="param.value"> <input :name="'value'+index" v-model="param.value">
</li> </li>
<li> <li>
<label for="param">&nbsp;</label> <label for="param" class="hide-on-small-screen">&nbsp;</label>
<button name="param" @click="removeRequestParam(index)">Remove</button> <button name="param" @click="removeRequestParam(index)">Remove</button>
</li> </li>
</ol> </ol>
@@ -131,7 +156,6 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" label="Response" id="response" ref="response"> <pw-section class="purple" label="Response" id="response" ref="response">
<ul> <ul>
<li> <li>
@@ -147,15 +171,20 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="flex-wrap">
<label for="body">response</label> <label for="body">response</label>
<button v-if="response.body" name="action" class="btn-copy" @click="copyResponse">Copy Response</button> <button v-if="response.body" name="action" @click="copyResponse">Copy Response</button>
</div> </div>
<textarea name="body" rows="10" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea> <div id="response-details-wrapper">
<textarea name="body" rows="16" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea>
<iframe src="about:blank" class="covers-response" ref="previewFrame" :class="{hidden: !previewEnabled}"></iframe>
</div>
<div v-if="response.body && responseType === 'text/html'" class="align-right">
<button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
</div>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="gray" label="History"> <pw-section class="gray" label="History">
<ul> <ul>
<li> <li>
@@ -183,33 +212,54 @@
<input name="path" type="text" readonly :value="entry.path"> <input name="path" type="text" readonly :value="entry.path">
</li> </li>
<li> <li>
<label for="delete">&nbsp;</label> <label for="delete"class="hide-on-small-screen">&nbsp;</label>
<button name="delete" @click="deleteHistory(entry)">Delete</button> <button name="delete" @click="deleteHistory(entry)">Delete</button>
</li> </li>
<li> <li>
<label for="use">&nbsp;</label> <label for="use"class="hide-on-small-screen">&nbsp;</label>
<button name="use" @click="useHistory(entry)">Use</button> <button name="use" @click="useHistory(entry)">Use</button>
</li> </li>
</ul> </ul>
</virtual-list> </virtual-list>
</pw-section> </pw-section>
</div> </div>
</template> </template>
<script> <script>
import VirtualList from 'vue-virtual-scroll-list' import VirtualList from 'vue-virtual-scroll-list'
import section from "../components/section"; import section from "../components/section";
const statusCategories = [ const statusCategories = [{
{name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'}, name: 'informational',
{name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'}, statusCodeRegex: new RegExp(/[1][0-9]+/),
{name: 'redirection', statusCodeRegex: new RegExp(/[3][0-9]+/), className: 'redir-response'}, className: 'info-response'
{name: 'client error', statusCodeRegex: new RegExp(/[4][0-9]+/), className: 'cl-error-response'}, },
{name: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'}, {
name: 'successful',
statusCodeRegex: new RegExp(/[2][0-9]+/),
className: 'success-response'
},
{
name: 'redirection',
statusCodeRegex: new RegExp(/[3][0-9]+/),
className: 'redir-response'
},
{
name: 'client error',
statusCodeRegex: new RegExp(/[4][0-9]+/),
className: 'cl-error-response'
},
{
name: 'server error',
statusCodeRegex: new RegExp(/[5][0-9]+/),
className: 'sv-error-response'
},
{
// this object is a catch-all for when no other objects match and should always be last
name: 'unknown',
statusCodeRegex: new RegExp(/.*/),
className: 'missing-data-response'
}
]; ];
const parseHeaders = xhr => { const parseHeaders = xhr => {
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/); const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
const headerMap = {}; const headerMap = {};
@@ -220,8 +270,8 @@
headerMap[header] = value headerMap[header] = value
}); });
return headerMap return headerMap
};
};
const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus)); const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
export default { export default {
@@ -237,74 +287,87 @@
path: '/api/users', path: '/api/users',
httpUser: '', httpUser: '',
httpPassword: '', httpPassword: '',
bearerToken: '', bearerToken: '',headers: [],
params: [], params: [],
bodyParams: [], bodyParams: [],
rawParams: '', rawParams: '',
rawInput: false, rawInput: false,
contentType: 'application/json', contentType: 'application/json',
response: { response: {
status: '', status: '',
headers: '', headers: '',
body: '' body: ''
}, },
history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : [] history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : [],
} previewEnabled: false
}
},
computed: {
statusCategory() {
return findStatusGroup(this.response.status);
}, },
computed: { noHistoryToClear() {
statusCategory(){ return this.history.length === 0;
return findStatusGroup(this.response.status); },
}, isValidURL() {
noHistoryToClear() { const protocol = '^(https?:\\/\\/)?';
return this.history.length === 0; const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");
}, const validHostname = new RegExp(protocol + "(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
isValidURL() { return validIP.test(this.url) || validHostname.test(this.url);
const protocol = '^(https?:\\/\\/)?'; },
rawRequestBody() {
const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"); const {
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])$"); bodyParams
} = this
return validIP.test(this.url) || validHostname.test(this.url); if (this.contentType === 'application/json') {
}, try {
rawRequestBody() { const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
const {
bodyParams
} = this
if (this.contentType === 'application/json') {
try {
const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
"${key}": "${value}" "${key}": "${value}"
`).join()}}`) `).join()}}`)
return JSON.stringify(obj) return JSON.stringify(obj)
} catch (ex) { } catch (ex) {
return 'invalid' return 'invalid'
}
} else {
return bodyParams
.filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}=${encodeURIComponent(value)}`).join('&')
}
},
queryString() {
const result = this.params
.filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}=${encodeURIComponent(value)}`).join('&')
return result === '' ? '' : `?${result}`
} }
} else {
return bodyParams
.filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}=${encodeURIComponent(value)}`).join('&')
}
}, },
methods: { headerString() {
findEntryStatus(entry){ const result = this.headers
let foundStatusGroup = findStatusGroup(entry.status); .filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}: ${value}`).join(',\n')
return result == '' ? '' : `${result}`
},
queryString() {
const result = this.params
.filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}=${encodeURIComponent(value)}`).join('&')
return result === '' ? '' : `?${result}`
},
responseType() {
return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase();
}
},
methods: {
findEntryStatus(entry) {
let foundStatusGroup = findStatusGroup(entry.status);
return foundStatusGroup || {className: ''}; return foundStatusGroup || {className: ''};
}, },
deleteHistory(entry) { deleteHistory(entry) {
@@ -328,107 +391,138 @@
}) })
}, },
sendRequest() { sendRequest() {
if (this.$refs.response.$el.classList.contains('hidden')) { if (!this.isValidURL) {
alert('Please check the formatting of the URL');
return
} if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden') this.$refs.response.$el.classList.toggle('hidden')
} }
this.$refs.response.$el.scrollIntoView({ this.$refs.response.$el.scrollIntoView({
behavior: 'smooth' behavior: 'smooth'
}) });
this.response.status = 'Fetching...' this.previewEnabled = false;
this.response.body = 'Loading...' this.response.status = 'Fetching...';
const xhr = new XMLHttpRequest() this.response.body = 'Loading...';
const user = this.auth === 'Basic' ? this.httpUser : null const xhr = new XMLHttpRequest();
const pswd = this.auth === 'Basic' ? this.httpPassword : null const user = this.auth === 'Basic' ? this.httpUser : null;
xhr.open(this.method, this.url + this.path + this.queryString, true, user, pswd) const password = this.auth === 'Basic' ? this.httpPassword : null;
if (this.auth === 'Bearer Token') { xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken); if (this.auth === 'Bearer Token')
} xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken
if (this.method === 'POST' || this.method === 'PUT') { );
if (this.headers) {
this.headers.forEach(function(element) {
xhr.setRequestHeader(element.key, element.value)
})
}
if (this.method === 'POST' || this.method === 'PUT') {
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody; const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
xhr.setRequestHeader('Content-Length', requestBody.length) xhr.setRequestHeader('Content-Length', requestBody.length);
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`) xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
xhr.send(requestBody) xhr.send(requestBody);
} else { } else {
xhr.send() xhr.send();
} }
xhr.onload = e => { xhr.onload = e => {
this.response.status = xhr.status this.response.status = xhr.status;
const headers = this.response.headers = parseHeaders(xhr) const headers = this.response.headers = parseHeaders(xhr);
this.response.body = xhr.responseText;
if ((headers['content-type'] || '').startsWith('application/json')) { if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2) this.response.body = JSON.stringify(JSON.parse(
} else { this.response.body ), null, 2);
this.response.body = xhr.responseText
} }
const n = new Date().toLocaleTimeString();
if (!this.isValidURL) {
alert('Please check the formatting of the URL');
return
}
const n = new Date().toLocaleTimeString()
this.history = [{ this.history = [{
status: xhr.status, status: xhr.status,
time: n, time: n,
method: this.method, method: this.method,
url: this.url, url: this.url,
path: this.path path: this.path
}, ...this.history] }, ...this.history];
window.localStorage.setItem('history', JSON.stringify(this.history)) window.localStorage.setItem('history', JSON.stringify(this.history));
} };
xhr.onerror = e => { xhr.onerror = e => {
this.response.status = xhr.status this.response.status = xhr.status;
this.response.body = xhr.statusText this.response.body = xhr.statusText;
} }
}, },
addRequestParam() { addRequestHeader() {
this.params.push({ this.headers.push({
key: '', key: '',
value: '' value: ''
}) });
return false return false
}, },
removeRequestParam(index) { removeRequestHeader(index) {
this.params.splice(index, 1) this.headers.splice(index, 1)
}, },
addRequestBodyParam() { addRequestParam() {
this.bodyParams.push({ this.params.push({
key: '', key: '',
value: '' value: ''
}) })
return false return false
}, },
removeRequestBodyParam(index) { removeRequestParam(index) {
this.bodyParams.splice(index, 1) this.params.splice(index, 1)
}, },
formatRawParams(event) { addRequestBodyParam() {
if ((event.which !== 13 && event.which !== 9)) { this.bodyParams.push({
key: '',
value: ''
})
return false
},
removeRequestBodyParam(index) {
this.bodyParams.splice(index, 1)
},
formatRawParams(event) {
if ((event.which !== 13 && event.which !== 9)) {
return;
}
const textBody = event.target.value;
const textBeforeCursor = textBody.substring(0, event.target.selectionStart);
const textAfterCursor = textBody.substring(event.target.selectionEnd);
if (event.which === 13) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
const lastLine = textBeforeCursor.split('\n').slice(-1)[0];
const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor;
setTimeout(() => event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + rightPadding.length + 1, 1);
} else if (event.which === 9) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor;
event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2;
return false;
}
},
copyResponse() {
var copyText = document.getElementById("response-details");
copyText.select();
document.execCommand("copy");
},
togglePreview() {
this.previewEnabled = !this.previewEnabled;
if (this.previewEnabled) {
// If you want to add 'preview' support for other response types,
// just add them here.
if (this.responseType === "text/html") {
// If the preview already has that URL loaded, let's not bother re-loading it all.
if (this.$refs.previewFrame.getAttribute('data-previewing-url') === this.url)
return; return;
} // Use DOMParser to parse document HTML.
const textBody = event.target.value; const previewDocument = new DOMParser().parseFromString(this.response.body, this.responseType);
const textBeforeCursor = textBody.substring(0, event.target.selectionStart); // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
const textAfterCursor = textBody.substring(event.target.selectionEnd); previewDocument.head.innerHTML = `<base href="${this.url}">` + previewDocument.head.innerHTML;
// Finally, set the iframe source to the resulting HTML.
if (event.which === 13) { this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML;
event.preventDefault(); this.$refs.previewFrame.setAttribute('data-previewing-url', this.url);
const oldSelectionStart = event.target.selectionStart;
const lastLine = textBeforeCursor.split('\n').slice(-1)[0];
const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor;
setTimeout(() => event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + rightPadding.length + 1, 1);
}
else if (event.which === 9) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor;
event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2;
return false;
}
},
copyResponse() {
var copyText = document.getElementById("response-details");
copyText.select();
document.execCommand("copy");
} }
}
} }
}
} }
</script> </script>

249
pages/settings.vue
View File

@@ -1,126 +1,133 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Theme">
<pw-section class="blue" label="Theme"> <ul>
<ul> <li>
<li> <h3 class="title">Background</h3>
<h3>Background</h3> <div class="backgrounds">
<div class="backgrounds"> <span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)">
<span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)"> <swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch>
<swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch> </span>
</span> </div>
</div> </li>
</ul>
</li> <ul>
</ul> <li>
<h3 class="title">Color</h3>
<br><br> <div class="colors">
<span v-for="entry in colors" :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)">
<ul> <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
<li> </span>
</div>
<h3>Color</h3> </li>
<div class="colors"> </ul>
<span v-for="entry in colors" :key="entry.color" <ul>
@click.prevent="setActiveColor(entry.color, entry.vibrant)"> <li>
<swatch <h3 class="title">Frames</h3>
:color="entry.color" <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
:name="entry.name" <label for="disableFrameColors">Enable multi-color</label>
:class="{ vibrant: entry.vibrant }" </li>
:active="settings.THEME_COLOR === entry.color.toUpperCase()" /> </ul>
</span> </pw-section>
</div> </div>
<p>
<input id="disableFrameColors" type="checkbox"
:checked="!settings.DISABLE_FRAME_COLORS"
@change="toggleSetting('DISABLE_FRAME_COLORS')">
<label for="disableFrameColors">Enable multi-colored frames</label>
</p>
</li>
</ul>
</pw-section>
</div>
</template> </template>
<script> <script>
import section from "../components/section"; import section from "../components/section";
import swatch from "../components/settings/swatch"; import swatch from "../components/settings/swatch";
export default {
export default { 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": "#121212",
{ "color": "#121212", "name": "Dark (Default)", "class": "" }, "name": "Dark (Default)",
{ "color": "#DFDFDF", "name": "Light", "vibrant": true, "class": "light" } "class": ""
], },
{
// You can define a new color here! It will simply store the color value. "color": "#DFDFDF",
colors: [ "name": "Light",
// If the color is vibrant, black is used as the active foreground color. "vibrant": true,
{ "color": "#51ff0d", "name":"Lime (Default)", "vibrant": true }, "class": "light"
{ "color": "#FFC107", "name":"Yellow", "vibrant": true }, }
{ "color": "#E91E63", "name":"Pink", "vibrant": false }, ],
{ "color": "#e74c3c", "name":"Red", "vibrant": false }, // You can define a new color here! It will simply store the color value.
{ "color": "#9b59b6", "name":"Purple", "vibrant": false }, colors: [
{ "color": "#2980b9", "name":"Blue", "vibrant": false }, // If the color is vibrant, black is used as the active foreground color.
], {
settings: { "color": "#51ff0d",
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '', "name": "Lime (Default)",
THEME_COLOR: '', "vibrant": true
THEME_COLOR_VIBRANT: true, },
{
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false "color": "#FFC107",
} "name": "Yellow",
} "vibrant": true
}, },
{
components: { "color": "#E91E63",
'pw-section': section, "name": "Pink",
'swatch': swatch "vibrant": false
}, },
{
methods: { "color": "#e74c3c",
applyTheme (name) { "name": "Red",
this.applySetting('THEME_CLASS', name); "vibrant": false
document.documentElement.className = name; },
}, {
"color": "#9b59b6",
setActiveColor (color, vibrant) { "name": "Purple",
// By default, the color is vibrant. "vibrant": false
if(vibrant == null) vibrant = true; },
{
document.documentElement.style.setProperty('--ac-color', color); "color": "#2980b9",
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff'); "name": "Blue",
"vibrant": false
this.applySetting('THEME_COLOR', color.toUpperCase()); },
this.applySetting('THEME_COLOR_VIBRANT', vibrant); ],
}, settings: {
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
getActiveColor () { THEME_COLOR: '',
// This strips extra spaces and # signs from the strings. THEME_COLOR_VIBRANT: true,
const strip = (str) => str.replace(/#/g, '').replace(/ /g, ''); DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
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]]);
}
},
beforeMount () {
this.settings.THEME_COLOR = this.getActiveColor();
} }
}
},
components: {
'pw-section': section,
'swatch': swatch
},
methods: {
applyTheme(name) {
this.applySetting('THEME_CLASS', name);
document.documentElement.className = name;
},
setActiveColor(color, vibrant) {
// By default, the color is vibrant.
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
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]]);
}
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
} }
</script> }
</script>

188
pages/websocket.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Request" ref="request"> <pw-section class="blue" label="Request" ref="request">
<ul> <ul>
<li> <li>
@@ -8,41 +7,36 @@
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection"> <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
</li> </li>
<li> <li>
<label>&nbsp;</label> <label for="action" class="hide-on-small-screen">&nbsp;</label>
<button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button> <button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" label="Communication" id="response" ref="response"> <pw-section class="purple" label="Communication" id="response" ref="response">
<ul> <ul>
<li> <li>
<label for="log">Log</label> <label for="log">Log</label>
<div id="log" name="log" class="log"> <div id="log" name="log" class="log">
<span v-if="communication.log"> <span v-if="communication.log">
<span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span> <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span> </span>
<span v-else>(Waiting for connection...)</span> <span v-else>(Waiting for connection...)</span>
</div> </div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<label for="message">Message</label> <label for="message">Message</label>
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage"> <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
</li> </li>
<li> <li>
<label>&nbsp;</label> <label for="send" class="hide-on-small-screen">&nbsp;</label>
<button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button> <button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
div.log { div.log {
margin: 4px; margin: 4px;
@@ -54,7 +48,8 @@
height: 256px; height: 256px;
overflow: auto; overflow: auto;
&, span { &,
span {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
font-family: monospace; font-family: monospace;
@@ -65,142 +60,116 @@
white-space: pre-wrap; 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: { computed: {
toggleConnectionVerb () { toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect"; return !this.connectionState ? "Connect" : "Disconnect";
}, },
urlValid() {
urlValid () { const pattern = new RegExp('^(wss?:\\/\\/)?' +
const pattern = new RegExp('^(wss?:\\/\\/)?' + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + '((\\d{1,3}\\.){3}\\d{1,3}))' +
'((\\d{1,3}\\.){3}\\d{1,3}))' + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + '(\\?[;&a-z\\d%_.~+=-]*)?' +
'(\\?[;&a-z\\d%_.~+=-]*)?' + '(\\#[-a-z\\d_]*)?$', 'i');
'(\\#[-a-z\\d_]*)?$', 'i'); return pattern.test(this.url);
return pattern.test(this.url);
} }
}, },
methods: { methods: {
toggleConnection () { toggleConnection() {
// If it is connecting: // If it is connecting:
if(!this.connectionState) return this.connect(); if (!this.connectionState) return this.connect();
// Otherwise, it's disconnecting. // Otherwise, it's disconnecting.
else return this.disconnect(); else return this.disconnect();
}, },
connect() {
connect () { this.communication.log = [{
this.communication.log = [ payload: `Connecting to ${this.url}...`,
{ source: 'info',
payload: `Connecting to ${this.url}...`, color: 'lime'
source: 'info', }];
color: 'lime'
}
];
try { try {
this.socket = new WebSocket(this.url); this.socket = new WebSocket(this.url);
this.socket.onopen = (event) => {
this.socket.onopen = (event) => { this.connectionState = true;
this.connectionState = true; this.communication.log = [{
payload: `Connected to ${this.url}.`,
this.communication.log = [ source: 'info',
{ color: 'lime'
payload: `Connected to ${this.url}.`, }];
source: 'info', };
color: 'lime' this.socket.onerror = (event) => {
} this.handleError();
]; };
}; this.socket.onclose = (event) => {
this.connectionState = false;
this.socket.onerror = (event) => { this.communication.log.push({
this.handleError(); payload: `Disconnected from ${this.url}.`,
}; source: 'info',
color: 'red'
this.socket.onclose = (event) => { });
this.connectionState = false; };
this.socket.onmessage = (event) => {
this.communication.log.push({ this.communication.log.push({
payload: `Disconnected from ${this.url}.`, payload: event.data,
source: 'info', source: 'server'
color: 'red' });
}); }
}; } catch (ex) {
this.handleError(ex);
this.socket.onmessage = (event) => {
this.communication.log.push({
payload: event.data,
source: 'server'
});
}
}catch(ex){
this.handleError(ex);
} }
}, },
disconnect() {
disconnect () { if (this.socket != null) this.socket.close();
if(this.socket != null) this.socket.close();
}, },
handleError(error) {
handleError (error) { this.disconnect();
this.disconnect(); this.connectionState = false;
this.connectionState = false; this.communication.log.push({
payload: `An error has occurred.`,
this.communication.log.push({ source: 'info',
payload: `An error has occurred.`, color: 'red'
source: 'info', });
color: 'red' if (error != null) this.communication.log.push({
}); payload: error,
if(error != null) this.communication.log.push({ source: 'info',
payload: error, color: 'red'
source: 'info', });
color: 'red'
});
}, },
sendMessage() {
sendMessage () {
const message = this.communication.input; const message = this.communication.input;
this.socket.send(message); this.socket.send(message);
this.communication.log.push({ this.communication.log.push({
payload: message, payload: message,
source: 'client' source: 'client'
}); });
this.communication.input = ""; this.communication.input = "";
}, },
collapse({
collapse({target}) { target
}) {
const el = target.parentNode.className; const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle('hidden'); document.getElementsByClassName(el)[0].classList.toggle('hidden');
}, },
getSourcePrefix(source) {
getSourcePrefix(source){
const sourceEmojis = { const sourceEmojis = {
// Source used for info messages. // Source used for info messages.
'info': 'ℹ️ [INFO]:\t', 'info': 'ℹ️ [INFO]:\t',
@@ -209,11 +178,10 @@
// Source used for server to client messages. // Source used for server to client messages.
'server': '📥 [RECEIVED]:\t' 'server': '📥 [RECEIVED]:\t'
}; };
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]; if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
return ''; return '';
} }
} }
} }
</script> </script>