From 85d51b2362548f7ac4fc0bad52e5d6f3eef36145 Mon Sep 17 00:00:00 2001
From: NBTX <nbtx@telegenic.me>
Date: Wed, 28 Aug 2019 02:24:49 +0100
Subject: [PATCH 1/4] Add proxy settings.

---
 pages/settings.vue | 37 ++++++++++++++++++++++++++++++++-----
 store/postwoman.js | 11 ++++++++++-
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index c5a11311..9ed43f5d 100644
--- a/pages/settings.vue
+++ b/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)">
-              <swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch>
+            <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>
@@ -15,22 +15,47 @@
         <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)">
-              <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
+            <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>
           <p>
-            <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+            <input :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')" id="disableFrameColors" type="checkbox">
             <label for="disableFrameColors">Enable multi-colored frames</label>
           </p>
         </li>
       </ul>
     </pw-section>
+
+      <pw-section class="blue" label="Proxy">
+          <ul>
+              <li>
+                  <p>
+                      <input :checked="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')"
+                             id="enableProxy"
+                             type="checkbox">
+                      <label for="enableProxy">Enable proxy</label>
+                  </p>
+              </li>
+          </ul>
+
+          <ul>
+              <li>
+                  <label for="url">URL</label>
+                  <input id="url" type="url" v-model="url">
+              </li>
+              <li>
+                  <label for="key">Key</label>
+                  <input id="key" type="password" v-model="url">
+              </li>
+          </ul>
+      </pw-section>
   </div>
 </template>
 <script>
   import section from "../components/section";
   import swatch from "../components/settings/swatch";
+
   export default {
     data() {
       return {
@@ -87,6 +112,8 @@
           THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
           THEME_COLOR: '',
           THEME_COLOR_VIBRANT: true,
+
+          PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
           DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
         }
       }
diff --git a/store/postwoman.js b/store/postwoman.js
index fb07b5d1..3c7ea48e 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -24,7 +24,16 @@ 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",
+
+
+    "PROXY_URL",
+    "PROXY_AUTH"
 ];
 
 export const state = () => ({

From bac9dd1eec49406d1d899ff8266a8a6d743b5cd0 Mon Sep 17 00:00:00 2001
From: NBTX <nbtx@telegenic.me>
Date: Thu, 29 Aug 2019 22:55:06 +0100
Subject: [PATCH 2/4] Add toggle switch

---
 components/toggle.vue | 98 +++++++++++++++++++++++++++++++++++++++++++
 pages/settings.vue    | 11 +++--
 2 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 components/toggle.vue

diff --git a/components/toggle.vue b/components/toggle.vue
new file mode 100644
index 00000000..c02e950b
--- /dev/null
+++ b/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>
diff --git a/pages/settings.vue b/pages/settings.vue
index 04a968cd..39e67bdd 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -24,13 +24,14 @@
       <ul>
         <li>
           <h3 class="title">Frames</h3>
-          <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
-          <label for="disableFrameColors">Enable multi-color</label>
+          <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="Proxy">
+      <!--<pw-section class="blue" label="Proxy">
           <ul>
               <li>
                   <p>
@@ -52,12 +53,13 @@
                   <input id="key" type="password" v-model="url">
               </li>
           </ul>
-      </pw-section>
+      </pw-section>-->
   </div>
 </template>
 <script>
   import section from "../components/section";
   import swatch from "../components/settings/swatch";
+  import toggle from "../components/toggle";
 
   export default {
     data() {
@@ -123,6 +125,7 @@
     },
     components: {
       'pw-section': section,
+      'pw-toggle': toggle,
       'swatch': swatch
     },
     methods: {

From ca568cd3eb76e4e56d5c5f85d59106fced8ade8f Mon Sep 17 00:00:00 2001
From: NBTX <nbtx@telegenic.me>
Date: Thu, 29 Aug 2019 23:58:10 +0100
Subject: [PATCH 3/4] UI tweaks, finish proxy settings input

---
 assets/css/styles.scss |  7 +++-
 pages/index.vue        |  2 +-
 pages/settings.vue     | 75 +++++++++++++++++++++++++++---------------
 pages/websocket.vue    |  8 ++---
 store/postwoman.js     | 13 +++++---
 5 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 76364d5f..000b63c9 100644
--- a/assets/css/styles.scss
+++ b/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;
 }
diff --git a/pages/index.vue b/pages/index.vue
index bfa91faa..df6963c1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -190,7 +190,7 @@
     <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>
       <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">
diff --git a/pages/settings.vue b/pages/settings.vue
index 39e67bdd..74916a1f 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -31,29 +31,26 @@
       </ul>
     </pw-section>
 
-      <!--<pw-section class="blue" label="Proxy">
-          <ul>
-              <li>
-                  <p>
-                      <input :checked="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')"
-                             id="enableProxy"
-                             type="checkbox">
-                      <label for="enableProxy">Enable proxy</label>
-                  </p>
-              </li>
-          </ul>
+    <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="url">
-              </li>
-              <li>
-                  <label for="key">Key</label>
-                  <input id="key" type="password" v-model="url">
-              </li>
-          </ul>
-      </pw-section>-->
+      <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>
@@ -62,6 +59,12 @@
   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
@@ -113,21 +116,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,
           PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
-          DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
+          PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
+          PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
         }
       }
     },
