Merge remote-tracking branch 'upstream/master'

.editorconfig

@@ -0,0 +1,11 @@
+# https://editorconfig.org
+
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -79,7 +79,6 @@ dist
 
 # IDE / Editor
 .idea
-.editorconfig
 
 # Service worker
 sw.*

README.md

@@ -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
 
-### 👽 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">
   <br>
@@ -28,13 +30,74 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
 
 ### 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
+ - `HEAD` - Asks for a response identical to that of a GET request, but without the response body.
+ - `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
+ - `PATCH` - Applies partial modifications to a REST API 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 CPU 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_
+
+:alarm_clock: **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 +174,7 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
 
 ### Testing and Debugging
 * [Liyas Thomas](https://github.com/liyasthomas)
+* ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
 
 ### Contributors
 * [NBTX](https://github.com/NBTX)

assets/css/styles.scss

@@ -20,16 +20,6 @@ $responsiveWidth: 720px;
   font-family: "Poppins", "Roboto", "Noto", sans-serif;
 }
 
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 a {
   display: inline-flex;
   color: inherit;
@@ -42,7 +32,6 @@ body {
   color: var(--fg-color);
   font-weight: 500;
   line-height: 1.5;
-  animation: fadein 0.2s;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -56,6 +45,10 @@ h3 {
   font-weight: 700;
 }
 
+h3.title {
+  margin: 4px;
+}
+
 header,
 footer {
   display: flex;
@@ -65,20 +58,6 @@ footer {
   justify-content: space-between;
 }
 
-
-@media(max-width: $responsiveWidth){
-  header {
-    display: block;
-    text-align: center;
-
-    nav {
-      display: inline-flex;
-      margin-top: 20px;
-    }
-  }
-}
-
-
 nav {
   a:not(:last-of-type) {
     margin-right: 15px;
@@ -87,9 +66,9 @@ nav {
 
 body.sticky-footer footer {
   position: fixed;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
 }
 
 .logo {
@@ -105,6 +84,11 @@ button {
   font-weight: 700;
   font-size: 16px;
   cursor: pointer;
+
+  &[disabled], &.disabled {
+    opacity: 0.7;
+    cursor: default;
+  }
 }
 
 fieldset {
@@ -172,7 +156,15 @@ fieldset.purple legend {
   color: #C198FB;
 }
 
-.collapsible.hidden {
+fieldset.orange {
+  border-color: #F5A623;
+}
+
+fieldset.orange legend {
+  color: #F5A623;
+}
+
+.hidden {
   display: none;
 }
 
@@ -183,8 +175,8 @@ textarea,
 pre {
   margin: 4px;
   padding: 8px 16px;
-  width: calc(100% - 8px);
   border-radius: 4px;
+  width: calc(100% - 8px);
   background-color: var(--bg-dark-color);
   color: var(--fg-color);
   font-weight: 700;
@@ -196,14 +188,36 @@ pre {
 select,
 input,
 option {
-  height: 38px;
+  height: 41px;
 }
 
 input[type="checkbox"] {
-  width: initial;
+  display: none;
 
-  &, & + label {
+  &,
+  & + label {
     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);
   }
 }
 
@@ -211,7 +225,7 @@ input[type="checkbox"] {
   background-color: var(--err-color);
 }
 
-.disabled {
+.disabled, input[disabled] {
   background-color: var(--err-color);
   color: #b2b2b2;
 }
@@ -234,18 +248,24 @@ ol li {
   flex-direction: column;
   flex-grow: 1;
 }
-.flex-wrap{
+
+.flex-wrap {
   display: flex;
   justify-content: space-between;
-}
+  align-items: center;
-.btn-copy{
-    padding: 6px 14px;
-    font-size: 11px;
-    margin-right: 15px;
-
 }
 
 @media (max-width: $responsiveWidth) {
+  header {
+    display: block;
+    text-align: center;
+
+    nav {
+      display: inline-flex;
+      margin-top: 20px;
+    }
+  }
+
   ul,
   ol {
     flex-direction: column;
@@ -255,6 +275,10 @@ ol li {
   ol li {
     display: flex;
   }
+
+  .hide-on-small-screen {
+    display: none;
+  }
 }
 
 #installPWA {
@@ -281,6 +305,14 @@ ol li {
   background-color: #B71C1C;
 }
 
+.missing-data-response {
+  background-color: #676767;
+}
+
+.virtual-list::-webkit-scrollbar {
+  width: 0;
+}
+
 fieldset#history {
   .method-list-item {
     position: relative;
@@ -293,3 +325,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%;
+  }
+}

components/settings/swatch.vue

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

components/toggle.vue

@@ -0,0 +1,98 @@
+<template>
+  <div @click="toggle()">
+    <label class="toggle" :class="{on: on}" ref="toggle">
+      <span class="handle"></span>
+    </label>
+    <label class="caption"><slot /></label>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  $useBorder: true;
+  $borderColor: var(--fg-color);
+  $activeColor: var(--ac-color);
+  $inactiveColor: var(--fg-color);
+
+  $inactiveHandleColor: $inactiveColor;
+  $activeHandleColor: var(--fg-color);
+
+  $width: 50px;
+  $height: 20px;
+  $handleSpacing: 4px;
+
+  $transition: all 0.2s ease-in-out;
+
+  div {
+    display: inline-block;
+  }
+
+  label.caption {
+    margin-left: 5px;
+    vertical-align: middle;
+  }
+
+  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: 100px;
+    transition: $transition;
+    box-sizing: initial;
+    padding: 0;
+    margin: 10px 5px;
+
+    .handle {
+      position: absolute;
+      display: inline-block;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      margin: $handleSpacing;
+      background-color: $inactiveHandleColor;
+
+      width: #{ $height - ($handleSpacing * 2) };
+      height: #{ $height - ($handleSpacing * 2) };
+      border-radius: 100px;
+
+      pointer-events: none;
+      transition: $transition;
+
+      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    }
+
+    &.on {
+      background-color: $activeColor;
+      border-color: $activeColor;
+
+      .handle {
+        background-color: $activeHandleColor;
+        left: #{$width - $height};
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+
+      props: {
+          'on': {
+              type: Boolean,
+              default: false
+          }
+      },
+
+      methods: {
+          toggle () {
+              this.$refs.toggle.classList.toggle("on");
+              this.$emit('change', this.$refs.toggle.classList.contains("on"));
+          }
+      }
+
+  }
+</script>

layouts/default.vue

@@ -3,55 +3,54 @@
     <header>
       <div class="slide-in">
         <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>
         <h3>API request builder</h3>
       </div>
-
       <nav>
         <nuxt-link to="/">HTTP</nuxt-link>
         <nuxt-link to="/websocket">WebSocket</nuxt-link>
         <nuxt-link to="/settings">
           <!-- Settings cog -->
           <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>
         </nuxt-link>
       </nav>
     </header>
-
     <nuxt id="main" />
-
     <footer>
       <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 id="imgGitHub" src="~static/icons/github.svg" alt="" :style="logoStyle()">GitHub</a>
       </div>
-
       <button id="installPWA" @click.prevent="showInstallPrompt()">
         Install PWA
       </button>
     </footer>
   </div>
 </template>
-
 <style lang="scss">
   .slide-in {
     position: relative;
-    animation: slideIn 0.4s forwards ease-in-out;
+    animation: slideIn 0.2s forwards ease-in-out;
   }
 
   @keyframes slideIn {
     0% {
       opacity: 0;
-      left: -30px;
+      left: -16px;
     }
+
     100% {
       opacity: 1;
       left: 0px;
     }
   }
 
-  header, #main, footer {
+  header,
+  #main,
+  footer {
     margin: 0 auto;
     max-width: 1200px;
   }
@@ -71,7 +70,11 @@
       &.nuxt-link-exact-active {
         color: var(--act-color);
         fill: var(--act-color);
-        &:before { width: 100%; height: 100% }
+
+        &:before {
+          width: 100%;
+          height: 100%
+        }
       }
 
       &:before {
@@ -81,7 +84,6 @@
         left: 0;
         right: 0;
         z-index: -1;
-
         background-color: var(--ac-color);
         border-radius: 4px;
         margin: auto;
@@ -92,48 +94,52 @@
       }
 
       @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>
   import intializePwa from '../assets/js/pwa';
   import logo from "../components/logo";
-
   export default {
     components: {
       logo
     },
-
+    data() {
-    data () {
       return {
         // Once the PWA code is initialized, this holds a method
         // that can be called to show the user the installation
         // prompt.
-        showInstallPrompt: null
+        showInstallPrompt: null,
+        logoStyle() {
+          return "margin-right: 16px;" + (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
+         }
       }
     },
-
+    beforeMount() {
-    beforeMount () {
       // Load theme settings
       (() => {
         // Apply theme from settings.
         document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
-
         // Load theme color data from settings, or use default color.
         let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
         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('--act-color', vibrant ? '#121212' : '#fff');
       })();
     },
-
+    mounted() {
-    mounted () {
       // Initializes the PWA code - checks if the app is installed,
       // etc.
       (async () => {
@@ -141,4 +147,5 @@
       })();
     }
   }
+
 </script>

nuxt.config.js

@@ -86,7 +86,7 @@ export default {
   /*
   ** Customize the progress-bar color
   */
-  loading: { color: '#88FB4F' },
+  loading: { color: 'var(--ac-color)' },
 
   /*
   ** Global CSS
@@ -136,7 +136,9 @@ export default {
           return icons;
         })([48, 72, 96, 144, 192, 512])
       }
-    }]
+    }],
+
+    ['@nuxtjs/axios']
   ],
 
   /*

package-lock.json

@@ -1527,6 +1527,17 @@
         }
       }
     },
+    "@nuxtjs/axios": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.6.0.tgz",
+      "integrity": "sha512-Rl4nnudm+sSkMtgfSEAeA5bq6aFpbBoYVXLXWaDxfydslukRd2SdEDdGv0gHE7F/jtIw+JfptWDHCHnzuoO/Ng==",
+      "requires": {
+        "@nuxtjs/proxy": "^1.3.3",
+        "axios": "^0.19.0",
+        "axios-retry": "^3.1.2",
+        "consola": "^2.10.1"
+      }
+    },
     "@nuxtjs/icon": {
       "version": "3.0.0-beta.16",
       "resolved": "https://registry.npmjs.org/@nuxtjs/icon/-/icon-3.0.0-beta.16.tgz",
@@ -1557,6 +1568,15 @@
         "@nuxtjs/pwa-utils": "3.0.0-beta.16"
       }
     },
+    "@nuxtjs/proxy": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-1.3.3.tgz",
+      "integrity": "sha512-ykpCUdOqPOH79mQG30QfWZmbRD8yjTD+TTSBbwow5GkROUQEtXw+HE+q6i+YFpuChvgJNbwVrXdZ3YmfXbZtTw==",
+      "requires": {
+        "consola": "^2.5.6",
+        "http-proxy-middleware": "^0.19.1"
+      }
+    },
     "@nuxtjs/pwa": {
       "version": "3.0.0-beta.16",
       "resolved": "https://registry.npmjs.org/@nuxtjs/pwa/-/pwa-3.0.0-beta.16.tgz",
@@ -2204,6 +2224,46 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+        }
+      }
+    },
+    "axios-retry": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.1.2.tgz",
+      "integrity": "sha512-+X0mtJ3S0mmia1kTVi1eA3DAC+oWnT2A29g3CpkzcBPMT6vJm+hn/WiV9wPt/KXLHVmg5zev9mWqkPx7bHMovg==",
+      "requires": {
+        "is-retry-allowed": "^1.1.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -4058,6 +4118,11 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
+    "eventemitter3": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
+    },
     "events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
@@ -4453,6 +4518,29 @@
         }
       }
     },
+    "follow-redirects": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.8.1.tgz",
+      "integrity": "sha512-micCIbldHioIegeKs41DoH0KS3AXfFzgS30qVkM6z/XOE/GJgvmsoc839NUqa1B9udYe9dQxgv7KFwng6+p/dw==",
+      "requires": {
+        "debug": "^3.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -5096,6 +5184,27 @@
         "toidentifier": "1.0.0"
       }
     },
+    "http-proxy": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
+      "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
+      "requires": {
+        "eventemitter3": "^3.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
+      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+      "requires": {
+        "http-proxy": "^1.17.0",
+        "is-glob": "^4.0.0",
+        "lodash": "^4.17.11",
+        "micromatch": "^3.1.10"
+      }
+    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -5418,6 +5527,11 @@
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
       "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
     },
+    "is-retry-allowed": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
+      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -8430,6 +8544,11 @@
       "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
       "dev": true
     },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
     "resolve": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
@@ -9997,6 +10116,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vue-virtual-scroll-list": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.2.tgz",
+      "integrity": "sha512-jcXl1cYDxGZX+aF9vsUauXWnUkXm8oQxnvLTJ8UMTmMxwzbmlHX7vs0xGDdEej91vJpBNrdNNseWPxboTvI+UA=="
+    },
     "vuex": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",

package.json

@@ -11,8 +11,10 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxtjs/axios": "^5.6.0",
     "@nuxtjs/pwa": "^3.0.0-0",
     "nuxt": "^2.0.0",
+    "vue-virtual-scroll-list": "^1.4.2",
     "vuex-persist": "^2.0.1"
   },
   "devDependencies": {

pages/index.vue

@@ -1,34 +1,34 @@
 <template>
   <div class="page">
-
     <pw-section class="blue" label="Request" ref="request">
       <ul>
         <li>
           <label for="method">Method</label>
           <select id="method" v-model="method">
             <option>GET</option>
+            <option>HEAD</option>
             <option>POST</option>
             <option>PUT</option>
             <option>DELETE</option>
             <option>OPTIONS</option>
+            <option>PATCH</option>
           </select>
         </li>
         <li>
           <label for="url">URL</label>
-          <input id="url" type="url" v-bind:class="{ error: !isValidURL }" v-model="url" v-on:keyup.enter="sendRequest">
+          <input id="url" type="url" :class="{ error: !isValidURL }" v-model="url" @keyup.enter="isValidURL ? sendRequest() : null">
         </li>
         <li>
           <label for="path">Path</label>
-          <input id="path" v-model="path" v-on:keyup.enter="sendRequest">
+          <input id="path" v-model="path" @keyup.enter="isValidURL ? sendRequest() : null">
         </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>
         </li>
       </ul>
     </pw-section>
-
+    <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
-    <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT'">
       <ul>
         <li>
           <label>Content Type</label>
@@ -53,7 +53,7 @@
             <input :name="'bvalue'+index" v-model="param.value">
           </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>
           </li>
         </ol>
@@ -69,11 +69,11 @@
             <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
           </li>
         </ul>
-      </div><div v-else>
+      </div>
+      <div v-else>
         <textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
       </div>
     </pw-section>
-
     <pw-section class="green" label="Authentication" collapsed>
       <ul>
         <li>
@@ -102,7 +102,34 @@
         </li>
       </ul>
     </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>
       <ol v-for="(param, index) in params">
         <li>
@@ -114,7 +141,7 @@
           <input :name="'value'+index" v-model="param.value">
         </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>
         </li>
       </ol>
@@ -131,7 +158,6 @@
         </li>
       </ul>
     </pw-section>
-
     <pw-section class="purple" label="Response" id="response" ref="response">
       <ul>
         <li>
@@ -147,284 +173,410 @@
       </ul>
       <ul>
         <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>
       </ul>
     </pw-section>
-
     <pw-section class="gray" label="History">
       <ul>
         <li>
-          <button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
+          <button :class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
-        </li>
-      </ul>
-      <ul v-for="entry in history">
-        <li>
-          <label for="time">Time</label>
-          <input name="time" type="text" readonly :value="entry.time">
-        </li>
-        <li class="method-list-item">
-          <label for="method">Method</label>
-          <input name="method" type="text" readonly
-                 :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
-          <span class="entry-status-code">{{entry.status}}</span>
-        </li>
-        <li>
-          <label for="url">URL</label>
-          <input name="url" type="text" readonly :value="entry.url">
-        </li>
-        <li>
-          <label for="path">Path</label>
-          <input name="path" type="text" readonly :value="entry.path">
-        </li>
-        <li>
-          <label for="delete">&nbsp;</label>
-          <button name="delete" @click="deleteHistory(entry)">Delete</button>
-        </li>
-        <li>
-          <label for="use">&nbsp;</label>
-          <button name="use" @click="useHistory(entry)">Use</button>
         </li>
       </ul>
+      <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">
+        <ul v-for="entry in history" :key="entry.millis" class="entry">
+          <li>
+            <label for="time">Time</label>
+            <input name="time" type="text" readonly :value="entry.time" :title="entry.date">
+          </li>
+          <li class="method-list-item">
+            <label for="method">Method</label>
+            <input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
+            <span class="entry-status-code">{{entry.status}}</span>
+          </li>
+          <li>
+            <label for="url">URL</label>
+            <input name="url" type="text" readonly :value="entry.url">
+          </li>
+          <li>
+            <label for="path">Path</label>
+            <input name="path" type="text" readonly :value="entry.path">
+          </li>
+          <li>
+            <label for="delete" class="hide-on-small-screen">&nbsp;</label>
+            <button name="delete" @click="deleteHistory(entry)">Delete</button>
+          </li>
+          <li>
+            <label for="use" class="hide-on-small-screen">&nbsp;</label>
+            <button name="use" @click="useHistory(entry)">Use</button>
+          </li>
+        </ul>
+      </virtual-list>
     </pw-section>
-
   </div>
 </template>
-
 <script>
-      const statusCategories = [
+  import VirtualList from 'vue-virtual-scroll-list'
-        {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
+  import section from "../components/section";
-        {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'},
-      ];
 
-
+  const statusCategories = [{
-      const parseHeaders = xhr => {
+      name: 'informational',
-          const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
+      statusCodeRegex: new RegExp(/[1][0-9]+/),
-          const headerMap = {};
+      className: 'info-response'
-          headers.forEach(line => {
-              const parts = line.split(': ');
-              const header = parts.shift().toLowerCase();
-              const value = parts.join(': ');
-              headerMap[header] = value
-          });
-          return headerMap
-      };
-
-      const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
-
-      import section from "../components/section";
-
-      export default {
-      components: {
-      'pw-section': section
     },
+    {
+      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'
+    }
+  ];
 
-      data () {
+  const parseHeaders = xhr => {
-          return {
+    const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
-              method: 'GET',
+    const headerMap = {};
-              url: 'https://reqres.in',
+    headers.forEach(line => {
-              auth: 'None',
+      const parts = line.split(': ');
-              path: '/api/users',
+      const header = parts.shift().toLowerCase();
-              httpUser: '',
+      const value = parts.join(': ');
-              httpPassword: '',
+      headerMap[header] = value
-              bearerToken: '',
+    });
-              params: [],
+    return headerMap
-              bodyParams: [],
+
-              rawParams: '',
+  };
-              rawInput: false,
+  const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
-              contentType: 'application/json',
+
-              response: {
+  export default {
-                  status: '',
+    components: {
-                  headers: '',
+      'pw-section': section,
-                  body: ''
+      VirtualList
-              },
+    },
-              history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : []
+    data() {
-          }
+      return {
+        method: 'GET',
+        url: 'https://reqres.in',
+        auth: 'None',
+        path: '/api/users',
+        httpUser: '',
+        httpPassword: '',
+        bearerToken: '',
+        headers: [],
+        params: [],
+        bodyParams: [],
+        rawParams: '',
+        rawInput: false,
+        contentType: 'application/json',
+        response: {
+          status: '',
+          headers: '',
+          body: ''
+        },
+        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?:\\/\\/)?';
+      },
-
+      hasRequestBody () { return['POST', 'PUT', 'PATCH'].includes(this.method); },
-            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])$");
+      rawRequestBody() {
-            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])$");
+        const {
-
+          bodyParams
-            return validIP.test(this.url) || validHostname.test(this.url);
+        } = this
-          },
+        if (this.contentType === 'application/json') {
-          rawRequestBody() {
+          try {
-              const {
+            const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
-                  bodyParams
-              } = this
-              if (this.contentType === 'application/json') {
-                  try {
-                      const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
               "${key}": "${value}"
               `).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('&')
