diff --git a/README.md b/README.md
index 41b3cce62..193f0bbec 100644
--- a/README.md
+++ b/README.md
@@ -69,8 +69,8 @@ _Customized themes are synced with local session storage_
  - Instant loading with [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers)
  - Offline support
  - Low RAM/memory and CPU usage
- - [Add to Home Screen](https://developers.google.com/web/fundamentals/app-install-banners) (button in footer)
- - [Desktop PWA](https://developers.google.com/web/progressive-web-apps/desktop) support (button in footer)
+ - Add to Home Screen
+ - Desktop PWA
  - ([full features](https://developers.google.com/web/progressive-web-apps))
 
 🚀 **Request**: Retrieve response from endpoint instantly.
@@ -220,11 +220,13 @@ _**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/li
 
  - **[Proxy β](https://github.com/postwoman-io/postwoman-proxy)** - A simple proxy server created for Postwoman
  - **[CLI β](https://github.com/postwoman-io/postwoman-cli)** - A CLI solution for Postwoman
- - **[Browser Extensions](https://github.com/AndrewBastin/postwoman-firefox)** - Browser extensions that simplifies access to Postwoman
+ - **Browser Extensions** - Browser extensions that simplifies access to Postwoman
 
- > [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_16x16.png) **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/postwoman)  |  ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_16x16.png) **Chrome (coming soon)**
+   [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_16x16.png) **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/postwoman) ([GitHub](https://github.com/AndrewBastin/postwoman-firefox))  |  [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_16x16.png) **Chrome**](https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld) ([GitHub](https://github.com/AndrewBastin/postwoman-chrome))
 
-_Add-ons are developed and maintained under **[Official Postwoman Organization](https://github.com/postwoman-io)**_
+   >**Extensions fixes `CORS` issues.**
+
+_Add-ons are developed and maintained under **[Official Postwoman Organization](https://github.com/postwoman-io)**._
 
 **To find out more, please check out [Postwoman Wiki](https://github.com/liyasthomas/postwoman/wiki).**
 
diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss
index 313b4b58a..0c714f199 100644
--- a/assets/css/fonts.scss
+++ b/assets/css/fonts.scss
@@ -27,6 +27,7 @@
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
   font-feature-settings: "liga";
+  border-radius: 50%;
 }
 
 /* poppins-500 - latin */
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 48b6130c3..574f57c94 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -698,6 +698,7 @@ ol li {
 
 .show-on-large-screen {
   display: inline-flex;
+  flex: 1;
 }
 
 .info-response {
@@ -852,10 +853,7 @@ input[type="radio"]:checked + label + .tab {
 }
 
 @media (max-width: $responsiveWidth) {
-  .content {
-    flex-flow: column;
-  }
-
+  .content,
   .columns {
     flex-flow: column;
   }
diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue
index 2789a52d7..c39b7b257 100644
--- a/components/collections/addCollection.vue
+++ b/components/collections/addCollection.vue
@@ -56,6 +56,10 @@ export default {
   },
   methods: {
     addNewCollection() {
+      if (!this.$data.name) {
+        this.$toast.info('Please provide a valid name for the collection')
+        return;
+      }
       this.$store.commit("postwoman/addNewCollection", {
         name: this.$data.name
       });
diff --git a/components/collections/editCollection.vue b/components/collections/editCollection.vue
index 4021557fe..98c9154be 100644
--- a/components/collections/editCollection.vue
+++ b/components/collections/editCollection.vue
@@ -59,6 +59,10 @@ export default {
   },
   methods: {
     saveCollection() {
+      if (!this.$data.name) {
+        this.$toast.info('Please provide a valid name for the collection');
+        return;
+      }
       const collectionUpdated = {
         ...this.$props.editingCollection,
         name: this.$data.name
diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
new file mode 100644
index 000000000..547a8cecd
--- /dev/null
+++ b/components/firebase/feeds.vue
@@ -0,0 +1,85 @@
+<template>
+  <virtual-list
+    v-if="fb.currentFeeds.length !== 0"
+    class="virtual-list"
+    :class="{ filled: fb.currentFeeds.length }"
+    :size="56"
+    :remain="Math.min(8, fb.currentFeeds.length)"
+  >
+    <ul v-for="feed in fb.currentFeeds" :key="feed.id">
+      <div class="show-on-large-screen">
+        <li>
+          <input
+            :aria-label="$t('label')"
+            type="text"
+            readonly
+            :value="feed.label"
+            :placeholder="$t('no_label')"
+            class="bg-color"
+          />
+        </li>
+        <button class="icon" @click="saveFeed(feed)">
+          <i class="material-icons">get_app</i>
+        </button>
+        <button class="icon" @click="deleteFeed(feed)">
+          <i class="material-icons">delete</i>
+        </button>
+      </div>
+    </ul>
+  </virtual-list>
+  <ul v-else>
+    <li>
+      <label class="info">{{ $t("empty") }}</label>
+    </li>
+  </ul>
+</template>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 288px);
+}
+
+.bg-color {
+  background-color: transparent;
+}
+</style>
+
+<script>
+import { fb } from "../../functions/fb";
+
+export default {
+  components: {
+    VirtualList: () => import("vue-virtual-scroll-list")
+  },
+  data() {
+    return {
+      fb
+    };
+  },
+  methods: {
+    deleteFeed(feed) {
+      fb.deleteFeed(feed.id);
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete"
+      });
+    },
+    saveFeed(feed) {
+      const dataToWrite = JSON.stringify(feed.message, null, 2);
+      const file = new Blob([dataToWrite], { type: "application/json" });
+      const a = document.createElement("a"),
+        url = URL.createObjectURL(file);
+      a.href = url;
+      a.download = (feed.label + " on " + Date()).replace(/\./g, "[dot]");
+      document.body.appendChild(a);
+      a.click();
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done"
+      });
+      setTimeout(() => {
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+      }, 1000);
+    }
+  }
+};
+</script>
diff --git a/components/firebase/inputform.vue b/components/firebase/inputform.vue
new file mode 100644
index 000000000..0eb0a9e62
--- /dev/null
+++ b/components/firebase/inputform.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <ul>
+      <li>
+        <input
+          :aria-label="$t('label')"
+          type="text"
+          autofocus
+          v-model="message"
+          :placeholder="$t('paste_a_collection')"
+        />
+      </li>
+    </ul>
+    <ul>
+      <li>
+        <input
+          :aria-label="$t('label')"
+          type="text"
+          autofocus
+          v-model="label"
+          :placeholder="$t('label')"
+        />
+      </li>
+      <button
+        class="icon"
+        :disabled="!(this.message && this.label)"
+        value="Save"
+        @click="formPost"
+      >
+        <i class="material-icons">add</i>
+        <span>Add</span>
+      </button>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { fb } from "../../functions/fb";
+
+export default {
+  data() {
+    return {
+      message: null,
+      label: null
+    };
+  },
+  methods: {
+    formPost() {
+      fb.writeFeeds(this.message, this.label);
+      this.message = null;
+      this.label = null;
+    }
+  }
+};
+</script>
diff --git a/components/firebase/login.vue b/components/firebase/login.vue
new file mode 100644
index 000000000..0f06d87b2
--- /dev/null
+++ b/components/firebase/login.vue
@@ -0,0 +1,115 @@
+<template>
+  <v-popover>
+    <button class="icon" v-tooltip="$t('login_with')">
+      <i class="material-icons">vpn_key</i>
+    </button>
+    <template slot="popover">
+      <div>
+        <button class="icon" @click="signInWithGoogle" v-close-popover>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            class="material-icons"
+          >
+            <path
+              d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
+            />
+          </svg>
+          <span>Google</span>
+        </button>
+      </div>
+      <div>
+        <button class="icon" @click="signInWithGithub" v-close-popover>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            class="material-icons"
+          >
+            <path
+              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+            />
+          </svg>
+          <span>GitHub</span>
+        </button>
+      </div>
+    </template>
+  </v-popover>
+</template>
+
+<script>
+import firebase from "firebase/app";
+import { fb } from "../../functions/fb";
+
+export default {
+  data() {
+    return {
+      fb
+    };
+  },
+
+  methods: {
+    signInWithGoogle() {
+      const provider = new firebase.auth.GoogleAuthProvider();
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .then(res => {
+          if (res.additionalUserInfo.isNewUser) {
+            this.$toast.info(this.$t("turn_on") + " " + this.$t("sync"), {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncCollections", true);
+                  this.$router.push({ path: "/settings" });
+                  toastObject.remove();
+                }
+              }
+            });
+          }
+        })
+        .catch(err => {
+          this.$toast.show(err.message || err, {
+            icon: "error"
+          });
+        });
+    },
+    signInWithGithub() {
+      const provider = new firebase.auth.GithubAuthProvider();
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .then(res => {
+          if (res.additionalUserInfo.isNewUser) {
+            this.$toast.info(this.$t("turn_on") + " " + this.$t("sync"), {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncCollections", true);
+                  this.$router.push({ path: "/settings" });
+                  toastObject.remove();
+                }
+              }
+            });
+          }
+        })
+        .catch(err => {
+          this.$toast.show(err.message || err, {
+            icon: "error"
+          });
+        });
+    }
+  }
+};
+</script>
diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
new file mode 100644
index 000000000..7f1084b85
--- /dev/null
+++ b/components/graphql/queryeditor.vue
@@ -0,0 +1,136 @@
+<template>
+  <pre ref="editor"></pre>
+</template>
+
+<script>
+const DEFAULT_THEME = "twilight";
+
+import ace from "ace-builds";
+import * as gql from "graphql";
+import "ace-builds/webpack-resolver";
+import debounce from "../../functions/utils/debounce";
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    theme: {
+      type: String,
+      required: false
+    },
+    lang: {
+      type: String,
+      default: "json"
+    },
+    options: {
+      type: Object,
+      default: {}
+    }
+  },
+
+  data() {
+    return {
+      editor: null,
+      cacheValue: "",
+      validationSchema: null 
+    };
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.cacheValue) {
+        this.editor.session.setValue(value, 1);
+        this.cacheValue = value;
+      }
+    },
+    theme() {
+      this.editor.setTheme("ace/theme/" + this.defineTheme());
+    },
+    lang(value) {
+      this.editor.getSession().setMode("ace/mode/" + value);
+    },
+    options(value) {
+      this.editor.setOptions(value);
+    }
+  },
+
+  mounted() {
+    const editor = ace.edit(this.$refs.editor, {
+      theme: "ace/theme/" + this.defineTheme(),
+      mode: "ace/mode/" + this.lang,
+      ...this.options
+    });
+
+    if (this.value) editor.setValue(this.value, 1);
+
+    this.editor = editor;
+    this.cacheValue = this.value;
+
+    editor.on("change", () => {
+      const content = editor.getValue();
+      this.$emit("input", content);
+      this.parseContents(content);
+      this.cacheValue = content;
+    });
+
+    this.parseContents(this.value);
+  },
+
+  methods: {
+    defineTheme() {
+      if (this.theme) {
+        return this.theme;
+      } else {
+        return (
+          this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+        );
+      }
+    },
+    
+    setValidationSchema(schema) {
+      this.validationSchema = schema;
+      this.parseContents(this.cacheValue);
+    },
+
+    parseContents: debounce(function(content) {
+      if (content !== "") {
+        try {
+          const doc = gql.parse(content);
+
+          if (this.validationSchema) {
+            this.editor.session.setAnnotations(
+              gql.validate(this.validationSchema, doc)
+                .map((err) => {
+                  return {
+                    row: err.locations[0].line - 1,
+                    column: err.locations[0].column - 1,
+                    text: err.message,
+                    type: "error"
+                  }
+                })
+            )
+          }
+        } catch (e) {
+          this.editor.session.setAnnotations([
+            {
+              row: e.locations[0].line - 1,
+              column: e.locations[0].column - 1,
+              text: e.message,
+              type: "error"
+            }
+          ]);
+        }
+      } else {
+        this.editor.session.setAnnotations([]);
+      }
+    }, 2000)
+  },
+
+  beforeDestroy() {
+    this.editor.destroy();
+    this.editor.container.remove();
+  }
+};
+</script>
diff --git a/components/history.vue b/components/history.vue
index 289f5586b..c769aa30c 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -21,7 +21,7 @@
           <button
             class="icon"
             :class="{ stared: entry.star }"
-            @click="toggleStar(index)"
+            @click="toggleStar(entry)"
             v-tooltip="{
               content: !entry.star ? $t('add_star') : $t('remove_star')
             }"
@@ -331,6 +331,7 @@ ol li {
 
 <script>
 import { findStatusGroup } from "../pages/index";
+import { fb } from "../functions/fb";
 
 const updateOnLocalStorage = (propertyName, property) =>
   window.localStorage.setItem(propertyName, JSON.stringify(property));
@@ -341,11 +342,11 @@ export default {
     VirtualList: () => import("vue-virtual-scroll-list")
   },
   data() {
-    const localStorageHistory = JSON.parse(
-      window.localStorage.getItem("history")
-    );
     return {
-      history: localStorageHistory || [],
+      history:
+        fb.currentUser !== null
+          ? fb.currentHistory
+          : JSON.parse(window.localStorage.getItem("history")) || [],
       filterText: "",
       showFilter: false,
       isClearingHistory: false,
@@ -359,6 +360,10 @@ export default {
   },
   computed: {
     filteredHistory() {
+      this.history =
+        fb.currentUser !== null
+          ? fb.currentHistory
+          : JSON.parse(window.localStorage.getItem("history")) || [];
       return this.history.filter(entry => {
         const filterText = this.filterText.toLowerCase();
         return Object.keys(entry).some(key => {
@@ -371,6 +376,9 @@ export default {
   },
   methods: {
     clearHistory() {
+      if (fb.currentUser !== null) {
+        fb.clearHistory();
+      }
       this.history = [];
       this.filterText = "";
       this.disableHistoryClearing();
@@ -391,6 +399,9 @@ export default {
       );
     },
     deleteHistory(entry) {
+      if (fb.currentUser !== null) {
+        fb.deleteHistory(entry);
+      }
       this.history.splice(this.history.indexOf(entry), 1);
       if (this.history.length === 0) {
         this.filterText = "";
@@ -497,8 +508,11 @@ export default {
     toggleCollapse() {
       this.showMore = !this.showMore;
     },
-    toggleStar(index) {
-      this.history[index]["star"] = !this.history[index]["star"];
+    toggleStar(entry) {
+      if (fb.currentUser !== null) {
+        fb.toggleStar(entry, !entry.star);
+      }
+      entry.star = !entry.star;
       updateOnLocalStorage("history", this.history);
     }
   }
diff --git a/firestore.rules b/firestore.rules
index 31eda1745..ce0a1b949 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -1,7 +1,14 @@
 service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
-      allow read, write;
+      allow read, write: if request.auth.uid != null;
+    }
+    // Make sure the uid of the requesting user matches name of the user
+    // document. The wildcard expression {userId} makes the userId variable
+    // available in rules.
+    match /users/{userId} {
+      allow read, update, delete: if request.auth.uid == userId;
+      allow create: if request.auth.uid != null;
     }
   }
 }
diff --git a/functions/fb.js b/functions/fb.js
new file mode 100644
index 000000000..698b9150e
--- /dev/null
+++ b/functions/fb.js
@@ -0,0 +1,173 @@
+import firebase from "firebase/app";
+import "firebase/firestore";
+import "firebase/auth";
+
+// Initialize Firebase, copied from cloud console
+const firebaseConfig = {
+  apiKey: "AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM",
+  authDomain: "postwoman-api.firebaseapp.com",
+  databaseURL: "https://postwoman-api.firebaseio.com",
+  projectId: "postwoman-api",
+  storageBucket: "postwoman-api.appspot.com",
+  messagingSenderId: "421993993223",
+  appId: "1:421993993223:web:ec0baa8ee8c02ffa1fc6a2",
+  measurementId: "G-ERJ6025CEB"
+};
+firebase.initializeApp(firebaseConfig);
+
+// a reference to the users collection
+const usersCollection = firebase.firestore().collection("users");
+
+// the shared state object that any vue component
+// can get access to
+export const fb = {
+  currentUser: {},
+  currentFeeds: [],
+  currentSettings: [],
+  currentHistory: [],
+  writeFeeds: async (message, label) => {
+    const dt = {
+      createdOn: new Date(),
+      author: fb.currentUser.uid,
+      author_name: fb.currentUser.displayName,
+      author_image: fb.currentUser.photoURL,
+      message,
+      label
+    };
+    try {
+      return usersCollection
+        .doc(fb.currentUser.uid)
+        .collection("feeds")
+        .add(dt);
+    } catch (e) {
+      return console.error("error inserting", dt, e);
+    }
+  },
+  deleteFeed: id => {
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("feeds")
+      .doc(id)
+      .delete()
+      .catch(e => console.error("error deleting", id, e));
+  },
+  writeSettings: async (setting, value) => {
+    const st = {
+      updatedOn: new Date(),
+      author: fb.currentUser.uid,
+      author_name: fb.currentUser.displayName,
+      author_image: fb.currentUser.photoURL,
+      name: setting,
+      value
+    };
+    try {
+      return usersCollection
+        .doc(fb.currentUser.uid)
+        .collection("settings")
+        .doc(setting)
+        .set(st);
+    } catch (e) {
+      return console.error("error updating", st, e);
+    }
+  },
+  writeHistory: async entry => {
+    const hs = entry;
+    try {
+      return usersCollection
+        .doc(fb.currentUser.uid)
+        .collection("history")
+        .add(hs);
+    } catch (e) {
+      return console.error("error inserting", hs, e);
+    }
+  },
+  deleteHistory: entry => {
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("history")
+      .doc(entry.id)
+      .delete()
+      .catch(e => console.error("error deleting", entry, e));
+  },
+  clearHistory: () => {
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("history")
+      .get()
+      .then(({ docs }) => {
+        docs.forEach(e => fb.deleteHistory(e));
+      });
+  },
+  toggleStar: (entry, value) => {
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("history")
+      .doc(entry.id)
+      .update({ star: value })
+      .catch(e => console.error("error deleting", entry, e));
+  }
+};
+
+// When a user logs in or out, save that in the store
+firebase.auth().onAuthStateChanged(user => {
+  if (user) {
+    fb.currentUser = user;
+    fb.currentUser.providerData.forEach(profile => {
+      let us = {
+        updatedOn: new Date(),
+        provider: profile.providerId,
+        name: profile.displayName,
+        email: profile.email,
+        photoUrl: profile.photoURL,
+        uid: profile.uid
+      };
+      try {
+        usersCollection.doc(fb.currentUser.uid).set(us);
+      } catch (e) {
+        console.error("error updating", us, e);
+      }
+    });
+
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("feeds")
+      .orderBy("createdOn", "desc")
+      .onSnapshot(feedsRef => {
+        const feeds = [];
+        feedsRef.forEach(doc => {
+          const feed = doc.data();
+          feed.id = doc.id;
+          feeds.push(feed);
+        });
+        fb.currentFeeds = feeds;
+      });
+
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("settings")
+      .onSnapshot(settingsRef => {
+        const settings = [];
+        settingsRef.forEach(doc => {
+          const setting = doc.data();
+          setting.id = doc.id;
+          settings.push(setting);
+        });
+        fb.currentSettings = settings;
+      });
+
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("history")
+      .onSnapshot(historyRef => {
+        const history = [];
+        historyRef.forEach(doc => {
+          const entry = doc.data();
+          entry.id = doc.id;
+          history.push(entry);
+        });
+        fb.currentHistory = history;
+      });
+  } else {
+    fb.currentUser = null;
+  }
+});
diff --git a/functions/network.js b/functions/network.js
index 7ed233cf8..f56c52676 100644
--- a/functions/network.js
+++ b/functions/network.js
@@ -1,19 +1,19 @@
 import AxiosStrategy from "./strategies/AxiosStrategy";
-import ProxyStrategy from "./strategies/ProxyStrategy";
 import FirefoxStrategy from "./strategies/FirefoxStrategy";
-
+import ChromeStrategy, { hasChromeExtensionInstalled } from "./strategies/ChromeStrategy";
 
 const runAppropriateStrategy = (req, store) => {
+  // Chrome Provides a chrome object for scripts to access
+  // Check its availability to say whether you are in Google Chrome
+  if (window.chrome && hasChromeExtensionInstalled()) {
+      return ChromeStrategy(req, store);
+  }
   // The firefox plugin injects a function to send requests through it
   // If that is available, then we can use the FirefoxStrategy
   if (window.firefoxExtSendRequest) {
     return FirefoxStrategy(req, store); 
   }
 
-  if (store.state.postwoman.settings.PROXY_ENABLED) {
-    return ProxyStrategy(req, store);
-  }
-
   return AxiosStrategy(req, store);
 }
 
diff --git a/functions/strategies/AxiosStrategy.js b/functions/strategies/AxiosStrategy.js
index 9bef30aef..4b3be7263 100644
--- a/functions/strategies/AxiosStrategy.js
+++ b/functions/strategies/AxiosStrategy.js
@@ -1,8 +1,23 @@
 import axios from "axios";
 
-const axiosStrategy = async (req, _store) => {
+const axiosWithProxy = async (req, { state }) => {
+  const { data } = await axios.post(
+    state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
+    req
+  );
+  return data;
+};
+
+const axiosWithoutProxy = async (req, _store) => {
   const res = await axios(req);
   return res;
 };
 
+const axiosStrategy = (req, store) => {
+  if (store.state.postwoman.settings.PROXY_ENABLED) {
+    return axiosWithProxy(req, store);
+  }
+  return axiosWithoutProxy(req, store);
+};
+
 export default axiosStrategy;
diff --git a/functions/strategies/ChromeStrategy.js b/functions/strategies/ChromeStrategy.js
new file mode 100644
index 000000000..03c05ea0c
--- /dev/null
+++ b/functions/strategies/ChromeStrategy.js
@@ -0,0 +1,56 @@
+const EXTENSION_ID = "amknoiejhlmhancpahfcfcfhllgkpbld";
+
+// Check if the Chrome Extension is present
+// The Chrome extension injects an empty span to help detection.
+// Also check for the presence of window.chrome object to confirm smooth operations
+export const hasChromeExtensionInstalled = () => {
+  return document.getElementById("chromePWExtensionDetect") !== null;
+}
+
+const chromeWithoutProxy = (req, _store) => new Promise((resolve, reject) => {
+  chrome.runtime.sendMessage(
+    EXTENSION_ID, {
+      messageType: "send-req",
+      data: {
+        config: req
+      }
+    }, (message) => {
+      if (message.data.error) {
+        reject(message.data.error);
+      } else {
+        resolve(message.data.response);
+      }
+    }
+  );
+});
+
+const chromeWithProxy = (req, { state }) => new Promise((resolve, reject) => {
+  chrome.runtime.sendMessage(
+    EXTENSION_ID, {
+      messageType: "send-req",
+      data: {
+        config: {
+          method: "post",
+          url: state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
+          data: req
+        }
+      }
+    }, (message) => {
+      if (message.data.error) {
+        reject(error);
+      } else {
+        resolve(message.data.response.data);
+      }
+    }
+  )
+});
+
+const chromeStrategy = (req, store) => {
+  if (store.state.postwoman.settings.PROXY_ENABLED) {
+    return chromeWithProxy(req, store);
+  } else {
+    return chromeWithoutProxy(req, store);
+  }
+}
+
+export default chromeStrategy;
diff --git a/functions/strategies/FirefoxStrategy.js b/functions/strategies/FirefoxStrategy.js
index 77b15f453..9160a27d3 100644
--- a/functions/strategies/FirefoxStrategy.js
+++ b/functions/strategies/FirefoxStrategy.js
@@ -1,15 +1,50 @@
-const firefoxStrategy = (req, _store) => new Promise((resolve, reject) => {
+const firefoxWithProxy = (req, { state }) =>
+  new Promise((resolve, reject) => {
+    const eventListener = event => {
+      window.removeEventListener("firefoxExtSendRequestComplete", event);
 
-  const eventListener = (event) => {
-    window.removeEventListener("firefoxExtSendRequestComplete", eventListener);
+      if (event.detail.error) {
+        reject(JSON.parse(event.detail.error));
+      } else {
+        resolve(JSON.parse(event.detail.response).data);
+      }
+    };
 
-    if (event.detail.error) reject(JSON.parse(event.detail.error));
-    else resolve(JSON.parse(event.detail.response));
-  };
+    window.addEventListener("firefoxExtSendRequestComplete", eventListener);
 
-  window.addEventListener("firefoxExtSendRequestComplete", eventListener);
+    window.firefoxExtSendRequest({
+      method: "post",
+      url:
+        state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
+      data: req
+    });
+  });
 
-  window.firefoxExtSendRequest(req);
-});
+const firefoxWithoutProxy = (req, _store) =>
+  new Promise((resolve, reject) => {
+    const eventListener = ({ detail }) => {
+      window.removeEventListener(
+        "firefoxExtSendRequestComplete",
+        eventListener
+      );
+
+      if (detail.error) {
+        reject(JSON.parse(detail.error));
+      } else {
+        resolve(JSON.parse(detail.response));
+      }
+    };
+
+    window.addEventListener("firefoxExtSendRequestComplete", eventListener);
+
+    window.firefoxExtSendRequest(req);
+  });
+
+const firefoxStrategy = (req, store) => {
+  if (store.state.postwoman.settings.PROXY_ENABLED) {
+    return firefoxWithProxy(req, store);
+  }
+  return firefoxWithoutProxy(req, store);
+};
 
 export default firefoxStrategy;
diff --git a/functions/strategies/ProxyStrategy.js b/functions/strategies/ProxyStrategy.js
deleted file mode 100644
index 0b6f50b0f..000000000
--- a/functions/strategies/ProxyStrategy.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import axios from "axios";
-
-const proxyStrategy = async (req, store) => {
-  const { data } = await axios.post(
-    store.state.postwoman.settings.PROXY_URL ||
-      "https://postwoman.apollotv.xyz/",
-    req
-  );
-  return data;
-};
-
-export default proxyStrategy;
diff --git a/functions/utils/debounce.js b/functions/utils/debounce.js
new file mode 100644
index 000000000..09acda07d
--- /dev/null
+++ b/functions/utils/debounce.js
@@ -0,0 +1,15 @@
+// Debounce is a higher order function which makes its enclosed function be executed
+// only if the function wasn't called again till 'delay' time has passed, this helps reduce impact of heavy working
+// functions which might be called frequently
+// NOTE : Don't use lambda functions as this doesn't get bound properly in them, use the 'function (args) {}' format
+const debounce = (func, delay) => {
+  let inDebounce
+  return function() {
+    const context = this
+    const args = arguments
+    clearTimeout(inDebounce)
+    inDebounce = setTimeout(() => func.apply(context, args), delay)
+  }
+}
+
+export default debounce;
diff --git a/lang/en-US.js b/lang/en-US.js
index 906fb0602..2d63fd63a 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -249,5 +249,15 @@ export default {
   extensions: "Extensions",
   extensions_info1: "Browser extension that simplifies access to Postwoman",
   extensions_info2: "Get Postwoman browser extension!",
-  installed: "Installed"
+  installed: "Installed",
+  login_with: "Login with",
+  logged_out: "Logged out",
+  logout: "Logout",
+  account: "Account",
+  sync: "Sync",
+  syncHistory: "History",
+  syncCollections: "Collections",
+  turn_on: "Turn on",
+  login_first: "Login first",
+  paste_a_collection: "Paste a Collection"
 };
diff --git a/layouts/default.vue b/layouts/default.vue
index 447e58ae4..15626a247 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -237,6 +237,11 @@
           <div v-else-if="$route.path === '/settings'">
             <nav class="secondary-nav">
               <ul>
+                <li>
+                  <a href="#account" v-tooltip.right="$t('account')">
+                    <i class="material-icons">person</i>
+                  </a>
+                </li>
                 <li>
                   <a href="#theme" v-tooltip.right="$t('theme')">
                     <i class="material-icons">brush</i>
@@ -288,6 +293,46 @@
                 >
                   <i class="material-icons">offline_bolt</i>
                 </button>
+                <login v-if="!fb.currentUser" />
+                <span v-if="fb.currentUser">
+                  <v-popover>
+                    <button
+                      class="icon"
+                      v-tooltip="
+                        (fb.currentUser.displayName ||
+                          '<label><i>Name not found</i></label>') +
+                          '<br>' +
+                          (fb.currentUser.email ||
+                            '<label><i>Email not found</i></label>')
+                      "
+                    >
+                      <img
+                        v-if="fb.currentUser.photoURL"
+                        :src="fb.currentUser.photoURL"
+                        class="material-icons"
+                      />
+                      <i v-else class="material-icons">account_circle</i>
+                    </button>
+                    <template slot="popover">
+                      <div>
+                        <nuxt-link :to="localePath('settings')" v-close-popover>
+                          <button class="icon">
+                            <i class="material-icons">settings</i>
+                            <span>
+                              {{ $t("settings") }}
+                            </span>
+                          </button>
+                        </nuxt-link>
+                      </div>
+                      <div>
+                        <button class="icon" @click="logout" v-close-popover>
+                          <i class="material-icons">exit_to_app</i>
+                          <span>{{ $t("logout") }}</span>
+                        </button>
+                      </div>
+                    </template>
+                  </v-popover>
+                </span>
                 <v-popover>
                   <button class="icon" v-tooltip="$t('more')">
                     <i class="material-icons">more_vert</i>
@@ -352,15 +397,7 @@
             <div class="flex-wrap">
               <span v-if="version.name" class="mono">
                 <a
-                  href="https://liyasthomas.web.app"
-                  target="_blank"
-                  rel="noopener"
-                >
-                  <button class="icon" v-tooltip="'Liyas Thomas'">
-                    🦄
-                  </button>
-                </a>
-                <a
+                  class="link"
                   :href="
                     'https://github.com/liyasthomas/postwoman/releases/tag/' +
                       version.name
@@ -371,6 +408,14 @@
                 >
                   {{ version.name }}
                 </a>
+                <a
+                  class="link"
+                  href="https://www.netlify.com"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  Powered by Netlify
+                </a>
                 <!-- <span v-if="version.hash">
                   -
                   <a
@@ -382,6 +427,15 @@
                 <!-- <span v-if="version.variant">({{version.variant}})</span> -->
               </span>
               <span>
+                <a
+                  href="https://liyasthomas.web.app"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  <button class="icon" v-tooltip="'Liyas Thomas'">
+                    🦄
+                  </button>
+                </a>
                 <a
                   href="mailto:liyascthomas@gmail.com"
                   target="_blank"
@@ -461,27 +515,33 @@
           </a>
         </div>
         <div>
-          <button class="icon" disabled>
-            <svg
-              class="material-icons"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M2.897 4.181c2.43-2.828 5.763-4.181 9.072-4.181 4.288 0 8.535 2.273 10.717 6.554-2.722.001-6.984 0-9.293 0-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644l-3.793-6.596zm5.11 7.819c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991-3.988 1.791-3.988 3.991zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225-1.33 2.04-1.945 4.294-1.945 6.507 0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214c1.864 1.734 2.271 4.542 1.007 6.719-.951 1.641-3.988 6.766-5.46 9.248 7.189.443 12.752-5.36 12.752-11.972 0-1.313-.22-2.66-.69-3.995h-7.609z"
-              />
-            </svg>
-            <span>Chrome (coming soon)</span>
-            <span
-              class="icon"
-              v-if="chromeExtInstalled"
-              v-tooltip="$t('installed')"
-            >
-              <i class="material-icons">done</i>
-            </span>
-          </button>
+          <a
+            href="https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <svg
+                class="material-icons"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M2.897 4.181c2.43-2.828 5.763-4.181 9.072-4.181 4.288 0 8.535 2.273 10.717 6.554-2.722.001-6.984 0-9.293 0-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644l-3.793-6.596zm5.11 7.819c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991-3.988 1.791-3.988 3.991zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225-1.33 2.04-1.945 4.294-1.945 6.507 0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214c1.864 1.734 2.271 4.542 1.007 6.719-.951 1.641-3.988 6.766-5.46 9.248 7.189.443 12.752-5.36 12.752-11.972 0-1.313-.22-2.66-.69-3.995h-7.609z"
+                />
+              </svg>
+              <span>Chrome</span>
+              <span
+                class="icon"
+                v-if="chromeExtInstalled"
+                v-tooltip="$t('installed')"
+              >
+                <i class="material-icons">done</i>
+              </span>
+            </button>
+          </a>
         </div>
       </div>
       <div slot="footer"></div>
@@ -588,16 +648,31 @@
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.link {
+  margin: 8px 16px;
+}
+@media (max-width: 768px) {
+  .link {
+    display: flex;
+    flex: 1;
+  }
+}
+</style>
 
 <script>
 import intializePwa from "../assets/js/pwa";
 import * as version from "../.postwoman/version.json";
+import { hasChromeExtensionInstalled } from "../functions/strategies/ChromeStrategy";
+
+import firebase from 'firebase/app';
+import { fb } from '../functions/fb';
 
 export default {
   components: {
     logo: () => import("../components/logo"),
-    modal: () => import("../components/modal")
+    modal: () => import("../components/modal"),
+    login: () => import("../components/firebase/login")
   },
 
   methods: {
@@ -606,6 +681,21 @@ export default {
         "nuxt-link-exact-active": this.$route.path === path,
         "nuxt-link-active": this.$route.path === path
       };
+    },
+
+    logout() {
+      fb.currentUser = null;
+      firebase
+        .auth()
+        .signOut()
+        .catch(err => {
+          this.$toast.show(err.message || err, {
+            icon: "error"
+          });
+        });
+      this.$toast.info(this.$t("logged_out"), {
+        icon: "vpn_key"
+      });
     }
   },
 
@@ -619,9 +709,9 @@ export default {
       showExtensions: false,
       showShortcuts: false,
       showSupport: false,
-      firefoxExtInstalled:
-        window.firefoxExtSendRequest !== undefined ? true : false,
-      chromeExtInstalled: false
+      firefoxExtInstalled: window.firefoxExtSendRequest,
+      chromeExtInstalled: window.chrome && hasChromeExtensionInstalled(),
+      fb
     };
   },
 
@@ -742,7 +832,7 @@ export default {
 
   watch: {
     $route() {
-      this.$toast.clear();
+      // this.$toast.clear();
     }
   },
 
diff --git a/package-lock.json b/package-lock.json
index 596757fe5..eb672b789 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -905,6 +905,264 @@
                 "lodash.once": "^4.1.1"
             }
         },
+        "@firebase/analytics": {
+            "version": "0.2.11",
+            "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.2.11.tgz",
+            "integrity": "sha512-2+Z3CBRAExe1Auf9tApnuz6akAdi9DzPUSx/ssKChWbSzInCeaYGN40pKIameux7BAVecZHxZNh5tJmW27lgtw==",
+            "requires": {
+                "@firebase/analytics-types": "0.2.5",
+                "@firebase/component": "0.1.3",
+                "@firebase/installations": "0.4.0",
+                "@firebase/util": "0.2.38",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/analytics-types": {
+            "version": "0.2.5",
+            "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.2.5.tgz",
+            "integrity": "sha512-aa746gTiILMn9TPBJXaYhYqnCL4CQwd4aYTAZseI9RZ/hf117xJTNy9/ZTmG5gl2AqxV0LgtdHYqKAjRlNqPIQ=="
+        },
+        "@firebase/app": {
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.5.2.tgz",
+            "integrity": "sha512-QOhSO414Yfc7BAH62QdsFiI/5bNaFrjDMLfRNAqnzGwLkiqIK+QH1Hma7dAF4ff1UjzEpbXQn3rXv7gtAXy6Lw==",
+            "requires": {
+                "@firebase/app-types": "0.5.0",
+                "@firebase/component": "0.1.3",
+                "@firebase/logger": "0.1.34",
+                "@firebase/util": "0.2.38",
+                "dom-storage": "2.1.0",
+                "tslib": "1.10.0",
+                "xmlhttprequest": "1.8.0"
+            }
+        },
+        "@firebase/app-types": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.5.0.tgz",
+            "integrity": "sha512-8j+vCXTpAkYGcFk86mPZ90V6HMFmn196RIEW9Opi0PN+VrPFC1l/eW0gptM8v7VXaQhECOxws3TN2g+dDaeSYA=="
+        },
+        "@firebase/auth": {
+            "version": "0.13.4",
+            "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.13.4.tgz",
+            "integrity": "sha512-dFDuLMHHmigs9ZH56h+UO78SMuvYkwRcPbEudaemYisGLXnYFa0pUKS2WfvA/9d/14X/VnzG8NGApAw5BylpvA==",
+            "requires": {
+                "@firebase/auth-types": "0.9.4"
+            }
+        },
+        "@firebase/auth-interop-types": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.1.tgz",
+            "integrity": "sha512-rNpCOyCspZvNDoQVQLQQgWAGBMB2ClCWKN1c8cEFgLNFgnMJrjVB+tcL7KW2q2UjKa7l8Mxgwys7szTiEDAcvA=="
+        },
+        "@firebase/auth-types": {
+            "version": "0.9.4",
+            "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.9.4.tgz",
+            "integrity": "sha512-06ZrpYz1GaUfIJs7C3Yf4lARH8+2kzgKfgG/9B3FaGHFYLa5U7rLBGGaca4oiVI12jmhe9CV3+M8e3U2CRCr2w=="
+        },
+        "@firebase/component": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.1.3.tgz",
+            "integrity": "sha512-PvWS/2TVC5rBKvzxdv91FBPbZxuN2WiwDyO2xaHdtsUkZ+P/E825PIh9en9kR+FSQkTCFRDmboLzispN1Tonrg==",
+            "requires": {
+                "@firebase/util": "0.2.38",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/database": {
+            "version": "0.5.19",
+            "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.5.19.tgz",
+            "integrity": "sha512-UVd0XTBbA/7mcwGeNwhMFHyrz3uJUyLAUeaROuppfo4bBK0jUhdkwqmeNC+q/Q9vU4GUV0UkMm7XgWlsfI+j8Q==",
+            "requires": {
+                "@firebase/auth-interop-types": "0.1.1",
+                "@firebase/component": "0.1.3",
+                "@firebase/database-types": "0.4.10",
+                "@firebase/logger": "0.1.34",
+                "@firebase/util": "0.2.38",
+                "faye-websocket": "0.11.3",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/database-types": {
+            "version": "0.4.10",
+            "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.4.10.tgz",
+            "integrity": "sha512-66puLsckt5HASgRN3CfhLn2iuGrgCjfH3u17OL0f5MtEweYLx+yW2QW5d539Wx30xD4B+INEdaRetw6xEa9t7g==",
+            "requires": {
+                "@firebase/app-types": "0.5.0"
+            }
+        },
+        "@firebase/firestore": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.9.3.tgz",
+            "integrity": "sha512-FGHZ5Dj+6PTqTDr1eEdEPA3fbzQy5v0i21k2DA1d4bdD20bVWWdOAyoOuku4BawfK7ZzgVJipd2+EH8pWIlwIQ==",
+            "requires": {
+                "@firebase/component": "0.1.3",
+                "@firebase/firestore-types": "1.9.0",
+                "@firebase/logger": "0.1.34",
+                "@firebase/util": "0.2.38",
+                "@firebase/webchannel-wrapper": "0.2.35",
+                "@grpc/proto-loader": "^0.5.0",
+                "grpc": "1.24.2",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/firestore-types": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-1.9.0.tgz",
+            "integrity": "sha512-UOtneGMUTLr58P56Y0GT/c4ZyC39vOoRAzgwad4PIsyc7HlKShbHKJpyys/LdlUYIsQdy/2El3Qy1veiBQ+ZJg=="
+        },
+        "@firebase/functions": {
+            "version": "0.4.30",
+            "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.4.30.tgz",
+            "integrity": "sha512-gIcmtwn+HF5YnnJmyiK3iRKSLE+Ro92ngmwJEyhupk6PBpuqVF1r22kUlrjFsFlPXEx7TrkWvfZkYbTtLpkRHw==",
+            "requires": {
+                "@firebase/component": "0.1.3",
+                "@firebase/functions-types": "0.3.13",
+                "@firebase/messaging-types": "0.4.1",
+                "isomorphic-fetch": "2.2.1",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/functions-types": {
+            "version": "0.3.13",
+            "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.3.13.tgz",
+            "integrity": "sha512-wD075tCmZo+t/GHs5xMhi3irwjbc6SWnjXAIHjuNhVDKic5gQNkHH5QnxX930WPrPhD0RV9wuSP15fy9T1mvjw=="
+        },
+        "@firebase/installations": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.4.0.tgz",
+            "integrity": "sha512-eAUrLjDnaKJ0oV4ApKlrS5TQeUv42hA39UZkZXDiMLnH94uPD5YaoGI2aR4H+PlxnGrhCqdh07BIPJY+vcmZgw==",
+            "requires": {
+                "@firebase/component": "0.1.3",
+                "@firebase/installations-types": "0.3.0",
+                "@firebase/util": "0.2.38",
+                "idb": "3.0.2",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/installations-types": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.3.0.tgz",
+            "integrity": "sha512-1W82H1F4WfuWjftMiWLNUTy1w2SD7svn8/U8k6T/CJSnzkET6m+3pPt3Q4FDI6E2zOgU8ZVGWm9IZ4DK84mP/A=="
+        },
+        "@firebase/logger": {
+            "version": "0.1.34",
+            "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.34.tgz",
+            "integrity": "sha512-J2h6ylpd1IcuonRM3HBdXThitds6aQSIeoPYRPvApSFy82NhFPKRzJlflAhlQWjJOh59/jyQBGWJNxCL6fp4hw=="
+        },
+        "@firebase/messaging": {
+            "version": "0.6.2",
+            "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.6.2.tgz",
+            "integrity": "sha512-sjdFF3v8Wc0K6r06UvskL/9zHFDbX0ospp1XSdl3OdYdq8mC/z8Fkw8oKN9+0StPWAQx8MdpmxDU/7Ixucf1fg==",
+            "requires": {
+                "@firebase/component": "0.1.3",
+                "@firebase/installations": "0.4.0",
+                "@firebase/messaging-types": "0.4.1",
+                "@firebase/util": "0.2.38",
+                "idb": "3.0.2",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/messaging-types": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.4.1.tgz",
+            "integrity": "sha512-z2ki1nIE8TYH9LiXdozEzrPi9Cfckh9/x7HbDfj5KoVFYYvwLndUczstpKm2hvAUD3GuJF0JRUuxMHpJ6pwqzQ=="
+        },
+        "@firebase/performance": {
+            "version": "0.2.30",
+            "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.2.30.tgz",
+            "integrity": "sha512-XxkiJIiEPnJUOrtv0h0AvDmcTyiYbhGfH12WksN9d53O61aTRUsjngHN6lEtlMud+0yEi6Q09pi4U+KBGm8yZQ==",
+            "requires": {
+                "@firebase/component": "0.1.3",
+                "@firebase/installations": "0.4.0",
+                "@firebase/logger": "0.1.34",
+                "@firebase/performance-types": "0.0.8",
+                "@firebase/util": "0.2.38",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/performance-types": {
+            "version": "0.0.8",
+            "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.0.8.tgz",
+            "integrity": "sha512-3RK15Bct9PRdr0YBdbZV2KTi5yrPzscJVEsdnsLHuwXBntqlQaouQqwlCNFn25dtCMY0cgV/yiaFmuo13mbJ8A=="
+        },
+        "@firebase/polyfill": {
+            "version": "0.3.31",
+            "resolved": "https://registry.npmjs.org/@firebase/polyfill/-/polyfill-0.3.31.tgz",
+            "integrity": "sha512-7XItMz50tdba57tCOTCSH8REvHYbrTU7MBOksnNZ3td/J9W/RkCPcLVSSnFWNmn0Jv1aufpUevryX1J4DZ/oiw==",
+            "requires": {
+                "core-js": "3.6.2",
+                "promise-polyfill": "8.1.3",
+                "whatwg-fetch": "2.0.4"
+            },
+            "dependencies": {
+                "core-js": {
+                    "version": "3.6.2",
+                    "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.2.tgz",
+                    "integrity": "sha512-hIE5dXkRzRvnZ5vhkRfQxUvDxQZmD9oueA08jDYRBKJHx+VIl/Pne/e0A4x9LObEEthC/TqiZybUoNM4tRgnKg=="
+                },
+                "whatwg-fetch": {
+                    "version": "2.0.4",
+                    "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+                    "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
+                }
+            }
+        },
+        "@firebase/remote-config": {
+            "version": "0.1.11",
+            "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.1.11.tgz",
+            "integrity": "sha512-AsrwmtYVkU1ZqUujV1i2wt0XK2Zph6gBeOIPEo+xD4uyzXoqTHUaW5ZPTBzjYCw1KDKTL6ciXXxk5c+cfNzjyg==",
+            "requires": {
+                "@firebase/component": "0.1.3",
+                "@firebase/installations": "0.4.0",
+                "@firebase/logger": "0.1.34",
+                "@firebase/remote-config-types": "0.1.5",
+                "@firebase/util": "0.2.38",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/remote-config-types": {
+            "version": "0.1.5",
+            "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.1.5.tgz",
+            "integrity": "sha512-1JR0XGVN0dNKJlu5sMYh0qL0jC85xNgXfUquUGNHhy9lH3++t1gD91MeiDBgxI73oFQR7PEPeu+CTeDS0g8lWQ=="
+        },
+        "@firebase/storage": {
+            "version": "0.3.24",
+            "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.3.24.tgz",
+            "integrity": "sha512-hwk5ObwtqcfMFOnd4BcCpCPlr13L686iRAaa7qlOEimx0CizWD1QRmduDuxjuxHsqNnSr3QIUleG48Z8gKOg6A==",
+            "requires": {
+                "@firebase/component": "0.1.3",
+                "@firebase/storage-types": "0.3.8",
+                "@firebase/util": "0.2.38",
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/storage-types": {
+            "version": "0.3.8",
+            "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.3.8.tgz",
+            "integrity": "sha512-F0ED2WZaGjhjEdOk85c/1ikDQdWM1NiATFuTmRsaGYZyoERiwh/Mr6FnjqnLIeiJZqa6v2hk/aUgKosXjMWH/Q=="
+        },
+        "@firebase/util": {
+            "version": "0.2.38",
+            "resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.38.tgz",
+            "integrity": "sha512-EcTQWuWrUG7wgU8IGx50Zd/xE1DdwmYpMAIElsu5G5RPAJJ9VoAOAnxyRBPrrHmFeSLJpGtKPxc/rJXnEaGrXw==",
+            "requires": {
+                "tslib": "1.10.0"
+            }
+        },
+        "@firebase/webchannel-wrapper": {
+            "version": "0.2.35",
+            "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.35.tgz",
+            "integrity": "sha512-7njiGBbFW0HCnuKNEJLcQt9EjfOzG8EJiXlFJwA3XfgiFxPVHmXrcF4d5yold2wfiwCwrXpeNTGZ854oRr6Hcw=="
+        },
+        "@grpc/proto-loader": {
+            "version": "0.5.3",
+            "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.5.3.tgz",
+            "integrity": "sha512-8qvUtGg77G2ZT2HqdqYoM/OY97gQd/0crSG34xNmZ4ZOsv3aQT/FQV9QfZPazTGna6MIoyUd+u6AxsoZjJ/VMQ==",
+            "requires": {
+                "lodash.camelcase": "^4.3.0",
+                "protobufjs": "^6.8.6"
+            }
+        },
         "@hapi/address": {
             "version": "2.1.4",
             "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1508,11 +1766,84 @@
                 "stack-trace": "0.0.10"
             }
         },
+        "@posva/vuefire-core": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@posva/vuefire-core/-/vuefire-core-2.3.0.tgz",
+            "integrity": "sha512-QXYYjcekmlKgWtrjla3z6FjcAFgzZD2wrHukz40V3c80gbVSBoDjM/oSvrHCwxzhvTg95abkHgE2yEL0UlHJCQ=="
+        },
+        "@protobufjs/aspromise": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+            "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
+        },
+        "@protobufjs/base64": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+            "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+        },
+        "@protobufjs/codegen": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+            "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+        },
+        "@protobufjs/eventemitter": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+            "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
+        },
+        "@protobufjs/fetch": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+            "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+            "requires": {
+                "@protobufjs/aspromise": "^1.1.1",
+                "@protobufjs/inquire": "^1.1.0"
+            }
+        },
+        "@protobufjs/float": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+            "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
+        },
+        "@protobufjs/inquire": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+            "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
+        },
+        "@protobufjs/path": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+            "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
+        },
+        "@protobufjs/pool": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+            "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
+        },
+        "@protobufjs/utf8": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+            "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
+        },
+        "@types/bytebuffer": {
+            "version": "5.0.40",
+            "resolved": "https://registry.npmjs.org/@types/bytebuffer/-/bytebuffer-5.0.40.tgz",
+            "integrity": "sha512-h48dyzZrPMz25K6Q4+NCwWaxwXany2FhQg/ErOcdZS1ZpsaDnDMZg8JYLMTGz7uvXKrcKGJUZJlZObyfgdaN9g==",
+            "requires": {
+                "@types/long": "*",
+                "@types/node": "*"
+            }
+        },
         "@types/color-name": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
             "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
         },
+        "@types/long": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.0.tgz",
+            "integrity": "sha512-1w52Nyx4Gq47uuu0EVcsHBxZFJgurQ+rTKS3qMHxR1GY2T8c2AJYd6vZoZ9q1rupaDjU0yT+Jc2XTyXkjeMA+Q=="
+        },
         "@types/node": {
             "version": "12.12.17",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.17.tgz",
@@ -2041,6 +2372,15 @@
             "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
             "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
         },
+        "ascli": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/ascli/-/ascli-1.0.1.tgz",
+            "integrity": "sha1-vPpZdKYvGOgcq660lzKrSoj5Brw=",
+            "requires": {
+                "colour": "~0.7.1",
+                "optjs": "~3.2.2"
+            }
+        },
         "asn1": {
             "version": "0.2.4",
             "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -2578,6 +2918,21 @@
             "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
             "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
         },
+        "bytebuffer": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/bytebuffer/-/bytebuffer-5.0.1.tgz",
+            "integrity": "sha1-WC7qSxqHO20CCkjVjfhfC7ps/d0=",
+            "requires": {
+                "long": "~3"
+            },
+            "dependencies": {
+                "long": {
+                    "version": "3.2.0",
+                    "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
+                    "integrity": "sha1-2CG3E4yhy1gcFymQ7xTbIAtcR0s="
+                }
+            }
+        },
         "bytes": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -3041,7 +3396,6 @@
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
             "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-            "dev": true,
             "requires": {
                 "string-width": "^1.0.1",
                 "strip-ansi": "^3.0.1",
@@ -3051,14 +3405,12 @@
                 "ansi-regex": {
                     "version": "2.1.1",
                     "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-                    "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-                    "dev": true
+                    "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
                 },
                 "is-fullwidth-code-point": {
                     "version": "1.0.0",
                     "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
                     "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-                    "dev": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -3067,7 +3419,6 @@
                     "version": "1.0.2",
                     "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
                     "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-                    "dev": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",
@@ -3078,7 +3429,6 @@
                     "version": "3.0.1",
                     "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
                     "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-                    "dev": true,
                     "requires": {
                         "ansi-regex": "^2.0.0"
                     }
@@ -3087,7 +3437,6 @@
                     "version": "2.1.0",
                     "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
                     "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-                    "dev": true,
                     "requires": {
                         "string-width": "^1.0.1",
                         "strip-ansi": "^3.0.1"
@@ -3119,8 +3468,7 @@
         "code-point-at": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-            "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-            "dev": true
+            "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
         },
         "collection-visit": {
             "version": "1.0.0",
@@ -3177,6 +3525,11 @@
                 "simple-swizzle": "^0.2.2"
             }
         },
+        "colour": {
+            "version": "0.7.1",
+            "resolved": "https://registry.npmjs.org/colour/-/colour-0.7.1.tgz",
+            "integrity": "sha1-nLFpkX7F0SwHNtPoaFdG3xyt93g="
+        },
         "combined-stream": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3987,6 +4340,11 @@
                 }
             }
         },
