🚨 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 {

assets/js/curlparser.js

@@ -9,7 +9,7 @@ import * as querystring from "querystring";
  */
 function joinDataArguments(dataArguments) {
   let data = "";
-  dataArguments.forEach(function(argument, i) {
+  dataArguments.forEach(function (argument, i) {
     if (i === 0) {
       data += argument;
     } else {
@@ -47,7 +47,7 @@ function parseCurlCommand(curlCommand) {
   }
   let headers;
 
-  let parseHeaders = function(headerFieldName) {
+  let parseHeaders = function (headerFieldName) {
     if (parsedArguments[headerFieldName]) {
       if (!headers) {
         headers = {};
@@ -55,7 +55,7 @@ function parseCurlCommand(curlCommand) {
       if (!Array.isArray(parsedArguments[headerFieldName])) {
         parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
       }
-      parsedArguments[headerFieldName].forEach(function(header) {
+      parsedArguments[headerFieldName].forEach(function (header) {
         if (header.includes("Cookie")) {
           // stupid javascript tricks: closure
           cookieString = header;
@@ -95,7 +95,7 @@ function parseCurlCommand(curlCommand) {
     if (!Array.isArray(parsedArguments.F)) {
       parsedArguments.F = [parsedArguments.F];
     }
-    parsedArguments.F.forEach(function(multipartArgument) {
+    parsedArguments.F.forEach(function (multipartArgument) {
       // input looks like key=value. value could be json or a file path prepended with an @
       const [key, value] = multipartArgument.split("=", 2);
       multipartUploads[key] = value;
@@ -103,7 +103,7 @@ function parseCurlCommand(curlCommand) {
   }
   if (cookieString) {
     let cookieParseOptions = {
-      decode: function(s) {
+      decode: function (s) {
         return s;
       }
     };

components/autocomplete.vue

@@ -29,7 +29,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .autocomplete-wrapper {
+.autocomplete-wrapper {
   position: relative;
 
   input:focus + ul.suggestions,
@@ -69,17 +69,17 @@
       }
     }
   }
-  }
+}
 </style>
 
 <script>
-  const KEY_TAB = 9;
+const KEY_TAB = 9;
-  const KEY_ESC = 27;
+const KEY_ESC = 27;
 
-  const KEY_ARROW_UP = 38;
+const KEY_ARROW_UP = 38;
-  const KEY_ARROW_DOWN = 40;
+const KEY_ARROW_DOWN = 40;
 
-  export default {
+export default {
   props: {
     spellcheck: {
       type: Boolean,
@@ -206,5 +206,5 @@
       target: this.$refs.acInput
     });
   }
-  };
+};
 </script>

components/collections/addCollection.vue

@@ -35,9 +35,9 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
+export default {
   props: {
     show: Boolean
   },
@@ -60,5 +60,5 @@
       this.$emit("hide-modal");
     }
   }
-  };
+};
 </script>

components/collections/addFolder.vue

@@ -35,9 +35,9 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
+export default {
   props: {
     show: Boolean,
     collection: Object,
@@ -63,5 +63,5 @@
       this.$emit("hide-modal");
     }
   }
-  };
+};
 </script>

components/collections/collection.vue

@@ -54,23 +54,23 @@
 </template>
 
 <style scoped>
-  ul {
+ul {
   display: flex;
   flex-direction: column;
-  }
+}
 
-  ul li {
+ul li {
   display: flex;
   margin-left: 32px;
   border-left: 1px solid var(--brd-color);
-  }
+}
 </style>
 
 <script>
-  import folder from "./folder";
+import folder from "./folder";
-  import request from "./request";
+import request from "./request";
 
-  export default {
+export default {
   components: {
     folder,
     request
@@ -99,5 +99,5 @@
       this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
     }
   }
-  };
+};
 </script>

components/collections/editCollection.vue

@@ -35,9 +35,9 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
+export default {
   props: {
     show: Boolean,
     editingCollection: Object,
@@ -67,5 +67,5 @@
       this.$emit("hide-modal");
     }
   }
-  };
+};
 </script>

components/collections/editFolder.vue

@@ -35,9 +35,9 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
+export default {
   props: {
     show: Boolean,
     collection: Object,
@@ -66,5 +66,5 @@
       this.$emit("hide-modal");
     }
   }
-  };
+};
 </script>

components/collections/editRequest.vue

@@ -46,9 +46,9 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
+export default {
   props: {
     show: Boolean,
     collectionIndex: Number,
@@ -118,5 +118,5 @@
       this.$emit("hide-modal");
     }
   }
-  };
+};
 </script>

components/collections/folder.vue

@@ -39,22 +39,22 @@
 </template>
 
 <style scoped>
-  ul {
+ul {
   display: flex;
   flex-direction: column;
-  }
+}
 
-  ul li {
+ul li {
   display: flex;
   margin-left: 32px;
   border-left: 1px solid var(--brd-color);
-  }
+}
 </style>
 
 <script>
-  import request from "./request";
+import request from "./request";
 
-  export default {
+export default {
   props: {
     folder: Object,
     collectionIndex: Number,
@@ -86,5 +86,5 @@
       this.$emit("edit-folder");
     }
   }
-  };
+};
 </script>

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
@@ -55,9 +63,9 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
+export default {
   props: {
     show: Boolean
   },
@@ -113,5 +121,5 @@
       document.body.removeChild(anchor);
     }
   }
-  };
+};
 </script>

components/collections/index.vue

@@ -73,22 +73,22 @@ TODO:
 </template>
 
 <style lang="scss" scoped>
-  ul {
+ul {
   display: flex;
   flex-direction: column;
-  }
+}
 </style>
 
 <script>
-  import addCollection from "./addCollection";
+import addCollection from "./addCollection";
-  import addFolder from "./addFolder";
+import addFolder from "./addFolder";
-  import collection from "./collection";
+import collection from "./collection";
-  import editCollection from "./editCollection";
+import editCollection from "./editCollection";
-  import editFolder from "./editFolder";
+import editFolder from "./editFolder";
-  import editRequest from "./editRequest";
+import editRequest from "./editRequest";
-  import importExportCollections from "./importExportCollections";
+import importExportCollections from "./importExportCollections";
 
-  export default {
+export default {
   components: {
     addCollection,
     addFolder,
@@ -181,5 +181,5 @@ TODO:
       this.$data.editingRequestIndex = undefined;
     }
   }
-  };
+};
 </script>

components/collections/request.vue

@@ -18,20 +18,20 @@
 </template>
 
 <style scoped>
-  ul {
+ul {
   display: flex;
   flex-direction: column;
-  }
+}
 
-  ul li {
+ul li {
   display: flex;
   padding-left: 16px;
   border-left: 1px solid var(--brd-color);
-  }
+}
 </style>
 
 <script>
-  export default {
+export default {
   props: {
     request: Object,
     collectionIndex: Number,
@@ -51,5 +51,5 @@
       });
     }
   }
-  };
+};
 </script>

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
@@ -58,9 +63,9 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
+export default {
   props: {
     show: Boolean,
     editingRequest: Object
@@ -154,5 +159,5 @@
       this.$emit("hide-model"); // for backward compatibility  // TODO: use fixed event
     }
   }
