Merge pull request #96 from NBTX/master

Use axios for requests, UI tweaks, and more...

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

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>

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,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>
@@ -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)">
@@ -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');
+          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 +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 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),
+
+            // 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();
+            this.response.status = error.message;
-          const t = new Date().toLocaleTimeString();
+            this.response.body = "See JavaScript console (F12) for details.";
-          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;
         }
       },
+
       addRequestHeader() {
         this.headers.push({
           key: '',

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