+        "dom-storage": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz",
+            "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q=="
+        },
         "domain-browser": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -4122,6 +4480,14 @@
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
             "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
         },
+        "encoding": {
+            "version": "0.1.12",
+            "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+            "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+            "requires": {
+                "iconv-lite": "~0.4.13"
+            }
+        },
         "end-of-stream": {
             "version": "1.4.4",
             "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -4644,6 +5010,14 @@
             "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
             "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
         },
+        "faye-websocket": {
+            "version": "0.11.3",
+            "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
+            "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+            "requires": {
+                "websocket-driver": ">=0.5.1"
+            }
+        },
         "fd-slicer": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
@@ -4754,6 +5128,27 @@
                 "locate-path": "^3.0.0"
             }
         },
+        "firebase": {
+            "version": "7.7.0",
+            "resolved": "https://registry.npmjs.org/firebase/-/firebase-7.7.0.tgz",
+            "integrity": "sha512-rAjobH47rAYMyS4jiJqBATa5fNTqUTHNHvLzoMGzWNbmYqBzKyCk7EySRJek/+ZhfgJRYDfJxIActCTZ1jyN1Q==",
+            "requires": {
+                "@firebase/analytics": "0.2.11",
+                "@firebase/app": "0.5.2",
+                "@firebase/app-types": "0.5.0",
+                "@firebase/auth": "0.13.4",
+                "@firebase/database": "0.5.19",
+                "@firebase/firestore": "1.9.3",
+                "@firebase/functions": "0.4.30",
+                "@firebase/installations": "0.4.0",
+                "@firebase/messaging": "0.6.2",
+                "@firebase/performance": "0.2.30",
+                "@firebase/polyfill": "0.3.31",
+                "@firebase/remote-config": "0.1.11",
+                "@firebase/storage": "0.3.24",
+                "@firebase/util": "0.2.38"
+            }
+        },
         "flatted": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz",
