🚨 Lint

assets/css/styles.scss

@@ -1,67 +1,5 @@
 $responsiveWidth: 720px;
 
-// Make theme transition smoother.
-body.afterLoad {
-
-  &,
-  & * {
-    transition: background-color 0.2s ease-in-out,
-      border 0.2s ease-in-out;
-  }
-}
-
-::selection {
-  background-color: var(--ac-sel-color);
-  color: var(--act-color);
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--fg-light-color);
-  border-radius: 8px;
-  border: 2px solid var(--bg-color);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--fg-color);
-}
-
-::placeholder {
-  color: var(--fg-light-color);
-  opacity: 0.3;
-}
-
-* {
-  box-sizing: border-box;
-  outline: 0;
-  border: 0;
-}
-
-a {
-  display: inline-flex;
-  color: inherit;
-  text-decoration: none;
-  font-weight: 700;
-}
-
-body {
-  background-color: var(--bg-color);
-  color: var(--fg-color);
-  font-weight: 500;
-  font-size: 16px;
-  font-family: "Poppins", "Roboto", "Noto", sans-serif;
-  line-height: 1.5;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  user-select: none;
-  padding: 0;
-  margin: 0;
-}
-
 h1,
 h2,
 h3 {
@@ -159,7 +97,7 @@ h3 {
       color: black;
       padding: 24px;
       border-radius: 5px;
-      box-shadow: 0 5px 30px rgba(black, .1);
+      box-shadow: 0 5px 30px rgba(black, 0.1);
     }
 
     .popover-arrow {
@@ -167,16 +105,16 @@ h3 {
     }
   }
 
-  &[aria-hidden='true'] {
+  &[aria-hidden="true"] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .15s, visibility .15s;
+    transition: opacity 0.15s, visibility 0.15s;
   }
 
-  &[aria-hidden='false'] {
+  &[aria-hidden="false"] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .15s;
+    transition: opacity 0.15s;
   }
 }
 