-  };
+};
 </script>

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/logo.vue

@@ -36,21 +36,21 @@
 </template>
 
 <style>
-  #circle3814 {
+#circle3814 {
   /* fill: var(--fg-color); */
   fill: transparent;
-  }
+}
-  /* #path3816 {
+/* #path3816 {
     fill: var(--bg-color);
   } */
 </style>
 
 <script>
-  export default {
+export default {
   props: {
     color: {
       type: String
     }
   }
-  };
+};
 </script>

components/modal.vue

@@ -18,7 +18,7 @@
   </transition>
 </template>
 <style scoped>
-  .modal-backdrop {
+.modal-backdrop {
   position: fixed;
   z-index: 998;
   top: 0;
@@ -30,17 +30,17 @@
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
-  }
+}
 
-  .modal-wrapper {
+.modal-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
   max-width: 800px;
-  }
+}
 
-  .modal-container {
+.modal-container {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -50,9 +50,9 @@
   background-color: var(--bg-color);
   border-radius: 8px;
   box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
-  }
+}
 
-  /*
+/*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
   * by Vue.js.
@@ -61,14 +61,14 @@
   * these styles.
   */
 
-  .modal-fade-enter,
+.modal-fade-enter,
-  .modal-fade-leave-active {
+.modal-fade-leave-active {
   opacity: 0;
-  }
+}
 
-  .modal-fade-enter .modal-container,
+.modal-fade-enter .modal-container,
-  .modal-fade-leave-active .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/section.vue

@@ -12,13 +12,13 @@
 </template>
 
 <style>
-  fieldset.no-colored-frames legend {
+fieldset.no-colored-frames legend {
   color: var(--fg-color);
-  }
+}
 </style>
 
 <script>
-  export default {
+export default {
   computed: {
     frameColorsEnabled() {
       return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
@@ -48,5 +48,5 @@
       this.isCollapsed = !this.isCollapsed;
     }
   }
-  };
+};
 </script>

components/settings/swatch.vue

@@ -8,7 +8,7 @@
 </template>
 
 <style lang="scss">
-  .color {
+.color {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -40,29 +40,29 @@
       color: #ffffff;
     }
   }
-  }
+}
 
-  .color.vibrant {
+.color.vibrant {
   .preview .activeTick {
     color: var(--act-color);
   }
-  }
+}
 </style>
 
 <script>