@@ -5129,6 +5524,459 @@
                 "iterall": "^1.2.2"
             }
         },
+        "grpc": {
+            "version": "1.24.2",
+            "resolved": "https://registry.npmjs.org/grpc/-/grpc-1.24.2.tgz",
+            "integrity": "sha512-EG3WH6AWMVvAiV15d+lr+K77HJ/KV/3FvMpjKjulXHbTwgDZkhkcWbwhxFAoTdxTkQvy0WFcO3Nog50QBbHZWw==",
+            "requires": {
+                "@types/bytebuffer": "^5.0.40",
+                "lodash.camelcase": "^4.3.0",
+                "lodash.clone": "^4.5.0",
+                "nan": "^2.13.2",
+                "node-pre-gyp": "^0.14.0",
+                "protobufjs": "^5.0.3"
+            },
+            "dependencies": {
+                "abbrev": {
+                    "version": "1.1.1",
+                    "bundled": true
+                },
+                "ansi-regex": {
+                    "version": "2.1.1",
+                    "bundled": true
+                },
+                "aproba": {
+                    "version": "1.2.0",
+                    "bundled": true
+                },
+                "are-we-there-yet": {
+                    "version": "1.1.5",
+                    "bundled": true,
+                    "requires": {
+                        "delegates": "^1.0.0",
+                        "readable-stream": "^2.0.6"
+                    }
+                },
+                "balanced-match": {
+                    "version": "1.0.0",
+                    "bundled": true
+                },
+                "brace-expansion": {
+                    "version": "1.1.11",
+                    "bundled": true,
+                    "requires": {
+                        "balanced-match": "^1.0.0",
+                        "concat-map": "0.0.1"
+                    }
+                },
+                "camelcase": {
+                    "version": "2.1.1",
+                    "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+                    "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+                },
+                "chownr": {
+                    "version": "1.1.3",
+                    "bundled": true
+                },
+                "code-point-at": {
+                    "version": "1.1.0",
+                    "bundled": true
+                },
+                "concat-map": {
+                    "version": "0.0.1",
+                    "bundled": true
+                },
+                "console-control-strings": {
+                    "version": "1.1.0",
+                    "bundled": true
+                },
+                "core-util-is": {
+                    "version": "1.0.2",
+                    "bundled": true
+                },
+                "debug": {
+                    "version": "3.2.6",
+                    "bundled": true,
+                    "requires": {
+                        "ms": "^2.1.1"
+                    }
+                },
+                "deep-extend": {
+                    "version": "0.6.0",
+                    "bundled": true
+                },
+                "delegates": {
+                    "version": "1.0.0",
+                    "bundled": true
+                },
+                "detect-libc": {
+                    "version": "1.0.3",
+                    "bundled": true
+                },
+                "fs-minipass": {
+                    "version": "1.2.7",
+                    "bundled": true,
+                    "requires": {
+                        "minipass": "^2.6.0"
+                    }
+                },
+                "fs.realpath": {
+                    "version": "1.0.0",
+                    "bundled": true
+                },
+                "gauge": {
+                    "version": "2.7.4",
+                    "bundled": true,
+                    "requires": {
+                        "aproba": "^1.0.3",
+                        "console-control-strings": "^1.0.0",
+                        "has-unicode": "^2.0.0",
+                        "object-assign": "^4.1.0",
+                        "signal-exit": "^3.0.0",
+                        "string-width": "^1.0.1",
+                        "strip-ansi": "^3.0.1",
+                        "wide-align": "^1.1.0"
+                    }
+                },
+                "glob": {
+                    "version": "7.1.4",
+                    "bundled": true,
+                    "requires": {
+                        "fs.realpath": "^1.0.0",
+                        "inflight": "^1.0.4",
+                        "inherits": "2",
+                        "minimatch": "^3.0.4",
+                        "once": "^1.3.0",
+                        "path-is-absolute": "^1.0.0"
+                    }
+                },
+                "has-unicode": {
+                    "version": "2.0.1",
+                    "bundled": true
+                },
+                "iconv-lite": {
+                    "version": "0.4.24",
+                    "bundled": true,
+                    "requires": {
+                        "safer-buffer": ">= 2.1.2 < 3"
+                    }
+                },
+                "ignore-walk": {
+                    "version": "3.0.3",
+                    "bundled": true,
+                    "requires": {
+                        "minimatch": "^3.0.4"
+                    }
+                },
+                "inflight": {
+                    "version": "1.0.6",
+                    "bundled": true,
+                    "requires": {
+                        "once": "^1.3.0",
+                        "wrappy": "1"
+                    }
+                },
+                "inherits": {
+                    "version": "2.0.4",
+                    "bundled": true
+                },
+                "ini": {
+                    "version": "1.3.5",
+                    "bundled": true
+                },
+                "is-fullwidth-code-point": {
+                    "version": "1.0.0",
+                    "bundled": true,
+                    "requires": {
+                        "number-is-nan": "^1.0.0"
+                    }
+                },
+                "isarray": {
+                    "version": "1.0.0",
+                    "bundled": true
+                },
+                "minimatch": {
+                    "version": "3.0.4",
+                    "bundled": true,
+                    "requires": {
+                        "brace-expansion": "^1.1.7"
+                    }
+                },
+                "minimist": {
+                    "version": "1.2.0",
+                    "bundled": true
+                },
+                "minipass": {
+                    "version": "2.9.0",
+                    "bundled": true,
+                    "requires": {
+                        "safe-buffer": "^5.1.2",
+                        "yallist": "^3.0.0"
+                    }
+                },
+                "minizlib": {
+                    "version": "1.3.3",
+                    "bundled": true,
+                    "requires": {
+                        "minipass": "^2.9.0"
+                    }
+                },
+                "mkdirp": {
+                    "version": "0.5.1",
+                    "bundled": true,
+                    "requires": {
+                        "minimist": "0.0.8"
+                    },
+                    "dependencies": {
+                        "minimist": {
+                            "version": "0.0.8",
+                            "bundled": true
+                        }
+                    }
+                },
+                "ms": {
+                    "version": "2.1.2",
+                    "bundled": true
+                },
+                "needle": {
+                    "version": "2.4.0",
+                    "bundled": true,
+                    "requires": {
+                        "debug": "^3.2.6",
+                        "iconv-lite": "^0.4.4",
+                        "sax": "^1.2.4"
+                    }
+                },
+                "node-pre-gyp": {
+                    "version": "0.14.0",
+                    "bundled": true,
+                    "requires": {
+                        "detect-libc": "^1.0.2",
+                        "mkdirp": "^0.5.1",
+                        "needle": "^2.2.1",
+                        "nopt": "^4.0.1",
+                        "npm-packlist": "^1.1.6",
+                        "npmlog": "^4.0.2",
+                        "rc": "^1.2.7",
+                        "rimraf": "^2.6.1",
+                        "semver": "^5.3.0",
+                        "tar": "^4.4.2"
+                    }
+                },
+                "nopt": {
+                    "version": "4.0.1",
+                    "bundled": true,
+                    "requires": {
+                        "abbrev": "1",
+                        "osenv": "^0.1.4"
+                    }
+                },
+                "npm-bundled": {
+                    "version": "1.0.6",
+                    "bundled": true
+                },
+                "npm-packlist": {
+                    "version": "1.4.6",
+                    "bundled": true,
+                    "requires": {
+                        "ignore-walk": "^3.0.1",
+                        "npm-bundled": "^1.0.1"
+                    }
+                },
+                "npmlog": {
+                    "version": "4.1.2",
+                    "bundled": true,
+                    "requires": {
+                        "are-we-there-yet": "~1.1.2",
+                        "console-control-strings": "~1.1.0",
+                        "gauge": "~2.7.3",
+                        "set-blocking": "~2.0.0"
+                    }
+                },
+                "number-is-nan": {
+                    "version": "1.0.1",
+                    "bundled": true
+                },
+                "object-assign": {
+                    "version": "4.1.1",
+                    "bundled": true
+                },
+                "once": {
+                    "version": "1.4.0",
+                    "bundled": true,
+                    "requires": {
+                        "wrappy": "1"
+                    }
+                },
+                "os-homedir": {
+                    "version": "1.0.2",
+                    "bundled": true
+                },
+                "os-tmpdir": {
+                    "version": "1.0.2",
+                    "bundled": true
+                },
+                "osenv": {
+                    "version": "0.1.5",
+                    "bundled": true,
+                    "requires": {
+                        "os-homedir": "^1.0.0",
+                        "os-tmpdir": "^1.0.0"
+                    }
+                },
+                "path-is-absolute": {
+                    "version": "1.0.1",
+                    "bundled": true
+                },
+                "process-nextick-args": {
+                    "version": "2.0.1",
+                    "bundled": true
+                },
+                "protobufjs": {
+                    "version": "5.0.3",
+                    "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-5.0.3.tgz",
+                    "integrity": "sha512-55Kcx1MhPZX0zTbVosMQEO5R6/rikNXd9b6RQK4KSPcrSIIwoXTtebIczUrXlwaSrbz4x8XUVThGPob1n8I4QA==",
+                    "requires": {
+                        "ascli": "~1",
+                        "bytebuffer": "~5",
+                        "glob": "^7.0.5",
+                        "yargs": "^3.10.0"
+                    }
+                },
+                "rc": {
+                    "version": "1.2.8",
+                    "bundled": true,
+                    "requires": {
+                        "deep-extend": "^0.6.0",
+                        "ini": "~1.3.0",
+                        "minimist": "^1.2.0",
+                        "strip-json-comments": "~2.0.1"
+                    }
+                },
+                "readable-stream": {
+                    "version": "2.3.6",
+                    "bundled": true,
+                    "requires": {
+                        "core-util-is": "~1.0.0",
+                        "inherits": "~2.0.3",
+                        "isarray": "~1.0.0",
+                        "process-nextick-args": "~2.0.0",
+                        "safe-buffer": "~5.1.1",
+                        "string_decoder": "~1.1.1",
+                        "util-deprecate": "~1.0.1"
+                    }
+                },
+                "rimraf": {
+                    "version": "2.7.1",
+                    "bundled": true,
+                    "requires": {
+                        "glob": "^7.1.3"
+                    }
+                },
+                "safe-buffer": {
+                    "version": "5.1.2",
+                    "bundled": true
+                },
+                "safer-buffer": {
+                    "version": "2.1.2",
+                    "bundled": true
+                },
+                "sax": {
+                    "version": "1.2.4",
+                    "bundled": true
+                },
+                "semver": {
+                    "version": "5.7.1",
+                    "bundled": true
+                },
+                "set-blocking": {
+                    "version": "2.0.0",
+                    "bundled": true
+                },
+                "signal-exit": {
+                    "version": "3.0.2",
+                    "bundled": true
+                },
+                "string-width": {
+                    "version": "1.0.2",
+                    "bundled": true,
+                    "requires": {
+                        "code-point-at": "^1.0.0",
+                        "is-fullwidth-code-point": "^1.0.0",
+                        "strip-ansi": "^3.0.0"
+                    }
+                },
+                "string_decoder": {
+                    "version": "1.1.1",
+                    "bundled": true,
+                    "requires": {
+                        "safe-buffer": "~5.1.0"
+                    }
+                },
+                "strip-ansi": {
+                    "version": "3.0.1",
+                    "bundled": true,
+                    "requires": {
+                        "ansi-regex": "^2.0.0"
+                    }
+                },
+                "strip-json-comments": {
+                    "version": "2.0.1",
+                    "bundled": true
+                },
+                "tar": {
+                    "version": "4.4.13",
+                    "bundled": true,
+                    "requires": {
+                        "chownr": "^1.1.1",
+                        "fs-minipass": "^1.2.5",
+                        "minipass": "^2.8.6",
+                        "minizlib": "^1.2.1",
+                        "mkdirp": "^0.5.0",
+                        "safe-buffer": "^5.1.2",
+                        "yallist": "^3.0.3"
+                    }
+                },
+                "util-deprecate": {
+                    "version": "1.0.2",
+                    "bundled": true
+                },
+                "wide-align": {
+                    "version": "1.1.3",
+                    "bundled": true,
+                    "requires": {
+                        "string-width": "^1.0.2 || 2"
+                    }
+                },
+                "wrappy": {
+                    "version": "1.0.2",
+                    "bundled": true
+                },
+                "y18n": {
+                    "version": "3.2.1",
+                    "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+                    "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+                },
+                "yallist": {
+                    "version": "3.1.1",
+                    "bundled": true
+                },
+                "yargs": {
+                    "version": "3.32.0",
+                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
+                    "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
+                    "requires": {
+                        "camelcase": "^2.0.1",
+                        "cliui": "^3.0.3",
+                        "decamelize": "^1.1.1",
+                        "os-locale": "^1.4.0",
+                        "string-width": "^1.0.1",
+                        "window-size": "^0.1.4",
+                        "y18n": "^3.2.0"
+                    }
+                }
+            }
+        },
         "gzip-size": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -5465,6 +6313,11 @@
                 "toidentifier": "1.0.0"
             }
         },