+        }
+      },
+      headerString() {
+        const result = this.headers
+          .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: ''
+        };
+      },
+      deleteHistory(entry) {
+        this.history.splice(this.history.indexOf(entry), 1)
+        window.localStorage.setItem('history', JSON.stringify(this.history))
+      },
+      clearHistory() {
+        this.history = []
+        window.localStorage.setItem('history', JSON.stringify(this.history))
+      },
+      useHistory({
+        method,
+        url,
+        path
+      }) {
+        this.method = method
+        this.url = url
+        this.path = path
+        this.$refs.request.$el.scrollIntoView({
+          behavior: 'smooth'
+        })
       },
-      methods: {
-          findEntryStatus(entry){
-            return findStatusGroup(entry.status);
-          },
-          deleteHistory(entry) {
-              this.history.splice(this.history.indexOf(entry), 1)
-              window.localStorage.setItem('history', JSON.stringify(this.history))
-          },
-          clearHistory() {
-              this.history = []
-              window.localStorage.setItem('history', JSON.stringify(this.history))
-          },
-          useHistory({
-                         method,
-                         url,
-                         path
-                     }) {
-              this.method = method
-              this.url = url
-              this.path = path
-              this.$refs.request.$el.scrollIntoView({
-                  behavior: 'smooth'
-              })
-          },
-          sendRequest() {
-              if (this.$refs.response.$el.classList.contains('hidden')) {
-                  this.$refs.response.$el.classList.toggle('hidden')
-              }
-              this.$refs.response.$el.scrollIntoView({
-                  behavior: 'smooth'
-              })
-              this.response.status = 'Fetching...'
-              this.response.body = 'Loading...'
-              const xhr = new XMLHttpRequest()
-              const user = this.auth === 'Basic' ? this.httpUser : null
-              const pswd = this.auth === 'Basic' ? this.httpPassword : null
-              xhr.open(this.method, this.url + this.path + this.queryString, true, user, pswd)
-              if (this.auth === 'Bearer Token') {
-                  xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
-              }
-              if (this.method === 'POST' || this.method === 'PUT') {
-                  const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
-                  xhr.setRequestHeader('Content-Length', requestBody.length)
-                  xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`)
-                  xhr.send(requestBody)
-              } else {
-                  xhr.send()
-              }
-              xhr.onload = e => {
-                this.response.status = xhr.status
-                const headers = this.response.headers = parseHeaders(xhr)
-                if ((headers['content-type'] || '').startsWith('application/json')) {
-                  this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
-                } else {
-                  this.response.body = xhr.responseText
-                }
 
-                if (!this.isValidURL) {
+      async sendRequest() {
-                  alert('Please check the formatting of the URL');
+        if (!this.isValidURL) {
-                  return
+          alert('Please check the formatting of the URL.');
-                }
+          return;
-                const n = new Date().toLocaleTimeString()
+        }
-                this.history = [{
+
-                  status: xhr.status,
+        // Start showing the loading bar as soon as possible.
-                  time: n,
+        // The nuxt axios module will hide it when the request is made.
+        this.$nuxt.$loading.start();
+
+        if (this.$refs.response.$el.classList.contains('hidden')) {
+          this.$refs.response.$el.classList.toggle('hidden')
+        }
+        this.$refs.response.$el.scrollIntoView({
+          behavior: 'smooth'
+        });
+        this.previewEnabled = false;
+        this.response.status = 'Fetching...';
+        this.response.body = 'Loading...';
+
+        const auth = this.auth === 'Basic' ? {
+            username: this.httpUser,
+            password: this.httpPassword
+        } : null;
+
+        let headers = {};
+
+        // If the request has a request body, we want to ensure Content-Length and
+        // Content-Type are sent.
+        if (this.hasRequestBody) {
+          const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
+
+          Object.assign(headers, {
+              'Content-Length': requestBody.length,
+              'Content-Type': `${this.contentType}; charset=utf-8`
+          });
+        }
+
+        // If the request uses a token for auth, we want to make sure it's sent here.
+        if(this.auth === 'Bearer Token') headers['Authorization'] = `Bearer ${this.bearerToken}`;
+
+        headers = Object.assign(
+            // Clone the app headers object first, we don't want to
+            // mutate it with the request headers added by default.
+            Object.assign({}, this.headers),
+
+            // We make our temporary headers object the source so
+            // that you can override the added headers if you
+            // specify them.
+            headers
+        );
+
+        try {
+          const payload = await this.$axios({
+              method: this.method,
+              url: this.url + this.path + this.queryString,
+              auth,
+              headers
+          });
+
+          (() => {
+              const status = this.response.status = payload.status;
+              const headers = this.response.headers = payload.headers;
+
+              // We don't need to bother parsing JSON, axios already handles it for us!
+              const body = this.response.body = payload.data;
+
+              const date = new Date().toLocaleDateString();
+              const time = new Date().toLocaleTimeString();
+
+              this.history.push({
+                  status,
+                  date,
+                  time,
+
                   method: this.method,
                   url: this.url,
                   path: this.path
-                }, ...this.history]
+              });
-                window.localStorage.setItem('history', JSON.stringify(this.history))
+
-              }
+              window.localStorage.setItem('history', JSON.stringify(this.history));
-              xhr.onerror = e => {
+          })();
-                  this.response.status = xhr.status
+        } catch(error) {
-                  this.response.body = xhr.statusText
+            if(error.response){
-              }
+                this.response.headers = error.response.headers;
-          },
+                this.response.status = error.response.status;
-          addRequestParam() {
+                this.response.body = error.response.data;
-              this.params.push({
+                return;
-                  key: '',
+            }
-                  value: ''
+
-              })
+            this.response.status = error.message;
-              return false
+            this.response.body = "See JavaScript console (F12) for details.";
-          },
+        }
-          removeRequestParam(index) {
+      },
-              this.params.splice(index, 1)
+
-          },
+      addRequestHeader() {
-          addRequestBodyParam() {
+        this.headers.push({
-              this.bodyParams.push({
+          key: '',
-                  key: '',
+          value: ''
-                  value: ''
+        });
-              })
+        return false
-              return false
+      },
-          },
+      removeRequestHeader(index) {
-          removeRequestBodyParam(index) {
+        this.headers.splice(index, 1)
-              this.bodyParams.splice(index, 1)
+      },
-          },
+      addRequestParam() {
-          formatRawParams(event) {
+        this.params.push({
-            if ((event.which !== 13 && event.which !== 9)) {
+          key: '',
+          value: ''
+        })
+        return false
+      },
+      removeRequestParam(index) {
+        this.params.splice(index, 1)
+      },
+      addRequestBodyParam() {
+        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;
-            }
+            // 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");
           }
+        }
+      },
+      setRouteQueries(queries) {
+        for (const key in queries) {
+          if (this[key]) this[key] = queries[key];
+        }
       }
+    },
+    created() {
+      if (Object.keys(this.$route.query).length) this.setRouteQueries(this.$route.query);
+    }
   }
+
 </script>

pages/settings.vue

@@ -1,126 +1,197 @@
 <template>
-    <div class="page">
+  <div class="page">
+    <pw-section class="blue" label="Theme">
+      <ul>
+        <li>
+          <h3 class="title">Background</h3>
+          <div class="backgrounds">
+            <span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
+              <swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
+            </span>
+          </div>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <h3 class="title">Color</h3>
+          <div class="colors">
+            <span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
+              <swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
+            </span>
+          </div>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <h3 class="title">Frames</h3>
+          <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+              Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
+          </pw-toggle>
+        </li>
+      </ul>
+    </pw-section>
 
-        <pw-section class="blue" label="Theme">
+    <!--
-            <ul>
+    PROXY SETTINGS
-                <li>
+    --------------
-                    <h3>Background</h3>
+    This feature is currently not finished.
-                    <div class="backgrounds">
-                        <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>
-                        </span>
-                    </div>
 
-                </li>
+    <pw-section class="blue" label="Proxy">
-            </ul>
+      <ul>
+        <li>
+          <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
+            Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
+          </pw-toggle>
+        </li>
+      </ul>
 
-            <br><br>
+      <ul>
-
+        <li>
-            <ul>
+          <label for="url">URL</label>
-                <li>
+          <input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
-
+        </li>
-                    <h3>Color</h3>
+        <li>
-                    <div class="colors">
+          <label for="key">Key</label>
-                        <span v-for="entry in colors" :key="entry.color"
+          <input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
-                              @click.prevent="setActiveColor(entry.color, entry.vibrant)">
+        </li>
-                            <swatch
+      </ul>
-                                :color="entry.color"
+    </pw-section>
-                                :name="entry.name"
+    -->
-                                :class="{ vibrant: entry.vibrant }"
+  </div>
-                                :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
-                        </span>
-                    </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>
-
 <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";
 
-    export default {
+  export default {
-        data () {
+    components: {
-            return {
+        'pw-section': section,
-                // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
+        'pw-toggle': toggle,
-                //        You should copy the existing light theme as a template and then just
+        'swatch': swatch
-                //        set the relevant values.
+    },
-                themes: [
-                    { "color": "#121212", "name": "Dark (Default)", "class": "" },
-                    { "color": "#DFDFDF", "name": "Light", "vibrant": true, "class": "light" }
-                ],
 
-                // You can define a new color here! It will simply store the color value.
+    data() {
-                colors: [
+      return {
-                    // If the color is vibrant, black is used as the active foreground color.
+        // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
-                    { "color": "#51ff0d", "name":"Lime (Default)", "vibrant": true },
+        //        You should copy the existing light theme as a template and then just
-                    { "color": "#FFC107", "name":"Yellow", "vibrant": true },
+        //        set the relevant values.
-                    { "color": "#E91E63", "name":"Pink", "vibrant": false },
+        themes: [{
-                    { "color": "#e74c3c", "name":"Red", "vibrant": false },
+            "color": "#121212",
-                    { "color": "#9b59b6", "name":"Purple", "vibrant": false },
+            "name": "Dark (Default)",
-                    { "color": "#2980b9", "name":"Blue", "vibrant": false },
+            "class": ""
-                ],
+          },
-                settings: {
+          {
-                    THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
+            "color": "#DFDFDF",
-                    THEME_COLOR: '',
+            "name": "Light",
-                    THEME_COLOR_VIBRANT: true,
+            "vibrant": true,
+            "class": "light"
+          }
+        ],
+        // 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": "#51ff0d",
+            "name": "Lime (Default)",
+            "vibrant": true
+          },
+          {
+            "color": "#FFC107",
+            "name": "Yellow",
+            "vibrant": true
+          },
+          {
+            "color": "#E91E63",
+            "name": "Pink",
+            "vibrant": false
+          },
+          {
+            "color": "#e74c3c",
+            "name": "Red",
+            "vibrant": false
+          },
+          {
+            "color": "#9b59b6",
+            "name": "Purple",
+            "vibrant": false
+          },
+          {
+            "color": "#2980b9",
+            "name": "Blue",
+            "vibrant": false
+          },
+        ],
 
-                    DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
+        settings: {
-                }
+          THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
-            }
+          THEME_COLOR: '',
-        },
+          THEME_COLOR_VIBRANT: true,
 
-        components: {
+          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
-            'pw-section': section,
+          PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
-            'swatch': swatch
+          PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
-        },
+          PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
-
-        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();
         }
+      }
+    },
+
+    watch: {
+        proxySettings: {
+            deep: true,
+            handler (value) {
+              this.applySetting('PROXY_URL', value.url);
+              this.applySetting('PROXY_KEY', value.key);
+            }
+        }
+    },
+
+    methods: {
+      applyTheme(name) {
+        this.applySetting('THEME_CLASS', name);
+        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 ? '#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();
+    },
+
+    computed: {
+      proxySettings () {
+          return {
+              url: this.settings.PROXY_URL,
+              key: this.settings.PROXY_KEY
+          }
+      }
     }
-</script>
+  }
+
+</script>

pages/websocket.vue

@@ -1,48 +1,42 @@
 <template>
   <div class="page">
-
     <pw-section class="blue" label="Request" ref="request">
       <ul>
         <li>
           <label for="url">URL</label>
-          <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="urlValid ? toggleConnection() : null">
         </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 :disabled="!urlValid" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
         </li>
       </ul>
     </pw-section>
-
     <pw-section class="purple" label="Communication" id="response" ref="response">
       <ul>
         <li>
           <label for="log">Log</label>
           <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 }">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
-              </span>
+            </span>
             <span v-else>(Waiting for connection...)</span>
           </div>
         </li>
       </ul>
-
       <ul>
         <li>
           <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" :disabled="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
         </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" :disabled="!connectionState" @click="sendMessage">Send</button>
         </li>
       </ul>
     </pw-section>
-
   </div>
 </template>
-
 <style lang="scss">
   div.log {
     margin: 4px;
@@ -54,7 +48,8 @@
     height: 256px;
     overflow: auto;
 
-    &, span {
+    &,
+    span {
       font-weight: 700;
       font-size: 18px;
       font-family: monospace;
@@ -65,155 +60,140 @@
       white-space: pre-wrap;
     }
   }
-</style>
 
+</style>
 <script>
   import section from "../components/section";
-
   export default {
-
     components: {
       'pw-section': section
     },
-
+    data() {
-    data () {
       return {
         connectionState: false,
         url: "wss://echo.websocket.org",
         socket: null,
-
         communication: {
           log: null,
           input: ""
         }
       }
     },
-
     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: {
-      toggleConnection () {
+      toggleConnection() {
         // If it is connecting:
-        if(!this.connectionState) return this.connect();
+        if (!this.connectionState) return this.connect();
-
         // Otherwise, it's disconnecting.
         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 {
-            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}.`,
+              ts: (new Date()).toLocaleTimeString()
-                        source: 'info',
+            }];
-                        color: 'lime'
+          };
-                    }
+          this.socket.onerror = (event) => {
-                ];
+            this.handleError();
-            };
+          };
-
+          this.socket.onclose = (event) => {
-            this.socket.onerror = (event) => {
+            this.connectionState = false;
-                this.handleError();
+            this.communication.log.push({
-            };
+              payload: `Disconnected from ${this.url}.`,
-
+              source: 'info',
-            this.socket.onclose = (event) => {
+              color: 'red',
-                this.connectionState = false;
+              ts: (new Date()).toLocaleTimeString()
-
+            });
-                this.communication.log.push({
+          };
-                    payload: `Disconnected from ${this.url}.`,
+          this.socket.onmessage = (event) => {
-                    source: 'info',
+            this.communication.log.push({
-                    color: 'red'
+              payload: event.data,
-                });
+              source: 'server',
-            };
+              ts: (new Date()).toLocaleTimeString()
-
+            });
-            this.socket.onmessage = (event) => {
+          }
-                this.communication.log.push({
+        } catch (ex) {
-                    payload: event.data,
+          this.handleError(ex);
-                    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',
+          ts: (new Date()).toLocaleTimeString()
-              color: 'red'
+        });
-          });
+        if (error != null) this.communication.log.push({
-          if(error != null) this.communication.log.push({
+          payload: error,
-              payload: error,
+          source: 'info',
-              source: 'info',
+          color: 'red',
-              color: 'red'
+          ts: (new Date()).toLocaleTimeString()
-          });
+        });
       },
