From e0dc8ea46d78a1d2d893c3e4b765e91ae808317b Mon Sep 17 00:00:00 2001
From: izerozlu <izerozlu@gmail.com>
Date: Fri, 30 Aug 2019 09:52:10 +0300
Subject: [PATCH 1/4] History component added.

---
 components/history.vue |  84 +++++++++++++++++++++++++++++++++
 pages/index.vue        | 102 +++++++----------------------------------
 2 files changed, 101 insertions(+), 85 deletions(-)
 create mode 100644 components/history.vue

diff --git a/components/history.vue b/components/history.vue
new file mode 100644
index 000000000..999d4a453
--- /dev/null
+++ b/components/history.vue
@@ -0,0 +1,84 @@
+<template>
+  <pw-section class="gray" label="History">
+    <ul>
+      <li>
+        <button :class="{ disabled: history.length === 0 }" v-on:click="clearHistory">Clear History</button>
+      </li>
+    </ul>
+    <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">
+      <ul v-for="entry in history" :key="entry.millis" class="entry">
+        <li>
+          <label :for="'time#' + entry.millis">Time</label>
+          <input :id="'time#' + entry.millis" type="text" readonly :value="entry.time" :title="entry.date">
+        </li>
+        <li class="method-list-item">
+          <label :for="'time#' + entry.millis">Method</label>
+          <input :id="'method#' + entry.millis" type="text" readonly
+                 :value="entry.method"
+                 :class="findEntryStatus(entry).className"
+                 :style="{'--status-code': entry.status}">
+          <span class="entry-status-code">{{entry.status}}</span>
+        </li>
+        <li>
+          <label :for="'url#' + entry.millis">URL</label>
+          <input :id="'url#' + entry.millis" type="text" readonly :value="entry.url">
+        </li>
+        <li>
+          <label :for="'path#' + entry.millis">Path</label>
+          <input :id="'path#' + entry.millis" type="text" readonly :value="entry.path">
+        </li>
+        <li>
+          <label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
+          <button :id="'delete-button#' + entry.millis" @click="deleteHistory(entry)">Delete</button>
+        </li>
+        <li>
+          <label :for="'use-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
+          <button :id="'use-button#' + entry.millis" @click="useHistory(entry)">Use</button>
+        </li>
+      </ul>
+    </virtual-list>
+  </pw-section>
+</template>
+
+<script>
+		import VirtualList from 'vue-virtual-scroll-list'
+		import section from "./section";
+		import {findStatusGroup} from "../pages/index";
+
+		const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
+
+		export default {
+				components: {'pw-section': section, VirtualList},
+				data() {
+						const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
+						console.log(localStorageHistory);
+						return {
+								history: localStorageHistory || [],
+						}
+				},
+				methods: {
+						clearHistory() {
+								this.history = [];
+								updateOnLocalStorage('history', this.history);
+						},
+						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);
+								updateOnLocalStorage('history', this.history);
+						},
+						addEntry(entry) {
+								this.history.push(entry);
+						}
+				}
+		}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index dbef71fea..f7537fd4f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -187,49 +187,15 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="gray" label="History">
-      <ul>
-        <li>
-          <button :class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
-        </li>
-      </ul>
-      <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">
-        <ul v-for="entry in history" :key="entry.millis" class="entry">
-          <li>
-            <label for="time">Time</label>
-            <input name="time" type="text" readonly :value="entry.time" :title="entry.date">
-          </li>
-          <li class="method-list-item">
-            <label for="method">Method</label>
-            <input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
-            <span class="entry-status-code">{{entry.status}}</span>
-          </li>
-          <li>
-            <label for="url">URL</label>
-            <input name="url" type="text" readonly :value="entry.url">
-          </li>
-          <li>
-            <label for="path">Path</label>
-            <input name="path" type="text" readonly :value="entry.path">
-          </li>
-          <li>
-            <label for="delete" class="hide-on-small-screen">&nbsp;</label>
-            <button name="delete" @click="deleteHistory(entry)">Delete</button>
-          </li>
-          <li>
-            <label for="use" class="hide-on-small-screen">&nbsp;</label>
-            <button name="use" @click="useHistory(entry)">Use</button>
-          </li>
-        </ul>
-      </virtual-list>
-    </pw-section>
+    <history @useHistory="handleUseHistory" ref="historyComponent"/>
   </div>
 </template>
