Minor UI changes (#295)

Minor UI changes

assets/css/styles.scss

@@ -127,10 +127,6 @@ footer {
   color: var(--ac-color);
 }
 
-.tagline {
-  font-size: 18px;
-}
-
 .nav-first {
   display: flex;
   order: 1;
@@ -268,6 +264,8 @@ h3 {
 }
 
 .tooltip {
+  $bgcolor: var(--brd-color);
+  $fgcolor: var(--fg-color);
   display: block !important;
   z-index: 10000;
 
@@ -350,18 +348,16 @@ h3 {
   }
 
   &.popover {
-    $color: #f9f9f9;
-
     .popover-inner {
-      background: $color;
+      background: $bgcolor;
-      color: black;
+      color: $fgcolor;
-      padding: 24px;
+      padding: 4px;
-      border-radius: 5px;
+      border-radius: 8px;
       box-shadow: 0 5px 30px rgba(black, 0.1);
     }
 
     .popover-arrow {
-      border-color: $color;
+      border-color: $bgcolor;
     }
   }
 
@@ -414,9 +410,10 @@ button {
   }
 
   &.icon {
-    background-color: var(--bg-color);
+    background-color: transparent;
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
+    border-radius: 8px;
 
     &:not([disabled]):hover,
     &:not([disabled]):active,
@@ -534,13 +531,6 @@ code {
   border-radius: 8px;
 }
 
-.hljs,
-.hljs-subst {
-  background-color: var(--bg-dark-color) !important;
-  color: var(--fg-color) !important;
-  font-family: 'Roboto Mono', monospace;
-}
-
 select,
 option {
   height: 40px;

components/ace-editor.vue

@@ -3,17 +3,16 @@
 </template>
 
 <script>
-const DEFAULT_THEME = 'dracula';
+const DEFAULT_THEME = "dracula";
 
-import ace from 'ace-builds';
+import ace from "ace-builds";
 import "ace-builds/webpack-resolver";
 
 export default {
-
   props: {
     value: {
       type: String,
-      default: ''
+      default: ""
     },
     theme: {
       type: String,
@@ -21,7 +20,7 @@ export default {
     },
     lang: {
       type: String,
-      default: 'json',
+      default: "json"
     },
     options: {
       type: Object,
@@ -32,22 +31,22 @@ export default {
   data() {
     return {
       editor: null,
-      cacheValue: ''
+      cacheValue: ""
-    }
+    };
   },
 
   watch: {
     value(value) {
-      if(value !== this.cacheValue) {
+      if (value !== this.cacheValue) {
-        this.editor.session.setValue(value,1);
+        this.editor.session.setValue(value, 1);
         this.cacheValue = value;
       }
     },
     theme() {
-      this.editor.setTheme('ace/theme/' + this.defineTheme())
+      this.editor.setTheme("ace/theme/" + this.defineTheme());
     },
     lang(value) {
-      this.editor.getSession().setMode('ace/mode/' + value);
+      this.editor.getSession().setMode("ace/mode/" + value);
     },
     options(value) {
       this.editor.setOptions(value);
@@ -56,10 +55,10 @@ export default {
 
   mounted() {
     const editor = ace.edit(this.$refs.editor, {
-      theme: 'ace/theme/'+ this.defineTheme(),
+      theme: "ace/theme/" + this.defineTheme(),
       mode: "ace/mode/" + this.lang,
       ...this.options
-      })
+    });
 
     editor.setValue(this.value);
 
@@ -69,10 +68,12 @@ export default {
 
   methods: {
     defineTheme() {
-      if(this.theme) {
+      if (this.theme) {
         return this.theme;
       } else {
-        return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+        return (
+          this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+        );
       }
     }
   },
@@ -81,5 +82,5 @@ export default {
     this.editor.destroy();
     this.editor.container.remove();
   }
-}
+};
 </script>

components/autocomplete.vue

@@ -23,7 +23,9 @@
         @click.prevent="forceSuggestion(suggestion)"
         :class="{ active: currentSuggestionIndex === index }"
         :key="index"
-      >{{ suggestion }}</li>
+      >
+        {{ suggestion }}
+      </li>
     </ul>
   </div>
 </template>

components/collections/collection.vue

@@ -6,17 +6,29 @@
           <i class="material-icons" v-show="!showChildren">arrow_right</i>
           <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
           <i class="material-icons">folder</i>
-          <span>{{collection.name}}</span>
+          <span>{{ collection.name }}</span>
         </button>
       </div>
       <div>
-        <button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
+        <button
+          class="icon"
+          @click="removeCollection"
+          v-tooltip="'Delete collection'"
+        >
           <i class="material-icons">delete</i>
         </button>
-        <button class="icon" @click="$emit('edit-collection')" v-tooltip="'Edit collection'">
+        <button
+          class="icon"
+          @click="$emit('edit-collection')"
+          v-tooltip="'Edit collection'"
+        >
           <i class="material-icons">create</i>
         </button>
-        <button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
+        <button
+          class="icon"
+          @click="$emit('add-folder')"
+          v-tooltip="'New Folder'"
+        >
           <i class="material-icons">create_new_folder</i>
         </button>
       </div>
@@ -33,7 +45,11 @@
             v-on:edit-request="$emit('edit-request', $event)"
           />
         </li>
-        <li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
+        <li
+          v-if="
+            collection.folders.length === 0 && collection.requests.length === 0
+          "
+        >
           <label>Collection is empty</label>
         </li>
       </ul>
@@ -44,7 +60,14 @@
             v-bind:collection-index="collectionIndex"
             v-bind:folder-index="-1"
             v-bind:request-index="index"
-            v-on:edit-request="$emit('edit-request', { request, collectionIndex, folderIndex: undefined, requestIndex: index })"
+            v-on:edit-request="
+              $emit('edit-request', {
+                request,
+                collectionIndex,
+                folderIndex: undefined,
+                requestIndex: index
+              })
+            "
           ></request>
         </li>
       </ul>

components/collections/editCollection.vue

@@ -17,7 +17,12 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="name" v-bind:placeholder="editingCollection.name" @keyup.enter="saveCollection" />
+          <input
+            type="text"
+            v-model="name"
+            v-bind:placeholder="editingCollection.name"
+            @keyup.enter="saveCollection"
+          />
         </li>
       </ul>
     </div>

components/collections/editFolder.vue

@@ -17,7 +17,12 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="name" v-bind:placeholder="folder.name" @keyup.enter="editFolder" />
+          <input
+            type="text"
+            v-model="name"
+            v-bind:placeholder="folder.name"
+            @keyup.enter="editFolder"
+          />
         </li>
       </ul>
     </div>

components/collections/editRequest.vue

@@ -18,20 +18,42 @@
       <ul>
         <li>
           <label for="selectLabel">Label</label>
-          <input type="text" id="selectLabel" v-model="requestUpdateData.name" @keyup.enter="saveRequest" :placeholder="request.name" />
+          <input
+            type="text"
+            id="selectLabel"
+            v-model="requestUpdateData.name"
+            @keyup.enter="saveRequest"
+            :placeholder="request.name"
+          />
           <label for="selectCollection">Collection</label>
-          <select type="text" id="selectCollection" v-model="requestUpdateData.collectionIndex">
+          <select
-            <option :key="undefined" :value="undefined" hidden disabled selected>Current Collection</option>
+            type="text"
+            id="selectCollection"
+            v-model="requestUpdateData.collectionIndex"
+          >
+            <option :key="undefined" :value="undefined" hidden disabled selected
+              >Current Collection</option
+            >
             <option
               v-for="(collection, index) in $store.state.postwoman.collections"
               :key="index"
               :value="index"
-            >{{ collection.name }}</option>
+              >{{ collection.name }}</option
+            >
           </select>
           <label for="selectFolder">Folder</label>
-          <select type="text" id="selectFolder" v-model="requestUpdateData.folderIndex">
+          <select
+            type="text"
+            id="selectFolder"
+            v-model="requestUpdateData.folderIndex"
+          >
             <option :key="undefined" :value="undefined">/</option>
-            <option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
+            <option
+              v-for="(folder, index) in folders"
+              :key="index"
+              :value="index"
+              >{{ folder.name }}</option
+            >
           </select>
         </li>
       </ul>

components/collections/folder.vue

@@ -6,7 +6,7 @@
           <i class="material-icons" v-show="!showChildren">arrow_right</i>
           <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
           <i class="material-icons">folder_open</i>
-          <span>{{folder.name}}</span>
+          <span>{{ folder.name }}</span>
         </button>
       </div>
       <div>
@@ -27,7 +27,14 @@
             v-bind:collection-index="collectionIndex"
             v-bind:folder-index="folderIndex"
             v-bind:request-index="index"
-            v-on:edit-request="$emit('edit-request', { request, collectionIndex, folderIndex, requestIndex: index })"
+            v-on:edit-request="
+              $emit('edit-request', {
+                request,
+                collectionIndex,
+                folderIndex,
+                requestIndex: index
+              })
+            "
           ></request>
         </li>
         <li v-if="folder.requests.length === 0">

components/collections/index.vue

@@ -5,7 +5,10 @@ TODO:
 
 <template>
   <div class="collections-wrapper">
-    <addCollection v-bind:show="showModalAdd" v-on:hide-modal="displayModalAdd(false)"></addCollection>
+    <addCollection
+      v-bind:show="showModalAdd"
+      v-on:hide-modal="displayModalAdd(false)"
+    ></addCollection>
     <editCollection
       v-bind:show="showModalEdit"
       v-bind:editingCollection="editingCollection"

components/collections/request.vue

@@ -3,14 +3,18 @@
     <div>
       <button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
         <i class="material-icons">insert_drive_file</i>
-        <span>{{request.name}}</span>
+        <span>{{ request.name }}</span>
       </button>
     </div>
     <div>
       <button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
         <i class="material-icons">delete</i>
       </button>
-      <button class="icon" @click="$emit('edit-request')" v-tooltip="'Edit request'">
+      <button
+        class="icon"
+        @click="$emit('edit-request')"
+        v-tooltip="'Edit request'"
+      >
         <i class="material-icons">edit</i>
       </button>
     </div>

components/collections/saveRequestAs.vue

@@ -26,27 +26,48 @@
             @keyup.enter="saveRequestAs"
           />
           <label for="selectCollection">Collection</label>
-          <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
+          <select
-            <option :key="undefined" :value="undefined" hidden disabled selected>Select a Collection</option>
+            type="text"
+            id="selectCollection"
+            v-model="requestData.collectionIndex"
+          >
+            <option :key="undefined" :value="undefined" hidden disabled selected
+              >Select a Collection</option
+            >
             <option
               v-for="(collection, index) in $store.state.postwoman.collections"
               :key="index"
               :value="index"
-            >{{ collection.name }}</option>
+              >{{ collection.name }}</option
+            >
           </select>
           <label for="selectFolder">Folder</label>
-          <select type="text" id="selectFolder" v-model="requestData.folderIndex">
+          <select
+            type="text"
+            id="selectFolder"
+            v-model="requestData.folderIndex"
+          >
             <option :key="undefined" :value="undefined">/</option>
-            <option v-for="(folder, index) in folders" :key="index" :value="index">{{ folder.name }}</option>
+            <option
+              v-for="(folder, index) in folders"
+              :key="index"
+              :value="index"
+              >{{ folder.name }}</option
+            >
           </select>
           <label for="selectRequest">Request</label>
-          <select type="text" id="selectRequest" v-model="requestData.requestIndex">
+          <select
+            type="text"
+            id="selectRequest"
+            v-model="requestData.requestIndex"
+          >
             <option :key="undefined" :value="undefined">/</option>
             <option
               v-for="(folder, index) in requests"
               :key="index"
               :value="index"
-            >{{ folder.name }}</option>
+              >{{ folder.name }}</option
+            >
           </select>
         </li>
       </ul>

components/history.vue

@@ -2,7 +2,12 @@
   <pw-section class="green" icon="history" label="History" ref="history">
     <ul>
       <li id="filter-history">
-        <input aria-label="Search" type="text" placeholder="search history" v-model="filterText" />
+        <input
+          aria-label="Search"
+          type="text"
+          placeholder="search history"
+          v-model="filterText"
+        />
       </li>
     </ul>
     <ul v-if="history.length !== 0" class="labels">
@@ -61,29 +66,54 @@
       </transition>
       <div class="show-on-small-screen">
         <li>
-          <button class="icon" @click="enableHistoryClearing" v-tooltip="'Clear History'">
+          <button
+            class="icon"
+            @click="enableHistoryClearing"
+            v-tooltip="'Clear History'"
+          >
             <i class="material-icons">clear_all</i>
           </button>
         </li>
         <li>
-          <button class="icon" @click="toggleCollapse()" v-tooltip="{ content: !show ? 'Show more' : 'Hide more'}">
+          <button
+            class="icon"
+            @click="toggleCollapse()"
+            v-tooltip="{ content: !show ? 'Show more' : 'Hide more' }"
+          >
             <i class="material-icons" v-if="!show">first_page</i>
             <i class="material-icons" v-else>last_page</i>
           </button>
         </li>
       </div>
     </ul>
-    <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="56" :remain="Math.min(5, filteredHistory.length)">
+    <virtual-list
+      class="virtual-list"
+      :class="{ filled: filteredHistory.length }"
+      :size="56"
+      :remain="Math.min(5, filteredHistory.length)"
+    >
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
         <div class="show-on-small-screen">
           <li>
-            <button class="icon" :class="{ stared: entry.star }" @click="toggleStar(index)" v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star'}">
+            <button
+              class="icon"
+              :class="{ stared: entry.star }"
+              @click="toggleStar(index)"
+              v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }"
+            >
               <i class="material-icons" v-if="entry.star">star</i>
               <i class="material-icons" v-else>star_border</i>
             </button>
           </li>
           <li>
-            <button class="icon" v-tooltip="{ content: !entry.usesScripts ? 'No pre-request script' : 'Used pre-request script'}">
+            <button
+              class="icon"
+              v-tooltip="{
+                content: !entry.usesScripts
+                  ? 'No pre-request script'
+                  : 'Used pre-request script'
+              }"
+            >
               <i class="material-icons" v-if="!entry.usesScripts">http</i>
               <i class="material-icons" v-else>code</i>
             </button>
@@ -91,51 +121,113 @@
         </div>
         <div class="show-on-small-screen">
           <li>
-            <input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label" />
+            <input
+              aria-label="Label"
+              type="text"
+              readonly
+              :value="entry.label"
+              placeholder="No label"
+            />
           </li>
           <li>
-            <input aria-label="Time" type="text" readonly :value="entry.time" v-tooltip="entry.date" />
+            <input
+              aria-label="Time"
+              type="text"
+              readonly
+              :value="entry.time"
+              v-tooltip="entry.date"
+            />
           </li>
         </div>
         <li class="method-list-item">
-          <input aria-label="Method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}" />
+          <input
-          <span class="entry-status-code" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">{{entry.status}}</span>
+            aria-label="Method"
+            type="text"
+            readonly
+            :value="entry.method"
+            :class="findEntryStatus(entry).className"
+            :style="{ '--status-code': entry.status }"
+          />
+          <span
+            class="entry-status-code"
+            :class="findEntryStatus(entry).className"
+            :style="{ '--status-code': entry.status }"
+            >{{ entry.status }}</span
+          >
         </li>
         <div class="show-on-small-screen">
           <li>
-            <input aria-label="URL" type="text" readonly :value="entry.url" placeholder="No URL" />
+            <input
+              aria-label="URL"
+              type="text"
+              readonly
+              :value="entry.url"
+              placeholder="No URL"
+            />
           </li>
           <li>
-            <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
+            <input
+              aria-label="Path"
+              type="text"
+              readonly
+              :value="entry.path"
+              placeholder="No path"
+            />
           </li>
         </div>
         <transition name="smooth">
           <div v-if="show" class="show-on-small-screen">
             <li>
-              <input aria-label="Duration" type="text" readonly :value="entry.duration" placeholder="No duration" />
+              <input
+                aria-label="Duration"
+                type="text"
+                readonly
+                :value="entry.duration"
+                placeholder="No duration"
+              />
             </li>
             <li>
-              <input aria-label="Pre Request Script" type="text" readonly :value="entry.preRequestScript" placeholder="No pre request script" />
+              <input
+                aria-label="Pre Request Script"
+                type="text"
+                readonly
+                :value="entry.preRequestScript"
+                placeholder="No pre request script"
+              />
             </li>
           </div>
         </transition>
         <div class="show-on-small-screen">
           <li>
-            <button v-tooltip="'Delete entry'" class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
+            <button
+              v-tooltip="'Delete entry'"
+              class="icon"
+              :id="'delete-button#' + index"
+              @click="deleteHistory(entry)"
+              aria-label="Delete"
+            >
               <i class="material-icons">delete</i>
             </button>
           </li>
           <li>
-            <button v-tooltip="'Edit entry'" class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
+            <button
+              v-tooltip="'Edit entry'"
+              class="icon"
+              :id="'use-button#' + index"
+              @click="useHistory(entry)"
+              aria-label="Edit"
+            >
               <i class="material-icons">edit</i>
             </button>
           </li>
         </div>
       </ul>
     </virtual-list>
-    <ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
+    <ul
+      :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
+    >
       <li>
-        <label>Nothing found "{{filterText}}"</label>
+        <label>Nothing found "{{ filterText }}"</label>
       </li>
     </ul>
     <ul v-if="history.length === 0">
@@ -145,7 +237,12 @@
     </ul>
     <ul v-if="history.length !== 0">
       <li v-if="!isClearingHistory">
-        <button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">
+        <button
+          class="icon"
+          id="clear-history-button"
+          :disabled="history.length === 0"
+          @click="enableHistoryClearing"
+        >
           <i class="material-icons">clear_all</i>
           <span>Clear All</span>
         </button>
@@ -154,8 +251,20 @@
         <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>
+            <button
-            <button class="icon" id="reject-clear-history-button" @click="disableHistoryClearing">No</button>
+              class="icon"
+              id="confirm-clear-history-button"
+              @click="clearHistory"
+            >
+              Yes
+            </button>
+            <button
+              class="icon"
+              id="reject-clear-history-button"
+              @click="disableHistoryClearing"
+            >
+              No
+            </button>
           </div>
         </div>
       </li>
@@ -164,223 +273,223 @@
 </template>
 
 <style scoped lang="scss">
-  .virtual-list {
+.virtual-list {
-    min-height: 90px;
+  min-height: 90px;
 
-    [readonly] {
+  [readonly] {
-      cursor: default;
+    cursor: default;
-    }
+  }
+}
+
+label {
+  &:hover {
+    cursor: pointer;
+    color: var(--fg-color);
+  }
+}
+
+.smooth-enter-active,
+.smooth-leave-active {
+  transition: all 0.2s;
+}
+
+.smooth-enter,
+.smooth-leave-to {
+  opacity: 0;
+}
+
+.stared {
+  color: #f8e81c !important;
+}
+
+@media (max-width: 720px) {
+  .virtual-list.filled {
+    min-height: 320px;
   }
 
-  label {
+  .labels {
-
+    display: none;
-    &:hover {
-      cursor: pointer;
-      color: var(--fg-color);
-    }
   }
 
-  .smooth-enter-active,
+  .entry {
-  .smooth-leave-active {
+    border-bottom: 1px solid var(--brd-color);
-    transition: all 0.2s;
   }
-
+}
-  .smooth-enter,
-  .smooth-leave-to {
-    opacity: 0;
-  }
-
-  .stared {
-    color: #F8E81C !important;
-  }
-
-  @media (max-width: 720px) {
-    .virtual-list.filled {
-      min-height: 320px;
-    }
-
-    .labels {
-      display: none;
-    }
-
-    .entry {
-      border-bottom: 1px solid var(--brd-color);
-    }
-  }
-
 </style>
 
 <script>
-  import VirtualList from "vue-virtual-scroll-list";
+import VirtualList from "vue-virtual-scroll-list";
-  import section from "./section";
+import section from "./section";
-  import {
+import { findStatusGroup } from "../pages/index";
-    findStatusGroup
-  } from "../pages/index";
 
-  const updateOnLocalStorage = (propertyName, property) =>
+const updateOnLocalStorage = (propertyName, property) =>
-    window.localStorage.setItem(propertyName, JSON.stringify(property));
+  window.localStorage.setItem(propertyName, JSON.stringify(property));
-  export default {
+export default {
-    components: {
+  components: {
-      "pw-section": section,
+    "pw-section": section,
-      VirtualList
+    VirtualList
-    },
+  },
-    data() {
+  data() {
-      const localStorageHistory = JSON.parse(
+    const localStorageHistory = JSON.parse(
-        window.localStorage.getItem("history")
+      window.localStorage.getItem("history")
-      );
+    );
-      return {
+    return {
-        history: localStorageHistory || [],
+      history: localStorageHistory || [],
-        filterText: "",
+      filterText: "",
-        showFilter: false,
+      showFilter: false,
-        isClearingHistory: false,
+      isClearingHistory: false,
-        reverse_sort_label: false,
+      reverse_sort_label: false,
-        reverse_sort_time: false,
+      reverse_sort_time: false,
-        reverse_sort_status_code: false,
+      reverse_sort_status_code: false,
-        reverse_sort_url: false,
+      reverse_sort_url: false,
-        reverse_sort_path: false,
+      reverse_sort_path: false,
-        show: false
+      show: false
-      };
+    };
-    },
+  },
-    computed: {
+  computed: {
-      filteredHistory() {
+    filteredHistory() {
-        return this.history.filter(entry => {
+      return this.history.filter(entry => {
-          const filterText = this.filterText.toLowerCase();
+        const filterText = this.filterText.toLowerCase();
-          return Object.keys(entry).some(key => {
+        return Object.keys(entry).some(key => {
-            let value = entry[key];
+          let value = entry[key];
-            value = typeof value !== "string" ? value.toString() : value;
+          value = typeof value !== "string" ? value.toString() : value;
-            return value.toLowerCase().includes(filterText);
+          return value.toLowerCase().includes(filterText);
-          });
         });
-      }
+      });
-    },
-    methods: {
-      clearHistory() {
-        this.history = [];
-        this.filterText = "";
-        this.disableHistoryClearing();
-        updateOnLocalStorage("history", this.history);
-        this.$toast.error("History Deleted", {
-          icon: "delete"
-        });
-      },
-      useHistory(entry) {
-        this.$emit("useHistory", entry);
-      },
-      findEntryStatus(entry) {
-        const foundStatusGroup = findStatusGroup(entry.status);
-        return (
-          foundStatusGroup || {
-            className: ""
-          }
-        );
-      },
-      deleteHistory(entry) {
-        this.history.splice(this.history.indexOf(entry), 1);
-        if (this.history.length === 0) {
-          this.filterText = "";
-        }
-        updateOnLocalStorage("history", this.history);
-        this.$toast.error("Deleted", {
-          icon: "delete"
-        });
-      },
-      addEntry(entry) {
-        this.history.push(entry);
-        updateOnLocalStorage("history", this.history);
-      },
-      enableHistoryClearing() {
-        if (!this.history || !this.history.length) return;
-        this.isClearingHistory = true;
-      },
-      disableHistoryClearing() {
-        this.isClearingHistory = false;
-      },
-      sort_by_time() {
-        let byDate = this.history.slice(0);
-        byDate.sort((a, b) => {
-          let date_a = a.date.split("/");
-          let date_b = b.date.split("/");
-          let time_a = a.time.split(":");
-          let time_b = b.time.split(":");
-          let final_a = new Date(
-            date_a[2],
-            date_a[1],
-            date_a[0],
-            time_a[0],
-            time_a[1],
-            time_a[2]
-          );
-          let final_b = new Date(
-            date_b[2],
-            date_b[1],
-            date_b[0],
-            time_b[0],
-            time_b[1],
-            time_b[2]
-          );
-          if (this.reverse_sort_time) return final_b - final_a;
-          else return final_a - final_b;
-        });
-        this.history = byDate;
-        this.reverse_sort_time = !this.reverse_sort_time;
-      },
-      sort_by_status_code() {
-        let byCode = this.history.slice(0);
-        byCode.sort((a, b) => {
-          if (this.reverse_sort_status_code) return b.status - a.status;
-          else return a.status - b.status;
-        });
-        this.history = byCode;
-        this.reverse_sort_status_code = !this.reverse_sort_status_code;
-      },
-      sort_by_url() {
-        let byUrl = this.history.slice(0);
-        byUrl.sort((a, b) => {
-          if (this.reverse_sort_url)
-            return a.url == b.url ? 0 : +(a.url < b.url) || -1;
-          else return a.url == b.url ? 0 : +(a.url > b.url) || -1;
-        });
-        this.history = byUrl;
-        this.reverse_sort_url = !this.reverse_sort_url;
-      },
-      sort_by_label() {
-        let byLabel = this.history.slice(0);
-        byLabel.sort((a, b) => {
-          if (this.reverse_sort_label)
-            return a.label == b.label ? 0 : +(a.label < b.label) || -1;
-          else return a.label == b.label ? 0 : +(a.label > b.label) || -1;
-        });
-        this.history = byLabel;
-        this.reverse_sort_label = !this.reverse_sort_label;
-      },
-      sort_by_path() {
-        let byPath = this.history.slice(0);
-        byPath.sort((a, b) => {
-          if (this.reverse_sort_path)
-            return a.path == b.path ? 0 : +(a.path < b.path) || -1;
-          else return a.path == b.path ? 0 : +(a.path > b.path) || -1;
-        });
-        this.history = byPath;
-        this.reverse_sort_path = !this.reverse_sort_path;
-      },
-      sort_by_duration() {
-        let byDuration = this.history.slice(0);
-        byDuration.sort((a, b) => {
-          if (this.reverse_sort_duration)
-            return a.duration == b.duration ? 0 : +(a.duration < b.duration) || -1;
-          else return a.duration == b.duration ? 0 : +(a.duration > b.duration) || -1;
-        });
-        this.history = byDuration;
-        this.reverse_sort_duration = !this.reverse_sort_duration;
-      },
-      toggleCollapse() {
-        this.show = !this.show
-      },
-      toggleStar(index) {
-        this.history[index]["star"] = !this.history[index]["star"];
-        updateOnLocalStorage("history", this.history);
-      }
     }
-  };
+  },
-
+  methods: {
+    clearHistory() {
+      this.history = [];
+      this.filterText = "";
+      this.disableHistoryClearing();
+      updateOnLocalStorage("history", this.history);
+      this.$toast.error("History Deleted", {
+        icon: "delete"
+      });
+    },
+    useHistory(entry) {
+      this.$emit("useHistory", entry);
+    },
+    findEntryStatus(entry) {
+      const foundStatusGroup = findStatusGroup(entry.status);
+      return (
+        foundStatusGroup || {
+          className: ""
+        }
+      );
+    },
+    deleteHistory(entry) {
+      this.history.splice(this.history.indexOf(entry), 1);
+      if (this.history.length === 0) {
+        this.filterText = "";
+      }
+      updateOnLocalStorage("history", this.history);
+      this.$toast.error("Deleted", {
+        icon: "delete"
+      });
+    },
+    addEntry(entry) {
+      this.history.push(entry);
+      updateOnLocalStorage("history", this.history);
+    },
+    enableHistoryClearing() {
+      if (!this.history || !this.history.length) return;
+      this.isClearingHistory = true;
+    },
+    disableHistoryClearing() {
+      this.isClearingHistory = false;
+    },
+    sort_by_time() {
+      let byDate = this.history.slice(0);
+      byDate.sort((a, b) => {
+        let date_a = a.date.split("/");
+        let date_b = b.date.split("/");
+        let time_a = a.time.split(":");
+        let time_b = b.time.split(":");
+        let final_a = new Date(
+          date_a[2],
+          date_a[1],
+          date_a[0],
+          time_a[0],
+          time_a[1],
+          time_a[2]
+        );
+        let final_b = new Date(
+          date_b[2],
+          date_b[1],
+          date_b[0],
+          time_b[0],
+          time_b[1],
+          time_b[2]
+        );
+        if (this.reverse_sort_time) return final_b - final_a;
+        else return final_a - final_b;
+      });
+      this.history = byDate;
+      this.reverse_sort_time = !this.reverse_sort_time;
+    },
+    sort_by_status_code() {
+      let byCode = this.history.slice(0);
+      byCode.sort((a, b) => {
+        if (this.reverse_sort_status_code) return b.status - a.status;
+        else return a.status - b.status;
+      });
+      this.history = byCode;
+      this.reverse_sort_status_code = !this.reverse_sort_status_code;
+    },
+    sort_by_url() {
+      let byUrl = this.history.slice(0);
+      byUrl.sort((a, b) => {
+        if (this.reverse_sort_url)
+          return a.url == b.url ? 0 : +(a.url < b.url) || -1;
+        else return a.url == b.url ? 0 : +(a.url > b.url) || -1;
+      });
+      this.history = byUrl;
+      this.reverse_sort_url = !this.reverse_sort_url;
+    },
+    sort_by_label() {
+      let byLabel = this.history.slice(0);
+      byLabel.sort((a, b) => {
+        if (this.reverse_sort_label)
+          return a.label == b.label ? 0 : +(a.label < b.label) || -1;
+        else return a.label == b.label ? 0 : +(a.label > b.label) || -1;
+      });
+      this.history = byLabel;
+      this.reverse_sort_label = !this.reverse_sort_label;
+    },
+    sort_by_path() {
+      let byPath = this.history.slice(0);
+      byPath.sort((a, b) => {
+        if (this.reverse_sort_path)
+          return a.path == b.path ? 0 : +(a.path < b.path) || -1;
+        else return a.path == b.path ? 0 : +(a.path > b.path) || -1;
+      });
+      this.history = byPath;
+      this.reverse_sort_path = !this.reverse_sort_path;
+    },
+    sort_by_duration() {
+      let byDuration = this.history.slice(0);
+      byDuration.sort((a, b) => {
+        if (this.reverse_sort_duration)
+          return a.duration == b.duration
+            ? 0
+            : +(a.duration < b.duration) || -1;
+        else
+          return a.duration == b.duration
+            ? 0
+            : +(a.duration > b.duration) || -1;
+      });
+      this.history = byDuration;
+      this.reverse_sort_duration = !this.reverse_sort_duration;
+    },
+    toggleCollapse() {
+      this.show = !this.show;
+    },
+    toggleStar(index) {
+      this.history[index]["star"] = !this.history[index]["star"];
+      updateOnLocalStorage("history", this.history);
+    }
+  }
+};
 </script>

components/section.vue

@@ -1,5 +1,8 @@
 <template>
-  <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
+  <fieldset
+    :id="label.toLowerCase()"
+    :class="{ 'no-colored-frames': !frameColorsEnabled }"
+  >
     <legend @click.prevent="collapse">
       <span>{{ label }}</span>
       <i class="material-icons" v-if="isCollapsed">expand_more</i>

components/toggle.vue

@@ -1,6 +1,6 @@
 <template>
   <div @click="toggle()">
-    <label class="toggle" :class="{on: on}" ref="toggle">
+    <label class="toggle" :class="{ on: on }" ref="toggle">
       <span class="handle"></span>
     </label>
     <label class="caption">

functions/templating.js

@@ -1,7 +1,7 @@
 export default function parseTemplateString(string, variables) {
-    if(!variables || !string) {
+  if (!variables || !string) {
-      return string;
+    return string;
-    }
+  }
-    const searchTerm = /<<([^>]*)>>/g; // "<<myVariable>>"
+  const searchTerm = /<<([^>]*)>>/g; // "<<myVariable>>"
-    return string.replace(searchTerm, (match, p1) => variables[p1] || '');
+  return string.replace(searchTerm, (match, p1) => variables[p1] || '');
 }

layouts/default.vue

@@ -1,19 +1,74 @@
 <template>
   <div class="wrapper">
     <header class="header">
-      <div>
+      <div class="flex-wrap">
         <div class="slide-in">
           <nuxt-link to="/">
             <h1 class="logo">Postwoman</h1>
           </nuxt-link>
-          <h3 class="tagline">API request builder</h3>
         </div>
-        <a href="https://github.com/liyasthomas/postwoman" target="_blank" rel="noopener">
+        <div class="flex-wrap">
-          <button class="icon">
+          <a
-            <img id="imgGitHub" src="~static/icons/github.svg" alt="GitHub" :style="logoStyle()" />
+            href="https://github.com/liyasthomas/postwoman"
-            <span>GitHub</span>
+            target="_blank"
+            rel="noopener"
+            v-tooltip="'GitHub'"
+          >
+            <button class="icon">
+              <img
+                id="imgGitHub"
+                src="~static/icons/github.svg"
+                alt="GitHub"
+                :style="logoStyle()"
+              />
+            </button>
+          </a>
+          <button
+            class="icon"
+            id="installPWA"
+            @click.prevent="showInstallPrompt()"
+            v-tooltip="'Install PWA'"
+          >
+            <i class="material-icons">offline_bolt</i>
           </button>
-        </a>
+          <v-popover>
+            <button class="tooltip-target icon" v-tooltip="'More'">
+              <i class="material-icons">more_vert</i>
+            </button>
+            <template slot="popover">
+              <div>
+                <a
+                  href="https://opencollective.com/postwoman"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  <button class="icon">
+                    <i class="material-icons">favorite</i>
+                    <span>Donate</span>
+                  </button>
+                </a>
+              </div>
+              <div>
+                <button
+                  class="icon"
+                  onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
+                    />
+                  </svg>
+                  <span>Tweet</span>
+                </button>
+              </div>
+            </template>
+          </v-popover>
+        </div>
       </div>
     </header>
     <div class="content">
@@ -24,7 +79,12 @@
               We're using manual checks for linkActive because the query string
               seems to mess up the nuxt-link active class.
             -->
-            <nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'" aria-label="Home">
+            <nuxt-link
+              to="/"
+              :class="linkActive('/')"
+              v-tooltip.right="'Home'"
+              aria-label="Home"
+            >
               <logo alt style="height: 24px;"></logo>
             </nuxt-link>
             <nuxt-link
@@ -112,32 +172,18 @@
       </div>
     </div>
     <footer class="footer">
-      <!-- Top section of footer: GitHub/install links -->
-      <div class="flex-wrap">
-        <button class="icon" id="installPWA" @click.prevent="showInstallPrompt()">
-          <i class="material-icons">add_to_home_screen</i>
-          <span>Install PWA</span>
-        </button>
-        <button
-          class="icon"
-          onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-            <path
-              d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
-            />
-          </svg>
-          <span>Tweet</span>
-        </button>
-      </div>
       <!-- Bottom section of footer: version/author information -->
       <p class="align-center mono">
         <span v-if="version.name">
           <a
-            v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name"
+            v-bind:href="
+              'https://github.com/liyasthomas/postwoman/releases/tag/' +
+                version.name
+            "
             target="_blank"
             rel="noopener"
-          >{{version.name}}</a>
+            >{{ version.name }}</a
+          >
           <!-- <span v-if="version.hash">
             -
             <a
@@ -149,132 +195,136 @@
           <!-- <span v-if="version.variant">({{version.variant}})</span> -->
           &#x2022;
         </span>
-        <a href="https://liyasthomas.web.app" target="_blank" rel="noopener">🦄</a> &#x2022;
+        <a href="https://liyasthomas.web.app" target="_blank" rel="noopener"
-        <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener">Subscribe</a>
+          >🦄</a
+        >
+        &#x2022;
+        <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener"
+          >Subscribe</a
+        >
       </p>
     </footer>
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss"></style>
-</style>
 
 <script>
-  import intializePwa from "../assets/js/pwa";
+import intializePwa from "../assets/js/pwa";
-  import logo from "../components/logo";
+import logo from "../components/logo";
-  import * as version from "../.postwoman/version.json";
+import * as version from "../.postwoman/version.json";
 
-  export default {
+export default {
-    components: {
+  components: {
-      logo
+    logo
-    },
+  },
 
-    methods: {
+  methods: {
-      linkActive(path) {
+    linkActive(path) {
-        return {
-          "nuxt-link-exact-active": this.$route.path === path,
-          "nuxt-link-active": this.$route.path === path
-        };
-      }
-    },
-
-    data() {
       return {
-        // Once the PWA code is initialized, this holds a method
+        "nuxt-link-exact-active": this.$route.path === path,
-        // that can be called to show the user the installation
+        "nuxt-link-active": this.$route.path === path
-        // prompt.
-        showInstallPrompt: null,
-        logoStyle() {
-          return (
-            this.$store.state.postwoman.settings.THEME_CLASS || ""
-          ).includes("light")
-            ? " filter: invert(100%); -webkit-filter: invert(100%);"
-            : "";
-        },
-
-        version: {}
       };
-    },
-
-    beforeMount() {
-      // Set version data
-      this.version = version.default;
-
-      // Load theme settings
-      (() => {
-        // Apply theme from settings.
-        document.documentElement.className =
-          this.$store.state.postwoman.settings.THEME_CLASS || "";
-        // Load theme color data from settings, or use default color.
-        let color = this.$store.state.postwoman.settings.THEME_COLOR || "#50fa7b";
-        let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
-        if (vibrant == null) vibrant = true;
-        document.documentElement.style.setProperty("--ac-color", color);
-        document.documentElement.style.setProperty(
-          "--act-color",
-          vibrant ? "rgb(37, 38, 40)" : "#ffffff"
-        );
-      })();
-    },
-
-    mounted() {
-      if (process.client) {
-        document.body.classList.add("afterLoad");
-      }
-
-      document
-        .querySelector("meta[name=theme-color]")
-        .setAttribute(
-          "content",
-          this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628"
-        );
-
-      // Initializes the PWA code - checks if the app is installed,
-      // etc.
-      (async () => {
-        this.showInstallPrompt = await intializePwa();
-        let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes";
-        if (!cookiesAllowed) {
-          this.$toast.show("We use cookies", {
-            icon: "info",
-            duration: 5000,
-            theme: "toasted-primary",
-            action: [
-              {
-                text: "Dismiss",
-                onClick: (e, toastObject) => {
-                  localStorage.setItem("cookiesAllowed", "yes");
-                  toastObject.goAway(0);
-                }
-              }
-            ]
-          });
-        }
-      })();
-
-      window.addEventListener("scroll", event => {
-        let mainNavLinks = document.querySelectorAll("nav ul li a");
-        let fromTop = window.scrollY;
-        mainNavLinks.forEach(link => {
-          let section = document.querySelector(link.hash);
-
-          if (
-            section &&
-            section.offsetTop <= fromTop &&
-            section.offsetTop + section.offsetHeight > fromTop
-          ) {
-            link.classList.add("current");
-          } else {
-            link.classList.remove("current");
-          }
-        });
-      });
-    },
-
-    watch: {
-      $route() {
-        this.$toast.clear();
-      }
     }
-  };
+  },
+
+  data() {
+    return {
+      // Once the PWA code is initialized, this holds a method
+      // that can be called to show the user the installation
+      // prompt.
+      showInstallPrompt: null,
+      logoStyle() {
+        return (
+          this.$store.state.postwoman.settings.THEME_CLASS || ""
+        ).includes("light")
+          ? " filter: invert(100%); -webkit-filter: invert(100%);"
+          : "";
+      },
+
+      version: {}
+    };
+  },
+
+  beforeMount() {
+    // Set version data
+    this.version = version.default;
+
+    // Load theme settings
+    (() => {
+      // Apply theme from settings.
+      document.documentElement.className =
+        this.$store.state.postwoman.settings.THEME_CLASS || "";
+      // Load theme color data from settings, or use default color.
+      let color = this.$store.state.postwoman.settings.THEME_COLOR || "#50fa7b";
+      let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
+      if (vibrant == null) vibrant = true;
+      document.documentElement.style.setProperty("--ac-color", color);
+      document.documentElement.style.setProperty(
+        "--act-color",
+        vibrant ? "rgb(37, 38, 40)" : "#ffffff"
+      );
+    })();
+  },
+
+  mounted() {
+    if (process.client) {
+      document.body.classList.add("afterLoad");
+    }
+
+    document
+      .querySelector("meta[name=theme-color]")
+      .setAttribute(
+        "content",
+        this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628"
+      );
+
+    // Initializes the PWA code - checks if the app is installed,
+    // etc.
+    (async () => {
+      this.showInstallPrompt = await intializePwa();
+      let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes";
+      if (!cookiesAllowed) {
+        this.$toast.show("We use cookies", {
+          icon: "info",
+          duration: 5000,
+          theme: "toasted-primary",
+          action: [
+            {
+              text: "Dismiss",
+              onClick: (e, toastObject) => {
+                localStorage.setItem("cookiesAllowed", "yes");
+                toastObject.goAway(0);
+              }
+            }
+          ]
+        });
+      }
+    })();
+
+    window.addEventListener("scroll", event => {
+      let mainNavLinks = document.querySelectorAll("nav ul li a");
+      let fromTop = window.scrollY;
+      mainNavLinks.forEach(link => {
+        let section = document.querySelector(link.hash);
+
+        if (
+          section &&
+          section.offsetTop <= fromTop &&
+          section.offsetTop + section.offsetHeight > fromTop
+        ) {
+          link.classList.add("current");
+        } else {
+          link.classList.remove("current");
+        }
+      });
+    });
+  },
+
+  watch: {
+    $route() {
+      this.$toast.clear();
+    }
+  }
+};
 </script>

pages/index.vue

@@ -24,7 +24,12 @@
       <div slot="body">
         <ul>
           <li>
-            <textarea id="import-text" autofocus rows="8" placeholder="Enter cURL"></textarea>
+            <textarea
+              id="import-text"
+              autofocus
+              rows="8"
+              placeholder="Enter cURL"
+            ></textarea>
           </li>
         </ul>
       </div>
@@ -40,7 +45,12 @@
       </div>
     </pw-modal>
 
-    <pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request" ref="preRequest">
+    <pw-section
+      v-if="showPreRequestScript"
+      class="orange"
+      label="Pre-Request"
+      ref="preRequest"
+    >
       <ul>
         <li>
           <div class="flex-wrap">
@@ -107,11 +117,22 @@
         </li>
         <li>
           <label for="label">Label</label>
-          <input id="label" name="label" type="text" v-model="label" placeholder="(optional)" />
+          <input
+            id="label"
+            name="label"
+            type="text"
+            v-model="label"
+            placeholder="(optional)"
+          />
         </li>
         <li>
           <label class="hide-on-small-screen" for="send">&nbsp;</label>
-          <button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
+          <button
+            :disabled="!isValidURL"
+            @click="sendRequest"
+            id="send"
+            ref="sendButton"
+          >
             Send
             <span id="hidden-message">Again</span>
             <span>
@@ -132,16 +153,16 @@
               :source="validContentTypes"
               :spellcheck="false"
               v-model="contentType"
-            >Content Type</autocomplete>
+              >Content Type</autocomplete
+            >
           </li>
         </ul>
         <ul>
           <li>
             <span>
-              <pw-toggle
+              <pw-toggle :on="rawInput" @change="rawInput = $event"
-                :on="rawInput"
+                >Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
-                @change="rawInput = $event"
+              >
-              >Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle>
             </span>
           </li>
         </ul>
@@ -162,27 +183,41 @@
           <ul v-for="(param, index) in bodyParams" :key="index">
             <li>
               <input
-                :placeholder="'key '+(index+1)"
+                :placeholder="'key ' + (index + 1)"
-                :name="'bparam'+index"
+                :name="'bparam' + index"
                 :value="param.key"
-                @change="$store.commit('setKeyBodyParams', { index, value: $event.target.value })"
+                @change="
+                  $store.commit('setKeyBodyParams', {
+                    index,
+                    value: $event.target.value
+                  })
+                "
                 @keyup.prevent="setRouteQueryState"
                 autofocus
               />
             </li>
             <li>
               <input
-                :placeholder="'value '+(index+1)"
+                :placeholder="'value ' + (index + 1)"
-                :id="'bvalue'+index"
+                :id="'bvalue' + index"
-                :name="'bvalue'+index"
+                :name="'bvalue' + index"
                 :value="param.value"
-                @change="$store.commit('setValueBodyParams', { index, value: $event.target.value })"
+                @change="
+                  $store.commit('setValueBodyParams', {
+                    index,
+                    value: $event.target.value
+                  })
+                "
                 @keyup.prevent="setRouteQueryState"
               />
             </li>
             <div>
               <li>
-                <button class="icon" @click="removeRequestBodyParam(index)" id="delParam">
+                <button
+                  class="icon"
+                  @click="removeRequestBodyParam(index)"
+                  id="delParam"
+                >
                   <i class="material-icons">delete</i>
                 </button>
               </li>
@@ -190,7 +225,11 @@
           </ul>
           <ul>
             <li>
-              <button class="icon" @click="addRequestBodyParam" name="addrequest">
+              <button
+                class="icon"
+                @click="addRequestBodyParam"
+                name="addrequest"
+              >
                 <i class="material-icons">add</i>
                 <span>Add New</span>
               </button>
@@ -227,7 +266,7 @@
             id="code"
             v-on:click="isHidden = !isHidden"
             :disabled="!isValidURL"
-            v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code'}"
+            v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
           >
             <i class="material-icons" v-if="isHidden">flash_on</i>
             <i class="material-icons" v-else>flash_off</i>
@@ -235,19 +274,22 @@
           <button
             :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
             id="preRequestScriptButton"
-            v-tooltip.bottom="{ content: !showPreRequestScript ? 'Show Pre-Request Script' : 'Hide Pre-Request Script'}"
+            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>
+              >code</i
-            <i
+            >
-              class="material-icons"
+            <i class="material-icons" :class="showPreRequestScript" v-else
-              :class="showPreRequestScript"
+              >close</i
-              v-else
+            >
-            >close</i>
           </button>
         </div>
         <div style="text-align: center;">
@@ -272,7 +314,11 @@
           >
             <i class="material-icons">save</i>
           </button>
-          <button class="icon" @click="clearContent('', $event)" v-tooltip.bottom="'Clear All'">
+          <button
+            class="icon"
+            @click="clearContent('', $event)"
+            v-tooltip.bottom="'Clear All'"
+          >
             <i class="material-icons">clear_all</i>
           </button>
         </div>
@@ -349,7 +395,11 @@
           </ul>
           <ul v-if="auth === 'Basic'">
             <li>
-              <input placeholder="User" name="http_basic_user" v-model="httpUser" />
+              <input
+                placeholder="User"
+                name="http_basic_user"
+                v-model="httpUser"
+              />
             </li>
             <li>
               <input
@@ -367,19 +417,31 @@
                   ref="switchVisibility"
                   @click="switchVisibility"
                 >
-                  <i class="material-icons" v-if="passwordFieldType === 'text'">visibility</i>
+                  <i class="material-icons" v-if="passwordFieldType === 'text'"
-                  <i class="material-icons" v-if="passwordFieldType !== 'text'">visibility_off</i>
+                    >visibility</i
+                  >
+                  <i class="material-icons" v-if="passwordFieldType !== 'text'"
+                    >visibility_off</i
+                  >
                 </button>
               </li>
             </div>
           </ul>
           <ul v-else-if="auth === 'Bearer Token'">
             <li>
-              <input placeholder="Token" name="bearer_token" v-model="bearerToken" />
+              <input
+                placeholder="Token"
+                name="bearer_token"
+                v-model="bearerToken"
+              />
             </li>
           </ul>
           <div class="flex-wrap">
-            <pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">Include in URL</pw-toggle>
+            <pw-toggle
+              :on="!urlExcludes.auth"
+              @change="setExclude('auth', !$event)"
+              >Include in URL</pw-toggle
+            >
           </div>
         </pw-section>
       </div>
@@ -416,26 +478,40 @@
           <ul v-for="(header, index) in headers" :key="index">
             <li>
               <input
-                :placeholder="'header '+(index+1)"
+                :placeholder="'header ' + (index + 1)"
-                :name="'header'+index"
+                :name="'header' + index"
                 :value="header.key"
-                @change="$store.commit('setKeyHeader', { index, value: $event.target.value })"
+                @change="
+                  $store.commit('setKeyHeader', {
+                    index,
+                    value: $event.target.value
+                  })
+                "
                 @keyup.prevent="setRouteQueryState"
                 autofocus
               />
             </li>
             <li>
               <input
-                :placeholder="'value '+(index+1)"
+                :placeholder="'value ' + (index + 1)"
-                :name="'value'+index"
+                :name="'value' + index"
                 :value="header.value"
-                @change="$store.commit('setValueHeader', { index, value: $event.target.value })"
+                @change="
+                  $store.commit('setValueHeader', {
+                    index,
+                    value: $event.target.value
+                  })
+                "
                 @keyup.prevent="setRouteQueryState"
               />
             </li>
             <div>
               <li>
-                <button class="icon" @click="removeRequestHeader(index)" id="header">
+                <button
+                  class="icon"
+                  @click="removeRequestHeader(index)"
+                  id="header"
+                >
                   <i class="material-icons">delete</i>
                 </button>
               </li>
@@ -484,24 +560,38 @@
           <ul v-for="(param, index) in params" :key="index">
             <li>
               <input
-                :placeholder="'parameter '+(index+1)"
+                :placeholder="'parameter ' + (index + 1)"
-                :name="'param'+index"
+                :name="'param' + index"
                 :value="param.key"
-                @change="$store.commit('setKeyParams', { index, value: $event.target.value })"
+                @change="
+                  $store.commit('setKeyParams', {
+                    index,
+                    value: $event.target.value
+                  })
+                "
                 autofocus
               />
             </li>
             <li>
               <input
-                :placeholder="'value '+(index+1)"
+                :placeholder="'value ' + (index + 1)"
-                :name="'value'+index"
+                :name="'value' + index"
                 :value="param.value"
-                @change="$store.commit('setValueParams', { index, value: $event.target.value })"
+                @change="
+                  $store.commit('setValueParams', {
+                    index,
+                    value: $event.target.value
+                  })
+                "
               />
             </li>
             <div>
               <li>
-                <button class="icon" @click="removeRequestParam(index)" id="param">
+                <button
+                  class="icon"
+                  @click="removeRequestParam(index)"
+                  id="param"
+                >
                   <i class="material-icons">delete</i>
                 </button>
               </li>
@@ -538,7 +628,7 @@
       </ul>
       <ul v-for="(value, key) in response.headers" :key="key">
         <li>
-          <label :for="key">{{key}}</label>
+          <label :for="key">{{ key }}</label>
           <input :id="key" :value="value" :name="key" readonly />
         </li>
       </ul>
@@ -579,20 +669,25 @@
                 readOnly: true,
                 showPrintMargin: false,
                 useWorker: false
-                }"
+              }"
             />
             <iframe
-              :class="{hidden: !previewEnabled}"
+              :class="{ hidden: !previewEnabled }"
               class="covers-response"
               ref="previewFrame"
               src="about:blank"
             ></iframe>
           </div>
-          <div class="align-right" v-if="response.body && responseType === 'text/html'">
+          <div
+            class="align-right"
+            v-if="response.body && responseType === 'text/html'"
+          >
             <button class="icon" @click.prevent="togglePreview">
               <i class="material-icons" v-if="!previewEnabled">visibility</i>
               <i class="material-icons" v-else>visibility_off</i>
-              <span>{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</span>
+              <span>{{
+                previewEnabled ? "Hide Preview" : "Preview HTML"
+              }}</span>
             </button>
           </div>
         </li>
@@ -622,7 +717,7 @@ import modal from "../components/modal";
 import collections from "../components/collections";
 import saveRequestAs from "../components/collections/saveRequestAs";
 import parseCurlCommand from "../assets/js/curlparser.js";
-import AceEditor from '../components/ace-editor';
+import AceEditor from "../components/ace-editor";
 import getEnvironmentVariablesFromScript from "../functions/preRequest";
 import parseTemplateString from "../functions/templating";
 
@@ -732,8 +827,8 @@ export default {
       editRequest: {},
 
       urlExcludes: {},
-      responseBodyText: '',
+      responseBodyText: "",
-      responseBodyType: 'text'
+      responseBodyType: "text"
     };
   },
   watch: {
@@ -759,19 +854,20 @@ export default {
         this.response.body === "Loading..."
       ) {
         this.responseBodyText = this.response.body;
-        this.responseBodyType = 'text';
+        this.responseBodyType = "text";
       } else {
-        if(this.responseType === "application/json" ||
+        if (
-         this.responseType === "application/hal+json"
+          this.responseType === "application/json" ||
+          this.responseType === "application/hal+json"
         ) {
-          this.responseBodyText = JSON.stringify(this.response.body, null, 2)
+          this.responseBodyText = JSON.stringify(this.response.body, null, 2);
-          this.responseBodyType = 'json'
+          this.responseBodyType = "json";
         } else if (this.responseType === "text/html") {
           this.responseBodyText = this.response.body;
-          this.responseBodyType = 'html'
+          this.responseBodyType = "html";
         } else {
           this.responseBodyText = this.response.body;
-          this.responseBodyType = 'text';
+          this.responseBodyType = "text";
         }
       }
     },
@@ -1183,7 +1279,14 @@ export default {
         behavior: "smooth"
       });
     },
-    handleUseHistory({ label, method, url, path, usesScripts, preRequestScript }) {
+    handleUseHistory({
+      label,
+      method,
+      url,
+      path,
+      usesScripts,
+      preRequestScript
+    }) {
       this.label = label;
       this.method = method;
       this.url = url;

pages/settings.vue

@@ -46,7 +46,11 @@
             <pw-toggle
               :on="settings.FRAME_COLORS_ENABLED"
               @change="toggleSetting('FRAME_COLORS_ENABLED')"
-            >Multi-color {{ settings.FRAME_COLORS_ENABLED ? "Enabled" : "Disabled" }}</pw-toggle>
+              >Multi-color
+              {{
+                settings.FRAME_COLORS_ENABLED ? "Enabled" : "Disabled"
+              }}</pw-toggle
+            >
           </span>
         </li>
       </ul>
@@ -62,9 +66,15 @@
               <pw-toggle
                 :on="settings.PROXY_ENABLED"
                 @change="toggleSetting('PROXY_ENABLED')"
-              >Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle>
+                >Proxy
+                {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle
+              >
             </span>
-            <a href="https://github.com/liyasthomas/postwoman/wiki/Proxy" target="_blank" rel="noopener">
+            <a
+              href="https://github.com/liyasthomas/postwoman/wiki/Proxy"
+              target="_blank"
+              rel="noopener"
+            >
               <button class="icon" v-tooltip="'Wiki'">
                 <i class="material-icons">help</i>
               </button>
@@ -77,7 +87,10 @@
           <p>
             Postwoman's Proxy is hosted by ApolloTV.
             <br />
-            Read the <a href="https://apollotv.xyz/legal" target="_blank" rel="noopener">ApolloTV privacy policy</a>.
+            Read the
+            <a href="https://apollotv.xyz/legal" target="_blank" rel="noopener"
+              >ApolloTV privacy policy</a
+            >.
           </p>
         </li>
       </ul>
@@ -142,14 +155,16 @@ export default {
           color: "#000000",
           name: "Just Black",
           class: "black",
-          aceEditor: "tomorrow_night_blue"
+          aceEditor: "vibrant_ink"
         },
         {
           color: "var(--bg-color)",
           name: "Auto (system)",
           vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
           class: "auto",
-          aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches ? 'xcode' : 'dracula'
+          aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
+            ? "xcode"
+            : "dracula"
         }
       ],
       // You can define a new color here! It will simply store the color value.
@@ -224,7 +239,7 @@ export default {
   },
 
   methods: {
-    applyTheme({class:name, color, aceEditor}) {
+    applyTheme({ class: name, color, aceEditor }) {
       this.applySetting("THEME_CLASS", name);
       this.applySetting("THEME_ACE_EDITOR", aceEditor);
       document

pages/websocket.vue

@@ -14,7 +14,12 @@
         </li>
         <li>
           <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-          <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+          <button
+            :disabled="!urlValid"
+            id="connect"
+            name="connect"
+            @click="toggleConnection"
+          >
             {{ toggleConnectionVerb }}
             <span>
               <i class="material-icons" v-if="!connectionState">sync</i>
@@ -27,7 +32,12 @@
 
     <br />
 
-    <pw-section class="purple" label="Communication" id="response" ref="response">
+    <pw-section
+      class="purple"
+      label="Communication"
+      id="response"
+      ref="response"
+    >
       <ul>
         <li>
           <label for="log">Log</label>
@@ -37,7 +47,9 @@
                 v-for="(logEntry, index) in communication.log"
                 :style="{ color: logEntry.color }"
                 :key="index"
-              >@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
+                >@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }}
+                {{ logEntry.payload }}</span
+              >
             </span>
             <span v-else>(waiting for connection)</span>
           </div>
@@ -57,7 +69,12 @@
         </li>
         <li>
           <label for="send" class="hide-on-small-screen">&nbsp;</label>
-          <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
+          <button
+            id="send"
+            name="send"
+            :disabled="!connectionState"
+            @click="sendMessage"
+          >
             Send
             <span>
               <i class="material-icons">send</i>