-
+      sendMessage() {
-      sendMessage () {
         const message = this.communication.input;
-
         this.socket.send(message);
         this.communication.log.push({
-            payload: message,
+          payload: message,
-            source: 'client'
+          source: 'client',
+          ts: (new Date()).toLocaleTimeString()
         });
-
         this.communication.input = "";
       },
-
+      collapse({
-      collapse({target}) {
+        target
+      }) {
         const el = target.parentNode.className;
         document.getElementsByClassName(el)[0].classList.toggle('hidden');
       },
-
+      getSourcePrefix(source) {
-      getSourcePrefix(source){
         const sourceEmojis = {
           // Source used for info messages.
-          'info': 'ℹ️ [INFO]:\t',
+          'info': '\tℹ️ [INFO]:\t',
           // Source used for client to server messages.
-          'client': '👽 [SENT]:\t',
+          'client': '\t👽 [SENT]:\t',
           // Source used for server to client messages.
-          'server': '📥 [RECEIVED]:\t'
+          '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>

store/postwoman.js

@@ -24,7 +24,21 @@ export const SETTINGS_KEYS = [
      * to emphasise the different sections.
      * This setting allows that to be turned off.
      */
-    "DISABLE_FRAME_COLORS"
+    "DISABLE_FRAME_COLORS",
+
+    /**
+     * Whether or not requests should be proxied.
+     */
+    "PROXY_ENABLED",
+
+    /**
+     * The URL of the proxy to connect to for requests.
+     */
+    "PROXY_URL",
+    /**
+     * The security key of the proxy.
+     */
+    "PROXY_KEY"
 ];
 
 export const state = () => ({
@@ -43,9 +57,9 @@ export const mutations = {
         // Add your settings key to the SETTINGS_KEYS array at the
         // top of the file.
         // This is to ensure that application settings remain documented.
-        if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings key does not include the key " + key);
+        if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
 
         state.settings[key] = value;
     }
 
-};
+};