-<script>
-  import VirtualList from 'vue-virtual-scroll-list'
-  import section from "../components/section";
 
-  const statusCategories = [{
+<script>
+		import history from "../components/history";
+		import section from "../components/section";
+
+		const statusCategories = [{
       name: 'informational',
       statusCodeRegex: new RegExp(/[1][0-9]+/),
       className: 'info-response'
@@ -261,7 +227,6 @@
       className: 'missing-data-response'
     }
   ];
-
   const parseHeaders = xhr => {
     const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
     const headerMap = {};
@@ -274,12 +239,12 @@
     return headerMap
 
   };
-  const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
+  export const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
 
   export default {
     components: {
-      'pw-section': section,
-      VirtualList
+		    'pw-section': section,
+		    history
     },
     data() {
       return {
@@ -301,7 +266,6 @@
           headers: '',
           body: ''
         },
-        history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : [],
         previewEnabled: false
       }
     },
@@ -309,9 +273,6 @@
       statusCategory() {
         return findStatusGroup(this.response.status);
       },
-      noHistoryToClear() {
-        return this.history.length === 0;
-      },
       isValidURL() {
         const protocol = '^(https?:\\/\\/)?';
         const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");
@@ -370,33 +331,12 @@
       }
     },
     methods: {
-      findEntryStatus(entry) {
-        let foundStatusGroup = findStatusGroup(entry.status);
-        return foundStatusGroup || {
-          className: ''
-        };
+      handleUseHistory({method,url,path}) {
+        this.method = method;
+        this.url = url;
+        this.path = path;
+        this.$refs.request.$el.scrollIntoView({behavior: 'smooth'});
       },
-      deleteHistory(entry) {
-        this.history.splice(this.history.indexOf(entry), 1)
-        window.localStorage.setItem('history', JSON.stringify(this.history))
-      },
-      clearHistory() {
-        this.history = []
-        window.localStorage.setItem('history', JSON.stringify(this.history))
-      },
-      useHistory({
-        method,
-        url,
-        path
-      }) {
-        this.method = method
-        this.url = url
-        this.path = path
-        this.$refs.request.$el.scrollIntoView({
-          behavior: 'smooth'
-        })
-      },
-
       async sendRequest() {
         if (!this.isValidURL) {
           alert('Please check the formatting of the URL.');
@@ -467,17 +407,9 @@
               const date = new Date().toLocaleDateString();
               const time = new Date().toLocaleTimeString();
 
-              this.history.push({
-                  status,
-                  date,
-                  time,
-
-                  method: this.method,
-                  url: this.url,
-                  path: this.path
-              });
-
-              window.localStorage.setItem('history', JSON.stringify(this.history));
+              // Addition of an entry to the history component.
+		          const entry = {status, date, time, method: this.method, url: this.url, path: this.path};
+		          this.$refs.historyComponent.addEntry(entry);
           })();
         } catch(error) {
             if(error.response){

From a3f8abba1a870ff63673d061dcaf3035486b9523 Mon Sep 17 00:00:00 2001
From: izerozlu <izerozlu@gmail.com>
Date: Fri, 30 Aug 2019 09:56:52 +0300
Subject: [PATCH 2/4] Bug : not adding to history and a failed request, fixed.

---
 components/history.vue |  1 +
 pages/index.vue        | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/history.vue b/components/history.vue
index 999d4a453..ab802bebb 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -74,6 +74,7 @@
 						},
 						addEntry(entry) {
 								this.history.push(entry);
+								updateOnLocalStorage('history', this.history);
 						}
 				}
 		}
diff --git a/pages/index.vue b/pages/index.vue
index f7537fd4f..a17885dfe 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -416,7 +416,18 @@
                 this.response.headers = error.response.headers;
                 this.response.status = error.response.status;
                 this.response.body = error.response.data;
-                return;
+
+		            // Addition of an entry to the history component.
+		            const entry = {
+				            status: this.response.status,
+				            date: new Date().toLocaleDateString(),
+				            time: new Date().toLocaleTimeString(),
+				            method: this.method,
+				            url: this.url,
+				            path: this.path
+		            };
+		            this.$refs.historyComponent.addEntry(entry);
+		            return;
             }
 
             this.response.status = error.message;

