Merge remote-tracking branch 'liyasthomas/master'

.editorconfig

@@ -3,7 +3,7 @@
 root = true
 
 [*]
-indent_size = 2
+indent_size = 1
 indent_style = space
 charset = utf-8
 end_of_line = lf

assets/css/styles.scss

@@ -84,6 +84,11 @@ button {
   font-weight: 700;
   font-size: 16px;
   cursor: pointer;
+
+  &[disabled], &.disabled {
+    opacity: 0.7;
+    cursor: default;
+  }
 }
 
 fieldset {
@@ -220,7 +225,7 @@ input[type="checkbox"] {
   background-color: var(--err-color);
 }
 
-.disabled {
+.disabled, input[disabled] {
   background-color: var(--err-color);
   color: #b2b2b2;
 }
@@ -354,3 +359,21 @@ fieldset#history {
     width: 100%;
   }
 }
+
+#action {
+  #hidden-message {
+    display: none;
+  }
+
+  &.show {
+    display: flex;
+    position: fixed;
+    top: 16px;
+    right: 16px;
+
+    #hidden-message {
+      display: block;
+      margin-left: 4px;
+    }
+  }
+}

components/history.vue

@@ -0,0 +1,151 @@
+<template>
+  <pw-section class="gray" label="History">
+    <ul>
+      <li id="filter-history">
+        <label for="filter-history-input">Search History</label>
+        <input id="filter-history-input" type="text" :disabled="history.length === 0 || isClearingHistory" v-model="filterText">
+      </li>
+    </ul>
+    <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="89" :remain="Math.min(5, filteredHistory.length)">
+      <ul v-for="entry in filteredHistory" :key="entry.millis" class="entry">
+        <li>
+          <label :for="'time#' + entry.millis">Time</label>
+          <input :id="'time#' + entry.millis" type="text" readonly :value="entry.time" :title="entry.date">
+        </li>
+        <li class="method-list-item">
+          <label :for="'time#' + entry.millis">Method</label>
+          <input :id="'method#' + entry.millis" 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#' + entry.millis">URL</label>
+          <input :id="'url#' + entry.millis" type="text" readonly :value="entry.url">
+        </li>
+        <li>
+          <label :for="'path#' + entry.millis">Path</label>
+          <input :id="'path#' + entry.millis" type="text" readonly :value="entry.path">
+        </li>
+        <li>
+          <label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
+          <button :id="'delete-button#' + entry.millis" :disabled="isClearingHistory" @click="deleteHistory(entry)">
+            Delete
+          </button>
+        </li>
+        <li>
+          <label :for="'use-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
+          <button :id="'use-button#' + entry.millis" :disabled="isClearingHistory" @click="useHistory(entry)">
+            Use
+          </button>
+        </li>
+      </ul>
+    </virtual-list>
+    <ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
+      <li>
+        <label>Nothing found for "{{filterText}}"</label>
+      </li>
+    </ul>
+    <ul>
+      <li v-if="!isClearingHistory">
+        <button id="clear-history-button" :class="{ disabled: history.length === 0 }" @click="enableHistoryClearing">
+          Clear History
+        </button>
+      </li>
+      <li v-else>
+        <div class="flex-wrap">
+          <label for="clear-history-button">Are you sure?</label>
+          <div>
+            <button id="confirm-clear-history-button" @click="clearHistory">
+              Yes
+            </button>
+            <button id="reject-clear-history-button" @click="disableHistoryClearing">
+              No
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </pw-section>
+</template>
+<script>
+		import VirtualList from 'vue-virtual-scroll-list'
+		import section from "./section";
+		import {findStatusGroup} from "../pages/index";
+
+		const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
+  export default {
+    components: {
+      'pw-section': section,
+      VirtualList
+    },
+    data() {
+      const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
+      return {
+        history: localStorageHistory || [],
+        filterText: '',
+        showFilter: false,
+        isClearingHistory: false
+      }
+    },
+    computed: {
+      filteredHistory() {
+        return this.history.filter(entry => {
+          const filterText = this.filterText.toLowerCase();
+          return Object.keys(entry).some(key => {
+            let value = entry[key];
+            value = typeof value !== 'string' ? value.toString() : value;
+            return value.toLowerCase().includes(filterText);
+          });
+        });
+      }
+    },
+    methods: {
+      clearHistory() {
+        this.history = [];
+        this.filterText = '';
+        this.disableHistoryClearing();
+        updateOnLocalStorage('history', this.history);
+      },
+      useHistory(entry) {
+        this.$emit('useHistory', entry);
+      },
+      findEntryStatus(entry) {
+        const foundStatusGroup = findStatusGroup(entry.status);
+        return foundStatusGroup || {
+          className: ''
+        };
+      },
+      deleteHistory(entry) {
+        this.history.splice(this.history.indexOf(entry), 1);
+        if (this.history.length === 0) {
+          this.filterText = '';
+        }
+        updateOnLocalStorage('history', this.history);
+      },
+      addEntry(entry) {
+        this.history.push(entry);
+        updateOnLocalStorage('history', this.history);
+      },
+      enableHistoryClearing() {
+        this.isClearingHistory = true;
+      },
+      disableHistoryClearing() {
+        this.isClearingHistory = false;
+      }
+    }
+  }
+
+</script>
+<style scoped lang="scss">
+  .virtual-list {
+    [readonly] {
+      cursor: default;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .virtual-list.filled {
+      min-height: 430px;
+    }
+  }
+
+</style>

components/toggle.vue

@@ -0,0 +1,101 @@
+<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(--act-color);
+
+  $width: 50px;
+  $height: 20px;
+  $handleSpacing: 4px;
+
+  $transition: all 0.2s ease-in-out;
+
+  div {
+    display: inline-block;
+  }
+
+  label.caption {
+    margin-left: 4px;
+    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>

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",

package.json

@@ -11,6 +11,7 @@
     "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",

pages/index.vue

@@ -16,15 +16,15 @@
         </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" 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" ref="sendButton">Send <span id="hidden-message">Again</span></button>
         </li>
       </ul>
     </pw-section>
@@ -187,49 +187,15 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="gray" label="History">
+    <history @useHistory="handleUseHistory" ref="historyComponent" />
-      <ul>
-        <li>
-          <button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</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>
-  import VirtualList from 'vue-virtual-scroll-list'
-  import section from "../components/section";
 
-  const statusCategories = [{
+<script>
+		import history from "../components/history";
+		import section from "../components/section";
+
+		const statusCategories = [{
       name: 'informational',
       statusCodeRegex: new RegExp(/[1][0-9]+/),
       className: 'info-response'
@@ -273,12 +239,12 @@
     return headerMap
 
   };
-  const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
+  export const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
 
   export default {
     components: {
       'pw-section': section,
-      VirtualList
+      history
     },
     data() {
       return {
@@ -300,7 +266,6 @@
           headers: '',
           body: ''
         },
-        history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : [],
         previewEnabled: false
       }
     },
@@ -308,15 +273,15 @@
       statusCategory() {
         return findStatusGroup(this.response.status);
       },
-      noHistoryToClear() {
-        return this.history.length === 0;
-      },
       isValidURL() {
         const protocol = '^(https?:\\/\\/)?';
         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])$");
         return validIP.test(this.url) || validHostname.test(this.url);
       },
+      hasRequestBody() {
+        return ['POST', 'PUT', 'PATCH'].includes(this.method);
+      },
       rawRequestBody() {
         const {
           bodyParams
@@ -368,37 +333,28 @@
       }
     },
     methods: {
-      findEntryStatus(entry) {
+      handleUseHistory({
-        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.method = method;
-        this.url = url
+        this.url = url;
-        this.path = path
+        this.path = path;
         this.$refs.request.$el.scrollIntoView({
           behavior: 'smooth'
-        })
+        });
       },
-      sendRequest() {
+      async sendRequest() {
         if (!this.isValidURL) {
-          alert('Please check the formatting of the URL');
+          alert('Please check the formatting of the URL.');
-          return
+          return;
         }
+
+        // Start showing the loading bar as soon as possible.
+        // 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')
         }
@@ -408,51 +364,92 @@
         this.previewEnabled = false;
         this.response.status = 'Fetching...';
         this.response.body = 'Loading...';
-        const xhr = new XMLHttpRequest();
+
-        const user = this.auth === 'Basic' ? this.httpUser : null;
+        const auth = this.auth === 'Basic' ? {
-        const password = this.auth === 'Basic' ? this.httpPassword : null;
+          username: this.httpUser,
-        xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
+          password: this.httpPassword
-        if (this.auth === 'Bearer Token')
+        } : null;
-          xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
+
-        if (this.headers) {
+        let headers = {};
-          this.headers.forEach(function(element) {
+
-            xhr.setRequestHeader(element.key, element.value)
+        // If the request has a request body, we want to ensure Content-Length and
-          })
+        // Content-Type are sent.
-        }
+        if (this.hasRequestBody) {
-        if (this.method === 'POST' || this.method === 'PUT' || this.method === 'PATCH') {
           const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
-          xhr.setRequestHeader('Content-Length', requestBody.length);
+
-          xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
+          Object.assign(headers, {
-          xhr.send(requestBody);
+            'Content-Length': requestBody.length,
-        } else {
+            'Content-Type': `${this.contentType}; charset=utf-8`
-          xhr.send();
+          });
         }
-        xhr.onload = e => {
+
-          this.response.status = xhr.status;
+        // If the request uses a token for auth, we want to make sure it's sent here.
-          const headers = this.response.headers = parseHeaders(xhr);
+        if (this.auth === 'Bearer Token') headers['Authorization'] = `Bearer ${this.bearerToken}`;
-          this.response.body = xhr.responseText;
+
-          if (this.method != 'HEAD') {
+        headers = Object.assign(
-            if ((headers['content-type'] || '').startsWith('application/json')) {
+          // Clone the app headers object first, we don't want to
-              this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
+          // mutate it with the request headers added by default.
-            }
+          Object.assign({}, this.headers),
-          }
+
-          const d = new Date().toLocaleDateString();
+          // We make our temporary headers object the source so
-          const t = new Date().toLocaleTimeString();
+          // that you can override the added headers if you
-          this.history = [{
+          // specify them.
-            status: xhr.status,
+          headers
-            date: d,
+        );
-            time: t,
+
+        try {
+          const payload = await this.$axios({
             method: this.method,
-            url: this.url,
+            url: this.url + this.path + this.queryString,
-            path: this.path
+            auth,
-          }, ...this.history];
+            headers
-          window.localStorage.setItem('history', JSON.stringify(this.history));
+          });
-        };
+
-        xhr.onerror = e => {
+          (() => {
-          this.response.status = xhr.status;
+            const status = this.response.status = payload.status;
-          this.response.body = xhr.statusText;
+            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();
+
+            // Addition of an entry to the history component.
+            const entry = {
+              status,
+              date,
+              time,
+              method: this.method,
+              url: this.url,
+              path: this.path
+            };
+            this.$refs.historyComponent.addEntry(entry);
+          })();
+        } catch (error) {
+          if (error.response) {
+            this.response.headers = error.response.headers;
+            this.response.status = error.response.status;
+            this.response.body = error.response.data;
+
+            // Addition of an entry to the history component.
+            const entry = {
+              status: this.response.status,
+              date: new Date().toLocaleDateString(),
+              time: new Date().toLocaleTimeString(),
+              method: this.method,
+              url: this.url,
+              path: this.path
+            };
+            this.$refs.historyComponent.addEntry(entry);
+            return;
+          }
+
+          this.response.status = error.message;
+          this.response.body = "See JavaScript console (F12) for details.";
         }
       },
+
       addRequestHeader() {
         this.headers.push({
           key: '',
@@ -528,7 +525,35 @@
             this.$refs.previewFrame.setAttribute('data-previewing-url', this.url);
           }
         }
+      },
+      setRouteQueries(queries) {
+        for (const key in queries) {
+          if (this[key]) this[key] = queries[key];
+        }
+      },
+      observeRequestButton: function () {
+		      let isTheInitialIntersection = true;
+		      const sendButtonElement = this.$refs.sendButton;
+		      const requestElement = this.$refs.request.$el;
+		      const observer = new IntersectionObserver((entries, observer) => {
+				      entries.forEach(entry => {
+						      if (entry.isIntersecting) {
+								      if (!isTheInitialIntersection) {
+										      sendButtonElement.classList.toggle('show');
+								      } else {
+										      isTheInitialIntersection = false;
+								      }
+						      }
+				      });
+		      }, {threshold: 1});
+		      observer.observe(requestElement);
       }
+    },
+    created() {
+      if (Object.keys(this.$route.query).length) this.setRouteQueries(this.$route.query);
+    },
+    mounted() {
+        this.observeRequestButton();
     }
   }
 

pages/settings.vue

@@ -5,8 +5,8 @@
         <li>
           <h3 class="title">Background</h3>
           <div class="backgrounds">
-            <span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)">
+            <span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
-              <swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch>
+              <swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
             </span>
           </div>
         </li>
@@ -15,8 +15,8 @@
         <li>
           <h3 class="title">Color</h3>
           <div class="colors">
-            <span v-for="entry in colors" :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)">
+            <span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
-              <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
+              <swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
             </span>
           </div>
         </li>
@@ -24,17 +24,53 @@
       <ul>
         <li>
           <h3 class="title">Frames</h3>
-          <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+          <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
-          <label for="disableFrameColors">Enable multi-color</label>
+              Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
+          </pw-toggle>
         </li>
       </ul>
     </pw-section>
+
+    <!--
+    PROXY SETTINGS
+    --------------
+    This feature is currently not finished.
+
+    <pw-section class="blue" label="Proxy">
+      <ul>
+        <li>
+          <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
+            Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
+          </pw-toggle>
+        </li>
+      </ul>
+
+      <ul>
+        <li>
+          <label for="url">URL</label>
+          <input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
+        </li>
+        <li>
+          <label for="key">Key</label>
+          <input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
+        </li>
+      </ul>
+    </pw-section>
+    -->
   </div>
 </template>
 <script>
   import section from "../components/section";
   import swatch from "../components/settings/swatch";
+  import toggle from "../components/toggle";
+
   export default {
+    components: {
+        'pw-section': section,
+        'pw-toggle': toggle,
+        'swatch': swatch
+    },
+
     data() {
       return {
         // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
@@ -86,18 +122,30 @@
             "vibrant": false
           },
         ],
+
         settings: {
           THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
           THEME_COLOR: '',
           THEME_COLOR_VIBRANT: true,
-          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
+
+          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
+          PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
+          PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
+          PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
         }
       }
     },
-    components: {
+
-      'pw-section': section,
+    watch: {
-      'swatch': swatch
+        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);
@@ -134,6 +182,15 @@
     },
     beforeMount() {
       this.settings.THEME_COLOR = this.getActiveColor();
+    },
+
+    computed: {
+      proxySettings () {
+          return {
+              url: this.settings.PROXY_URL,
+              key: this.settings.PROXY_KEY
+          }
+      }
     }
   }
 

pages/websocket.vue

@@ -4,11 +4,11 @@
       <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 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>
@@ -27,11 +27,11 @@
       <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 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>

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;
     }
 
-};
+};