+        "http-parser-js": {
+            "version": "0.4.10",
+            "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
+            "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q="
+        },
         "http-proxy": {
             "version": "1.18.0",
             "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
@@ -5523,6 +6376,11 @@
                 "postcss": "^7.0.14"
             }
         },
+        "idb": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/idb/-/idb-3.0.2.tgz",
+            "integrity": "sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw=="
+        },
         "ieee754": {
             "version": "1.1.13",
             "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@@ -5620,8 +6478,7 @@
         "invert-kv": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-            "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-            "dev": true
+            "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
         },
         "ip": {
             "version": "1.1.5",
@@ -5919,6 +6776,26 @@
             "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
             "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
         },
+        "isomorphic-fetch": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+            "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+            "requires": {
+                "node-fetch": "^1.0.1",
+                "whatwg-fetch": ">=0.10.0"
+            },
+            "dependencies": {
+                "node-fetch": {
+                    "version": "1.7.3",
+                    "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+                    "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+                    "requires": {
+                        "encoding": "^0.1.11",
+                        "is-stream": "^1.0.1"
+                    }
+                }
+            }
+        },
         "isstream": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -6091,7 +6968,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
             "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-            "dev": true,
             "requires": {
                 "invert-kv": "^1.0.0"
             }
@@ -6428,6 +7304,16 @@
             "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
             "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
         },
+        "lodash.camelcase": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+            "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+        },
+        "lodash.clone": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
+            "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y="
+        },
         "lodash.kebabcase": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -6503,6 +7389,11 @@
                 }
             }
         },
+        "long": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+            "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+        },
         "loose-envify": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -7190,8 +8081,7 @@
         "number-is-nan": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-            "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-            "dev": true
+            "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
         },
         "nuxt": {
             "version": "2.11.0",
@@ -7368,6 +8258,11 @@
                 "last-call-webpack-plugin": "^3.0.0"
             }
         },
+        "optjs": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/optjs/-/optjs-3.2.2.tgz",
+            "integrity": "sha1-aabOicRCpEQDFBrS+bNwvVu29O4="
+        },
         "ora": {
             "version": "0.2.3",
             "resolved": "https://registry.npmjs.org/ora/-/ora-0.2.3.tgz",
@@ -7437,7 +8332,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
             "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-            "dev": true,
             "requires": {
                 "lcid": "^1.0.0"
             }
@@ -8730,6 +9624,11 @@
             "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
             "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
         },
+        "promise-polyfill": {
+            "version": "8.1.3",
+            "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.3.tgz",
+            "integrity": "sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g=="
+        },
         "proper-lockfile": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.1.tgz",
@@ -8740,6 +9639,33 @@
                 "signal-exit": "^3.0.2"
             }
         },
+        "protobufjs": {
+            "version": "6.8.8",
+            "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.8.8.tgz",
+            "integrity": "sha512-AAmHtD5pXgZfi7GMpllpO3q1Xw1OYldr+dMUlAnffGTAhqkg72WdmSY71uKBF/JuyiKs8psYbtKrhi0ASCD8qw==",
+            "requires": {
+                "@protobufjs/aspromise": "^1.1.2",
+                "@protobufjs/base64": "^1.1.2",
+                "@protobufjs/codegen": "^2.0.4",
+                "@protobufjs/eventemitter": "^1.1.0",
+                "@protobufjs/fetch": "^1.1.0",
+                "@protobufjs/float": "^1.0.2",
+                "@protobufjs/inquire": "^1.1.0",
+                "@protobufjs/path": "^1.1.2",
+                "@protobufjs/pool": "^1.1.0",
+                "@protobufjs/utf8": "^1.1.0",
+                "@types/long": "^4.0.0",
+                "@types/node": "^10.1.0",
+                "long": "^4.0.0"
+            },
+            "dependencies": {
+                "@types/node": {
+                    "version": "10.17.13",
+                    "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.13.tgz",
+                    "integrity": "sha512-pMCcqU2zT4TjqYFrWtYHKal7Sl30Ims6ulZ4UFXxI4xbtQqK/qqKwkDoBFCfooRqqmRu9vY3xaJRwxSh673aYg=="
+                }
+            }
+        },
         "proxy-addr": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -11141,6 +12067,14 @@
             "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.4.tgz",
             "integrity": "sha512-wU7FDpd9Xy4f62pf8SBg/ak21jMI/pdx4s4JPah+z/zuhmeAafQgp8BjtZvvt+b0BZOsOS1FJuCfUH7azTkivQ=="
         },
+        "vuefire": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/vuefire/-/vuefire-2.2.1.tgz",
+            "integrity": "sha512-Hgb4SJRJJd3+PZk+/YcqK3kjr28nRPHcODSaFRf731bnvdchjN7vDCeovRZNcXqRxLQ46lSyFzmcaZoqv5YdFQ==",
+            "requires": {
+                "@posva/vuefire-core": "^2.3.0"
+            }
+        },
         "vuejs-auto-complete": {
             "version": "0.9.0",
             "resolved": "https://registry.npmjs.org/vuejs-auto-complete/-/vuejs-auto-complete-0.9.0.tgz",
@@ -12003,6 +12937,26 @@
                 "wrap-ansi": "^6.0.0"
             }
         },
+        "websocket-driver": {
+            "version": "0.7.3",
+            "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz",
+            "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==",
+            "requires": {
+                "http-parser-js": ">=0.4.0 <0.4.11",
+                "safe-buffer": ">=5.1.0",
+                "websocket-extensions": ">=0.1.1"
+            }
+        },
+        "websocket-extensions": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
+            "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
+        },
+        "whatwg-fetch": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+            "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+        },
         "which": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -12061,6 +13015,11 @@
                 "string-width": "^4.0.0"
             }
         },
+        "window-size": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
+            "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY="
+        },
         "workbox-cdn": {
             "version": "4.3.1",
             "resolved": "https://registry.npmjs.org/workbox-cdn/-/workbox-cdn-4.3.1.tgz",
@@ -12163,6 +13122,11 @@
             "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",
             "integrity": "sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ=="
         },