From 8c8d4a129e43ab728df657df64d98071134bcd17 Mon Sep 17 00:00:00 2001
From: izerozlu <izerozlu@gmail.com>
Date: Fri, 30 Aug 2019 10:57:46 +0300
Subject: [PATCH 3/4] History filtering added, added confirm mechanism for
 clearing history.

---
 components/history.vue | 108 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 100 insertions(+), 8 deletions(-)

diff --git a/components/history.vue b/components/history.vue
index ab802bebb..3db297a11 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -1,12 +1,39 @@
 <template>
   <pw-section class="gray" label="History">
     <ul>
-      <li>
-        <button :class="{ disabled: history.length === 0 }" v-on:click="clearHistory">Clear History</button>
+      <li id="filter-history">
+        <label for="filter-history-input">Filter History</label>
+        <input id="filter-history-input" type="text"
+               :disabled="history.length === 0 || isClearingHistory"
+               v-model="filterText">
       </li>
     </ul>
-    <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">
-      <ul v-for="entry in history" :key="entry.millis" class="entry">
+    <ul>
+      <li id="clear-history">
+        <button
+          id="clear-history-button"
+          :class="{ disabled: history.length === 0 }"
+          @click="enableHistoryClearing"
+          v-if="!isClearingHistory">
+          Clear History
+        </button>
+        <template v-else>
+          <label for="clear-history-button">Are you sure?</label>
+          <button
+            id="confirm-clear-history-button"
+            @click="clearHistory">
+            Yes
+          </button>
+          <button
+            id="reject-clear-history-button"
+            @click="disableHistoryClearing">
+            No
+          </button>
+        </template>
+      </li>
+    </ul>
+    <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, filteredHistory.length)">
+      <ul v-for="entry in filteredHistory" :key="entry.millis" class="entry">
         <li>
           <label :for="'time#' + entry.millis">Time</label>
           <input :id="'time#' + entry.millis" type="text" readonly :value="entry.time" :title="entry.date">
@@ -29,11 +56,19 @@
         </li>
         <li>
           <label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
-          <button :id="'delete-button#' + entry.millis" @click="deleteHistory(entry)">Delete</button>
+          <button :id="'delete-button#' + entry.millis"
+                  :disabled="isClearingHistory"
+                  @click="deleteHistory(entry)">
+            Delete
+          </button>
         </li>
         <li>
           <label :for="'use-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
-          <button :id="'use-button#' + entry.millis" @click="useHistory(entry)">Use</button>
+          <button :id="'use-button#' + entry.millis"
+                  :disabled="isClearingHistory"
+                  @click="useHistory(entry)">
+            Use
+          </button>
         </li>
       </ul>
     </virtual-list>