-    components: {
-      'pw-section': section,
-      'pw-toggle': toggle,
-      'swatch': swatch
+
+    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);
@@ -164,6 +176,15 @@
     },
     beforeMount() {
       this.settings.THEME_COLOR = this.getActiveColor();
+    },
+
+    computed: {
+      proxySettings () {
+          return {
+              url: this.settings.PROXY_URL,
+              key: this.settings.PROXY_KEY
+          }
+      }
     }
   }
 
diff --git a/pages/websocket.vue b/pages/websocket.vue
index c374e04e..eb731ac2 100644
--- a/pages/websocket.vue
+++ b/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>
diff --git a/store/postwoman.js b/store/postwoman.js
index 3c7ea48e..dcd07b9e 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -31,9 +31,14 @@ export const SETTINGS_KEYS = [
      */
     "PROXY_ENABLED",
 
-
+    /**
+     * The URL of the proxy to connect to for requests.
+     */
     "PROXY_URL",
-    "PROXY_AUTH"
+    /**
+     * The security key of the proxy.
+     */
+    "PROXY_KEY"
 ];
 
 export const state = () => ({
@@ -52,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;
     }
 
-};
\ No newline at end of file
+};

From edc8259b6fa9a2f9ccc0cfbced9bd37bbd327b94 Mon Sep 17 00:00:00 2001
From: NBTX <nbtx@telegenic.me>
Date: Fri, 30 Aug 2019 01:00:07 +0100
Subject: [PATCH 4/4] Change request library to axios. Resolves
 https://github.com/liyasthomas/postwoman/issues/61

---
 nuxt.config.js     |   6 ++-
 package-lock.json  | 119 +++++++++++++++++++++++++++++++++++++++++
 package.json       |   1 +
 pages/index.vue    | 129 +++++++++++++++++++++++++++++----------------
 pages/settings.vue |   6 +++
 5 files changed, 214 insertions(+), 47 deletions(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index e3a904c3..b4f46aaf 100644
--- a/nuxt.config.js
+++ b/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']
   ],
 
   /*
diff --git a/package-lock.json b/package-lock.json
index 23c80fb4..1886a6dc 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index fce0bb2d..fd6aec47 100644
--- a/package.json
+++ b/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",
diff --git a/pages/index.vue b/pages/index.vue
index df6963c1..2aae0028 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -16,11 +16,11 @@
         </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>
@@ -261,6 +261,7 @@
       className: 'missing-data-response'
     }
   ];
+
   const parseHeaders = xhr => {
     const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
     const headerMap = {};
@@ -317,6 +318,7 @@
         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
@@ -394,11 +396,17 @@
           behavior: 'smooth'
         })
       },
-      sendRequest() {
+
+      async sendRequest() {
         if (!this.isValidURL) {
-          alert('Please check the formatting of the URL');
-          return
+          alert('Please check the formatting of the URL.');
+          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 +416,82 @@
         this.previewEnabled = false;
         this.response.status = 'Fetching...';
         this.response.body = 'Loading...';
-        const xhr = new XMLHttpRequest();
-        const user = this.auth === 'Basic' ? this.httpUser : null;
-        const password = this.auth === 'Basic' ? this.httpPassword : null;
-        xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
-        if (this.auth === 'Bearer Token')
-          xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
-        if (this.headers) {
-          this.headers.forEach(function(element) {
-            xhr.setRequestHeader(element.key, element.value)
-          })
-        }
-        if (this.method === 'POST' || this.method === 'PUT' || this.method === 'PATCH') {
+
+        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;
-          xhr.setRequestHeader('Content-Length', requestBody.length);
-          xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
-          xhr.send(requestBody);
-        } else {
-          xhr.send();
+
+          Object.assign(headers, {
+              'Content-Length': requestBody.length,
+              'Content-Type': `${this.contentType}; charset=utf-8`
+          });
         }
-        xhr.onload = e => {
-          this.response.status = xhr.status;
-          const headers = this.response.headers = parseHeaders(xhr);
-          this.response.body = xhr.responseText;
-          if (this.method != 'HEAD') {
-            if ((headers['content-type'] || '').startsWith('application/json')) {
-              this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
+
+        // 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
+              });
+
+              window.localStorage.setItem('history', JSON.stringify(this.history));
+          })();
+        } catch(error) {
+            if(error.response){
+                this.response.headers = error.response.headers;
+                this.response.status = error.response.status;
+                this.response.body = error.response.data;
+                return;
             }
-          }
-          const d = new Date().toLocaleDateString();
-          const t = new Date().toLocaleTimeString();
-          this.history = [{
-            status: xhr.status,
-            date: d,
-            time: t,
-            method: this.method,
-            url: this.url,
-            path: this.path
-          }, ...this.history];
-          window.localStorage.setItem('history', JSON.stringify(this.history));
-        };
-        xhr.onerror = e => {
-          this.response.status = xhr.status;
-          this.response.body = xhr.statusText;
+
+            this.response.status = error.message;
+            this.response.body = "See JavaScript console (F12) for details.";
         }
       },
+
       addRequestHeader() {
         this.headers.push({
           key: '',
diff --git a/pages/settings.vue b/pages/settings.vue
index 74916a1f..e528d79d 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -31,6 +31,11 @@
       </ul>
     </pw-section>
 
+    <!--
+    PROXY SETTINGS
+    --------------
+    This feature is currently not finished.
+
     <pw-section class="blue" label="Proxy">
       <ul>
         <li>
@@ -51,6 +56,7 @@
         </li>
       </ul>
     </pw-section>
+    -->
   </div>
 </template>
 <script>