@@ -515,8 +453,8 @@ fieldset#history {
   &.show {
     display: flex;
     position: fixed;
-    top: 16px;
+    top: 12px;
-    right: 16px;
+    right: 12px;
     z-index: 1;
 
     #hidden-message {

components/collections/importExportCollections.vue

@@ -20,7 +20,11 @@
     <div slot="footer">
       <ul>
         <li>
-          <button class="icon" @click="openDialogChooseFileToReplaceWith" v-tooltip="'Replace current'">
+          <button
+            class="icon"
+            @click="openDialogChooseFileToReplaceWith"
+            v-tooltip="'Replace current'"
+          >
             <i class="material-icons">create_new_folder</i>
             <span>Replace with JSON</span>
             <input
@@ -32,7 +36,11 @@
           </button>
         </li>
         <li>
-          <button class="icon" @click="openDialogChooseFileToImportFrom" v-tooltip="'Preserve current'">
+          <button
+            class="icon"
+            @click="openDialogChooseFileToImportFrom"
+            v-tooltip="'Preserve current'"
+          >
             <i class="material-icons">folder_shared</i>
             <span>Import from JSON</span>
             <input

components/collections/saveRequestAs.vue

@@ -18,7 +18,12 @@
       <ul>
         <li>
           <label for="selectLabel">Label</label>
-          <input type="text" id="selectLabel" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
+          <input
+            type="text"
+            id="selectLabel"
+            v-model="requestData.name"
+            v-bind:placeholder="defaultRequestName"
+          />
           <label for="selectCollection">Collection</label>
           <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
             <option

components/history.vue

@@ -143,7 +143,7 @@
         </button>
       </li>
       <li v-else>
-        <div>
+        <div class="flex-wrap">
           <label for="clear-history-button">Are you sure?</label>
           <div>
             <button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>

components/modal.vue

@@ -68,7 +68,7 @@
 
 .modal-fade-enter .modal-container,
 .modal-fade-leave-active .modal-container {
-    transform: scale(0.9);
+  transform: scale(0.8);
-    transition: all 0.1s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 </style>

components/settings/swatch.vue

@@ -52,17 +52,17 @@
 <script>
 export default {
   props: {
-      'color': {
+    color: {
       type: String,
       required: true
     },
-      'name': {
+    name: {
       type: String
     },
-      'active': {
+    active: {
       type: Boolean,
       default: false
     }
   }
-  }
+};
 </script>

layouts/default.vue

@@ -27,7 +27,11 @@
             <nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'">
               <logo alt style="height: 24px;"></logo>
             </nuxt-link>
-            <nuxt-link to="/websocket" :class="linkActive('/websocket')" v-tooltip.right="'WebSocket'">
+            <nuxt-link
+              to="/websocket"
+              :class="linkActive('/websocket')"
+              v-tooltip.right="'WebSocket'"
+            >
               <i class="material-icons">cloud</i>
             </nuxt-link>
             <nuxt-link
@@ -157,6 +161,70 @@
     scroll-behavior: smooth;
   }
 
+  ::selection {
+    background-color: var(--ac-sel-color);
+    color: var(--act-color);
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--fg-light-color);
+    border-radius: 8px;
+    border: 2px solid var(--bg-color);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--fg-color);
+  }
+
+  ::placeholder {
+    color: var(--fg-light-color);
+    opacity: 0.3;
+  }
+
+  * {
+    box-sizing: border-box;
+    outline: 0;
+    border: 0;
+  }
+
+  body {
+    background-color: var(--bg-color);
+    color: var(--fg-color);
+    font-weight: 500;
+    font-size: 16px;
+    font-family: "Poppins", "Roboto", "Noto", sans-serif;
+    line-height: 1.5;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  // Make theme transition smoother.
+  body.afterLoad {
+    &,
+    & * {
+      transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
+    }
+  }
+
+  body.sticky-footer footer {
+    opacity: 0.25;
+  }
+
+  a {
+    display: inline-flex;
+    color: inherit;
+    text-decoration: none;
+    font-weight: 700;
+  }
+
   header,
   footer {
     & > div {
@@ -168,10 +236,6 @@
     }
   }
 
-  body.sticky-footer footer {
-    opacity: 0.25;
-  }
-
   .wrapper {
     min-height: 100vh;
     display: flex;
@@ -186,6 +250,23 @@
     flex: 1;
   }
 
+  .slide-in {
+    position: relative;
+    animation: slideIn 0.2s forwards ease-in-out;
+  }
+
+  @keyframes slideIn {
+    0% {
+      opacity: 0;
+      left: -16px;
+    }
+
+    100% {
+      opacity: 1;
+      left: 0px;
+    }
+  }
+
   .logo {
     font-size: 22px;
     color: var(--ac-color);
@@ -220,14 +301,53 @@
     display: none;
   }
 
-  nav.secondary-nav {
+  nav.primary-nav {
+    display: flex;
+    flex-flow: column nowrap;
+    border-bottom: 1px solid var(--brd-color);
+
+    svg {
+      fill: var(--fg-light-color);
+    }
+
+    a {
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
+      padding: 16px;
+      border-radius: 50%;
+      background-color: var(--brd-color);
+      color: var(--fg-light-color);
+      margin: 8px;
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        color: var(--fg-color);
+
+        svg {
+          fill: var(--fg-color);
+        }
+      }
+
+      &.nuxt-link-exact-active {
+        background-color: var(--ac-color);
+        color: var(--act-color);
+        border-radius: 16px;
+
+        svg {
+          fill: var(--act-color);
+        }
+      }
+    }
+  }
+
+  nav.secondary-nav {
+    display: flex;
 
     ul {
       display: flex;
-      flex-flow: column;
+      flex-flow: column nowrap;
 
       li {
         display: flex;
@@ -236,6 +356,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
+          flex-shrink: 0;
           padding: 16px;
           border-radius: 50%;
           background-color: var(--bg-dark-color);
@@ -255,67 +376,10 @@
     }
   }
 
-  .slide-in {
-    position: relative;
-    animation: slideIn 0.2s forwards ease-in-out;
-  }
-
-  @keyframes slideIn {
-    0% {
-      opacity: 0;
-      left: -16px;
-    }
-
-    100% {
-      opacity: 1;
-      left: 0px;
-    }
-  }
-
   .footer {
     flex-direction: column;
   }
 
-  nav.primary-nav {
-    display: flex;
-    flex-flow: column;
-    border-bottom: 1px solid var(--brd-color);
-
-    svg {
-      fill: var(--fg-light-color);
-    }
-
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 16px;
-      border-radius: 50%;
-      background-color: var(--brd-color);
-      color: var(--fg-light-color);
-      margin: 8px;
-      transition: all .2s ease-in-out;
-
-      &:hover {
-        color: var(--fg-color);
-
-        svg {
-          fill: var(--fg-color);
-        }
-      }
-
-      &.nuxt-link-exact-active {
-        background-color: var(--ac-color);
-        color: var(--act-color);
-        border-radius: 8px;
-
-        svg {
-          fill: var(--act-color);
-        }
-      }
-    }
-  }
-
   $responsiveWidth: 720px;
 
   @media (max-width: $responsiveWidth) {

nuxt.config.js

@@ -29,8 +29,7 @@ export default {
   },
   head: {
     title: `${meta.name} \u2022 ${meta.shortDescription}`,
-    meta: [
+    meta: [{
-      {
         charset: 'utf-8'
       },
       {
@@ -148,8 +147,7 @@ export default {
         content: `${routerBase.router.base}icons/icon-144x144.png`
       },
     ],
-    link: [
+    link: [{
-      {
         rel: 'icon',
         type: 'image/x-icon',
         href: `${routerBase.router.base}favicon.ico`
@@ -206,8 +204,7 @@ export default {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [
+  plugins: [{
-    {
       src: '~/plugins/vuex-persist'
     },
     {
@@ -217,8 +214,7 @@ export default {
   /*
    ** Nuxt.js dev-modules
    */
-  buildModules: [
+  buildModules: [],
-  ],
   /*
    ** Nuxt.js modules
    */
@@ -229,7 +225,9 @@ export default {
     ['@nuxtjs/toast'],
     ['@nuxtjs/google-analytics'],
     ['@nuxtjs/sitemap'],
-    ['@nuxtjs/google-tag-manager', { id: process.env.GTM_ID || 'GTM-MXWD8NQ' }]
+    ['@nuxtjs/google-tag-manager', {
+      id: process.env.GTM_ID || 'GTM-MXWD8NQ'
+    }]
   ],
   pwa: {
     manifest: {

pages/index.vue

@@ -40,8 +40,21 @@
       </div>
     </pw-modal>
 
-    <pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request • β (experimental)" ref="preRequest">
+    <pw-section
-      <textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="preRequestScript" spellcheck="false" placeholder='pw.environment.set("variable", "value");'></textarea>
+      v-if="showPreRequestScript"
+      class="orange"
+      label="Pre-Request • β (experimental)"
+      ref="preRequest"
+    >
+      <textarea
+        id="preRequestScript"
+        @keydown="formatRawParams"
+        rows="8"
+        v-model="preRequestScript"
+        v-textarea-auto-height="preRequestScript"
+        spellcheck="false"
+        placeholder="pw.environment.set('variable', 'value');"
+      ></textarea>
     </pw-section>
 
     <pw-section class="blue" label="Request" ref="request">
@@ -212,8 +225,16 @@
             v-tooltip.bottom="{ content: !showPreRequestScript ? 'Show Pre-Request Script' : 'Hide Pre-Request Script'}"
             @click="showPreRequestScript = !showPreRequestScript"
           >
-            <i class="material-icons" :class="showPreRequestScript" v-if="!showPreRequestScript">code</i>
+            <i
-            <i class="material-icons" :class="showPreRequestScript" v-if="showPreRequestScript">close</i>
+              class="material-icons"
+              :class="showPreRequestScript"
+              v-if="!showPreRequestScript"
+            >code</i>
+            <i
+              class="material-icons"
+              :class="showPreRequestScript"
+              v-if="showPreRequestScript"
+            >close</i>
           </button>
         </div>
         <div style="text-align: center;">
@@ -282,14 +303,13 @@
       </ul>
     </pw-section>
 
-    <br>
+    <br />
 
     <section id="options">
       <input id="tab-one" type="radio" name="grp" checked="checked" />
       <label for="tab-one">Authentication</label>
       <div class="tab">
-
+        <br />
-        <br>
 
         <pw-section class="cyan" label="Authentication" ref="authentication">
           <ul>
@@ -342,19 +362,14 @@
             </li>
           </ul>
           <div class="flex-wrap">
-            <pw-toggle
+            <pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">Include in URL</pw-toggle>
-            :on="!urlExcludes.auth"
-            @change="setExclude('auth', !$event)">
-              Include in URL
-            </pw-toggle>
           </div>
         </pw-section>
       </div>
       <input id="tab-two" type="radio" name="grp" />
       <label for="tab-two">Headers</label>
       <div class="tab">
-
+        <br />
-        <br>
 
         <pw-section class="orange" label="Headers" ref="headers">
           <ul>
@@ -419,8 +434,7 @@
       <input id="tab-three" type="radio" name="grp" />
       <label for="tab-three">Parameters</label>
       <div class="tab">
-
+        <br />
-        <br>
 
         <pw-section class="pink" label="Parameters" ref="parameters">
           <ul>
@@ -482,7 +496,7 @@
       </div>
     </section>
 
-    <br>
+    <br />
 
     <pw-section class="purple" id="response" label="Response" ref="response">
       <ul>
@@ -541,13 +555,13 @@
       </ul>
     </pw-section>
 
-    <br>
+    <br />
 
     <pw-section class="yellow" label="Collections" ref="collections">
       <collections />
     </pw-section>
 
-    <br>
+    <br />
 
     <history @useHistory="handleUseHistory" ref="historyComponent"></history>
   </div>
@@ -567,7 +581,7 @@ import parseCurlCommand from "../assets/js/curlparser.js";
 import hljs from "highlight.js";
 import "highlight.js/styles/dracula.css";
 import getEnvironmentVariablesFromScript from "../functions/preRequest";
-import parseTemplateString from '../functions/templating'
+import parseTemplateString from "../functions/templating";
 
 const statusCategories = [
   {
@@ -637,7 +651,7 @@ export default {
     return {
       showModal: false,
       showPreRequestScript: false,
-      preRequestScript: '',
+      preRequestScript: "",
       copyButton: '<i class="material-icons">file_copy</i>',
       copiedButton: '<i class="material-icons">done</i>',
       isHidden: true,
@@ -679,7 +693,10 @@ export default {
     urlExcludes: {
       deep: true,
       handler() {
-          this.$store.commit("postwoman/applySetting", ['URL_EXCLUDES', Object.assign({}, this.urlExcludes)]);
+        this.$store.commit("postwoman/applySetting", [
+          "URL_EXCLUDES",
+          Object.assign({}, this.urlExcludes)
+        ]);
       }
     },
     contentType(val) {
@@ -769,68 +786,135 @@ export default {
   },
   computed: {
     url: {
-        get() { return this.$store.state.request.url; },
+      get() {
-        set(value) { this.$store.commit('setState', { value, 'attribute': 'url' }) },
+        return this.$store.state.request.url;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "url" });
+      }
     },
     method: {
-      get() { return this.$store.state.request.method; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'method' }) },
+        return this.$store.state.request.method;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "method" });
+      }
     },
     path: {
-      get() { return this.$store.state.request.path; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'path' }) },
+        return this.$store.state.request.path;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "path" });
+      }
     },
     label: {
-      get() { return this.$store.state.request.label; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'label' }) },
+        return this.$store.state.request.label;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "label" });
+      }
     },
     auth: {
-      get() { return this.$store.state.request.auth; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'auth' }) },
+        return this.$store.state.request.auth;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "auth" });
+      }
     },
     httpUser: {
-      get() { return this.$store.state.request.httpUser; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'httpUser' }) },
+        return this.$store.state.request.httpUser;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "httpUser" });
+      }
     },
     httpPassword: {
-      get() { return this.$store.state.request.httpPassword; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'httpPassword' }) },
+        return this.$store.state.request.httpPassword;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "httpPassword" });
+      }
     },
     bearerToken: {
-      get() { return this.$store.state.request.bearerToken; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'bearerToken' }) },
+        return this.$store.state.request.bearerToken;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "bearerToken" });
+      }
     },
     headers: {
-      get() { return this.$store.state.request.headers; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'headers' }) },
+        return this.$store.state.request.headers;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "headers" });
+      }
     },
     params: {
-      get() { return this.$store.state.request.params; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'params' }) },
+        return this.$store.state.request.params;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "params" });
+      }
     },
     bodyParams: {
-      get() { return this.$store.state.request.bodyParams; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'bodyParams' }) },
+        return this.$store.state.request.bodyParams;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "bodyParams" });
+      }
     },
     rawParams: {
-      get() { return this.$store.state.request.rawParams; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'rawParams' }) },
+        return this.$store.state.request.rawParams;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "rawParams" });
+      }
     },
     rawInput: {
-      get() { return this.$store.state.request.rawInput; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'rawInput' }) },
+        return this.$store.state.request.rawInput;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "rawInput" });
+      }
     },
     requestType: {
-      get() { return this.$store.state.request.requestType; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'requestType' }) },
+        return this.$store.state.request.requestType;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "requestType" });
+      }
     },
     contentType: {
-      get() { return this.$store.state.request.contentType; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'contentType' }) },
+        return this.$store.state.request.contentType;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "contentType" });
+      }
     },
     passwordFieldType: {
-      get() { return this.$store.state.request.passwordFieldType; },
+      get() {
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'passwordFieldType' }) }
+        return this.$store.state.request.passwordFieldType;
+      },
+      set(value) {
+        this.$store.commit("setState", {
+          value,
+          attribute: "passwordFieldType"
+        });
+      }
     },
 
     selectedRequest() {
@@ -970,21 +1054,38 @@ export default {
         requestString.push('  method: "' + this.method + '",\n');
         if (this.auth === "Basic") {
           var basic = this.httpUser + ":" + this.httpPassword;
-          this.$store.commit('addHeaders', '    "Authorization": "Basic ' + window.btoa(unescape(encodeURIComponent(basic))) + ",\n")
+          this.$store.commit(
+            "addHeaders",
+            '    "Authorization": "Basic ' +
+              window.btoa(unescape(encodeURIComponent(basic))) +
+              ",\n"
+          );
         } else if (this.auth === "Bearer Token") {
-          this.$store.commit('addHeaders', '    "Authorization": "Bearer Token ' + this.bearerToken + ",\n")
+          this.$store.commit(
+            "addHeaders",
+            '    "Authorization": "Bearer Token ' + this.bearerToken + ",\n"
+          );
         }
         if (["POST", "PUT", "PATCH"].includes(this.method)) {
           const requestBody = this.rawInput
             ? this.rawParams
             : this.rawRequestBody;
           requestString.push("  body: " + requestBody + ",\n");
-          this.$store.commit('addHeaders', '    "Content-Length": ' + requestBody.length + ",\n")
+          this.$store.commit(
-          this.$store.commit('addHeaders', '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n')
+            "addHeaders",
+            '    "Content-Length": ' + requestBody.length + ",\n"
+          );
+          this.$store.commit(
+            "addHeaders",
+            '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n'
+          );
         }
         if (this.headers) {
           this.headers.forEach(function(element) {
-            this.$store.commit('addHeaders', '    "' + element.key + '": "' + element.value + '",\n')
+            this.$store.commit(
+              "addHeaders",
+              '    "' + element.key + '": "' + element.value + '",\n'
+            );
           });
         }
         headers = headers.join("").slice(0, -3);
@@ -1066,18 +1167,28 @@ export default {
         data: requestBody ? requestBody.toString() : null
       };
       if (preRequestScript) {
-        const environmentVariables = getEnvironmentVariablesFromScript(preRequestScript);
+        const environmentVariables = getEnvironmentVariablesFromScript(
-        requestOptions.url = parseTemplateString(requestOptions.url, environmentVariables);
+          preRequestScript
-        requestOptions.data = parseTemplateString(requestOptions.data, environmentVariables);
+        );
+        requestOptions.url = parseTemplateString(
+          requestOptions.url,
+          environmentVariables
+        );
+        requestOptions.data = parseTemplateString(
+          requestOptions.data,
+          environmentVariables
+        );
         for (let k in requestOptions.headers) {
           const kParsed = parseTemplateString(k, environmentVariables);
-          const valParsed = parseTemplateString(requestOptions.headers[k], environmentVariables);
+          const valParsed = parseTemplateString(
+            requestOptions.headers[k],
+            environmentVariables
+          );
           delete requestOptions.headers[k];
           requestOptions.headers[kParsed] = valParsed;
         }
-
       }
-      if (typeof requestOptions.data === 'string') {
+      if (typeof requestOptions.data === "string") {
         requestOptions.data = parseTemplateString(requestOptions.data);
       }
       const config = this.$store.state.postwoman.settings.PROXY_ENABLED
@@ -1168,7 +1279,12 @@ export default {
       try {
         const startTime = Date.now();
 
-        const payload = await this.makeRequest(auth, headers, requestBody, this.showPreRequestScript && this.preRequestScript);
+        const payload = await this.makeRequest(
+          auth,
+          headers,
+          requestBody,
+          this.showPreRequestScript && this.preRequestScript
+        );
 
         const duration = Date.now() - startTime;
         this.$toast.info(`Finished in ${duration}ms`, {
@@ -1259,34 +1375,34 @@ export default {
       this.params = params;
     },
     addRequestHeader() {
-      this.$store.commit('addHeaders', {
+      this.$store.commit("addHeaders", {
         key: "",
         value: ""
       });
       return false;
     },
     removeRequestHeader(index) {
-      this.$store.commit('removeHeaders', index)
+      this.$store.commit("removeHeaders", index);
       this.$toast.error("Deleted", {
         icon: "delete"
       });
     },
     addRequestParam() {
-      this.$store.commit('addParams', { key: "", value: "" })
+      this.$store.commit("addParams", { key: "", value: "" });
       return false;
     },
     removeRequestParam(index) {
-      this.$store.commit('removeParams', index)
+      this.$store.commit("removeParams", index);
       this.$toast.error("Deleted", {
         icon: "delete"
       });
     },
     addRequestBodyParam() {
-      this.$store.commit('addBodyParams', { key: "", value: "" })
+      this.$store.commit("addBodyParams", { key: "", value: "" });
       return false;
     },
     removeRequestBodyParam(index) {
-      this.$store.commit('removeBodyParams', index)
+      this.$store.commit("removeBodyParams", index);
       this.$toast.error("Deleted", {
         icon: "delete"
       });
@@ -1441,7 +1557,9 @@ export default {
         !this.urlExcludes.httpPassword ? "httpPassword" : null,
         !this.urlExcludes.bearerToken ? "bearerToken" : null,
         "contentType"
-      ].filter((item) => item !== null).map(item => flat(item));
+      ]
+        .filter(item => item !== null)
+        .map(item => flat(item));
       let deeps = ["headers", "params"].map(item => deep(item));
       let bodyParams = this.rawInput
         ? [flat("rawParams")]
@@ -1498,7 +1616,10 @@ export default {
         this.path = "";
         this.headers = [];
         for (const key of Object.keys(parsedCurl.headers)) {
-          this.$store.commit('addHeaders', { key: key, value: parsedCurl.headers[key] })
+          this.$store.commit("addHeaders", {
+            key: key,
+            value: parsedCurl.headers[key]
+          });
         }
         this.method = parsedCurl.method.toUpperCase();
         if (parsedCurl["data"]) {
@@ -1599,7 +1720,9 @@ export default {
     },
     methodChange() {
       // this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' })
-      this.contentType = ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '';
+      this.contentType = ["POST", "PUT", "PATCH"].includes(this.method)
+        ? "application/json"
+        : "";
     }
   },
   mounted() {

pages/settings.vue

@@ -5,7 +5,11 @@
         <li>
           <h3 class="title">Background</h3>
           <div class="backgrounds">
-            <span :key="theme.class" @click="applyTheme(theme.class, theme.color)" v-for="theme in themes">
+            <span
+              :key="theme.class"
+              @click="applyTheme(theme.class, theme.color)"
+              v-for="theme in themes"
+            >
               <swatch
                 :active="settings.THEME_CLASS === theme.class"
                 :class="{ vibrant: theme.vibrant }"
@@ -48,7 +52,7 @@
       </ul>
     </pw-section>
 
-    <br>
+    <br />
 
     <pw-section class="blue" label="Proxy" ref="proxy">
       <ul>
@@ -62,7 +66,16 @@
         </li>
       </ul>
       <ul class="info">
-        <li><p>Postwoman's Proxy is hosted by ApolloTV.<br>Read the ApolloTV privacy policy <a href="https://apollotv.xyz/legal" target="_blank">here</a>.</p></li>
+        <li>
+          <p>
+            Postwoman's Proxy is hosted by ApolloTV.
+            <br />Read the ApolloTV privacy policy
+            <a
+              href="https://apollotv.xyz/legal"
+              target="_blank"
+            >here</a>.
+          </p>
+        </li>
       </ul>
       <!--
       PROXY SETTINGS URL AND KEY
@@ -109,7 +122,7 @@
       //        set the relevant values.
       themes: [
         {
-            color: "rgb(37, 38, 40)",
+          color: "#252628",
           name: "Kinda Dark",
           class: ""
         },
@@ -205,7 +218,9 @@
   methods: {
     applyTheme(name, color) {
       this.applySetting("THEME_CLASS", name);
-        document.querySelector('meta[name=theme-color]').setAttribute('content', color)
+      document
+        .querySelector("meta[name=theme-color]")
+        .setAttribute("content", color);
       this.applySetting("THEME_TAB_COLOR", color);
       document.documentElement.className = name;
       let imgGitHub = document.getElementById("imgGitHub");
@@ -243,7 +258,7 @@
     toggleSetting(key) {
       this.settings[key] = !this.settings[key];
       this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
-        this.$router.replace('/settings', {
+      this.$router.replace("/settings", {
         force: true
       });
     }

pages/websocket.vue

@@ -25,14 +25,9 @@
       </ul>
     </pw-section>
 
-    <br>
+    <br />
 
-    <pw-section
+    <pw-section class="purple" label="Communication" id="response" ref="response">
-      class="purple"
-      label="Communication"
-      id="response"
-      ref="response"
-    >
       <ul>
         <li>
           <label for="log">Log</label>

store/index.js

@@ -9,7 +9,9 @@ export default {
     const vuexLocalStorage = new VuexPersist({
       key: 'vuex',
       storage: window.localStorage,
-      reducer: ({ ...request }) => ({
+      reducer: ({
+        ...request
+      }) => ({
         ...request
       })
     })