@@ -51,14 +86,30 @@
 				components: {'pw-section': section, VirtualList},
 				data() {
 						const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
-						console.log(localStorageHistory);
 						return {
 								history: localStorageHistory || [],
+								filterText: '',
+								showFilter: false,
+								isClearingHistory: false
+						}
+				},
+				computed: {
+						filteredHistory() {
+								return this.history.filter(entry => {
+										const filterText = this.filterText.toLowerCase();
+										return Object.keys(entry).some(key => {
+												let value = entry[key];
+												value = typeof value !== 'string' ? value.toString() : value;
+												return value.toLowerCase().includes(filterText);
+										});
+								});
 						}
 				},
 				methods: {
 						clearHistory() {
 								this.history = [];
+								this.filterText = '';
+								this.disableHistoryClearing();
 								updateOnLocalStorage('history', this.history);
 						},
 						useHistory(entry) {
@@ -70,16 +121,57 @@
 						},
 						deleteHistory(entry) {
 								this.history.splice(this.history.indexOf(entry), 1);
+								if (this.history.length === 0) {
+										this.filterText = '';
+								}
 								updateOnLocalStorage('history', this.history);
 						},
 						addEntry(entry) {
 								this.history.push(entry);
 								updateOnLocalStorage('history', this.history);
+						},
+						enableHistoryClearing() {
+								this.isClearingHistory = true;
+						},
+						disableHistoryClearing() {
+								this.isClearingHistory = false;
 						}
 				}
 		}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  #filter-history {
+    display: flex;
+    flex-direction: row;
 
+    label {
+      flex-basis: 20%;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  #clear-history {
+    flex-direction: row;
+    justify-content: flex-end;
+
+    #clear-history-button {
+      flex: 1;
+    }
+
+    label {
+      flex: 1;
+    }
+
+    #confirm-clear-history-button, #reject-clear-history-button {
+      flex-basis: 10%;
+    }
+  }
+
+  .virtual-list {
+    [readonly] {
+      cursor: default;
+    }
+  }
 </style>

From 542b912090af799f38b92c8a59bb41bca1553a55 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 30 Aug 2019 15:37:51 +0530
Subject: [PATCH 4/4] :zap: Added 'Not found' prompt for empty filtered history

---
 components/history.vue | 227 ++++++++++++++++++-----------------------
 components/toggle.vue  |  35 ++++---
 pages/index.vue        | 121 ++++++++++++----------
 3 files changed, 185 insertions(+), 198 deletions(-)

diff --git a/components/history.vue b/components/history.vue
index 3db297a11..50d5f8a0b 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -2,34 +2,8 @@
   <pw-section class="gray" label="History">
     <ul>
       <li id="filter-history">
-        <label for="filter-history-input">Filter History</label>
-        <input id="filter-history-input" type="text"
-               :disabled="history.length === 0 || isClearingHistory"
-               v-model="filterText">
-      </li>
-    </ul>
-    <ul>
-      <li id="clear-history">
-        <button
-          id="clear-history-button"
-          :class="{ disabled: history.length === 0 }"
-          @click="enableHistoryClearing"
-          v-if="!isClearingHistory">
-          Clear History
-        </button>
-        <template v-else>
-          <label for="clear-history-button">Are you sure?</label>
-          <button
-            id="confirm-clear-history-button"
-            @click="clearHistory">
-            Yes
-          </button>
-          <button
-            id="reject-clear-history-button"
-            @click="disableHistoryClearing">
-            No
-          </button>
-        </template>
+        <label for="filter-history-input">Search History</label>
+        <input id="filter-history-input" type="text" :disabled="history.length === 0 || isClearingHistory" v-model="filterText">
       </li>
     </ul>
     <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, filteredHistory.length)">
@@ -40,10 +14,7 @@
         </li>
         <li class="method-list-item">
           <label :for="'time#' + entry.millis">Method</label>
-          <input :id="'method#' + entry.millis" type="text" readonly
-                 :value="entry.method"
-                 :class="findEntryStatus(entry).className"
-                 :style="{'--status-code': entry.status}">
+          <input :id="'method#' + entry.millis" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
           <span class="entry-status-code">{{entry.status}}</span>
         </li>
         <li>
@@ -56,122 +27,120 @@
         </li>
         <li>
           <label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
-          <button :id="'delete-button#' + entry.millis"
-                  :disabled="isClearingHistory"
-                  @click="deleteHistory(entry)">
+          <button :id="'delete-button#' + entry.millis" :disabled="isClearingHistory" @click="deleteHistory(entry)">
             Delete
           </button>
         </li>
         <li>
           <label :for="'use-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