+        "xmlhttprequest": {
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+            "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+        },
         "xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 2a375a7a3..73776225d 100644
--- a/package.json
+++ b/package.json
@@ -26,11 +26,13 @@
         "@nuxtjs/sitemap": "^2.0.1",
         "@nuxtjs/toast": "^3.3.0",
         "ace-builds": "^1.4.8",
+        "firebase": "^7.7.0",
         "graphql": "^14.5.8",
         "nuxt": "^2.11.0",
         "nuxt-i18n": "^6.4.1",
         "v-tooltip": "^2.0.2",
         "vue-virtual-scroll-list": "^1.4.4",
+        "vuefire": "^2.2.1",
         "vuejs-auto-complete": "^0.9.0",
         "vuex-persist": "^2.2.0",
         "yargs-parser": "^16.1.0"
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 05e14e940..606796472 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -175,7 +175,8 @@
               </button>
             </div>
           </div>
-          <Editor
+          <QueryEditor
+            ref="queryEditor"
             v-model="gqlQueryString"
             :options="{
               maxLines: responseBodyMaxLines,
@@ -391,6 +392,7 @@ import axios from "axios";
 import * as gql from "graphql";
 import textareaAutoHeight from "../directives/textareaAutoHeight";
 import AceEditor from "../components/ace-editor";
+import QueryEditor from "../components/graphql/queryeditor";
 import { sendNetworkRequest } from "../functions/network";
 
 export default {
@@ -402,7 +404,8 @@ export default {
     "gql-field": () => import("../components/graphql/field"),
     "gql-type": () => import("../components/graphql/type"),
     autocomplete: () => import("../components/autocomplete"),
-    Editor: AceEditor
+    Editor: AceEditor,
+    QueryEditor: QueryEditor
   },
   data() {
     return {
@@ -543,6 +546,7 @@ export default {
       responseBodyMaxLines: 16
     };
   },
+
   computed: {
     url: {
       get() {
@@ -808,6 +812,8 @@ export default {
           }
         }
         this.gqlTypes = types;
+        
+        this.$refs.queryEditor.setValidationSchema(schema);
 
         this.$nuxt.$loading.finish();
         const duration = Date.now() - startTime;
@@ -816,7 +822,7 @@ export default {
         });
       } catch (error) {
         this.$nuxt.$loading.finish();
-        this.schemaString = `${error}. ${check_console_details}`;
+        this.schemaString = `${error}. ${this.$t("check_console_details")}`;
         this.$toast.error(`${error} ${this.$t("f12_details")}`, {
           icon: "error"
         });
diff --git a/pages/index.vue b/pages/index.vue
index 861d59e8a..12845ead1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -117,8 +117,7 @@
                   :source="validContentTypes"
                   :spellcheck="false"
                   v-model="contentType"
-                >Content Type
-                </autocomplete
+                  >Content Type</autocomplete
                 >
               </li>
             </ul>
@@ -277,30 +276,10 @@
                   class="material-icons"
                   :class="showPreRequestScript"
                   v-if="!showPreRequestScript"
-                >code</i
+                  >code</i
                 >
                 <i class="material-icons" :class="showPreRequestScript" v-else
-                >close</i
-                >
-              </button>
-              <button
-                :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
-                id="preRequestScriptButto"
-                v-tooltip.bottom="{
-                  content: !testsEnabled
-                    ? 'Enable Tests'
-                    : 'Disable Tests'
-                }"
-                @click="testsEnabled = !testsEnabled"
-              >
-                <i
-                  class="material-icons"
-                  :class="testsEnabled"
-                  v-if="!testsEnabled"
-                >code</i
-                >
-                <i class="material-icons" :class="testsEnabled" v-else
-                >close</i
+                  >close</i
                 >
               </button>
             </span>
@@ -336,46 +315,9 @@
             </span>
           </div>
         </pw-section>
-        <pw-section
-          v-if="testsEnabled"
-          class="orange"
-          label="Tests"
-          ref="postRequestTests"
-        >
-          <ul>
-            <li>
-              <div class="flex-wrap">
-                <label for="generatedCode">{{ $t("javascript_code") }}</label>
-                <div>
-                  <a
-                    href="https://github.com/liyasthomas/postwoman/wiki/Post-Request-Tests"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <button class="icon" v-tooltip="$t('wiki')">
-                      <i class="material-icons">help</i>
-                    </button>
-                  </a>
-                </div>
-              </div>
-              <Editor
-                v-model="testScript"
-                :lang="'javascript'"
-                :options="{
-                  maxLines: responseBodyMaxLines,
-                  minLines: '16',
-                  fontSize: '16px',
-                  autoScrollEditorIntoView: true,
-                  showPrintMargin: false,
-                  useWorker: false
-                }"
-              />
-            </li>
-          </ul>
-        </pw-section>
 
         <section id="options">
-          <input id="tab-one" type="radio" name="options" checked="checked"/>
+          <input id="tab-one" type="radio" name="options" checked="checked" />
           <label for="tab-one">{{ $t("authentication") }}</label>
           <div class="tab">
             <pw-section
@@ -434,12 +376,12 @@
                       <i
                         class="material-icons"
                         v-if="passwordFieldType === 'text'"
-                      >visibility</i
+                        >visibility</i
                       >
                       <i
                         class="material-icons"
                         v-if="passwordFieldType !== 'text'"
-                      >visibility_off</i
+                        >visibility_off</i
                       >
                     </button>
                   </li>
@@ -603,7 +545,7 @@
               </ul>
             </pw-section>
           </div>
-          <input id="tab-two" type="radio" name="options"/>
+          <input id="tab-two" type="radio" name="options" />
           <label for="tab-two">{{ $t("headers") }}</label>
           <div class="tab">
             <pw-section class="orange" label="Headers" ref="headers">
@@ -685,7 +627,7 @@
               </ul>
             </pw-section>
           </div>
-          <input id="tab-three" type="radio" name="options"/>
+          <input id="tab-three" type="radio" name="options" />
           <label for="tab-three">{{ $t("parameters") }}</label>
           <div class="tab">
             <pw-section class="pink" label="Parameters" ref="parameters">
@@ -803,7 +745,7 @@
           <ul v-for="(value, key) in response.headers" :key="key">
             <li>
               <label :for="key">{{ key }}</label>
-              <input :id="key" :value="value" :name="key" readonly/>
+              <input :id="key" :value="value" :name="key" readonly />
             </li>
           </ul>
           <ul v-if="response.body">
@@ -888,12 +830,12 @@
       </div>
       <aside v-if="activeSidebar" class="sticky-inner inner-right">
         <section>
-          <input id="history-tab" type="radio" name="side" checked="checked"/>
+          <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">{{ $t("history") }}</label>
           <div class="tab">
-            <history @useHistory="handleUseHistory" ref="historyComponent"/>
+            <history @useHistory="handleUseHistory" ref="historyComponent" />
           </div>
-          <input id="collection-tab" type="radio" name="side"/>
+          <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
           <div class="tab">
             <pw-section
@@ -901,7 +843,27 @@
               :label="$t('collections')"
               ref="collections"
             >
-              <collections/>
+              <collections />
+            </pw-section>
+          </div>
+          <input id="sync-tab" type="radio" name="side" />
+          <label for="sync-tab">{{ $t("sync") }}</label>
+          <div class="tab">
+            <pw-section
+              v-if="fb.currentUser"
+              class="pink"
+              label="Sync"
+              ref="sync"
+            >
+              <inputform />
+              <ballsfeed />
+            </pw-section>
+            <pw-section v-else>
+              <ul>
+                <li>
+                  <label>{{ $t("login_first") }}</label>
+                </li>
+              </ul>
             </pw-section>
           </div>
         </section>
@@ -1058,7 +1020,7 @@
               />
             </li>
             <li>
-              <input :value="token.value" readonly/>
+              <input :value="token.value" readonly />
             </li>
             <div class="flex-wrap">
               <li>
@@ -1151,7 +1113,7 @@
           <ul>
             <li>
               <label for="token-req-name">{{ $t("token_req_name") }}</label>
-              <input v-model="tokenReqName"/>
+              <input v-model="tokenReqName" />
             </li>
           </ul>
           <ul>
@@ -1184,662 +1146,662 @@
 </template>
 
 <script>
-  import section from "../components/section";
-  import url from "url";
-  import querystring from "querystring";
-  import textareaAutoHeight from "../directives/textareaAutoHeight";
-  import parseCurlCommand from "../assets/js/curlparser.js";
-  import getEnvironmentVariablesFromScript from "../functions/preRequest";
-  import runTestScriptWitVariables from '../functions/postWomanTesting';
-  import parseTemplateString from "../functions/templating";
-  import AceEditor from "../components/ace-editor";
-  import {tokenRequest, oauthRedirect} from "../assets/js/oauth";
-  import {sendNetworkRequest} from "../functions/network";
+import section from "../components/section";
+import url from "url";
+import querystring from "querystring";
+import textareaAutoHeight from "../directives/textareaAutoHeight";
+import parseCurlCommand from "../assets/js/curlparser.js";
+import getEnvironmentVariablesFromScript from "../functions/preRequest";
+import parseTemplateString from "../functions/templating";
+import AceEditor from "../components/ace-editor";
+import { tokenRequest, oauthRedirect } from "../assets/js/oauth";
+import { sendNetworkRequest } from "../functions/network";
+import { fb } from "../functions/fb";
 
-  const statusCategories = [
-    {
-      name: "informational",
-      statusCodeRegex: new RegExp(/[1][0-9]+/),
-      className: "info-response"
-    },
-    {
-      name: "successful",
-      statusCodeRegex: new RegExp(/[2][0-9]+/),
-      className: "success-response"
-    },
-    {
-      name: "redirection",
-      statusCodeRegex: new RegExp(/[3][0-9]+/),
-      className: "redir-response"
-    },
-    {
-      name: "client error",
-      statusCodeRegex: new RegExp(/[4][0-9]+/),
-      className: "cl-error-response"
-    },
-    {
-      name: "server error",
-      statusCodeRegex: new RegExp(/[5][0-9]+/),
-      className: "sv-error-response"
-    },
-    {
-      // this object is a catch-all for when no other objects match and should always be last
-      name: "unknown",
-      statusCodeRegex: new RegExp(/.*/),
-      className: "missing-data-response"
-    }
-  ];
-  const parseHeaders = xhr => {
-    const headers = xhr
-      .getAllResponseHeaders()
-      .trim()
-      .split(/[\r\n]+/);
-    const headerMap = {};
-    headers.forEach(line => {
-      const parts = line.split(": ");
-      const header = parts.shift().toLowerCase();
-      const value = parts.join(": ");
-      headerMap[header] = value;
-    });
-    return headerMap;
-  };
-  export const findStatusGroup = responseStatus =>
-    statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
+const statusCategories = [
+  {
+    name: "informational",
+    statusCodeRegex: new RegExp(/[1][0-9]+/),
+    className: "info-response"
+  },
+  {
+    name: "successful",
+    statusCodeRegex: new RegExp(/[2][0-9]+/),
+    className: "success-response"
+  },
+  {
+    name: "redirection",
+    statusCodeRegex: new RegExp(/[3][0-9]+/),
+    className: "redir-response"
+  },
+  {
+    name: "client error",
+    statusCodeRegex: new RegExp(/[4][0-9]+/),
+    className: "cl-error-response"
+  },
+  {
+    name: "server error",
+    statusCodeRegex: new RegExp(/[5][0-9]+/),
+    className: "sv-error-response"
+  },
+  {
+    // this object is a catch-all for when no other objects match and should always be last
+    name: "unknown",
+    statusCodeRegex: new RegExp(/.*/),
+    className: "missing-data-response"
+  }
+];
+const parseHeaders = xhr => {
+  const headers = xhr
+    .getAllResponseHeaders()
+    .trim()
+    .split(/[\r\n]+/);
+  const headerMap = {};
+  headers.forEach(line => {
+    const parts = line.split(": ");
+    const header = parts.shift().toLowerCase();
+    const value = parts.join(": ");
+    headerMap[header] = value;
+  });
+  return headerMap;
+};
+export const findStatusGroup = responseStatus =>
+  statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
 
-  export default {
-    directives: {
-      textareaAutoHeight
-    },
+export default {
+  directives: {
+    textareaAutoHeight
+  },
 
-    components: {
-      "pw-section": section,
-      "pw-toggle": () => import("../components/toggle"),
-      "pw-modal": () => import("../components/modal"),
-      history: () => import("../components/history"),
-      autocomplete: () => import("../components/autocomplete"),
-      collections: () => import("../components/collections"),
-      saveRequestAs: () => import("../components/collections/saveRequestAs"),
-      Editor: AceEditor
-    },
-    data() {
-      return {
-        showModal: false,
-        showPreRequestScript: false,
-        testsEnabled: false,
-        preRequestScript: "// pw.env.set('variable', 'value');",
-        testScript: "// pw.expect('variable').toBe('value');",
-        copyButton: '<i class="material-icons">file_copy</i>',
-        downloadButton: '<i class="material-icons">get_app</i>',
-        doneButton: '<i class="material-icons">done</i>',
-        isHidden: true,
-        response: {
-          status: "",
-          headers: "",
-          body: ""
-        },
-        previewEnabled: false,
-        paramsWatchEnabled: true,
-        expandResponse: false,
-        showTokenList: false,
-        showTokenRequest: false,
-        showTokenRequestList: false,
-
-        /**
-         * These are content types that can be automatically
-         * serialized by postwoman.
-         */
-        knownContentTypes: [
-          "application/json",
-          "application/x-www-form-urlencoded"
-        ],
-
-        /**
-         * These are a list of Content Types known to Postwoman.
-         */
-        validContentTypes: [
-          "application/json",
-          "application/hal+json",
-          "application/xml",
-          "application/x-www-form-urlencoded",
-          "text/html",
-          "text/plain"
-        ],
-
-        commonHeaders: [
-          "WWW-Authenticate",
-          "Authorization",
-          "Proxy-Authenticate",
-          "Proxy-Authorization",
-          "Age",
-          "Cache-Control",
-          "Clear-Site-Data",
-          "Expires",
-          "Pragma",
-          "Warning",
-          "Accept-CH",
-          "Accept-CH-Lifetime",
-          "Early-Data",
-          "Content-DPR",
-          "DPR",
-          "Device-Memory",
-          "Save-Data",
-          "Viewport-Width",
-          "Width",
-          "Last-Modified",
-          "ETag",
-          "If-Match",
-          "If-None-Match",
-          "If-Modified-Since",
-          "If-Unmodified-Since",
-          "Vary",
-          "Connection",
-          "Keep-Alive",
-          "Accept",
-          "Accept-Charset",
-          "Accept-Encoding",
-          "Accept-Language",
-          "Expect",
-          "Max-Forwards",
-          "Cookie",
-          "Set-Cookie",
-          "Cookie2",
-          "Set-Cookie2",
-          "Access-Control-Allow-Origin",
-          "Access-Control-Allow-Credentials",
-          "Access-Control-Allow-Headers",
-          "Access-Control-Allow-Methods",
-          "Access-Control-Expose-Headers",
-          "Access-Control-Max-Age",
-          "Access-Control-Request-Headers",
-          "Access-Control-Request-Method",
-          "Origin",
-          "Service-Worker-Allowed",
-          "Timing-Allow-Origin",
-          "X-Permitted-Cross-Domain-Policies",
-          "DNT",
-          "Tk",
-          "Content-Disposition",
-          "Content-Length",
-          "Content-Type",
-          "Content-Encoding",
-          "Content-Language",
-          "Content-Location",
-          "Forwarded",
-          "X-Forwarded-For",
-          "X-Forwarded-Host",
-          "X-Forwarded-Proto",
-          "Via",
-          "Location",
-          "From",
-          "Host",
-          "Referer",
-          "Referrer-Policy",
-          "User-Agent",
-          "Allow",
-          "Server",
-          "Accept-Ranges",
-          "Range",
-          "If-Range",
-          "Content-Range",
-          "Cross-Origin-Opener-Policy",
-          "Cross-Origin-Resource-Policy",
-          "Content-Security-Policy",
-          "Content-Security-Policy-Report-Only",
-          "Expect-CT",
-          "Feature-Policy",
-          "Public-Key-Pins",
-          "Public-Key-Pins-Report-Only",
-          "Strict-Transport-Security",
-          "Upgrade-Insecure-Requests",
-          "X-Content-Type-Options",
-          "X-Download-Options",
-          "X-Frame-Options",
-          "X-Powered-By",
-          "X-XSS-Protection",
-          "Last-Event-ID",
-          "NEL",
-          "Ping-From",
-          "Ping-To",
-          "Report-To",
-          "Transfer-Encoding",
-          "TE",
-          "Trailer",
-          "Sec-WebSocket-Key",
-          "Sec-WebSocket-Extensions",
-          "Sec-WebSocket-Accept",
-          "Sec-WebSocket-Protocol",
-          "Sec-WebSocket-Version",
-          "Accept-Push-Policy",
-          "Accept-Signature",
-          "Alt-Svc",
-          "Date",
-          "Large-Allocation",
-          "Link",
-          "Push-Policy",
-          "Retry-After",
-          "Signature",
-          "Signed-Headers",
-          "Server-Timing",
-          "SourceMap",
-          "Upgrade",
-          "X-DNS-Prefetch-Control",
-          "X-Firefox-Spdy",
-          "X-Pingback",
-          "X-Requested-With",
-          "X-Robots-Tag",
-          "X-UA-Compatible"
-        ],
-        showRequestModal: false,
-        editRequest: {},
-
-        urlExcludes: {},
-        responseBodyText: "",
-        responseBodyType: "text",
-        responseBodyMaxLines: 16,
-        activeSidebar: true
-      };
-    },
-    watch: {
-      urlExcludes: {
-        deep: true,
-        handler() {
-          this.$store.commit("postwoman/applySetting", [
-            "URL_EXCLUDES",
-            Object.assign({}, this.urlExcludes)
-          ]);
-        }
+  components: {
+    "pw-section": section,
+    "pw-toggle": () => import("../components/toggle"),
+    "pw-modal": () => import("../components/modal"),
+    history: () => import("../components/history"),
+    autocomplete: () => import("../components/autocomplete"),
+    collections: () => import("../components/collections"),
+    saveRequestAs: () => import("../components/collections/saveRequestAs"),
+    Editor: AceEditor,
+    inputform: () => import("../components/firebase/inputform"),
+    ballsfeed: () => import("../components/firebase/feeds")
+  },
+  data() {
+    return {
+      showModal: false,
+      showPreRequestScript: false,
+      preRequestScript: "// pw.env.set('variable', 'value');",
+      copyButton: '<i class="material-icons">file_copy</i>',
+      downloadButton: '<i class="material-icons">get_app</i>',
+      doneButton: '<i class="material-icons">done</i>',
+      isHidden: true,
+      response: {
+        status: "",
+        headers: "",
+        body: ""
       },
-      contentType(val) {
-        this.rawInput = !this.knownContentTypes.includes(val);
-      },
-      rawInput(status) {
-        if (status && this.rawParams === "") this.rawParams = "{}";
-        else this.setRouteQueryState();
-      },
-      "response.body": function (val) {
-        if (
-          this.response.body === this.$t("waiting_send_req") ||
-          this.response.body === this.$t("loading")
-        ) {
-          this.responseBodyText = this.response.body;
-          this.responseBodyType = "text";
-        } else {
-          if (
-            this.responseType === "application/json" ||
-            this.responseType === "application/hal+json"
-          ) {
-            this.responseBodyText = JSON.stringify(this.response.body, null, 2);
-            this.responseBodyType = "json";
-          } else if (this.responseType === "text/html") {
-            this.responseBodyText = this.response.body;
-            this.responseBodyType = "html";
-          } else {
-            this.responseBodyText = this.response.body;
-            this.responseBodyType = "text";
-          }
-        }
-      },
-      params: {
-        handler: function (newValue) {
-          if (!this.paramsWatchEnabled) {
-            this.paramsWatchEnabled = true;
-            return;
-          }
-          let path = this.path;
-          let queryString = newValue
-            .filter(({key}) => !!key)
-            .map(({key, value}) => `${key}=${value}`)
-            .join("&");
-          queryString = queryString === "" ? "" : `?${queryString}`;
-          if (path.includes("?")) {
-            path = path.slice(0, path.indexOf("?")) + queryString;
-          } else {
-            path = path + queryString;
-          }
+      previewEnabled: false,
+      paramsWatchEnabled: true,
+      expandResponse: false,
+      showTokenList: false,
+      showTokenRequest: false,
+      showTokenRequestList: false,
 
-          this.path = path;
-        },
-        deep: true
-      },
-      selectedRequest(newValue, oldValue) {
-        // @TODO: Convert all variables to single request variable
-        if (!newValue) return;
-        this.url = newValue.url;
-        this.path = newValue.path;
-        this.method = newValue.method;
-        this.auth = newValue.auth;
-        this.httpUser = newValue.httpUser;
-        this.httpPassword = newValue.httpPassword;
-        this.passwordFieldType = newValue.passwordFieldType;
-        this.bearerToken = newValue.bearerToken;
-        this.headers = newValue.headers;
-        this.params = newValue.params;
-        this.bodyParams = newValue.bodyParams;
-        this.rawParams = newValue.rawParams;
-        this.rawInput = newValue.rawInput;
-        this.contentType = newValue.contentType;
-        this.requestType = newValue.requestType;
-      },
-      editingRequest(newValue) {
-        this.editRequest = newValue;
-        this.showRequestModal = true;
+      /**
+       * These are content types that can be automatically
+       * serialized by postwoman.
+       */
+      knownContentTypes: [
+        "application/json",
+        "application/x-www-form-urlencoded"
+      ],
+
+      /**
+       * These are a list of Content Types known to Postwoman.
+       */
+      validContentTypes: [
+        "application/json",
+        "application/hal+json",
+        "application/xml",
+        "application/x-www-form-urlencoded",
+        "text/html",
+        "text/plain"
+      ],
+
+      commonHeaders: [
+        "WWW-Authenticate",
+        "Authorization",
+        "Proxy-Authenticate",
+        "Proxy-Authorization",
+        "Age",
+        "Cache-Control",
+        "Clear-Site-Data",
+        "Expires",
+        "Pragma",
+        "Warning",
+        "Accept-CH",
+        "Accept-CH-Lifetime",
+        "Early-Data",
+        "Content-DPR",
+        "DPR",
+        "Device-Memory",
+        "Save-Data",
+        "Viewport-Width",
+        "Width",
+        "Last-Modified",
+        "ETag",
+        "If-Match",
+        "If-None-Match",
+        "If-Modified-Since",
+        "If-Unmodified-Since",
+        "Vary",
+        "Connection",
+        "Keep-Alive",
+        "Accept",
+        "Accept-Charset",
+        "Accept-Encoding",
+        "Accept-Language",
+        "Expect",
+        "Max-Forwards",
+        "Cookie",
+        "Set-Cookie",
+        "Cookie2",
+        "Set-Cookie2",
+        "Access-Control-Allow-Origin",
+        "Access-Control-Allow-Credentials",
+        "Access-Control-Allow-Headers",
+        "Access-Control-Allow-Methods",
+        "Access-Control-Expose-Headers",
+        "Access-Control-Max-Age",
+        "Access-Control-Request-Headers",
+        "Access-Control-Request-Method",
+        "Origin",
+        "Service-Worker-Allowed",
+        "Timing-Allow-Origin",
+        "X-Permitted-Cross-Domain-Policies",
+        "DNT",
+        "Tk",
+        "Content-Disposition",
+        "Content-Length",
+        "Content-Type",
+        "Content-Encoding",
+        "Content-Language",
+        "Content-Location",
+        "Forwarded",
+        "X-Forwarded-For",
+        "X-Forwarded-Host",
+        "X-Forwarded-Proto",
+        "Via",
+        "Location",
+        "From",
+        "Host",
+        "Referer",
+        "Referrer-Policy",
+        "User-Agent",
+        "Allow",
+        "Server",
+        "Accept-Ranges",
+        "Range",
+        "If-Range",
+        "Content-Range",
+        "Cross-Origin-Opener-Policy",
+        "Cross-Origin-Resource-Policy",
+        "Content-Security-Policy",
+        "Content-Security-Policy-Report-Only",
+        "Expect-CT",
+        "Feature-Policy",
+        "Public-Key-Pins",
+        "Public-Key-Pins-Report-Only",
+        "Strict-Transport-Security",
+        "Upgrade-Insecure-Requests",
+        "X-Content-Type-Options",
+        "X-Download-Options",
+        "X-Frame-Options",
+        "X-Powered-By",
+        "X-XSS-Protection",
+        "Last-Event-ID",
+        "NEL",
+        "Ping-From",
+        "Ping-To",
+        "Report-To",
+        "Transfer-Encoding",
+        "TE",
+        "Trailer",
+        "Sec-WebSocket-Key",
+        "Sec-WebSocket-Extensions",
+        "Sec-WebSocket-Accept",
+        "Sec-WebSocket-Protocol",
+        "Sec-WebSocket-Version",
+        "Accept-Push-Policy",
+        "Accept-Signature",
+        "Alt-Svc",
+        "Date",
+        "Large-Allocation",
+        "Link",
+        "Push-Policy",
+        "Retry-After",
+        "Signature",
+        "Signed-Headers",
+        "Server-Timing",
+        "SourceMap",
+        "Upgrade",
+        "X-DNS-Prefetch-Control",
+        "X-Firefox-Spdy",
+        "X-Pingback",
+        "X-Requested-With",
+        "X-Robots-Tag",
+        "X-UA-Compatible"
+      ],
+      showRequestModal: false,
+      editRequest: {},
+      urlExcludes: {},
+      responseBodyText: "",
+      responseBodyType: "text",
+      responseBodyMaxLines: 16,
+      activeSidebar: true,
+      fb
+    };
+  },
+  watch: {
+    urlExcludes: {
+      deep: true,
+      handler() {
+        this.$store.commit("postwoman/applySetting", [
+          "URL_EXCLUDES",
+          Object.assign({}, this.urlExcludes)
+        ]);
       }
     },
-    computed: {
-      url: {
-        get() {
-          return this.$store.state.request.url;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "url"});
+    contentType(val) {
+      this.rawInput = !this.knownContentTypes.includes(val);
+    },
+    rawInput(status) {
+      if (status && this.rawParams === "") this.rawParams = "{}";
+      else this.setRouteQueryState();
+    },
+    "response.body": function(val) {
+      if (
+        this.response.body === this.$t("waiting_send_req") ||
+        this.response.body === this.$t("loading")
+      ) {
+        this.responseBodyText = this.response.body;
+        this.responseBodyType = "text";
+      } else {
+        if (
+          this.responseType === "application/json" ||
+          this.responseType === "application/hal+json"
+        ) {
+          this.responseBodyText = JSON.stringify(this.response.body, null, 2);
+          this.responseBodyType = "json";
+        } else if (this.responseType === "text/html") {
+          this.responseBodyText = this.response.body;
+          this.responseBodyType = "html";
+        } else {
+          this.responseBodyText = this.response.body;
+          this.responseBodyType = "text";
         }
-      },
-      method: {
-        get() {
-          return this.$store.state.request.method;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "method"});
+      }
+    },
+    params: {
+      handler: function(newValue) {
+        if (!this.paramsWatchEnabled) {
+          this.paramsWatchEnabled = true;
+          return;
         }
-      },
-      path: {
-        get() {
-          return this.$store.state.request.path;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "path"});
+        let path = this.path;
+        let queryString = newValue
+          .filter(({ key }) => !!key)
+          .map(({ key, value }) => `${key}=${value}`)
+          .join("&");
+        queryString = queryString === "" ? "" : `?${queryString}`;
+        if (path.includes("?")) {
+          path = path.slice(0, path.indexOf("?")) + queryString;
+        } else {
+          path = path + queryString;
         }
-      },
-      label: {
-        get() {
-          return this.$store.state.request.label;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "label"});
-        }
-      },
-      auth: {
-        get() {
-          return this.$store.state.request.auth;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "auth"});
-        }
-      },
-      httpUser: {
-        get() {
-          return this.$store.state.request.httpUser;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "httpUser"});
-        }
-      },
-      httpPassword: {
-        get() {
-          return this.$store.state.request.httpPassword;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "httpPassword"});
-        }
-      },
-      bearerToken: {
-        get() {
-          return this.$store.state.request.bearerToken;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "bearerToken"});
-        }
-      },
-      tokens: {
-        get() {
-          return this.$store.state.oauth2.tokens;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "tokens"});
-        }
-      },
-      tokenReqs: {
-        get() {
-          return this.$store.state.oauth2.tokenReqs;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "tokenReqs"});
-        }
-      },
-      tokenReqSelect: {
-        get() {
-          return this.$store.state.oauth2.tokenReqSelect;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "tokenReqSelect"});
-        }
-      },
-      tokenReqName: {
-        get() {
-          return this.$store.state.oauth2.tokenReqName;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "tokenReqName"});
-        }
-      },
-      accessTokenName: {
-        get() {
-          return this.$store.state.oauth2.accessTokenName;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {
-            value,
-            attribute: "accessTokenName"
-          });
-        }
-      },
-      oidcDiscoveryUrl: {
-        get() {
-          return this.$store.state.oauth2.oidcDiscoveryUrl;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {
-            value,
-            attribute: "oidcDiscoveryUrl"
-          });
-        }
-      },
-      authUrl: {
-        get() {
-          return this.$store.state.oauth2.authUrl;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "authUrl"});
-        }
-      },
-      accessTokenUrl: {
-        get() {
-          return this.$store.state.oauth2.accessTokenUrl;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "accessTokenUrl"});
-        }
-      },
-      clientId: {
-        get() {
-          return this.$store.state.oauth2.clientId;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "clientId"});
-        }
-      },
-      scope: {
-        get() {
-          return this.$store.state.oauth2.scope;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "scope"});
-        }
-      },
-      state: {
-        get() {
-          return this.$store.state.oauth2.state;
-        },
-        set(value) {
-          this.$store.commit("setOAuth2", {value, attribute: "state"});
-        }
-      },
-      headers: {
-        get() {
-          return this.$store.state.request.headers;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "headers"});
-        }
-      },
-      params: {
-        get() {
-          return this.$store.state.request.params;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "params"});
-        }
-      },
-      bodyParams: {
-        get() {
-          return this.$store.state.request.bodyParams;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "bodyParams"});
-        }
-      },
-      rawParams: {
-        get() {
-          return this.$store.state.request.rawParams;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "rawParams"});
-        }
-      },
-      rawInput: {
-        get() {
-          return this.$store.state.request.rawInput;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "rawInput"});
-        }
-      },
-      requestType: {
-        get() {
-          return this.$store.state.request.requestType;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "requestType"});
-        }
-      },
-      contentType: {
-        get() {
-          return this.$store.state.request.contentType;
-        },
-        set(value) {
-          this.$store.commit("setState", {value, attribute: "contentType"});
-        }
-      },
-      passwordFieldType: {
-        get() {
-          return this.$store.state.request.passwordFieldType;
-        },
-        set(value) {
-          this.$store.commit("setState", {
-            value,
-            attribute: "passwordFieldType"
-          });
-        }
-      },
 
-      selectedRequest() {
-        return this.$store.state.postwoman.selectedRequest;
+        this.path = path;
       },