-  export default {
+export default {
   props: {
-      'color': {
+    color: {
       type: String,
       required: true
     },
-      'name': {
+    name: {
       type: String
     },
-      'active': {
+    active: {
       type: Boolean,
       default: false
     }
   }
-  }
+};
 </script>

components/toggle.vue

@@ -10,31 +10,31 @@
 </template>
 
 <style lang="scss" scoped>
-  $useBorder: false;
+$useBorder: false;
-  $borderColor: var(--fg-light-color);
+$borderColor: var(--fg-light-color);
-  $activeColor: var(--ac-color);
+$activeColor: var(--ac-color);
-  $inactiveColor: var(--fg-light-color);
+$inactiveColor: var(--fg-light-color);
 
-  $inactiveHandleColor: var(--bg-color);
+$inactiveHandleColor: var(--bg-color);
-  $activeHandleColor: var(--act-color);
+$activeHandleColor: var(--act-color);
 
-  $width: 32px;
+$width: 32px;
-  $height: 16px;
+$height: 16px;
-  $handleSpacing: 4px;
+$handleSpacing: 4px;
 
-  $transition: all 0.2s ease-in-out;
+$transition: all 0.2s ease-in-out;
 
-  div {
+div {
   display: inline-block;
   cursor: pointer;
-  }
+}
 
-  label.caption {
+label.caption {
   vertical-align: middle;
   cursor: pointer;
-  }
+}
 
-  label.toggle {
+label.toggle {
   position: relative;
   display: inline-block;
   width: $width;
@@ -76,11 +76,11 @@
       left: #{$width - $height};
     }
   }
-  }
+}
 </style>
 
 <script>
-  export default {
+export default {
   props: {
     on: {
       type: Boolean,
@@ -94,5 +94,5 @@
       this.$emit("change", containsOnClass);
     }
   }
-  };
+};
 </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) {

layouts/error.vue

@@ -15,22 +15,22 @@
 </template>
 
 <style lang="scss">
-  // Center the error page in the viewport.
+// Center the error page in the viewport.
-  .page-error {
+.page-error {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center;
-  }
+}
 
-  .error_banner {
+.error_banner {
   width: 256px;
-  }
+}
 </style>
 
 <script>
-  export default {
+export default {
   props: ["error"],
 
   methods: {
@@ -46,5 +46,5 @@
       }
     };
   }
-  };
+};
 </script>

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>
@@ -522,7 +536,7 @@
   id="body"
   rows="16"
   placeholder="(waiting to send request)"
-            >{{response.body}}</code></pre>
+>{{response.body}}</code></pre>
             <iframe
               :class="{hidden: !previewEnabled}"
               class="covers-response"
@@ -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 = [
   {
@@ -633,11 +647,11 @@ export default {
     collections,
     saveRequestAs
   },
-  data () {
+  data() {
     return {
       showModal: false,
       showPreRequestScript: false,
-      preRequestScript: '',
+      preRequestScript: "",
       copyButton: '<i class="material-icons">file_copy</i>',
       copiedButton: '<i class="material-icons">done</i>',
       isHidden: true,
@@ -678,8 +692,11 @@ export default {
   watch: {
     urlExcludes: {
       deep: true,
-        handler () {
+      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);
@@ -1052,7 +1153,7 @@ export default {
       });
     },
     getVariablesFromPreRequestScript() {
-      if(!this.preRequestScript) {
+      if (!this.preRequestScript) {
         return {};
       }
       return getEnvironmentVariablesFromScript(this.preRequestScript);
@@ -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"]) {
@@ -1586,7 +1707,7 @@ export default {
       this.showRequestModal = false;
       this.editRequest = {};
     },
-    setExclude (excludedField, excluded) {
+    setExclude(excludedField, excluded) {
       if (excludedField === "auth") {
         this.urlExcludes.auth = excluded;
         this.urlExcludes.httpUser = excluded;
@@ -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
@@ -84,18 +97,18 @@
 </template>
 
 <style scoped>
-  .info {
+.info {
   margin-left: 4px;
   color: var(--fg-light-color);
-  }
+}
 </style>
 
 <script>
-  import section from "../components/section";
+import section from "../components/section";
-  import swatch from "../components/settings/swatch";
+import swatch from "../components/settings/swatch";
-  import toggle from "../components/toggle";
+import toggle from "../components/toggle";
 
-  export default {
+export default {
   components: {
     "pw-section": section,
     "pw-toggle": toggle,
@@ -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
       });
     }
@@ -260,5 +275,5 @@
       };
     }
   }
-  };
+};
 </script>

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>
@@ -74,7 +69,7 @@
   </div>
 </template>
 <style lang="scss">
-  div.log {
+div.log {
   margin: 4px;
   padding: 8px 16px;
   width: calc(100% - 8px);
@@ -94,12 +89,12 @@
     display: block;
     white-space: pre-wrap;
   }
-  }
+}
 </style>
 
 <script>
-  import section from "../components/section";
+import section from "../components/section";
-  export default {
+export default {
   components: {
     "pw-section": section
   },
@@ -245,5 +240,5 @@
       divLog.scrollBy(0, divLog.scrollHeight + 100);
     });
   }
-  };
+};
 </script>

store/index.js

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

store/mutations.js

@@ -1,5 +1,5 @@
 export default {
-  setState(state, object){
+  setState(state, object) {
     state.request[object.attribute] = object.value
   },