-          <button :id="'use-button#' + entry.millis"
-                  :disabled="isClearingHistory"
-                  @click="useHistory(entry)">
+          <button :id="'use-button#' + entry.millis" :disabled="isClearingHistory" @click="useHistory(entry)">
             Use
           </button>
         </li>
       </ul>
     </virtual-list>
+    <ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
+      <li>
+        <label>Nothing found for "{{filterText}}"</label>
+      </li>
+    </ul>
+    <ul>
+      <li v-if="!isClearingHistory">
+        <button id="clear-history-button" :class="{ disabled: history.length === 0 }" @click="enableHistoryClearing">
+          Clear History
+        </button>
+      </li>
+      <li v-else>
+        <div class="flex-wrap">
+          <label for="clear-history-button">Are you sure?</label>
+          <div>
+            <button id="confirm-clear-history-button" @click="clearHistory">
+              Yes
+            </button>
+            <button id="reject-clear-history-button" @click="disableHistoryClearing">
+              No
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
   </pw-section>
 </template>
-
 <script>
-		import VirtualList from 'vue-virtual-scroll-list'
-		import section from "./section";
-		import {findStatusGroup} from "../pages/index";
+  import VirtualList from 'vue-virtual-scroll-list'
+  import section from "./section";
+  import {
+    findStatusGroup
+  } from "../pages/index";
+  const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
+  export default {
+    components: {
+      'pw-section': section,
+      VirtualList
+    },
+    data() {
+      const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
+      return {
+        history: localStorageHistory || [],
+        filterText: '',
+        showFilter: false,
+        isClearingHistory: false
+      }
+    },
+    computed: {
+      filteredHistory() {
+        return this.history.filter(entry => {
+          const filterText = this.filterText.toLowerCase();
+          return Object.keys(entry).some(key => {
+            let value = entry[key];
+            value = typeof value !== 'string' ? value.toString() : value;
+            return value.toLowerCase().includes(filterText);
+          });
+        });
+      }
+    },
+    methods: {
+      clearHistory() {
+        this.history = [];
+        this.filterText = '';
+        this.disableHistoryClearing();
+        updateOnLocalStorage('history', this.history);
+      },
+      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);
+      },
+      addEntry(entry) {
+        this.history.push(entry);
+        updateOnLocalStorage('history', this.history);
+      },
+      enableHistoryClearing() {
+        this.isClearingHistory = true;
+      },
+      disableHistoryClearing() {
+        this.isClearingHistory = false;
+      }
+    }
+  }
 
-		const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
-
-		export default {
-				components: {'pw-section': section, VirtualList},
-				data() {
-						const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
-						return {
-								history: localStorageHistory || [],
-								filterText: '',
-								showFilter: false,
-								isClearingHistory: false
-						}
-				},
-				computed: {
-						filteredHistory() {
-								return this.history.filter(entry => {
-										const filterText = this.filterText.toLowerCase();
-										return Object.keys(entry).some(key => {
-												let value = entry[key];
-												value = typeof value !== 'string' ? value.toString() : value;
-												return value.toLowerCase().includes(filterText);
-										});
-								});
-						}
-				},
-				methods: {
-						clearHistory() {
-								this.history = [];
-								this.filterText = '';
-								this.disableHistoryClearing();
-								updateOnLocalStorage('history', this.history);
-						},
-						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);
-						},
-						addEntry(entry) {
-								this.history.push(entry);
-								updateOnLocalStorage('history', this.history);
-						},
-						enableHistoryClearing() {
-								this.isClearingHistory = true;
-						},
-						disableHistoryClearing() {
-								this.isClearingHistory = false;
-						}
-				}
-		}
 </script>
-
 <style scoped lang="scss">