-      editingRequest() {
-        return this.$store.state.postwoman.editingRequest;
+      deep: true
+    },
+    selectedRequest(newValue, oldValue) {
+      // @TODO: Convert all variables to single request variable
+      if (!newValue) return;
+      this.url = newValue.url;
+      this.path = newValue.path;
+      this.method = newValue.method;
+      this.auth = newValue.auth;
+      this.httpUser = newValue.httpUser;
+      this.httpPassword = newValue.httpPassword;
+      this.passwordFieldType = newValue.passwordFieldType;
+      this.bearerToken = newValue.bearerToken;
+      this.headers = newValue.headers;
+      this.params = newValue.params;
+      this.bodyParams = newValue.bodyParams;
+      this.rawParams = newValue.rawParams;
+      this.rawInput = newValue.rawInput;
+      this.contentType = newValue.contentType;
+      this.requestType = newValue.requestType;
+    },
+    editingRequest(newValue) {
+      this.editRequest = newValue;
+      this.showRequestModal = true;
+    }
+  },
+  computed: {
+    url: {
+      get() {
+        return this.$store.state.request.url;
       },
-      requestName() {
-        return this.label;
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "url" });
+      }
+    },
+    method: {
+      get() {
+        return this.$store.state.request.method;
       },
-      statusCategory() {
-        return findStatusGroup(this.response.status);
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "method" });
+      }
+    },
+    path: {
+      get() {
+        return this.$store.state.request.path;
       },
-      isValidURL() {
-        if (this.showPreRequestScript) {
-          // we cannot determine if a URL is valid because the full string is not known ahead of time
-          return true;
-        }
-        const protocol = "^(https?:\\/\\/)?";
-        const validIP = new RegExp(
-          protocol +
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "path" });
+      }
+    },
+    label: {
+      get() {
+        return this.$store.state.request.label;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "label" });
+      }
+    },
+    auth: {
+      get() {
+        return this.$store.state.request.auth;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "auth" });
+      }
+    },
+    httpUser: {
+      get() {
+        return this.$store.state.request.httpUser;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "httpUser" });
+      }
+    },
+    httpPassword: {
+      get() {
+        return this.$store.state.request.httpPassword;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "httpPassword" });
+      }
+    },
+    bearerToken: {
+      get() {
+        return this.$store.state.request.bearerToken;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "bearerToken" });
+      }
+    },
+    tokens: {
+      get() {
+        return this.$store.state.oauth2.tokens;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "tokens" });
+      }
+    },
+    tokenReqs: {
+      get() {
+        return this.$store.state.oauth2.tokenReqs;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "tokenReqs" });
+      }
+    },
+    tokenReqSelect: {
+      get() {
+        return this.$store.state.oauth2.tokenReqSelect;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "tokenReqSelect" });
+      }
+    },
+    tokenReqName: {
+      get() {
+        return this.$store.state.oauth2.tokenReqName;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "tokenReqName" });
+      }
+    },
+    accessTokenName: {
+      get() {
+        return this.$store.state.oauth2.accessTokenName;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", {
+          value,
+          attribute: "accessTokenName"
+        });
+      }
+    },
+    oidcDiscoveryUrl: {
+      get() {
+        return this.$store.state.oauth2.oidcDiscoveryUrl;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", {
+          value,
+          attribute: "oidcDiscoveryUrl"
+        });
+      }
+    },
+    authUrl: {
+      get() {
+        return this.$store.state.oauth2.authUrl;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "authUrl" });
+      }
+    },
+    accessTokenUrl: {
+      get() {
+        return this.$store.state.oauth2.accessTokenUrl;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "accessTokenUrl" });
+      }
+    },
+    clientId: {
+      get() {
+        return this.$store.state.oauth2.clientId;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "clientId" });
+      }
+    },
+    scope: {
+      get() {
+        return this.$store.state.oauth2.scope;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "scope" });
+      }
+    },
+    state: {
+      get() {
+        return this.$store.state.oauth2.state;
+      },
+      set(value) {
+        this.$store.commit("setOAuth2", { value, attribute: "state" });
+      }
+    },
+    headers: {
+      get() {
+        return this.$store.state.request.headers;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "headers" });
+      }
+    },
+    params: {
+      get() {
+        return this.$store.state.request.params;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "params" });
+      }
+    },
+    bodyParams: {
+      get() {
+        return this.$store.state.request.bodyParams;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "bodyParams" });
+      }
+    },
+    rawParams: {
+      get() {
+        return this.$store.state.request.rawParams;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "rawParams" });
+      }
+    },
+    rawInput: {
+      get() {
+        return this.$store.state.request.rawInput;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "rawInput" });
+      }
+    },
+    requestType: {
+      get() {
+        return this.$store.state.request.requestType;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "requestType" });
+      }
+    },
+    contentType: {
+      get() {
+        return this.$store.state.request.contentType;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "contentType" });
+      }
+    },
+    passwordFieldType: {
+      get() {
+        return this.$store.state.request.passwordFieldType;
+      },
+      set(value) {
+        this.$store.commit("setState", {
+          value,
+          attribute: "passwordFieldType"
+        });
+      }
+    },
+
+    selectedRequest() {
+      return this.$store.state.postwoman.selectedRequest;
+    },
+    editingRequest() {
+      return this.$store.state.postwoman.editingRequest;
+    },
+    requestName() {
+      return this.label;
+    },
+    statusCategory() {
+      return findStatusGroup(this.response.status);
+    },
+    isValidURL() {
+      if (this.showPreRequestScript) {
+        // we cannot determine if a URL is valid because the full string is not known ahead of time
+        return true;
+      }
+      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])$"
-        );
-        const validHostname = new RegExp(
-          protocol +
+      );
+      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);
-      },
-      pathName() {
-        return this.path.match(/^([^?]*)\??/)[1];
-      },
-      rawRequestBody() {
-        const {bodyParams} = this;
-        if (this.contentType === "application/json") {
-          try {
-            const obj = JSON.parse(
-              `{${bodyParams
-                .filter(({key}) => !!key)
-                .map(
-                  ({key, value}) => `
+      );
+      return validIP.test(this.url) || validHostname.test(this.url);
+    },
+    hasRequestBody() {
+      return ["POST", "PUT", "PATCH"].includes(this.method);
+    },
+    pathName() {
+      return this.path.match(/^([^?]*)\??/)[1];
+    },
+    rawRequestBody() {
+      const { bodyParams } = this;
+      if (this.contentType === "application/json") {
+        try {
+          const obj = JSON.parse(
+            `{${bodyParams
+              .filter(({ key }) => !!key)
+              .map(
+                ({ key, value }) => `
               "${key}": "${value}"
               `
-                )
-                .join()}}`
-            );
-            return JSON.stringify(obj);
-          } catch (ex) {
-            return "invalid";
-          }
-        } else {
-          return bodyParams
-            .filter(({key}) => !!key)
-            .map(({key, value}) => `${key}=${encodeURIComponent(value)}`)
-            .join("&");
+              )
+              .join()}}`
+          );
+          return JSON.stringify(obj);
+        } catch (ex) {
+          return "invalid";
         }
-      },
-      headerString() {
-        const result = this.headers
-          .filter(({key}) => !!key)
-          .map(({key, value}) => `${key}: ${value}`)
-          .join(",\n");
-        return result === "" ? "" : `${result}`;
-      },
-      queryString() {
-        const result = this.params
-          .filter(({key}) => !!key)
-          .map(({key, value}) => `${key}=${encodeURIComponent(value)}`)
+      } else {
+        return bodyParams
+          .filter(({ key }) => !!key)
+          .map(({ key, value }) => `${key}=${encodeURIComponent(value)}`)
           .join("&");
-        return result === "" ? "" : `?${result}`;
-      },
-      responseType() {
-        return (this.response.headers["content-type"] || "")
-          .split(";")[0]
-          .toLowerCase();
-      },
-      requestCode() {
-        if (this.requestType === "JavaScript XHR") {
-          const requestString = [];
-          requestString.push("const xhr = new XMLHttpRequest()");
-          const user =
-            this.auth === "Basic Auth" ? "'" + this.httpUser + "'" : null;
-          const pswd =
-            this.auth === "Basic Auth" ? "'" + this.httpPassword + "'" : null;
-          requestString.push(
-            "xhr.open('" +
+      }
+    },
+    headerString() {
+      const result = this.headers
+        .filter(({ key }) => !!key)
+        .map(({ key, value }) => `${key}: ${value}`)
+        .join(",\n");
+      return result === "" ? "" : `${result}`;
+    },
+    queryString() {
+      const result = this.params
+        .filter(({ key }) => !!key)
+        .map(({ key, value }) => `${key}=${encodeURIComponent(value)}`)
+        .join("&");
+      return result === "" ? "" : `?${result}`;
+    },
+    responseType() {
+      return (this.response.headers["content-type"] || "")
+        .split(";")[0]
+        .toLowerCase();
+    },
+    requestCode() {
+      if (this.requestType === "JavaScript XHR") {
+        const requestString = [];
+        requestString.push("const xhr = new XMLHttpRequest()");
+        const user =
+          this.auth === "Basic Auth" ? "'" + this.httpUser + "'" : null;
+        const pswd =
+          this.auth === "Basic Auth" ? "'" + this.httpPassword + "'" : null;
+        requestString.push(
+          "xhr.open('" +
             this.method +
             "', '" +
             this.url +
@@ -1850,986 +1812,986 @@
             ", " +
             pswd +
             ")"
-          );
-          if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0") {
-            requestString.push(
-              "xhr.setRequestHeader('Authorization', 'Bearer " +
+        );
+        if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0") {
+          requestString.push(
+            "xhr.setRequestHeader('Authorization', 'Bearer " +
               this.bearerToken +
               "')"
-            );
-          }
-          if (this.headers) {
-            this.headers.forEach(element => {
-              requestString.push(
-                "xhr.setRequestHeader('" +
+          );
+        }
+        if (this.headers) {
+          this.headers.forEach(element => {
+            requestString.push(
+              "xhr.setRequestHeader('" +
                 element.key +
                 "', '" +
                 element.value +
                 "')"
-              );
-            });
-          }
-          if (["POST", "PUT", "PATCH"].includes(this.method)) {
-            const requestBody = this.rawInput
-              ? this.rawParams
-              : this.rawRequestBody;
-            requestString.push(
-              "xhr.setRequestHeader('Content-Length', " + requestBody.length + ")"
             );
-            requestString.push(
-              "xhr.setRequestHeader('Content-Type', '" +
+          });
+        }
+        if (["POST", "PUT", "PATCH"].includes(this.method)) {
+          const requestBody = this.rawInput
+            ? this.rawParams
+            : this.rawRequestBody;
+          requestString.push(
+            "xhr.setRequestHeader('Content-Length', " + requestBody.length + ")"
+          );
+          requestString.push(
+            "xhr.setRequestHeader('Content-Type', '" +
               this.contentType +
               "; charset=utf-8')"
-            );
-            requestString.push("xhr.send(" + requestBody + ")");
-          } else {
-            requestString.push("xhr.send()");
-          }
-          return requestString.join("\n");
-        } else if (this.requestType === "Fetch") {
-          const requestString = [];
-          let headers = [];
-          requestString.push(
-            'fetch("' + this.url + this.pathName + this.queryString + '", {\n'
           );
-          requestString.push('  method: "' + this.method + '",\n');
-          if (this.auth === "Basic Auth") {
-            const basic = this.httpUser + ":" + this.httpPassword;
-            headers.push(
-              '    "Authorization": "Basic ' +
+          requestString.push("xhr.send(" + requestBody + ")");
+        } else {
+          requestString.push("xhr.send()");
+        }
+        return requestString.join("\n");
+      } else if (this.requestType === "Fetch") {
+        const requestString = [];
+        let headers = [];
+        requestString.push(
+          'fetch("' + this.url + this.pathName + this.queryString + '", {\n'
+        );
+        requestString.push('  method: "' + this.method + '",\n');
+        if (this.auth === "Basic Auth") {
+          const basic = this.httpUser + ":" + this.httpPassword;
+          headers.push(
+            '    "Authorization": "Basic ' +
               window.btoa(unescape(encodeURIComponent(basic))) +
               '",\n'
-            );
-          } else if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0") {
-            headers.push(
-              '    "Authorization": "Bearer ' + this.bearerToken + '",\n'
-            );
-          }
-          if (["POST", "PUT", "PATCH"].includes(this.method)) {
-            const requestBody = this.rawInput
-              ? this.rawParams
-              : this.rawRequestBody;
-            requestString.push("  body: " + requestBody + ",\n");
-            headers.push('    "Content-Length": ' + requestBody.length + ",\n");
-            headers.push(
-              '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n'
-            );
-          }
-          if (this.headers) {
-            this.headers.forEach(element => {
-              headers.push(
-                '    "' + element.key + '": "' + element.value + '",\n'
-              );
-            });
-          }
-          headers = headers.join("").slice(0, -2);
-          requestString.push("  headers: {\n" + headers + "\n  },\n");
-          requestString.push('  credentials: "same-origin"\n');
-          requestString.push("}).then(function(response) {\n");
-          requestString.push("  response.status\n");
-          requestString.push("  response.statusText\n");
-          requestString.push("  response.headers\n");
-          requestString.push("  response.url\n\n");
-          requestString.push("  return response.text()\n");
-          requestString.push("}).catch(function(error) {\n");
-          requestString.push("  error.message\n");
-          requestString.push("})");
-          return requestString.join("");
-        } else if (this.requestType === "cURL") {
-          const requestString = [];
-          requestString.push("curl -X " + this.method + " \n");
-          requestString.push(
-            "  '" + this.url + this.pathName + this.queryString + "' \n"
           );
-          if (this.auth === "Basic Auth") {
-            const basic = this.httpUser + ":" + this.httpPassword;
-            requestString.push(
-              "  -H 'Authorization: Basic " +
+        } else if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0") {
+          headers.push(
+            '    "Authorization": "Bearer ' + this.bearerToken + '",\n'
+          );
+        }
+        if (["POST", "PUT", "PATCH"].includes(this.method)) {
+          const requestBody = this.rawInput
+            ? this.rawParams
+            : this.rawRequestBody;
+          requestString.push("  body: " + requestBody + ",\n");
+          headers.push('    "Content-Length": ' + requestBody.length + ",\n");
+          headers.push(
+            '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n'
+          );
+        }
+        if (this.headers) {
+          this.headers.forEach(element => {
+            headers.push(
+              '    "' + element.key + '": "' + element.value + '",\n'
+            );
+          });
+        }
+        headers = headers.join("").slice(0, -2);
+        requestString.push("  headers: {\n" + headers + "\n  },\n");
+        requestString.push('  credentials: "same-origin"\n');
+        requestString.push("}).then(function(response) {\n");
+        requestString.push("  response.status\n");
+        requestString.push("  response.statusText\n");
+        requestString.push("  response.headers\n");
+        requestString.push("  response.url\n\n");
+        requestString.push("  return response.text()\n");
+        requestString.push("}).catch(function(error) {\n");
+        requestString.push("  error.message\n");
+        requestString.push("})");
+        return requestString.join("");
+      } else if (this.requestType === "cURL") {
+        const requestString = [];
+        requestString.push("curl -X " + this.method + " \n");
+        requestString.push(
+          "  '" + this.url + this.pathName + this.queryString + "' \n"
+        );
+        if (this.auth === "Basic Auth") {
+          const basic = this.httpUser + ":" + this.httpPassword;
+          requestString.push(
+            "  -H 'Authorization: Basic " +
               window.btoa(unescape(encodeURIComponent(basic))) +
               "' \n"
-            );
-          } else if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0") {
-            requestString.push(
-              "  -H 'Authorization: Bearer " + this.bearerToken + "' \n"
-            );
-          }
-          if (this.headers) {
-            this.headers.forEach(element => {
-              requestString.push(
-                "  -H '" + element.key + ": " + element.value + "' \n"
-              );
-            });
-          }
-          if (["POST", "PUT", "PATCH"].includes(this.method)) {
-            const requestBody = this.rawInput
-              ? this.rawParams
-              : this.rawRequestBody;
-            requestString.push(
-              "  -H 'Content-Length: " + requestBody.length + "' \n"
-            );
-            requestString.push(
-              "  -H 'Content-Type: " + this.contentType + "; charset=utf-8' \n"
-            );
-            requestString.push("  -d '" + requestBody + "' \n");
-          }
-          return requestString.join("").slice(0, -2);
+          );
+        } else if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0") {
+          requestString.push(
+            "  -H 'Authorization: Bearer " + this.bearerToken + "' \n"
+          );
         }
-      },
-      tokenReqDetails() {
-        const details = {
-          oidcDiscoveryUrl: this.oidcDiscoveryUrl,
-          authUrl: this.authUrl,
-          accessTokenUrl: this.accessTokenUrl,
-          clientId: this.clientId,
-          scope: this.scope
-        };
-        return JSON.stringify(details, null, 2);
+        if (this.headers) {
+          this.headers.forEach(element => {
+            requestString.push(
+              "  -H '" + element.key + ": " + element.value + "' \n"
+            );
+          });
+        }
+        if (["POST", "PUT", "PATCH"].includes(this.method)) {
+          const requestBody = this.rawInput
+            ? this.rawParams
+            : this.rawRequestBody;
+          requestString.push(
+            "  -H 'Content-Length: " + requestBody.length + "' \n"
+          );
+          requestString.push(
+            "  -H 'Content-Type: " + this.contentType + "; charset=utf-8' \n"
+          );
+          requestString.push("  -d '" + requestBody + "' \n");
+        }
+        return requestString.join("").slice(0, -2);
       }
     },
-    methods: {
-      checkCollections() {
-        const checkCollectionAvailability =
-          this.$store.state.postwoman.collections &&
-          this.$store.state.postwoman.collections.length > 0;
-        return checkCollectionAvailability;
-      },
-      scrollInto(view) {
-        this.$refs[view].$el.scrollIntoView({
-          behavior: "smooth"
+    tokenReqDetails() {
+      const details = {
+        oidcDiscoveryUrl: this.oidcDiscoveryUrl,
+        authUrl: this.authUrl,
+        accessTokenUrl: this.accessTokenUrl,
+        clientId: this.clientId,
+        scope: this.scope
+      };
+      return JSON.stringify(details, null, 2);
+    }
+  },
+  methods: {
+    checkCollections() {
+      const checkCollectionAvailability =
+        this.$store.state.postwoman.collections &&
+        this.$store.state.postwoman.collections.length > 0;
+      return checkCollectionAvailability;
+    },
+    scrollInto(view) {
+      this.$refs[view].$el.scrollIntoView({
+        behavior: "smooth"
+      });
+    },
+    handleUseHistory({
+      label,
+      method,
+      url,
+      path,
+      usesScripts,
+      preRequestScript
+    }) {
+      this.label = label;
+      this.method = method;
+      this.url = url;
+      this.path = path;
+      this.showPreRequestScript = usesScripts;
+      this.preRequestScript = preRequestScript;
+      this.scrollInto("request");
+    },
+    getVariablesFromPreRequestScript() {
+      if (!this.preRequestScript) {
+        return {};
+      }
+      return getEnvironmentVariablesFromScript(this.preRequestScript);
+    },
+    async makeRequest(auth, headers, requestBody, preRequestScript) {
+      const requestOptions = {
+        method: this.method,
+        url: this.url + this.pathName + this.queryString,
+        auth,
+        headers,
+        data: requestBody ? requestBody.toString() : null,
+        credentials: true
+      };
+      if (preRequestScript) {
+        const environmentVariables = getEnvironmentVariablesFromScript(
+          preRequestScript
+        );
+        requestOptions.url = parseTemplateString(
+          requestOptions.url,
+          environmentVariables
+        );
+        requestOptions.data = parseTemplateString(
+          requestOptions.data,
+          environmentVariables
+        );
+        for (let k in requestOptions.headers) {
+          const kParsed = parseTemplateString(k, environmentVariables);
+          const valParsed = parseTemplateString(
+            requestOptions.headers[k],
+            environmentVariables
+          );
+          delete requestOptions.headers[k];
+          requestOptions.headers[kParsed] = valParsed;
+        }
+      }
+      if (typeof requestOptions.data === "string") {
+        requestOptions.data = parseTemplateString(requestOptions.data);
+      }
+
+      return await sendNetworkRequest(requestOptions, this.$store);
+    },
+    async sendRequest() {
+      this.$toast.clear();
+      this.scrollInto("response");
+
+      if (!this.isValidURL) {
+        this.$toast.error(this.$t("url_invalid_format"), {
+          icon: "error"
         });
-      },
-      handleUseHistory({
-                         label,
-                         method,
-                         url,
-                         path,
-                         usesScripts,
-                         preRequestScript
-                       }) {
-        this.label = label;
-        this.method = method;
-        this.url = url;
-        this.path = path;
-        this.showPreRequestScript = usesScripts;
-        this.preRequestScript = preRequestScript;
-        this.scrollInto("request");
-      },
-      getVariablesFromPreRequestScript() {
-        if (!this.preRequestScript) {
-          return {};
-        }
-        return getEnvironmentVariablesFromScript(this.preRequestScript);
-      },
-      async makeRequest(auth, headers, requestBody, preRequestScript) {
-        const requestOptions = {
-          method: this.method,
-          url: this.url + this.pathName + this.queryString,
-          auth,
-          headers,
-          data: requestBody ? requestBody.toString() : null,
-          credentials: true
-        };
-        if (preRequestScript) {
-          const environmentVariables = getEnvironmentVariablesFromScript(
-            preRequestScript
-          );
-          requestOptions.url = parseTemplateString(
-            requestOptions.url,
-            environmentVariables
-          );
-          requestOptions.data = parseTemplateString(
-            requestOptions.data,
-            environmentVariables
-          );
-          for (let k in requestOptions.headers) {
-            const kParsed = parseTemplateString(k, environmentVariables);
-            const valParsed = parseTemplateString(
-              requestOptions.headers[k],
-              environmentVariables
-            );
-            delete requestOptions.headers[k];
-            requestOptions.headers[kParsed] = valParsed;
-          }
-        }
-        if (typeof requestOptions.data === "string") {
-          requestOptions.data = parseTemplateString(requestOptions.data);
-        }
+        return;
+      }
 
-        return await sendNetworkRequest(requestOptions, this.$store);
-      },
-      async sendRequest() {
-        this.$toast.clear();
-        this.scrollInto("response");
+      // Start showing the loading bar as soon as possible.
+      // The nuxt axios module will hide it when the request is made.
+      this.$nuxt.$loading.start();
 
-        if (!this.isValidURL) {
-          this.$toast.error(this.$t("url_invalid_format"), {
-            icon: "error"
-          });
-          return;
-        }
+      if (this.$refs.response.$el.classList.contains("hidden")) {
+        this.$refs.response.$el.classList.toggle("hidden");
+      }
+      this.previewEnabled = false;
+      this.response.status = this.$t("fetching");
+      this.response.body = this.$t("loading");
 
-        // Start showing the loading bar as soon as possible.
-        // The nuxt axios module will hide it when the request is made.
-        this.$nuxt.$loading.start();
-
-        if (this.$refs.response.$el.classList.contains("hidden")) {
-          this.$refs.response.$el.classList.toggle("hidden");
-        }
-        this.previewEnabled = false;
-        this.response.status = this.$t("fetching");
-        this.response.body = this.$t("loading");
-
-        const auth =
-          this.auth === "Basic Auth"
-            ? {
+      const auth =
+        this.auth === "Basic Auth"
+          ? {
               username: this.httpUser,
               password: this.httpPassword
             }
-            : null;
+          : null;
 
-        let headers = {};
-        let headersObject = {};
+      let headers = {};
+      let headersObject = {};
 
-        Object.keys(headers).forEach(id => {
-          headersObject[headers[id].key] = headers[id].value;
+      Object.keys(headers).forEach(id => {
+        headersObject[headers[id].key] = headers[id].value;
+      });
+      headers = headersObject;
+
+      // If the request has a body, we want to ensure Content-Length and
+      // Content-Type are sent.
+      let requestBody;
+      if (this.hasRequestBody) {
+        requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
+
+        Object.assign(headers, {
+          //'Content-Length': requestBody.length,
+          "Content-Type": `${this.contentType}; charset=utf-8`
         });
-        headers = headersObject;
+      }
 
-        // If the request has a body, we want to ensure Content-Length and
-        // Content-Type are sent.
-        let requestBody;
-        if (this.hasRequestBody) {
-          requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
+      // If the request uses a token for auth, we want to make sure it's sent here.
+      if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0")
+        headers["Authorization"] = `Bearer ${this.bearerToken}`;
 
-          Object.assign(headers, {
-            //'Content-Length': requestBody.length,
-            "Content-Type": `${this.contentType}; charset=utf-8`
-          });
-        }
+      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)
 
-        // If the request uses a token for auth, we want to make sure it's sent here.
-        if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0")
-          headers["Authorization"] = `Bearer ${this.bearerToken}`;
+        // We make our temporary headers object the source so
+        // that you can override the added headers if you
+        // specify them.
+        // headers
+      );
 
-        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)
+      Object.keys(headers).forEach(id => {
+        headersObject[headers[id].key] = headers[id].value;
+      });
+      headers = headersObject;
 
-          // We make our temporary headers object the source so
-          // that you can override the added headers if you
-          // specify them.
-          // headers
+      try {
+        const startTime = Date.now();
+
+        const payload = await this.makeRequest(
+          auth,
+          headers,
+          requestBody,
+          this.showPreRequestScript && this.preRequestScript
         );
 
-        Object.keys(headers).forEach(id => {
-          headersObject[headers[id].key] = headers[id].value;
+        const duration = Date.now() - startTime;
+        this.$toast.info(this.$t("finished_in", { duration }), {
+          icon: "done"
         });
-        headers = headersObject;
 
-        try {
-          const startTime = Date.now();
+        (() => {
+          const status = (this.response.status = payload.status);
+          const headers = (this.response.headers = payload.headers);
 
-          const payload = await this.makeRequest(
-            auth,
-            headers,
-            requestBody,
-            this.showPreRequestScript && this.preRequestScript
-          );
+          // We don't need to bother parsing JSON, axios already handles it for us!
+          const body = (this.response.body = payload.data);
 
-          const duration = Date.now() - startTime;
-          this.$toast.info(this.$t("finished_in", {duration}), {
-            icon: "done"
-          });
-          // tests
-          (() => {
-            const status = (this.response.status = payload.status);
-            const headers = (this.response.headers = payload.headers);
+          const date = new Date().toLocaleDateString();
+          const time = new Date().toLocaleTimeString();
 
-            // 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();
-
-            // Addition of an entry to the history component.
-            const entry = {
-              label: this.requestName,
-              status,
-              date,
-              time,
-              method: this.method,
-              url: this.url,
-              path: this.path,
-              usesScripts: Boolean(this.preRequestScript),
-              preRequestScript: this.preRequestScript,
-              duration,
-              star: false
-            };
-            this.$refs.historyComponent.addEntry(entry);
-          })();
-
-          const syntheticResponse = {
-            status: this.response.status,
-            body: this.response.body,
-            headers: this.response.headers
+          // Addition of an entry to the history component.
+          const entry = {
+            label: this.requestName,
+            status,
+            date,
+            time,
+            method: this.method,
+            url: this.url,
+            path: this.path,
+            usesScripts: Boolean(this.preRequestScript),
+            preRequestScript: this.preRequestScript,
+            duration,
+            star: false
           };
-          const testResults = runTestScriptWitVariables(this.testScript, {response: syntheticResponse});
-
-        } catch (error) {
-          console.error(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 = {
-              label: this.requestName,
-              status: this.response.status,
-              date: new Date().toLocaleDateString(),
-              time: new Date().toLocaleTimeString(),
-              method: this.method,
-              url: this.url,
-              path: this.path,
-              usesScripts: Boolean(this.preRequestScript),
-              preRequestScript: this.preRequestScript,
-              testCode: this.testCode
-            };
-            this.$refs.historyComponent.addEntry(entry);
-            return;
-          } else {
-            this.response.status = error.message;
-            this.response.body = `${error}. ${this.$t("check_console_details")}`;
-            this.$toast.error(`${error} ${this.$t("f12_details")}`, {
-              icon: "error"
-            });
-            if (!this.$store.state.postwoman.settings.PROXY_ENABLED) {
-              this.$toast.info(this.$t("enable_proxy"), {
-                icon: "help",
-                duration: 8000,
-                action: {
-                  text: "Settings",
-                  onClick: (e, toastObject) => {
-                    this.$router.push({path: "/settings"});
-                  }
-                }
-              });
+          this.$refs.historyComponent.addEntry(entry);
+          if (fb.currentUser !== null) {
+            if (fb.currentSettings[1].value) {
+              fb.writeHistory(entry);
             }
           }
-        }
-      },
-      getQueryStringFromPath() {
-        let queryString,
-          pathParsed = url.parse(this.path);
-        return (queryString = pathParsed.query ? pathParsed.query : "");
-      },
-      queryStringToArray(queryString) {
-        let queryParsed = querystring.parse(queryString);
-        return Object.keys(queryParsed).map(key => ({
-          key: key,
-          value: queryParsed[key]
-        }));
-      },
-      pathInputHandler() {
-        let queryString = this.getQueryStringFromPath(),
-          params = this.queryStringToArray(queryString);
+        })();
+      } catch (error) {
+        console.error(error);
+        if (error.response) {
+          this.response.headers = error.response.headers;
+          this.response.status = error.response.status;
+          this.response.body = error.response.data;
 
-        this.paramsWatchEnabled = false;
-        this.params = params;
-      },
-      addRequestHeader() {
-        this.$store.commit("addHeaders", {
-          key: "",
-          value: ""
-        });
-        return false;
-      },
-      removeRequestHeader(index) {
-        // .slice() gives us an entirely new array rather than giving us just the reference
-        const oldHeaders = this.headers.slice();
-
-        this.$store.commit("removeHeaders", index);
-        this.$toast.error(this.$t("deleted"), {
-          icon: "delete",
-          action: {
-            text: this.$t("undo"),
-            onClick: (e, toastObject) => {
-              this.headers = oldHeaders;
-              toastObject.remove();
+          // Addition of an entry to the history component.
+          const entry = {
+            label: this.requestName,
+            status: this.response.status,
+            date: new Date().toLocaleDateString(),
+            time: new Date().toLocaleTimeString(),
+            method: this.method,
+            url: this.url,
+            path: this.path,
+            usesScripts: Boolean(this.preRequestScript),
+            preRequestScript: this.preRequestScript
+          };
+          this.$refs.historyComponent.addEntry(entry);
+          if (fb.currentUser !== null) {
+            if (fb.currentSettings[1].value) {
+              fb.writeHistory(entry);
             }
           }
-        });
-      },
-      addRequestParam() {
-        this.$store.commit("addParams", {key: "", value: ""});
-        return false;
-      },
-      removeRequestParam(index) {
-        // .slice() gives us an entirely new array rather than giving us just the reference
-        const oldParams = this.params.slice();
-
-        this.$store.commit("removeParams", index);
-        this.$toast.error(this.$t("deleted"), {
-          icon: "delete",
-          action: {
-            text: this.$t("undo"),
-            onClick: (e, toastObject) => {
-              this.params = oldParams;
-              toastObject.remove();
-            }
-          }
-        });
-      },
-      addRequestBodyParam() {
-        this.$store.commit("addBodyParams", {key: "", value: ""});
-        return false;
-      },
-      removeRequestBodyParam(index) {
-        // .slice() gives us an entirely new array rather than giving us just the reference
-        const oldBodyParams = this.bodyParams.slice();
-
-        this.$store.commit("removeBodyParams", index);
-        this.$toast.error(this.$t("deleted"), {
-          icon: "delete",
-          action: {
-            text: this.$t("undo"),
-            onClick: (e, toastObject) => {
-              this.bodyParams = oldBodyParams;
-              toastObject.remove();
-            }
-          }
-        });
-      },
-      copyRequest() {
-        if (navigator.share) {
-          let time = new Date().toLocaleTimeString();
-          let date = new Date().toLocaleDateString();
-          navigator
-            .share({
-              title: `Postwoman`,
-              text: `Postwoman • API request builder at ${time} on ${date}`,
-              url: window.location.href
-            })
-            .then(() => {
-            })
-            .catch(console.error);
+          return;
         } else {
-          const dummy = document.createElement("input");
-          document.body.appendChild(dummy);
-          dummy.value = window.location.href;
-          dummy.select();
-          document.execCommand("copy");
-          document.body.removeChild(dummy);
-          this.$refs.copyRequest.innerHTML = this.doneButton;
-          this.$toast.info(this.$t("copied_to_clipboard"), {
-            icon: "done"
+          this.response.status = error.message;
+          this.response.body = `${error}. ${this.$t("check_console_details")}`;
+          this.$toast.error(`${error} ${this.$t("f12_details")}`, {
+            icon: "error"
           });
-          setTimeout(
-            () => (this.$refs.copyRequest.innerHTML = this.copyButton),
-            1000
-          );
-        }
-      },
-      copyRequestCode() {
-        this.$refs.copyRequestCode.innerHTML = this.doneButton;
-        this.$toast.success(this.$t("copied_to_clipboard"), {
-          icon: "done"
-        });
-        this.$refs.generatedCode.select();
-        document.execCommand("copy");
-        setTimeout(
-          () => (this.$refs.copyRequestCode.innerHTML = this.copyButton),
-          1000
-        );
-      },
-      ToggleExpandResponse() {
-        this.expandResponse = !this.expandResponse;
-        this.responseBodyMaxLines =
-          this.responseBodyMaxLines == Infinity ? 16 : Infinity;
-      },
-      copyResponse() {
-        this.$refs.copyResponse.innerHTML = this.doneButton;
-        this.$toast.success(this.$t("copied_to_clipboard"), {
-          icon: "done"
-        });
-        const aux = document.createElement("textarea");
-        const copy =
-          this.responseType === "application/json"
-            ? JSON.stringify(this.response.body)
-            : this.response.body;
-        aux.innerText = copy;
-        document.body.appendChild(aux);
-        aux.select();
-        document.execCommand("copy");
-        document.body.removeChild(aux);
-        setTimeout(
-          () => (this.$refs.copyResponse.innerHTML = this.copyButton),
-          1000
-        );
-      },
-      downloadResponse() {
-        const dataToWrite = JSON.stringify(this.response.body, null, 2);
-        const file = new Blob([dataToWrite], {type: this.responseType});
-        const a = document.createElement("a"),
-          url = URL.createObjectURL(file);
-        a.href = url;
-        a.download = (
-          this.url +
-          this.path +
-          " [" +
-          this.method +
-          "] on " +
-          Date()
-        ).replace(/\./g, "[dot]");
-        document.body.appendChild(a);
-        a.click();
-        this.$refs.downloadResponse.innerHTML = this.doneButton;
-        this.$toast.success(this.$t("download_started"), {
-          icon: "done"
-        });
-        setTimeout(() => {
-          document.body.removeChild(a);
-          window.URL.revokeObjectURL(url);
-          this.$refs.downloadResponse.innerHTML = this.downloadButton;
-        }, 1000);
-      },
-      togglePreview() {
-        this.previewEnabled = !this.previewEnabled;
-        if (this.previewEnabled) {
-          // If you want to add 'preview' support for other response types,
-          // just add them here.
-          if (this.responseType === "text/html") {
-            // If the preview already has that URL loaded, let's not bother re-loading it all.
-            if (
-              this.$refs.previewFrame.getAttribute("data-previewing-url") ===
-              this.url
-            )
-              return;
-            // Use DOMParser to parse document HTML.
-            const previewDocument = new DOMParser().parseFromString(
-              this.response.body,
-              this.responseType
-            );
-            // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
-            previewDocument.head.innerHTML =
-              `<base href="${this.url}">` + previewDocument.head.innerHTML;
-            // Finally, set the iframe source to the resulting HTML.
-            this.$refs.previewFrame.srcdoc =
-              previewDocument.documentElement.outerHTML;
-            this.$refs.previewFrame.setAttribute("data-previewing-url", this.url);
+          if (!this.$store.state.postwoman.settings.PROXY_ENABLED) {
+            this.$toast.info(this.$t("enable_proxy"), {
+              icon: "help",
+              duration: 8000,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  this.$router.push({ path: "/settings" });
+                }
+              }
+            });
           }
         }
-      },
-      setRouteQueryState() {
-        const flat = key => (this[key] !== "" ? `${key}=${this[key]}&` : "");
-        const deep = key => {
-          const haveItems = [...this[key]].length;
-          if (haveItems && this[key]["value"] !== "") {
-            return `${key}=${JSON.stringify(this[key])}&`;
-          } else return "";
-        };
-        let flats = [
-          "method",
-          "url",
-          "path",
-          !this.urlExcludes.auth ? "auth" : null,
-          !this.urlExcludes.httpUser ? "httpUser" : null,
-          !this.urlExcludes.httpPassword ? "httpPassword" : null,
-          !this.urlExcludes.bearerToken ? "bearerToken" : null,
-          "contentType"
-        ]
-          .filter(item => item !== null)
-          .map(item => flat(item));
-        let deeps = ["headers", "params"].map(item => deep(item));
-        let bodyParams = this.rawInput
-          ? [flat("rawParams")]
-          : [deep("bodyParams")];
+      }
+    },
+    getQueryStringFromPath() {
+      let queryString,
+        pathParsed = url.parse(this.path);
+      return (queryString = pathParsed.query ? pathParsed.query : "");
+    },
+    queryStringToArray(queryString) {
+      let queryParsed = querystring.parse(queryString);
+      return Object.keys(queryParsed).map(key => ({
+        key: key,
+        value: queryParsed[key]
+      }));
+    },
+    pathInputHandler() {
+      let queryString = this.getQueryStringFromPath(),
+        params = this.queryStringToArray(queryString);
 
-        history.replaceState(
-          window.location.href,
-          "",
-          "/?" +
+      this.paramsWatchEnabled = false;
+      this.params = params;
+    },
+    addRequestHeader() {
+      this.$store.commit("addHeaders", {
+        key: "",
+        value: ""
+      });
+      return false;
+    },
+    removeRequestHeader(index) {
+      // .slice() gives us an entirely new array rather than giving us just the reference
+      const oldHeaders = this.headers.slice();
+
+      this.$store.commit("removeHeaders", index);
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+        action: {
+          text: this.$t("undo"),
+          onClick: (e, toastObject) => {
+            this.headers = oldHeaders;
+            toastObject.remove();
+          }
+        }
+      });
+    },
+    addRequestParam() {
+      this.$store.commit("addParams", { key: "", value: "" });
+      return false;
+    },
+    removeRequestParam(index) {
+      // .slice() gives us an entirely new array rather than giving us just the reference
+      const oldParams = this.params.slice();
+
+      this.$store.commit("removeParams", index);
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+        action: {
+          text: this.$t("undo"),
+          onClick: (e, toastObject) => {
+            this.params = oldParams;
+            toastObject.remove();
+          }
+        }
+      });
+    },
+    addRequestBodyParam() {
+      this.$store.commit("addBodyParams", { key: "", value: "" });
+      return false;
+    },
+    removeRequestBodyParam(index) {
+      // .slice() gives us an entirely new array rather than giving us just the reference
+      const oldBodyParams = this.bodyParams.slice();
+
+      this.$store.commit("removeBodyParams", index);
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+        action: {
+          text: this.$t("undo"),
+          onClick: (e, toastObject) => {
+            this.bodyParams = oldBodyParams;
+            toastObject.remove();
+          }
+        }
+      });
+    },
+    copyRequest() {
+      if (navigator.share) {
+        let time = new Date().toLocaleTimeString();
+        let date = new Date().toLocaleDateString();
+        navigator
+          .share({
+            title: `Postwoman`,
+            text: `Postwoman • API request builder at ${time} on ${date}`,
+            url: window.location.href
+          })
+          .then(() => {})
+          .catch(console.error);
+      } else {
+        const dummy = document.createElement("input");
+        document.body.appendChild(dummy);
+        dummy.value = window.location.href;
+        dummy.select();
+        document.execCommand("copy");
+        document.body.removeChild(dummy);
+        this.$refs.copyRequest.innerHTML = this.doneButton;
+        this.$toast.info(this.$t("copied_to_clipboard"), {
+          icon: "done"
+        });
+        setTimeout(
+          () => (this.$refs.copyRequest.innerHTML = this.copyButton),
+          1000
+        );
+      }
+    },
+    copyRequestCode() {
+      this.$refs.copyRequestCode.innerHTML = this.doneButton;
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done"
+      });
+      this.$refs.generatedCode.select();
+      document.execCommand("copy");
+      setTimeout(
+        () => (this.$refs.copyRequestCode.innerHTML = this.copyButton),
+        1000
+      );
+    },
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse;
+      this.responseBodyMaxLines =
+        this.responseBodyMaxLines == Infinity ? 16 : Infinity;
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton;
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done"
+      });
+      const aux = document.createElement("textarea");
+      const copy =
+        this.responseType === "application/json"
+          ? JSON.stringify(this.response.body)
+          : this.response.body;
+      aux.innerText = copy;
+      document.body.appendChild(aux);
+      aux.select();
+      document.execCommand("copy");
+      document.body.removeChild(aux);
+      setTimeout(
+        () => (this.$refs.copyResponse.innerHTML = this.copyButton),
+        1000
+      );
+    },
+    downloadResponse() {
+      const dataToWrite = JSON.stringify(this.response.body, null, 2);
+      const file = new Blob([dataToWrite], { type: this.responseType });
+      const a = document.createElement("a"),
+        url = URL.createObjectURL(file);
+      a.href = url;
+      a.download = (
+        this.url +
+        this.path +
+        " [" +
+        this.method +
+        "] on " +
+        Date()
+      ).replace(/\./g, "[dot]");
+      document.body.appendChild(a);
+      a.click();
+      this.$refs.downloadResponse.innerHTML = this.doneButton;
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done"
+      });
+      setTimeout(() => {
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+        this.$refs.downloadResponse.innerHTML = this.downloadButton;
+      }, 1000);
+    },
+    togglePreview() {
+      this.previewEnabled = !this.previewEnabled;
+      if (this.previewEnabled) {
+        // If you want to add 'preview' support for other response types,
+        // just add them here.
+        if (this.responseType === "text/html") {
+          // If the preview already has that URL loaded, let's not bother re-loading it all.
+          if (
+            this.$refs.previewFrame.getAttribute("data-previewing-url") ===
+            this.url
+          )
+            return;
+          // Use DOMParser to parse document HTML.
+          const previewDocument = new DOMParser().parseFromString(
+            this.response.body,
+            this.responseType
+          );
+          // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+          previewDocument.head.innerHTML =
+            `<base href="${this.url}">` + previewDocument.head.innerHTML;
+          // Finally, set the iframe source to the resulting HTML.
+          this.$refs.previewFrame.srcdoc =
+            previewDocument.documentElement.outerHTML;
+          this.$refs.previewFrame.setAttribute("data-previewing-url", this.url);
+        }
+      }
+    },
+    setRouteQueryState() {
+      const flat = key => (this[key] !== "" ? `${key}=${this[key]}&` : "");
+      const deep = key => {
+        const haveItems = [...this[key]].length;
+        if (haveItems && this[key]["value"] !== "") {
+          return `${key}=${JSON.stringify(this[key])}&`;
+        } else return "";
+      };
+      let flats = [
+        "method",
+        "url",
+        "path",
+        !this.urlExcludes.auth ? "auth" : null,
+        !this.urlExcludes.httpUser ? "httpUser" : null,
+        !this.urlExcludes.httpPassword ? "httpPassword" : null,
+        !this.urlExcludes.bearerToken ? "bearerToken" : null,
+        "contentType"
+      ]
+        .filter(item => item !== null)
+        .map(item => flat(item));
+      let deeps = ["headers", "params"].map(item => deep(item));
+      let bodyParams = this.rawInput
+        ? [flat("rawParams")]
+        : [deep("bodyParams")];
+
+      history.replaceState(
+        window.location.href,
+        "",
+        "/?" +
           encodeURI(
             flats
               .concat(deeps, bodyParams)
               .join("")
               .slice(0, -1)
           )
-        );
-      },
-      setRouteQueries(queries) {
-        if (typeof queries !== "object")
-          throw new Error("Route query parameters must be a Object");
-        for (const key in queries) {
-          if (["headers", "params", "bodyParams"].includes(key))
-            this[key] = JSON.parse(decodeURI(queries[key]));
-          if (key === "rawParams") {
-            this.rawInput = true;
-            this.rawParams = queries["rawParams"];
-          } else if (typeof this[key] === "string") this[key] = queries[key];
-        }
-      },
-      observeRequestButton() {
-        const requestElement = this.$refs.request.$el;
-        const sendButtonElement = this.$refs.sendButton;
-        const observer = new IntersectionObserver(
-          (entries, observer) => {
-            entries.forEach(entry => {
-              if (entry.isIntersecting)
-                sendButtonElement.classList.remove("show");
-              // The button should float when it is no longer visible on screen.
-              // This is done by adding the show class to the button.
-              else sendButtonElement.classList.add("show");
-            });
-          },
-          {
-            rootMargin: "0px",
-            threshold: [0]
-          }
-        );
-        observer.observe(requestElement);
-      },
-      handleImport() {
-        let textarea = document.getElementById("import-text");
-        let text = textarea.value;
-        try {
-          let parsedCurl = parseCurlCommand(text);
-          let url = new URL(parsedCurl.url.replace(/"/g, "").replace(/'/g, ""));
-          this.url = url.origin;
-          this.path = url.pathname;
-          this.headers = [];
-          if (parsedCurl.headers) {
-            for (const key of Object.keys(parsedCurl.headers)) {
-              this.$store.commit("addHeaders", {
-                key: key,
-                value: parsedCurl.headers[key]
-              });
-            }
-          }
-          this.method = parsedCurl.method.toUpperCase();
-          if (parsedCurl["data"]) {
-            this.rawInput = true;
-            this.rawParams = parsedCurl["data"];
-          }
-          this.showModal = false;
-        } catch (error) {
-          this.showModal = false;
-          this.$toast.error(this.$t("curl_invalid_format"), {
-            icon: "error"
-          });
-        }
-      },
-      switchVisibility() {
-        this.passwordFieldType =
-          this.passwordFieldType === "password" ? "text" : "password";
-      },
-      clearContent(name, e) {
-        switch (name) {
-          case "auth":
-            this.auth = "None";
-            this.httpUser = "";
-            this.httpPassword = "";
-            this.bearerToken = "";
-            this.showTokenRequest = false;
-            this.tokens = [];
-            this.tokenReqs = [];
-            break;
-          case "headers":
-            this.headers = [];
-            break;
-          case "parameters":
-            this.params = [];
-            break;
-          case "access_token":
-            this.accessTokenName = "";
-            this.oidcDiscoveryUrl = "";
-            this.authUrl = "";
-            this.accessTokenUrl = "";
-            this.clientId = "";
-            this.scope = "";
-            break;
-          case "tokens":
-            this.tokens = [];
-            break;
-          case "tokenReqs":
-            this.tokenReqs = [];
-          default:
-            (this.label = ""),
-              (this.method = "GET"),
-              (this.url = "https://reqres.in"),
-              (this.auth = "None"),
-              (this.path = "/api/users"),
-              (this.auth = "None");
-            this.httpUser = "";
-            this.httpPassword = "";
-            this.bearerToken = "";
-            this.headers = [];
-            this.params = [];
-            this.bodyParams = [];
-            this.rawParams = "";
-            this.showTokenRequest = false;
-            this.tokens = [];
-            this.tokenReqs = [];
-            this.accessTokenName = "";
-            this.oidcDiscoveryUrl = "";
-            this.authUrl = "";
-            this.accessTokenUrl = "";
-            this.clientId = "";
-            this.scope = "";
-        }
-        e.target.innerHTML = this.doneButton;
-        this.$toast.info(this.$t("cleared"), {
-          icon: "clear_all"
-        });
-        setTimeout(
-          () => (e.target.innerHTML = '<i class="material-icons">clear_all</i>'),
-          1000
-        );
-      },
-      saveRequest() {
-        if (!this.checkCollections()) {
-          this.$toast.error(this.$t("create_collection"), {
-            icon: "error"
-          });
-          return;
-        }
-
-        this.editRequest = {
-          url: this.url,
-          path: this.path,
-          method: this.method,
-          auth: this.auth,
-          httpUser: this.httpUser,
-          httpPassword: this.httpPassword,
-          passwordFieldType: this.passwordFieldType,
-          bearerToken: this.bearerToken,
-          headers: this.headers,
-          params: this.params,
-          bodyParams: this.bodyParams,
-          rawParams: this.rawParams,
-          rawInput: this.rawInput,
-          contentType: this.contentType,
-          requestType: this.requestType
-        };
-
-        if (this.selectedRequest.url) {
-          this.editRequest = Object.assign(
-            {},
-            this.selectedRequest,
-            this.editRequest
-          );
-        }
-
-        this.showRequestModal = true;
-      },
-      hideRequestModal() {
-        this.showRequestModal = false;
-        this.editRequest = {};
-      },
-      setExclude(excludedField, excluded) {
-        if (excludedField === "auth") {
-          this.urlExcludes.auth = excluded;
-          this.urlExcludes.httpUser = excluded;
-          this.urlExcludes.httpPassword = excluded;
-          this.urlExcludes.bearerToken = excluded;
-        } else {
-          this.urlExcludes[excludedField] = excluded;
-        }
-        this.setRouteQueryState();
-      },
-      methodChange() {
-        // this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' })
-        this.contentType = ["POST", "PUT", "PATCH"].includes(this.method)
-          ? "application/json"
-          : "";
-      },
-      uploadPayload() {
-        this.rawInput = true;
-        let file = this.$refs.payload.files[0];
-        if (file !== undefined && file !== null) {
-          let reader = new FileReader();
-          reader.onload = e => {
-            this.rawParams = e.target.result;
-          };
-          reader.readAsText(file);
-          this.$toast.info(this.$t("file_imported"), {
-            icon: "attach_file"
-          });
-        } else {
-          this.$toast.error(this.$t("choose_file"), {
-            icon: "attach_file"
-          });
-        }
-      },
-      async handleAccessTokenRequest() {
-        if (
-          this.oidcDiscoveryUrl === "" &&
-          (this.authUrl === "" || this.accessTokenUrl === "")
-        ) {
-          this.$toast.error(this.$t("complete_config_urls"), {
-            icon: "error"
-          });
-          return;
-        }
-        try {
-          const tokenReqParams = {
-            grantType: "code",
-            oidcDiscoveryUrl: this.oidcDiscoveryUrl,
-            authUrl: this.authUrl,
-            accessTokenUrl: this.accessTokenUrl,
-            clientId: this.clientId,
-            scope: this.scope
-          };
-          await tokenRequest(tokenReqParams);
-        } catch (e) {
-          this.$toast.error(e, {
-            icon: "code"
-          });
-        }
-      },
-      async oauthRedirectReq() {
-        let tokenInfo = await oauthRedirect();
-        if (tokenInfo.hasOwnProperty("access_token")) {
-          this.bearerToken = tokenInfo.access_token;
-          this.addOAuthToken({
-            name: this.accessTokenName,
-            value: tokenInfo.access_token
-          });
-        }
-      },
-      addOAuthToken({name, value}) {
-        this.$store.commit("addOAuthToken", {
-          name,
-          value
-        });
-        return false;
-      },
-      removeOAuthToken(index) {
-        const oldTokens = this.tokens.slice();
-        this.$store.commit("removeOAuthToken", index);
-        this.$toast.error(this.$t("deleted"), {
-          icon: "delete",
-          action: {
-            text: this.$t("undo"),
-            onClick: (e, toastObject) => {
-              this.tokens = oldTokens;
-              toastObject.remove();
-            }
-          }
-        });
-      },
-      useOAuthToken(value) {
-        this.bearerToken = value;
-        this.showTokenList = false;
-      },
-      addOAuthTokenReq() {
-        try {
-          const name = this.tokenReqName;
-          const details = JSON.parse(this.tokenReqDetails);
-          this.$store.commit("addOAuthTokenReq", {
-            name,
-            details
-          });
-          this.$toast.info(this.$t("token_request_saved"));
-          this.showTokenRequestList = false;
-        } catch (e) {
-          this.$toast.error(e, {
-            icon: "code"
-          });
-        }
-      },
-      removeOAuthTokenReq(index) {
-        const oldTokenReqs = this.tokenReqs.slice();
-        let targetReqIndex = this.tokenReqs.findIndex(
-          tokenReq => tokenReq.name === this.tokenReqName
-        );
-        if (targetReqIndex < 0) return;
-        this.$store.commit("removeOAuthTokenReq", targetReqIndex);
-        this.$toast.error(this.$t("deleted"), {
-          icon: "delete",
-          action: {
-            text: this.$t("undo"),
-            onClick: (e, toastObject) => {
-              this.tokenReqs = oldTokenReqs;
-              toastObject.remove();
-            }
-          }
-        });
-      },
-      tokenReqChange(event) {
-        let targetReq = this.tokenReqs.find(
-          tokenReq => tokenReq.name === event.target.value
-        );
-        let {
-          oidcDiscoveryUrl,
-          authUrl,
-          accessTokenUrl,
-          clientId,
-          scope
-        } = targetReq.details;
-        this.tokenReqName = targetReq.name;
-        this.oidcDiscoveryUrl = oidcDiscoveryUrl;
-        this.authUrl = authUrl;
-        this.accessTokenUrl = accessTokenUrl;
-        this.clientId = clientId;
-        this.scope = scope;
-      }
-    },
-    async mounted() {
-      this.observeRequestButton();
-      this._keyListener = function (e) {
-        if (e.key === "g" && (e.ctrlKey || e.metaKey)) {
-          e.preventDefault();
-          this.sendRequest();
-        } else if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
-          e.preventDefault();
-          this.saveRequest();
-        } else if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
-          e.preventDefault();
-          this.copyRequest();
-        } else if (e.key === "j" && (e.ctrlKey || e.metaKey)) {
-          e.preventDefault();
-          this.$refs.clearAll.click();
-        }
-      };
-      document.addEventListener("keydown", this._keyListener.bind(this));
-      await this.oauthRedirectReq();
-    },
-    created() {
-      this.urlExcludes = this.$store.state.postwoman.settings.URL_EXCLUDES || {
-        // Exclude authentication by default for security reasons.
-        auth: true,
-        httpUser: true,
-        httpPassword: true,
-        bearerToken: true
-      };
-
-      if (Object.keys(this.$route.query).length)
-        this.setRouteQueries(this.$route.query);
-      this.$watch(
-        vm => [
-          vm.label,
-          vm.method,
-          vm.url,
-          vm.auth,
-          vm.path,
-          vm.httpUser,
-          vm.httpPassword,
-          vm.bearerToken,
-          vm.headers,
-          vm.params,
-          vm.bodyParams,
-          vm.contentType,
-          vm.rawParams
-        ],
-        val => {
-          this.setRouteQueryState();
-        }
       );
     },
-    beforeDestroy() {
-      document.removeEventListener("keydown", this._keyListener);
+    setRouteQueries(queries) {
+      if (typeof queries !== "object")
+        throw new Error("Route query parameters must be a Object");
+      for (const key in queries) {
+        if (["headers", "params", "bodyParams"].includes(key))
+          this[key] = JSON.parse(decodeURI(queries[key]));
+        if (key === "rawParams") {
+          this.rawInput = true;
+          this.rawParams = queries["rawParams"];
+        } else if (typeof this[key] === "string") this[key] = queries[key];
+      }
+    },
+    observeRequestButton() {
+      const requestElement = this.$refs.request.$el;
+      const sendButtonElement = this.$refs.sendButton;
+      const observer = new IntersectionObserver(
+        (entries, observer) => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting)
+              sendButtonElement.classList.remove("show");
+            // The button should float when it is no longer visible on screen.
+            // This is done by adding the show class to the button.
+            else sendButtonElement.classList.add("show");
+          });
+        },
+        {
+          rootMargin: "0px",
+          threshold: [0]
+        }
+      );
+      observer.observe(requestElement);
+    },
+    handleImport() {
+      let textarea = document.getElementById("import-text");
+      let text = textarea.value;
+      try {
+        let parsedCurl = parseCurlCommand(text);
+        let url = new URL(parsedCurl.url.replace(/"/g, "").replace(/'/g, ""));
+        this.url = url.origin;
+        this.path = url.pathname;
+        this.headers = [];
+        if (parsedCurl.headers) {
+          for (const key of Object.keys(parsedCurl.headers)) {
+            this.$store.commit("addHeaders", {
+              key: key,
+              value: parsedCurl.headers[key]
+            });
+          }
+        }
+        this.method = parsedCurl.method.toUpperCase();
+        if (parsedCurl["data"]) {
+          this.rawInput = true;
+          this.rawParams = parsedCurl["data"];
+        }
+        this.showModal = false;
+      } catch (error) {
+        this.showModal = false;
+        this.$toast.error(this.$t("curl_invalid_format"), {
+          icon: "error"
+        });
+      }
+    },
+    switchVisibility() {
+      this.passwordFieldType =
+        this.passwordFieldType === "password" ? "text" : "password";
+    },
+    clearContent(name, e) {
+      switch (name) {
+        case "auth":
+          this.auth = "None";
+          this.httpUser = "";
+          this.httpPassword = "";
+          this.bearerToken = "";
+          this.showTokenRequest = false;
+          this.tokens = [];
+          this.tokenReqs = [];
+          break;
+        case "headers":
+          this.headers = [];
+          break;
+        case "parameters":
+          this.params = [];
+          break;
+        case "access_token":
+          this.accessTokenName = "";
+          this.oidcDiscoveryUrl = "";
+          this.authUrl = "";
+          this.accessTokenUrl = "";
+          this.clientId = "";
+          this.scope = "";
+          break;
+        case "tokens":
+          this.tokens = [];
+          break;
+        case "tokenReqs":
+          this.tokenReqs = [];
+        default:
+          (this.label = ""),
+            (this.method = "GET"),
+            (this.url = "https://reqres.in"),
+            (this.auth = "None"),
+            (this.path = "/api/users"),
+            (this.auth = "None");
+          this.httpUser = "";
+          this.httpPassword = "";
+          this.bearerToken = "";
+          this.headers = [];
+          this.params = [];
+          this.bodyParams = [];
+          this.rawParams = "";
+          this.showTokenRequest = false;
+          this.tokens = [];
+          this.tokenReqs = [];
+          this.accessTokenName = "";
+          this.oidcDiscoveryUrl = "";
+          this.authUrl = "";
+          this.accessTokenUrl = "";
+          this.clientId = "";
+          this.scope = "";
+      }
+      e.target.innerHTML = this.doneButton;
+      this.$toast.info(this.$t("cleared"), {
+        icon: "clear_all"
+      });
+      setTimeout(
+        () => (e.target.innerHTML = '<i class="material-icons">clear_all</i>'),
+        1000
+      );
+    },
+    saveRequest() {
+      if (!this.checkCollections()) {
+        this.$toast.error(this.$t("create_collection"), {
+          icon: "error"
+        });
+        return;
+      }
+
+      this.editRequest = {
+        url: this.url,
+        path: this.path,
+        method: this.method,
+        auth: this.auth,
+        httpUser: this.httpUser,
+        httpPassword: this.httpPassword,
+        passwordFieldType: this.passwordFieldType,
+        bearerToken: this.bearerToken,
+        headers: this.headers,
+        params: this.params,
+        bodyParams: this.bodyParams,
+        rawParams: this.rawParams,
+        rawInput: this.rawInput,
+        contentType: this.contentType,
+        requestType: this.requestType
+      };
+
+      if (this.selectedRequest.url) {
+        this.editRequest = Object.assign(
+          {},
+          this.selectedRequest,
+          this.editRequest
+        );
+      }
+
+      this.showRequestModal = true;
+    },
+    hideRequestModal() {
+      this.showRequestModal = false;
+      this.editRequest = {};
+    },
+    setExclude(excludedField, excluded) {
+      if (excludedField === "auth") {
+        this.urlExcludes.auth = excluded;
+        this.urlExcludes.httpUser = excluded;
+        this.urlExcludes.httpPassword = excluded;
+        this.urlExcludes.bearerToken = excluded;
+      } else {
+        this.urlExcludes[excludedField] = excluded;
+      }
+      this.setRouteQueryState();
+    },
+    methodChange() {
+      // this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' })
+      this.contentType = ["POST", "PUT", "PATCH"].includes(this.method)
+        ? "application/json"
+        : "";
+    },
+    uploadPayload() {
+      this.rawInput = true;
+      let file = this.$refs.payload.files[0];
+      if (file !== undefined && file !== null) {
+        let reader = new FileReader();
+        reader.onload = e => {
+          this.rawParams = e.target.result;
+        };
+        reader.readAsText(file);
+        this.$toast.info(this.$t("file_imported"), {
+          icon: "attach_file"
+        });
+      } else {
+        this.$toast.error(this.$t("choose_file"), {
+          icon: "attach_file"
+        });
+      }
+    },
+    async handleAccessTokenRequest() {
+      if (
+        this.oidcDiscoveryUrl === "" &&
+        (this.authUrl === "" || this.accessTokenUrl === "")
+      ) {
+        this.$toast.error(this.$t("complete_config_urls"), {
+          icon: "error"
+        });
+        return;
+      }
+      try {
+        const tokenReqParams = {
+          grantType: "code",
+          oidcDiscoveryUrl: this.oidcDiscoveryUrl,
+          authUrl: this.authUrl,
+          accessTokenUrl: this.accessTokenUrl,
+          clientId: this.clientId,
+          scope: this.scope
+        };
+        await tokenRequest(tokenReqParams);
+      } catch (e) {
+        this.$toast.error(e, {
+          icon: "code"
+        });
+      }
+    },
+    async oauthRedirectReq() {
+      let tokenInfo = await oauthRedirect();
+      if (tokenInfo.hasOwnProperty("access_token")) {
+        this.bearerToken = tokenInfo.access_token;
+        this.addOAuthToken({
+          name: this.accessTokenName,
+          value: tokenInfo.access_token
+        });
+      }
+    },
+    addOAuthToken({ name, value }) {
+      this.$store.commit("addOAuthToken", {
+        name,
+        value
+      });
+      return false;
+    },
+    removeOAuthToken(index) {
+      const oldTokens = this.tokens.slice();
+      this.$store.commit("removeOAuthToken", index);
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+        action: {
+          text: this.$t("undo"),
+          onClick: (e, toastObject) => {
+            this.tokens = oldTokens;
+            toastObject.remove();
+          }
+        }
+      });
+    },
+    useOAuthToken(value) {
+      this.bearerToken = value;
+      this.showTokenList = false;
+    },
+    addOAuthTokenReq() {
+      try {
+        const name = this.tokenReqName;
+        const details = JSON.parse(this.tokenReqDetails);
+        this.$store.commit("addOAuthTokenReq", {
+          name,
+          details
+        });
+        this.$toast.info(this.$t("token_request_saved"));
+        this.showTokenRequestList = false;
+      } catch (e) {
+        this.$toast.error(e, {
+          icon: "code"
+        });
+      }
+    },
+    removeOAuthTokenReq(index) {
+      const oldTokenReqs = this.tokenReqs.slice();
+      let targetReqIndex = this.tokenReqs.findIndex(
+        tokenReq => tokenReq.name === this.tokenReqName
+      );
+      if (targetReqIndex < 0) return;
+      this.$store.commit("removeOAuthTokenReq", targetReqIndex);
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+        action: {
+          text: this.$t("undo"),
+          onClick: (e, toastObject) => {
+            this.tokenReqs = oldTokenReqs;
+            toastObject.remove();
+          }
+        }
+      });
+    },
+    tokenReqChange(event) {
+      let targetReq = this.tokenReqs.find(
+        tokenReq => tokenReq.name === event.target.value
+      );
+      let {
+        oidcDiscoveryUrl,
+        authUrl,
+        accessTokenUrl,
+        clientId,
+        scope
+      } = targetReq.details;
+      this.tokenReqName = targetReq.name;
+      this.oidcDiscoveryUrl = oidcDiscoveryUrl;
+      this.authUrl = authUrl;
+      this.accessTokenUrl = accessTokenUrl;
+      this.clientId = clientId;
+      this.scope = scope;
     }
-  };
+  },
+  async mounted() {
+    this.observeRequestButton();
+    this._keyListener = function(e) {
+      if (e.key === "g" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.sendRequest();
+      } else if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.saveRequest();
+      } else if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.copyRequest();
+      } else if (e.key === "j" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.$refs.clearAll.click();
+      }
+    };
+    document.addEventListener("keydown", this._keyListener.bind(this));
+    await this.oauthRedirectReq();
+  },
+  created() {
+    this.urlExcludes = this.$store.state.postwoman.settings.URL_EXCLUDES || {
+      // Exclude authentication by default for security reasons.
+      auth: true,
+      httpUser: true,
+      httpPassword: true,
+      bearerToken: true
+    };
+
+    if (Object.keys(this.$route.query).length)
+      this.setRouteQueries(this.$route.query);
+    this.$watch(
+      vm => [
+        vm.label,
+        vm.method,
+        vm.url,
+        vm.auth,
+        vm.path,
+        vm.httpUser,
+        vm.httpPassword,
+        vm.bearerToken,
+        vm.headers,
+        vm.params,
+        vm.bodyParams,
+        vm.contentType,
+        vm.rawParams
+      ],
+      val => {
+        this.setRouteQueryState();
+      }
+    );
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener);
+  }
+};
 </script>
diff --git a/pages/settings.vue b/pages/settings.vue
index 8e0d851a1..0bba79853 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,5 +1,88 @@
 <template>
   <div class="page">
+    <pw-section class="green" :label="$t('account')" ref="account">
+      <ul>
+        <li>
+          <div v-if="fb.currentUser">
+            <button class="icon">
+              <img
+                v-if="fb.currentUser.photoURL"
+                :src="fb.currentUser.photoURL"
+                class="material-icons"
+              />
+              <i v-else class="material-icons">account_circle</i>
+              <span>
+                {{ fb.currentUser.displayName || "Name not found" }}
+              </span>
+            </button>
+            <br />
+            <button class="icon">
+              <i class="material-icons">email</i>
+              <span>
+                {{ fb.currentUser.email || "Email not found" }}
+              </span>
+            </button>
+            <br />
+            <button class="icon" @click="logout">
+              <i class="material-icons">exit_to_app</i>
+              <span>{{ $t("logout") }}</span>
+            </button>
+            <br />
+            <p v-for="setting in fb.currentSettings" :key="setting.id">
+              <pw-toggle
+                :key="setting.name"
+                :on="setting.value"
+                @change="toggleSettings(setting.name, setting.value)"
+              >
+                {{ $t(setting.name) + " " + $t("sync") }}
+                {{ setting.value ? $t("enabled") : $t("disabled") }}
+              </pw-toggle>
+            </p>
+            <p v-if="fb.currentSettings.length == 0">
+              <button class="" @click="writeSettings">
+                <i class="material-icons">sync</i>
+                <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
+              </button>
+            </p>
+          </div>
+          <div v-else>
+            <label>{{ $t("login_with") }}</label>
+            <p>
+              <button class="icon" @click="signInWithGoogle">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  class="material-icons"
+                >
+                  <path
+                    d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
+                  />
+                </svg>
+                <span>Google</span>
+              </button>
+              <br />
+              <button class="icon" @click="signInWithGithub">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  class="material-icons"
+                >
+                  <path
+                    d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                  />
+                </svg>
+                <span>GitHub</span>
+              </button>
+            </p>
+          </div>
+        </li>
+      </ul>
+    </pw-section>
+
     <pw-section class="cyan" :label="$t('theme')" ref="theme">
       <ul>
         <li>
@@ -137,6 +220,9 @@
 <style scoped lang="scss"></style>
 
 <script>
+import firebase from "firebase/app";
+import { fb } from "../functions/fb";
+
 export default {
   components: {
     "pw-section": () => import("../components/section"),
@@ -238,7 +324,9 @@ export default {
           this.$store.state.postwoman.settings.PROXY_URL ||
           "https://postwoman.apollotv.xyz/",
         PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
-      }
+      },
+
+      fb
     };
   },
 
@@ -289,8 +377,88 @@ export default {
     toggleSetting(key) {
       this.settings[key] = !this.settings[key];
       this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
+    },
+    logout() {
+      fb.currentUser = null;
+      firebase
+        .auth()
+        .signOut()
+        .catch(err => {
+          this.$toast.show(err.message || err, {
+            icon: "error"
+          });
+        });
+      this.$toast.info(this.$t("logged_out"), {
+        icon: "vpn_key"
+      });
+    },
+    signInWithGoogle() {
+      const provider = new firebase.auth.GoogleAuthProvider();
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .then(res => {
+          if (res.additionalUserInfo.isNewUser) {
+            this.$toast.info(this.$t("turn_on") + " " + this.$t("sync"), {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncCollections", true);
+                  this.$router.push({ path: "/settings" });
+                  toastObject.remove();
+                }
+              }
+            });
+          }
+        })
+        .catch(err => {
+          this.$toast.show(err.message || err, {
+            icon: "error"
+          });
+        });
+    },
+    signInWithGithub() {
+      const provider = new firebase.auth.GithubAuthProvider();
+      firebase
+        .auth()
+        .signInWithPopup(provider)
+        .then(res => {
+          if (res.additionalUserInfo.isNewUser) {
+            this.$toast.info(this.$t("turn_on") + " " + this.$t("sync"), {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  fb.writeSettings("syncHistory", false);
+                  fb.writeSettings("syncCollections", true);
+                  this.$router.push({ path: "/settings" });
+                  toastObject.remove();
+                }
+              }
+            });
+          }
+        })
+        .catch(err => {
+          this.$toast.show(err.message || err, {
+            icon: "error"
+          });
+        });
+    },
+    toggleSettings(s, v) {
+      fb.writeSettings(s, !v);
+    },
+    writeSettings() {
+      fb.writeSettings("syncHistory", false);
+      fb.writeSettings("syncCollections", true);
     }
   },
+
   beforeMount() {
     this.settings.THEME_COLOR = this.getActiveColor();
   },
diff --git a/store/postwoman.js b/store/postwoman.js
index bf5881268..b7ae1258d 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -111,6 +111,12 @@ export const mutations = {
   },
 
   addNewCollection({ collections }, collection) {
+    const { name } = collection
+    const duplicateCollection = collections.some(item => item.name === name)
+    if (duplicateCollection) {
+      this.$toast.info('Duplicate collection');
+      return;
+    }
     collections.push({
       name: "",
       folders: [],
@@ -126,6 +132,12 @@ export const mutations = {
 
   editCollection({ collections }, payload) {
     const { collection, collectionIndex } = payload;
+    const { name } = collection
+    const duplicateCollection = collections.some(item => item.name === name)
+    if (duplicateCollection) {
+      this.$toast.info('Duplicate collection');
+      return;
+    }
     collections[collectionIndex] = collection;
   },