-  #filter-history {
-    display: flex;
-    flex-direction: row;
-
-    label {
-      flex-basis: 20%;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  #clear-history {
-    flex-direction: row;
-    justify-content: flex-end;
-
-    #clear-history-button {
-      flex: 1;
-    }
-
-    label {
-      flex: 1;
-    }
-
-    #confirm-clear-history-button, #reject-clear-history-button {
-      flex-basis: 10%;
-    }
-  }
-
   .virtual-list {
     [readonly] {
       cursor: default;
     }
   }
+
 </style>
diff --git a/components/toggle.vue b/components/toggle.vue
index c02e950bc..2e9ea5d9b 100644
--- a/components/toggle.vue
+++ b/components/toggle.vue
@@ -3,7 +3,8 @@
     <label class="toggle" :class="{on: on}" ref="toggle">
       <span class="handle"></span>
     </label>
-    <label class="caption"><slot /></label>
+    <label class="caption">
+      <slot /></label>
   </div>
 </template>
 
@@ -14,7 +15,7 @@
   $inactiveColor: var(--fg-color);
 
   $inactiveHandleColor: $inactiveColor;
-  $activeHandleColor: var(--fg-color);
+  $activeHandleColor: var(--act-color);
 
   $width: 50px;
   $height: 20px;
@@ -27,7 +28,7 @@
   }
 
   label.caption {
-    margin-left: 5px;
+    margin-left: 4px;
     vertical-align: middle;
   }
 
@@ -62,7 +63,7 @@
       pointer-events: none;
       transition: $transition;
 
-      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     }
 
     &.on {
@@ -75,24 +76,26 @@
       }
     }
   }
+
 </style>
 
 <script>
   export default {
 
-      props: {
-          'on': {
-              type: Boolean,
-              default: false
-          }
-      },
-
-      methods: {
-          toggle () {
-              this.$refs.toggle.classList.toggle("on");
-              this.$emit('change', this.$refs.toggle.classList.contains("on"));
-          }
+    props: {
+      'on': {
+        type: Boolean,
+        default: false
       }
+    },
+
+    methods: {
+      toggle() {
+        this.$refs.toggle.classList.toggle("on");
+        this.$emit('change', this.$refs.toggle.classList.contains("on"));
+      }
+    }
 
   }
+
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index a17885dfe..4af0b0c1f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -187,15 +187,15 @@
         </li>
       </ul>
     </pw-section>
-    <history @useHistory="handleUseHistory" ref="historyComponent"/>
+    <history @useHistory="handleUseHistory" ref="historyComponent" />
   </div>
 </template>
 
 <script>
-		import history from "../components/history";
-		import section from "../components/section";
+  import history from "../components/history";
+  import section from "../components/section";
 
-		const statusCategories = [{
+  const statusCategories = [{
       name: 'informational',
       statusCodeRegex: new RegExp(/[1][0-9]+/),
       className: 'info-response'
@@ -243,8 +243,8 @@
 
   export default {
     components: {
-		    'pw-section': section,
-		    history
+      'pw-section': section,
+      history
     },
     data() {
       return {
@@ -279,7 +279,9 @@
         const validHostname = new RegExp(protocol + "(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
         return validIP.test(this.url) || validHostname.test(this.url);
       },
-      hasRequestBody () { return['POST', 'PUT', 'PATCH'].includes(this.method); },
+      hasRequestBody() {
+        return ['POST', 'PUT', 'PATCH'].includes(this.method);
+      },
       rawRequestBody() {
         const {
           bodyParams
@@ -331,11 +333,17 @@
       }
     },
     methods: {
-      handleUseHistory({method,url,path}) {
+      handleUseHistory({
+        method,
+        url,
+        path
+      }) {
         this.method = method;
         this.url = url;
         this.path = path;
-        this.$refs.request.$el.scrollIntoView({behavior: 'smooth'});
+        this.$refs.request.$el.scrollIntoView({
+          behavior: 'smooth'
+        });
       },
       async sendRequest() {
         if (!this.isValidURL) {
@@ -358,8 +366,8 @@
         this.response.body = 'Loading...';
 
         const auth = this.auth === 'Basic' ? {
-            username: this.httpUser,
-            password: this.httpPassword
+          username: this.httpUser,
+          password: this.httpPassword
         } : null;
 
         let headers = {};
@@ -370,68 +378,75 @@
           const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
 
           Object.assign(headers, {
-              'Content-Length': requestBody.length,
-              'Content-Type': `${this.contentType}; charset=utf-8`
+            'Content-Length': requestBody.length,
+            'Content-Type': `${this.contentType}; charset=utf-8`
           });
         }
 
         // If the request uses a token for auth, we want to make sure it's sent here.
-        if(this.auth === 'Bearer Token') headers['Authorization'] = `Bearer ${this.bearerToken}`;
+        if (this.auth === 'Bearer Token') headers['Authorization'] = `Bearer ${this.bearerToken}`;
 
         headers = Object.assign(
-            // Clone the app headers object first, we don't want to
-            // mutate it with the request headers added by default.
-            Object.assign({}, this.headers),
+          // Clone the app headers object first, we don't want to
+          // mutate it with the request headers added by default.
+          Object.assign({}, this.headers),
 
-            // We make our temporary headers object the source so
-            // that you can override the added headers if you
-            // specify them.
-            headers
+          // We make our temporary headers object the source so
+          // that you can override the added headers if you
+          // specify them.
+          headers
         );
 
         try {
           const payload = await this.$axios({
-              method: this.method,
-              url: this.url + this.path + this.queryString,
-              auth,
-              headers
+            method: this.method,
+            url: this.url + this.path + this.queryString,
+            auth,
+            headers
           });
 
           (() => {
-              const status = this.response.status = payload.status;
-              const headers = this.response.headers = payload.headers;
+            const status = this.response.status = payload.status;
+            const headers = this.response.headers = payload.headers;
 
-              // We don't need to bother parsing JSON, axios already handles it for us!
-              const body = this.response.body = payload.data;
+            // We don't need to bother parsing JSON, axios already handles it for us!
+            const body = this.response.body = payload.data;
 
-              const date = new Date().toLocaleDateString();
-              const time = new Date().toLocaleTimeString();
+            const date = new Date().toLocaleDateString();
+            const time = new Date().toLocaleTimeString();
 
-              // Addition of an entry to the history component.
-		          const entry = {status, date, time, method: this.method, url: this.url, path: this.path};
-		          this.$refs.historyComponent.addEntry(entry);
+            // Addition of an entry to the history component.
+            const entry = {
+              status,
+              date,
+              time,
+              method: this.method,
+              url: this.url,
+              path: this.path
+            };
+            this.$refs.historyComponent.addEntry(entry);
           })();
-        } catch(error) {
-            if(error.response){
-                this.response.headers = error.response.headers;
-                this.response.status = error.response.status;
-                this.response.body = error.response.data;
+        } catch (error) {
+          if (error.response) {
+            this.response.headers = error.response.headers;
+            this.response.status = error.response.status;
+            this.response.body = error.response.data;
 
-		            // Addition of an entry to the history component.
-		            const entry = {
-				            status: this.response.status,
-				            date: new Date().toLocaleDateString(),
-				            time: new Date().toLocaleTimeString(),
-				            method: this.method,
-				            url: this.url,
-				            path: this.path
-		            };
-		            this.$refs.historyComponent.addEntry(entry);
-		            return;
-            }
+            // Addition of an entry to the history component.
+            const entry = {
+              status: this.response.status,
+              date: new Date().toLocaleDateString(),
+              time: new Date().toLocaleTimeString(),
+              method: this.method,
+              url: this.url,
+              path: this.path
+            };
+            this.$refs.historyComponent.addEntry(entry);
+            return;
+          }
 
-            this.response.status = error.message;
-            this.response.body = "See JavaScript console (F12) for details.";
+          this.response.status = error.message;
+          this.response.body = "See JavaScript console (F12) for details.";
         }
       },