Merge pull request #1035 from liyasthomas/dependabot/npm_and_yarn/functions/dot-prop-5.2.0

Bump dot-prop from 5.1.0 to 5.2.0 in /functions

.all-contributorsrc

@@ -114,11 +114,30 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "dmitryyankowski",
+      "name": "Dmitry Yankowski",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/20114263?v=4",
+      "profile": "https://dmitryyankowski.com",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "sboulema",
+      "name": "Samir Boulema",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/1820661?v=4",
+      "profile": "http://www.sboulema.nl",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
   "projectName": "postwoman",
   "projectOwner": "liyasthomas",
   "repoType": "github",
-  "repoHost": "https://github.com"
+  "repoHost": "https://github.com",
+  "skipCi": true
 }

.dependabot/config.yml

@@ -1,9 +0,0 @@
-version: 1
-update_configs:
-  - package_manager: "javascript"
-    directory: "/"
-    update_schedule: "weekly"
-    default_labels:
-      - "Dependency upgrade"
-    default_reviewers:
-      - "liyasthomas"

.env.example

@@ -0,0 +1,15 @@
+# Google Analytics
+GA_ID=UA-XXXXXXXX-X
+
+# Google Tag Manager
+GTM_ID=GTM-XXXXXXX
+
+# Firebase
+API_KEY=api-key
+AUTH_DOMAIN=project-id.firebaseapp.com
+DATABASE_URL=https://project-id.firebaseio.com
+PROJECT_ID=project-id
+STORAGE_BUCKET=project-id.appspot.com
+MESSAGING_SENDER_ID=sender-id
+APP_ID=app-id
+MEASUREMENT_ID=G-measurement-id

.github/FUNDING.yml

@@ -1,3 +1,4 @@
+github: postwoman-io
 open_collective: postwoman
 patreon: liyasthomas
 custom: https://www.paypal.me/liyascthomas

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: '00:00'
+  open-pull-requests-limit: 10
+  reviewers:
+  - liyasthomas

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,54 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master, ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: '0 13 * * 0'
+
+jobs:
+  analyse:
+    name: Analyse
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      # Override language selection by uncommenting this and choosing your languages
+      # with:
+      #   languages: go, javascript, csharp, python, cpp, java
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.prettierignore

@@ -0,0 +1,7 @@
+.dependabot
+.github
+.nuxt
+.postwoman
+.vscode
+package-lock.json
+node_modules

.travis.yml

@@ -1,4 +1,4 @@
-# == INSTRUCTIONS FOR SETTING UP TRAVIS (and GitHub Pages) ==
+# == INSTRUCTIONS FOR SETTING UP TRAVIS ==
 #
 # 1. Find this repository in your Travis-CI dashboard.
 #    open settings and add an environment variable called
@@ -8,12 +8,10 @@
 #    **DO NOT TURN ON 'Display value in build log'!!!!**
 #
 # 2. Push the code to the repository.
-# 3. Set the GitHub Pages source in the GitHub repository settings to the
-#    gh-pages branch.
 
 language: node_js
 node_js:
-  - "12"
+  - lts/*
 
 os: linux
 
@@ -22,35 +20,20 @@ addons:
     packages:
       - libgconf-2-4 # cypress binary dependency
 
-env:
-  - DEPLOY_ENV=POSTWOMAN_IO
-
-cache:
-  npm: true
-  directories:
-    - "node_modules"
-    - ~/.cache
+cache: npm
 
 branches:
   only:
-    - "master"
+    - master
 
 install:
-  - "npm install firebase-tools"
-  - "npm install"
+  - npm ci
 
 before_script:
-  - "npm run build" # use nuxt build and start to run tests
-  - "npm run test"
+  - npm run build # use nuxt build and start to run tests
 
 script:
-  - "cd functions"
-  - "npm install"
-  - "cd .."
-  - "npm run generate"
+  - npm test
 
 notifications:
   webhooks: https://www.travisbuddy.com
-
-after_success:
-  - firebase deploy --token $FIREBASE_TOKEN

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "deepcode.review.results.hideInformationIssues": false
-}

CHANGELOG.md

@@ -1,25 +1,391 @@
 # Changelog
 
+## [v1.9.9](https://github.com/liyasthomas/postwoman/tree/v1.9.9) (2020-07-30)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.9.7...v1.9.9)
+
+**Fixed bugs:**
+
+- TextDecoder.decode\(\) TypeError hangs the whole app [\#1032](https://github.com/liyasthomas/postwoman/issues/1032)
+- response content doesn't fit to the text area when resizing [\#970](https://github.com/liyasthomas/postwoman/issues/970)
+- typing into headers input fields [\#912](https://github.com/liyasthomas/postwoman/issues/912)
+- Environment variable template \(\<\<foo\>\>\) appears urlencoded \(%3C%3Cfoo%3E%3E\) [\#896](https://github.com/liyasthomas/postwoman/issues/896)
+- TypeError: Cannot read property 'startsWith' of undefined - after getting 401 response [\#894](https://github.com/liyasthomas/postwoman/issues/894)
+- When deleting the header, the key is not updated [\#886](https://github.com/liyasthomas/postwoman/issues/886)
+- Cannot introduce query parameters in URL for WebSocket [\#873](https://github.com/liyasthomas/postwoman/issues/873)
+- Response content-type as `text/html` with content in `json` cause content area display empty [\#869](https://github.com/liyasthomas/postwoman/issues/869)
+- Proxy privacy policy link [\#865](https://github.com/liyasthomas/postwoman/issues/865)
+
+**Closed issues:**
+
+- Collections | Request UI Issue [\#1028](https://github.com/liyasthomas/postwoman/issues/1028)
+- JSON not showing up in the correct format [\#1023](https://github.com/liyasthomas/postwoman/issues/1023)
+- ignore duplicates in history [\#1022](https://github.com/liyasthomas/postwoman/issues/1022)
+- change history menu [\#1021](https://github.com/liyasthomas/postwoman/issues/1021)
+- integrate parameters with history [\#1020](https://github.com/liyasthomas/postwoman/issues/1020)
+- Why some Chrome do not have the ability to install PWA? [\#1015](https://github.com/liyasthomas/postwoman/issues/1015)
+- Shall we have the team management ability and some public documents? [\#1014](https://github.com/liyasthomas/postwoman/issues/1014)
+- I have edit this config, but it is not available to login. [\#1013](https://github.com/liyasthomas/postwoman/issues/1013)
+- User login is disabled after i run it on our local server. [\#1012](https://github.com/liyasthomas/postwoman/issues/1012)
+- postwoman google login doesn't work behind ingress or reverse proxy [\#1009](https://github.com/liyasthomas/postwoman/issues/1009)
+- Compile error [\#1006](https://github.com/liyasthomas/postwoman/issues/1006)
+- Postman Web is now out. It might be great to find a USP for Postwoman [\#1000](https://github.com/liyasthomas/postwoman/issues/1000)
+- Saving response data in env variable [\#984](https://github.com/liyasthomas/postwoman/issues/984)
+- contentType 无法使用 form-date 上传文件 [\#983](https://github.com/liyasthomas/postwoman/issues/983)
+- Currently completely broken [\#980](https://github.com/liyasthomas/postwoman/issues/980)
+- localhost request error [\#979](https://github.com/liyasthomas/postwoman/issues/979)
+- Installing postwoman locally [\#969](https://github.com/liyasthomas/postwoman/issues/969)
+- Do I install NodeJS for my online environment [\#968](https://github.com/liyasthomas/postwoman/issues/968)
+- Collections and Environment Module [\#967](https://github.com/liyasthomas/postwoman/issues/967)
+- Textarea display problem in super hi-dpi [\#965](https://github.com/liyasthomas/postwoman/issues/965)
+- TypeError: Cannot read property 'value' of undefined - when logged in [\#961](https://github.com/liyasthomas/postwoman/issues/961)
+- Enable user-select on websocket and other realtime message logs [\#951](https://github.com/liyasthomas/postwoman/issues/951)
+- POST requet error [\#947](https://github.com/liyasthomas/postwoman/issues/947)
+- Unable to fetch schema from localhost GraphQL server. [\#940](https://github.com/liyasthomas/postwoman/issues/940)
+- Support downloading binary responses [\#929](https://github.com/liyasthomas/postwoman/issues/929)
+- Integrate PostWoman In our Webapp [\#918](https://github.com/liyasthomas/postwoman/issues/918)
+- proxy issue [\#911](https://github.com/liyasthomas/postwoman/issues/911)
+- Button to cancel requests [\#909](https://github.com/liyasthomas/postwoman/issues/909)
+- How to upload a file with a post request [\#908](https://github.com/liyasthomas/postwoman/issues/908)
+- Cant Import Postman Global Environment Variables [\#907](https://github.com/liyasthomas/postwoman/issues/907)
+- Postwoman Docker Container behind Reverse Proxy [\#906](https://github.com/liyasthomas/postwoman/issues/906)
+- `pw.response` seems not to work [\#905](https://github.com/liyasthomas/postwoman/issues/905)
+- Could postman add Sign in with LDAP server？ [\#901](https://github.com/liyasthomas/postwoman/issues/901)
+- Collections & Environments not synced [\#900](https://github.com/liyasthomas/postwoman/issues/900)
+- Add authentication to MQTT [\#898](https://github.com/liyasthomas/postwoman/issues/898)
+- Labels are lost when using requests from collections [\#897](https://github.com/liyasthomas/postwoman/issues/897)
+- Handle JSON Parameter list validation [\#891](https://github.com/liyasthomas/postwoman/issues/891)
+- Nuxt fatal error [\#883](https://github.com/liyasthomas/postwoman/issues/883)
+- Cannot connect my local websocket server [\#880](https://github.com/liyasthomas/postwoman/issues/880)
+- Environments not synced after edit [\#877](https://github.com/liyasthomas/postwoman/issues/877)
+- Can't find Desktop app link anywhere [\#872](https://github.com/liyasthomas/postwoman/issues/872)
+- Show request completion time [\#871](https://github.com/liyasthomas/postwoman/issues/871)
+- Make docs on self-hosting Postwoman [\#868](https://github.com/liyasthomas/postwoman/issues/868)
+
+**Merged pull requests:**
+
+- Add trailing backslash to generated cURL code for easier paste-and-execute [\#1033](https://github.com/liyasthomas/postwoman/pull/1033) ([ushuz](https://github.com/ushuz))
+- Update zh-CN.json [\#1031](https://github.com/liyasthomas/postwoman/pull/1031) ([hantianwei](https://github.com/hantianwei))
+- Bump firebase from 7.17.0 to 7.17.1 [\#1026](https://github.com/liyasthomas/postwoman/pull/1026) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Update zh-CN.json [\#1024](https://github.com/liyasthomas/postwoman/pull/1024) ([hantianwei](https://github.com/hantianwei))
+- Bump @nuxtjs/gtm from 2.3.0 to 2.3.2 [\#1019](https://github.com/liyasthomas/postwoman/pull/1019) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Bump firebase from 7.16.1 to 7.17.0 [\#1018](https://github.com/liyasthomas/postwoman/pull/1018) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Fix bugs with the renderer mixins [\#1008](https://github.com/liyasthomas/postwoman/pull/1008) ([AndrewBastin](https://github.com/AndrewBastin))
+- Bump eslint from 7.4.0 to 7.5.0 [\#1005](https://github.com/liyasthomas/postwoman/pull/1005) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Add Collections section in Docs page [\#1004](https://github.com/liyasthomas/postwoman/pull/1004) ([liyasthomas](https://github.com/liyasthomas))
+- Bump lodash from 4.17.15 to 4.17.19 in /functions [\#999](https://github.com/liyasthomas/postwoman/pull/999) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Bump @nuxtjs/google-analytics from 2.3.0 to 2.4.0 [\#998](https://github.com/liyasthomas/postwoman/pull/998) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Bump firebase from 7.16.0 to 7.16.1 [\#997](https://github.com/liyasthomas/postwoman/pull/997) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Fixed broken network requests in GraphQL [\#995](https://github.com/liyasthomas/postwoman/pull/995) ([AndrewBastin](https://github.com/AndrewBastin))
+- fix: replaceWithJSON used wrong commit name [\#993](https://github.com/liyasthomas/postwoman/pull/993) ([perseveringman](https://github.com/perseveringman))
+- ⬆️ Bump @nuxtjs/toast from 3.3.0 to 3.3.1 [\#992](https://github.com/liyasthomas/postwoman/pull/992) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump start-server-and-test from 1.11.1 to 1.11.2 [\#991](https://github.com/liyasthomas/postwoman/pull/991) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump @nuxtjs/axios from 5.11.0 to 5.12.0 [\#990](https://github.com/liyasthomas/postwoman/pull/990) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump firebase from 7.15.5 to 7.16.0 [\#989](https://github.com/liyasthomas/postwoman/pull/989) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump start-server-and-test from 1.11.0 to 1.11.1 [\#988](https://github.com/liyasthomas/postwoman/pull/988) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump sass-loader from 9.0.1 to 9.0.2 [\#986](https://github.com/liyasthomas/postwoman/pull/986) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump cypress from 4.9.0 to 4.10.0 [\#985](https://github.com/liyasthomas/postwoman/pull/985) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump ace-builds from 1.4.11 to 1.4.12 [\#982](https://github.com/liyasthomas/postwoman/pull/982) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump vuefire from 2.2.2 to 2.2.3 [\#981](https://github.com/liyasthomas/postwoman/pull/981) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump eslint from 7.3.1 to 7.4.0 [\#978](https://github.com/liyasthomas/postwoman/pull/978) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump sass-loader from 9.0.0 to 9.0.1 [\#977](https://github.com/liyasthomas/postwoman/pull/977) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump graphql from 15.2.0 to 15.3.0 [\#976](https://github.com/liyasthomas/postwoman/pull/976) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump nuxt-i18n from 6.13.0 to 6.13.1 [\#975](https://github.com/liyasthomas/postwoman/pull/975) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump sass-loader from 8.0.2 to 9.0.0 [\#973](https://github.com/liyasthomas/postwoman/pull/973) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump nuxt-i18n from 6.12.2 to 6.13.0 [\#972](https://github.com/liyasthomas/postwoman/pull/972) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump graphql from 15.1.0 to 15.2.0 [\#966](https://github.com/liyasthomas/postwoman/pull/966) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump @nuxtjs/sitemap from 2.3.2 to 2.4.0 [\#963](https://github.com/liyasthomas/postwoman/pull/963) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump firebase from 7.15.4 to 7.15.5 [\#962](https://github.com/liyasthomas/postwoman/pull/962) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump eslint from 7.3.0 to 7.3.1 [\#958](https://github.com/liyasthomas/postwoman/pull/958) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump cypress from 4.8.0 to 4.9.0 [\#957](https://github.com/liyasthomas/postwoman/pull/957) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump firebase from 7.15.3 to 7.15.4 [\#956](https://github.com/liyasthomas/postwoman/pull/956) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Binary Responses & Response Lenses [\#955](https://github.com/liyasthomas/postwoman/pull/955) ([AndrewBastin](https://github.com/AndrewBastin))
+- Improving SEO [\#954](https://github.com/liyasthomas/postwoman/pull/954) ([liyasthomas](https://github.com/liyasthomas))
+- Isolate Netlify, Firebase and Helper functions + Import from absolute… [\#953](https://github.com/liyasthomas/postwoman/pull/953) ([liyasthomas](https://github.com/liyasthomas))
+- Added ability to select text in realtime log [\#952](https://github.com/liyasthomas/postwoman/pull/952) ([AndrewBastin](https://github.com/AndrewBastin))
+- ⬆️ Bump firebase from 7.15.1 to 7.15.3 [\#950](https://github.com/liyasthomas/postwoman/pull/950) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump eslint from 7.2.0 to 7.3.0 [\#949](https://github.com/liyasthomas/postwoman/pull/949) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Revert "⬆️ Bump nuxt from 2.12.2 to 2.13.0" [\#946](https://github.com/liyasthomas/postwoman/pull/946) ([liyasthomas](https://github.com/liyasthomas))
+- ⬆️ Bump nuxt from 2.12.2 to 2.13.0 [\#942](https://github.com/liyasthomas/postwoman/pull/942) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump @nuxtjs/sitemap from 2.3.1 to 2.3.2 [\#939](https://github.com/liyasthomas/postwoman/pull/939) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump graphql from 14.6.0 to 15.1.0 [\#938](https://github.com/liyasthomas/postwoman/pull/938) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Updated readme [\#937](https://github.com/liyasthomas/postwoman/pull/937) ([liyasthomas](https://github.com/liyasthomas))
+- ⬆️ Bump graphql-language-service-interface from 2.3.3 to 2.4.0 [\#936](https://github.com/liyasthomas/postwoman/pull/936) ([dependabot[bot]](https://github.com/apps/dependabot))
+- ⬆️ Bump firebase from 7.15.0 to 7.15.1 [\#935](https://github.com/liyasthomas/postwoman/pull/935) ([dependabot[bot]](https://github.com/apps/dependabot))
+- Transpiled ES5 code to ES6/ES7 [\#934](https://github.com/liyasthomas/postwoman/pull/934) ([liyasthomas](https://github.com/liyasthomas))
+- Create Dependabot config file [\#932](https://github.com/liyasthomas/postwoman/pull/932) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Hide download response button for non-JSON responses [\#931](https://github.com/liyasthomas/postwoman/pull/931) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps-dev\): bump cypress from 4.7.0 to 4.8.0 [\#928](https://github.com/liyasthomas/postwoman/pull/928) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- fix: environment and collection sync issue with firebase [\#926](https://github.com/liyasthomas/postwoman/pull/926) ([myussufz](https://github.com/myussufz))
+- chore\(deps\): bump @nuxtjs/axios from 5.10.3 to 5.11.0 [\#925](https://github.com/liyasthomas/postwoman/pull/925) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump eslint from 7.1.0 to 7.2.0 [\#924](https://github.com/liyasthomas/postwoman/pull/924) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- GraphQL response options only visible when a response is shown [\#923](https://github.com/liyasthomas/postwoman/pull/923) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps\): bump firebase from 7.14.6 to 7.15.0 [\#922](https://github.com/liyasthomas/postwoman/pull/922) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/sitemap from 2.3.0 to 2.3.1 [\#921](https://github.com/liyasthomas/postwoman/pull/921) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Added ability to download GraphQL responses [\#920](https://github.com/liyasthomas/postwoman/pull/920) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps\): bump nuxt-i18n from 6.12.1 to 6.12.2 [\#919](https://github.com/liyasthomas/postwoman/pull/919) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/gtm from 2.2.3 to 2.3.0 [\#917](https://github.com/liyasthomas/postwoman/pull/917) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Cancel Request from the Keyboard [\#916](https://github.com/liyasthomas/postwoman/pull/916) ([AndrewBastin](https://github.com/AndrewBastin))
+- Cancellable Requests [\#915](https://github.com/liyasthomas/postwoman/pull/915) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps\): bump nuxt-i18n from 6.12.0 to 6.12.1 [\#914](https://github.com/liyasthomas/postwoman/pull/914) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.14.5 to 7.14.6 [\#913](https://github.com/liyasthomas/postwoman/pull/913) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+
+## [v1.9.7](https://github.com/liyasthomas/postwoman/tree/v1.9.7) (2020-05-12)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.9.5...v1.9.7)
+
+**Fixed bugs:**
+
+- Empty header in headers list results in SyntaxError: Failed to execute 'setRequestHeader' [\#765](https://github.com/liyasthomas/postwoman/issues/765)
+- Getting cannot read value of undefined [\#731](https://github.com/liyasthomas/postwoman/issues/731)
+- Environment variables in collections [\#642](https://github.com/liyasthomas/postwoman/issues/642)
+
+**Closed issues:**
+
+- Import/Export collections from private github repos to share among teams. [\#867](https://github.com/liyasthomas/postwoman/issues/867)
+- Unable to use postwoman with latest docker image from docker hub [\#866](https://github.com/liyasthomas/postwoman/issues/866)
+- Access to nonexistent routes will not be redirect to page 404 [\#849](https://github.com/liyasthomas/postwoman/issues/849)
+- Error: Network Error. Check console for details. [\#827](https://github.com/liyasthomas/postwoman/issues/827)
+- 'Documentation Generated' response stacking past top of page if submit clicked enough times/fast enough [\#826](https://github.com/liyasthomas/postwoman/issues/826)
+- The UI could use some improvements [\#825](https://github.com/liyasthomas/postwoman/issues/825)
+- Postwoman won't build, produces 'FATAL Nuxt build error' [\#824](https://github.com/liyasthomas/postwoman/issues/824)
+- Improve contrast of UI components in all themes [\#819](https://github.com/liyasthomas/postwoman/issues/819)
+- Add an option to hide and/or collapse the right panel [\#818](https://github.com/liyasthomas/postwoman/issues/818)
+- Docker Cannot log in normally in the container [\#817](https://github.com/liyasthomas/postwoman/issues/817)
+- Body in Request [\#815](https://github.com/liyasthomas/postwoman/issues/815)
+- How to run postwoman under reverse proxy [\#812](https://github.com/liyasthomas/postwoman/issues/812)
+- Call local support [\#811](https://github.com/liyasthomas/postwoman/issues/811)
+- feature [\#810](https://github.com/liyasthomas/postwoman/issues/810)
+- support response json array [\#805](https://github.com/liyasthomas/postwoman/issues/805)
+- socket binnery support [\#801](https://github.com/liyasthomas/postwoman/issues/801)
+- Ability to join and leave rooms in Socket.IO connection [\#796](https://github.com/liyasthomas/postwoman/issues/796)
+- How can I synchronize my data on local? [\#794](https://github.com/liyasthomas/postwoman/issues/794)
+- I cant login [\#792](https://github.com/liyasthomas/postwoman/issues/792)
+- Unresolved merge conflict in index.vue.orig [\#786](https://github.com/liyasthomas/postwoman/issues/786)
+- You send data my request to Google [\#780](https://github.com/liyasthomas/postwoman/issues/780)
+- I have question by \#750, it's closed,but my problem is still.... [\#770](https://github.com/liyasthomas/postwoman/issues/770)
+- Add Format Body option [\#767](https://github.com/liyasthomas/postwoman/issues/767)
+- Body scroll after modal is open [\#766](https://github.com/liyasthomas/postwoman/issues/766)
+- text.match is not a function [\#764](https://github.com/liyasthomas/postwoman/issues/764)
+- Request : Copy response headers [\#763](https://github.com/liyasthomas/postwoman/issues/763)
+- The accordion \(expand\) labels are out of place on mobile [\#762](https://github.com/liyasthomas/postwoman/issues/762)
+- why does the graphql case can't be saved? [\#761](https://github.com/liyasthomas/postwoman/issues/761)
+- Mobile responsiveness issues [\#760](https://github.com/liyasthomas/postwoman/issues/760)
+- Allow importing environment variables via Postman environment json files [\#759](https://github.com/liyasthomas/postwoman/issues/759)
+- Report abuse: liyasthomas/postwoman \(Contact Links\) [\#754](https://github.com/liyasthomas/postwoman/issues/754)
+- Report abuse: liyasthomas/postwoman \(Contact Links\) [\#753](https://github.com/liyasthomas/postwoman/issues/753)
+- Request headers kept same after changing request type [\#752](https://github.com/liyasthomas/postwoman/issues/752)
+- I used it to post test,but response network error [\#750](https://github.com/liyasthomas/postwoman/issues/750)
+- Add compatibility for postman collections & environments [\#746](https://github.com/liyasthomas/postwoman/issues/746)
+- Improve documentation on how to use environments [\#742](https://github.com/liyasthomas/postwoman/issues/742)
+- Add GraphQL syntax highlighting [\#741](https://github.com/liyasthomas/postwoman/issues/741)
+- Broken link to translations branch [\#737](https://github.com/liyasthomas/postwoman/issues/737)
+- Add docker Images for all Tags [\#722](https://github.com/liyasthomas/postwoman/issues/722)
+- Provide post-build resources and default setting files [\#714](https://github.com/liyasthomas/postwoman/issues/714)
+- Theme lacks of contrast [\#709](https://github.com/liyasthomas/postwoman/issues/709)
+- Postwoman raiase a connection error when communicate with localhost. [\#708](https://github.com/liyasthomas/postwoman/issues/708)
+- CORS issue when hosting [\#707](https://github.com/liyasthomas/postwoman/issues/707)
+- Add a description to the request or collection when saving it [\#706](https://github.com/liyasthomas/postwoman/issues/706)
+- Error: Network Error. Check console for details [\#704](https://github.com/liyasthomas/postwoman/issues/704)
+- Save collections on account sync turn on [\#679](https://github.com/liyasthomas/postwoman/issues/679)
+- Tests should be saved together with requests [\#643](https://github.com/liyasthomas/postwoman/issues/643)
+- npm modules of postwoman's vue components [\#384](https://github.com/liyasthomas/postwoman/issues/384)
+- \[request\] VS code extension [\#313](https://github.com/liyasthomas/postwoman/issues/313)
+- remove prerequest \<\< \>\> bindings when pre-request script is toggled off [\#234](https://github.com/liyasthomas/postwoman/issues/234)
+- Dynamic Headers [\#91](https://github.com/liyasthomas/postwoman/issues/91)
+
+**Merged pull requests:**
+
+- chore\(deps\): bump @nuxtjs/sitemap from 2.2.1 to 2.3.0 [\#864](https://github.com/liyasthomas/postwoman/pull/864) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- docs: add sboulema as a contributor [\#863](https://github.com/liyasthomas/postwoman/pull/863) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- Allow importing environment variables via Postman environment json files [\#862](https://github.com/liyasthomas/postwoman/pull/862) ([sboulema](https://github.com/sboulema))
+- chore\(deps\): bump nuxt-i18n from 6.11.0 to 6.11.1 [\#861](https://github.com/liyasthomas/postwoman/pull/861) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Produce valid output when showing/copying as code [\#857](https://github.com/liyasthomas/postwoman/pull/857) ([Hydrophobefireman](https://github.com/Hydrophobefireman))
+- dotenv [\#856](https://github.com/liyasthomas/postwoman/pull/856) ([liyasthomas](https://github.com/liyasthomas))
+- Save Collections/Environments on enabling sync [\#854](https://github.com/liyasthomas/postwoman/pull/854) ([sboulema](https://github.com/sboulema))
+- chore\(deps\): bump firebase from 7.14.2 to 7.14.3 [\#853](https://github.com/liyasthomas/postwoman/pull/853) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Environment variables in collections [\#851](https://github.com/liyasthomas/postwoman/pull/851) ([sboulema](https://github.com/sboulema))
+- Add format body option [\#847](https://github.com/liyasthomas/postwoman/pull/847) ([sboulema](https://github.com/sboulema))
+- Save GraphQL Docs [\#846](https://github.com/liyasthomas/postwoman/pull/846) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps-dev\): bump node-sass from 4.14.0 to 4.14.1 [\#844](https://github.com/liyasthomas/postwoman/pull/844) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Remove not-deleted index.vue merge file [\#842](https://github.com/liyasthomas/postwoman/pull/842) ([AndrewBastin](https://github.com/AndrewBastin))
+- URL Path Parameters \#834 [\#840](https://github.com/liyasthomas/postwoman/pull/840) ([sboulema](https://github.com/sboulema))
+- chore\(deps\): remove stale dependency [\#839](https://github.com/liyasthomas/postwoman/pull/839) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- GraphQL Query Editor Syntax Highlighting [\#838](https://github.com/liyasthomas/postwoman/pull/838) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps-dev\): bump lint-staged from 10.2.1 to 10.2.2 [\#837](https://github.com/liyasthomas/postwoman/pull/837) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(store\): better code structure [\#835](https://github.com/liyasthomas/postwoman/pull/835) ([jameslahm](https://github.com/jameslahm))
+- chore\(deps\): bump @nuxtjs/axios from 5.10.2 to 5.10.3 [\#832](https://github.com/liyasthomas/postwoman/pull/832) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.10.1 to 6.11.0 [\#831](https://github.com/liyasthomas/postwoman/pull/831) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.2.0 to 10.2.1 [\#830](https://github.com/liyasthomas/postwoman/pull/830) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Add ability to navigate through message history [\#828](https://github.com/liyasthomas/postwoman/pull/828) ([jinyus](https://github.com/jinyus))
+- chore\(config\): delete render option [\#823](https://github.com/liyasthomas/postwoman/pull/823) ([jameslahm](https://github.com/jameslahm))
+- chore\(deps-dev\): bump cypress from 4.4.1 to 4.5.0 [\#822](https://github.com/liyasthomas/postwoman/pull/822) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.1.7 to 10.2.0 [\#821](https://github.com/liyasthomas/postwoman/pull/821) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Realtime SocketIO support for json user input [\#820](https://github.com/liyasthomas/postwoman/pull/820) ([feydan](https://github.com/feydan))
+- chore\(deps\): bump @nuxtjs/axios from 5.10.1 to 5.10.2 [\#816](https://github.com/liyasthomas/postwoman/pull/816) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Modify responseType by Object\(json\) or Array\(json5\) [\#813](https://github.com/liyasthomas/postwoman/pull/813) ([shtakai](https://github.com/shtakai))
+- chore\(deps\): bump nuxt-i18n from 6.9.2 to 6.10.1 [\#809](https://github.com/liyasthomas/postwoman/pull/809) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.14.1 to 7.14.2 [\#808](https://github.com/liyasthomas/postwoman/pull/808) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump node-sass from 4.13.1 to 4.14.0 [\#807](https://github.com/liyasthomas/postwoman/pull/807) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/sitemap from 2.2.0 to 2.2.1 [\#806](https://github.com/liyasthomas/postwoman/pull/806) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/axios from 5.10.0 to 5.10.1 [\#803](https://github.com/liyasthomas/postwoman/pull/803) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.9.1 to 6.9.2 [\#802](https://github.com/liyasthomas/postwoman/pull/802) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.1.6 to 10.1.7 [\#800](https://github.com/liyasthomas/postwoman/pull/800) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump prettier from 2.0.4 to 2.0.5 [\#799](https://github.com/liyasthomas/postwoman/pull/799) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/axios from 5.9.7 to 5.10.0 [\#798](https://github.com/liyasthomas/postwoman/pull/798) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump cypress from 4.4.0 to 4.4.1 [\#797](https://github.com/liyasthomas/postwoman/pull/797) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Listen to all events in socket.io connection [\#795](https://github.com/liyasthomas/postwoman/pull/795) ([konradkalemba](https://github.com/konradkalemba))
+- Fix postman import with empty url [\#791](https://github.com/liyasthomas/postwoman/pull/791) ([Nikita240](https://github.com/Nikita240))
+- chore\(deps-dev\): bump lint-staged from 10.1.5 to 10.1.6 [\#789](https://github.com/liyasthomas/postwoman/pull/789) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.1.3 to 10.1.5 [\#787](https://github.com/liyasthomas/postwoman/pull/787) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.14.0 to 7.14.1 [\#782](https://github.com/liyasthomas/postwoman/pull/782) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump yargs-parser from 18.1.2 to 18.1.3 [\#781](https://github.com/liyasthomas/postwoman/pull/781) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump start-server-and-test from 1.10.11 to 1.11.0 [\#778](https://github.com/liyasthomas/postwoman/pull/778) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.8.1 to 6.9.1 [\#776](https://github.com/liyasthomas/postwoman/pull/776) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump ace-builds from 1.4.9 to 1.4.11 [\#775](https://github.com/liyasthomas/postwoman/pull/775) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump cypress from 4.3.0 to 4.4.0 [\#774](https://github.com/liyasthomas/postwoman/pull/774) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.13.2 to 7.14.0 [\#758](https://github.com/liyasthomas/postwoman/pull/758) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump husky from 4.2.3 to 4.2.5 [\#757](https://github.com/liyasthomas/postwoman/pull/757) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.1.2 to 10.1.3 [\#756](https://github.com/liyasthomas/postwoman/pull/756) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Fix indicator if extension is installed [\#748](https://github.com/liyasthomas/postwoman/pull/748) ([levrik](https://github.com/levrik))
+- Remove support for legacy extensions [\#747](https://github.com/liyasthomas/postwoman/pull/747) ([levrik](https://github.com/levrik))
+- Fix GQL introspection query not sent through extension [\#745](https://github.com/liyasthomas/postwoman/pull/745) ([levrik](https://github.com/levrik))
+- chore\(deps-dev\): bump prettier from 2.0.2 to 2.0.4 [\#744](https://github.com/liyasthomas/postwoman/pull/744) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/sitemap from 2.1.0 to 2.2.0 [\#743](https://github.com/liyasthomas/postwoman/pull/743) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.1.1 to 10.1.2 [\#740](https://github.com/liyasthomas/postwoman/pull/740) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.8.0 to 6.8.1 [\#736](https://github.com/liyasthomas/postwoman/pull/736) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump ace-builds from 1.4.8 to 1.4.9 [\#735](https://github.com/liyasthomas/postwoman/pull/735) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.13.1 to 7.13.2 [\#734](https://github.com/liyasthomas/postwoman/pull/734) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump vue-virtual-scroll-list from 1.4.6 to 1.4.7 [\#733](https://github.com/liyasthomas/postwoman/pull/733) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.7.2 to 6.8.0 [\#732](https://github.com/liyasthomas/postwoman/pull/732) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt from 2.12.1 to 2.12.2 [\#729](https://github.com/liyasthomas/postwoman/pull/729) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.7.1 to 6.7.2 [\#728](https://github.com/liyasthomas/postwoman/pull/728) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.1.0 to 10.1.1 [\#727](https://github.com/liyasthomas/postwoman/pull/727) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump cypress from 4.2.0 to 4.3.0 [\#726](https://github.com/liyasthomas/postwoman/pull/726) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.0.10 to 10.1.0 [\#725](https://github.com/liyasthomas/postwoman/pull/725) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.7.0 to 6.7.1 [\#724](https://github.com/liyasthomas/postwoman/pull/724) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/axios from 5.9.6 to 5.9.7 [\#723](https://github.com/liyasthomas/postwoman/pull/723) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump lint-staged from 10.0.9 to 10.0.10 [\#721](https://github.com/liyasthomas/postwoman/pull/721) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/axios from 5.9.5 to 5.9.6 [\#719](https://github.com/liyasthomas/postwoman/pull/719) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/sitemap from 2.0.1 to 2.1.0 [\#718](https://github.com/liyasthomas/postwoman/pull/718) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.13.0 to 7.13.1 [\#717](https://github.com/liyasthomas/postwoman/pull/717) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump yargs-parser from 18.1.1 to 18.1.2 [\#713](https://github.com/liyasthomas/postwoman/pull/713) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.6.1 to 6.7.0 [\#712](https://github.com/liyasthomas/postwoman/pull/712) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt from 2.12.0 to 2.12.1 [\#711](https://github.com/liyasthomas/postwoman/pull/711) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.12.0 to 7.13.0 [\#710](https://github.com/liyasthomas/postwoman/pull/710) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Updating the UI and style files [\#705](https://github.com/liyasthomas/postwoman/pull/705) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps-dev\): bump lint-staged from 10.0.8 to 10.0.9 [\#703](https://github.com/liyasthomas/postwoman/pull/703) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Improving performance [\#702](https://github.com/liyasthomas/postwoman/pull/702) ([liyasthomas](https://github.com/liyasthomas))
+- :package: Updating packages [\#701](https://github.com/liyasthomas/postwoman/pull/701) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps-dev\): bump prettier from 2.0.1 to 2.0.2 [\#700](https://github.com/liyasthomas/postwoman/pull/700) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump prettier from 1.19.1 to 2.0.1 [\#697](https://github.com/liyasthomas/postwoman/pull/697) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+
+## [v1.9.5](https://github.com/liyasthomas/postwoman/tree/v1.9.5) (2020-03-22)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.9.0...v1.9.5)
+
+**Fixed bugs:**
+
+- Test script is not run after failing request [\#644](https://github.com/liyasthomas/postwoman/issues/644)
+- \[HELP\] Auth permission denied [\#621](https://github.com/liyasthomas/postwoman/issues/621)
+- Can't login on Brave Browser [\#607](https://github.com/liyasthomas/postwoman/issues/607)
+
+**Closed issues:**
+
+- \[UI/UX\] - Change place of Send button [\#696](https://github.com/liyasthomas/postwoman/issues/696)
+- Support preview of JSON:API's "application/vnd.api+json" Content-Type [\#694](https://github.com/liyasthomas/postwoman/issues/694)
+- Report Portal integration [\#691](https://github.com/liyasthomas/postwoman/issues/691)
+- Docs request: how to prevent secrets from leaving local storage wrt. sync. [\#686](https://github.com/liyasthomas/postwoman/issues/686)
+- \[bug\] - Can't make a request to HTTP [\#676](https://github.com/liyasthomas/postwoman/issues/676)
+- Looking forward to that the postwoman Compatible 'swagger ' at next version [\#675](https://github.com/liyasthomas/postwoman/issues/675)
+- Error: Network Error. Check console for details. [\#673](https://github.com/liyasthomas/postwoman/issues/673)
+- \[Bug\] - Can't login to Github and Google [\#661](https://github.com/liyasthomas/postwoman/issues/661)
+- A question that has been raised but not resolved [\#658](https://github.com/liyasthomas/postwoman/issues/658)
+- An unknown error occurred whilst the proxy was processing your request. [\#656](https://github.com/liyasthomas/postwoman/issues/656)
+- Running app from downloaded zip fails to compile [\#651](https://github.com/liyasthomas/postwoman/issues/651)
+- Environment variable in path won't update [\#641](https://github.com/liyasthomas/postwoman/issues/641)
+- Info: The current domain is not authorized for OAuth operations Error [\#637](https://github.com/liyasthomas/postwoman/issues/637)
+- A suggestion for UI [\#635](https://github.com/liyasthomas/postwoman/issues/635)
+- How to use postwoman for local development and testing [\#634](https://github.com/liyasthomas/postwoman/issues/634)
+- How to debug localhost \(cors\) [\#630](https://github.com/liyasthomas/postwoman/issues/630)
+- Support SocketIO connections on Realtime page [\#611](https://github.com/liyasthomas/postwoman/issues/611)
+- Requests to local API returning error response [\#608](https://github.com/liyasthomas/postwoman/issues/608)
+- Why does the URL input field display only one line [\#604](https://github.com/liyasthomas/postwoman/issues/604)
+- Parameter list not showing JSON object fields \(force raw?\) [\#597](https://github.com/liyasthomas/postwoman/issues/597)
+- Add setting to disable scroll animations [\#592](https://github.com/liyasthomas/postwoman/issues/592)
+- Bigger URL and/or Path input field [\#581](https://github.com/liyasthomas/postwoman/issues/581)
+- Ability to connect to a MQTT broker [\#342](https://github.com/liyasthomas/postwoman/issues/342)
+- \[request\] Offline cross-platform native build [\#267](https://github.com/liyasthomas/postwoman/issues/267)
+- On Save Update existing API [\#204](https://github.com/liyasthomas/postwoman/issues/204)
+- Import and export environments from JSON [\#190](https://github.com/liyasthomas/postwoman/issues/190)
+- Fast URL entry [\#62](https://github.com/liyasthomas/postwoman/issues/62)
+
+**Merged pull requests:**
+
+- Add application/vnd.api+json [\#695](https://github.com/liyasthomas/postwoman/pull/695) ([allthesignals](https://github.com/allthesignals))
+- Fix raw input \(JSON\) [\#693](https://github.com/liyasthomas/postwoman/pull/693) ([leomp12](https://github.com/leomp12))
+- chore\(deps\): bump firebase from 7.11.0 to 7.12.0 [\#689](https://github.com/liyasthomas/postwoman/pull/689) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump vuefire from 2.2.1 to 2.2.2 [\#688](https://github.com/liyasthomas/postwoman/pull/688) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump cypress from 4.1.0 to 4.2.0 [\#685](https://github.com/liyasthomas/postwoman/pull/685) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump start-server-and-test from 1.10.10 to 1.10.11 [\#684](https://github.com/liyasthomas/postwoman/pull/684) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.6.0 to 6.6.1 [\#683](https://github.com/liyasthomas/postwoman/pull/683) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt from 2.11.0 to 2.12.0 [\#682](https://github.com/liyasthomas/postwoman/pull/682) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Fix setting default raw params [\#681](https://github.com/liyasthomas/postwoman/pull/681) ([leomp12](https://github.com/leomp12))
+- Fix handling content type and raw input [\#678](https://github.com/liyasthomas/postwoman/pull/678) ([leomp12](https://github.com/leomp12))
+- \[Snyk\] Security upgrade yargs-parser from 18.1.0 to 18.1.1 [\#674](https://github.com/liyasthomas/postwoman/pull/674) ([snyk-bot](https://github.com/snyk-bot))
+- chore\(deps-dev\): bump start-server-and-test from 1.10.9 to 1.10.10 [\#672](https://github.com/liyasthomas/postwoman/pull/672) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.10.0 to 7.11.0 [\#671](https://github.com/liyasthomas/postwoman/pull/671) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ✅ Updating tests [\#669](https://github.com/liyasthomas/postwoman/pull/669) ([liyasthomas](https://github.com/liyasthomas))
+- Updating tests [\#668](https://github.com/liyasthomas/postwoman/pull/668) ([liyasthomas](https://github.com/liyasthomas))
+- APIs [\#667](https://github.com/liyasthomas/postwoman/pull/667) ([liyasthomas](https://github.com/liyasthomas))
+- Insecure Websocket connection issue while connecting to MQTT broker. [\#666](https://github.com/liyasthomas/postwoman/pull/666) ([rahulnpadalkar](https://github.com/rahulnpadalkar))
+- Improving performance [\#664](https://github.com/liyasthomas/postwoman/pull/664) ([liyasthomas](https://github.com/liyasthomas))
+- Feature/mqtt [\#663](https://github.com/liyasthomas/postwoman/pull/663) ([liyasthomas](https://github.com/liyasthomas))
+- Added Support for MQTT [\#662](https://github.com/liyasthomas/postwoman/pull/662) ([rahulnpadalkar](https://github.com/rahulnpadalkar))
+- chore\(deps\): bump yargs-parser from 18.0.0 to 18.1.0 [\#660](https://github.com/liyasthomas/postwoman/pull/660) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump start-server-and-test from 1.10.8 to 1.10.9 [\#659](https://github.com/liyasthomas/postwoman/pull/659) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Added icon slot to tabs [\#657](https://github.com/liyasthomas/postwoman/pull/657) ([liyasthomas](https://github.com/liyasthomas))
+- Refactor/ui [\#655](https://github.com/liyasthomas/postwoman/pull/655) ([liyasthomas](https://github.com/liyasthomas))
+- even [\#654](https://github.com/liyasthomas/postwoman/pull/654) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump yargs-parser from 17.0.0 to 18.0.0 [\#653](https://github.com/liyasthomas/postwoman/pull/653) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.9.3 to 7.10.0 [\#652](https://github.com/liyasthomas/postwoman/pull/652) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Added the ability to prettify GraphQL queries [\#650](https://github.com/liyasthomas/postwoman/pull/650) ([AndrewBastin](https://github.com/AndrewBastin))
+- Add http/https support to socketio url valid [\#648](https://github.com/liyasthomas/postwoman/pull/648) ([moonrailgun](https://github.com/moonrailgun))
+- Refactor/ui [\#647](https://github.com/liyasthomas/postwoman/pull/647) ([liyasthomas](https://github.com/liyasthomas))
+- Even [\#646](https://github.com/liyasthomas/postwoman/pull/646) ([liyasthomas](https://github.com/liyasthomas))
+- Run tests even after failed request [\#645](https://github.com/liyasthomas/postwoman/pull/645) ([liyasthomas](https://github.com/liyasthomas))
+- Feature: add socket io support [\#640](https://github.com/liyasthomas/postwoman/pull/640) ([moonrailgun](https://github.com/moonrailgun))
+- Removed linting for the collection docs import editor [\#639](https://github.com/liyasthomas/postwoman/pull/639) ([AndrewBastin](https://github.com/AndrewBastin))
+- Moving or renaming files [\#638](https://github.com/liyasthomas/postwoman/pull/638) ([liyasthomas](https://github.com/liyasthomas))
+- Refactor/ui [\#636](https://github.com/liyasthomas/postwoman/pull/636) ([liyasthomas](https://github.com/liyasthomas))
+- Updated messages for when GraphQL Get Schema fails [\#633](https://github.com/liyasthomas/postwoman/pull/633) ([AndrewBastin](https://github.com/AndrewBastin))
+- Minor GraphQL page improvements [\#631](https://github.com/liyasthomas/postwoman/pull/631) ([dmitryyankowski](https://github.com/dmitryyankowski))
+- Ignore empty GQL Variable Strings [\#629](https://github.com/liyasthomas/postwoman/pull/629) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps-dev\): bump cypress from 4.0.2 to 4.1.0 [\#628](https://github.com/liyasthomas/postwoman/pull/628) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.5.0 to 6.6.0 [\#627](https://github.com/liyasthomas/postwoman/pull/627) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.9.1 to 7.9.3 [\#626](https://github.com/liyasthomas/postwoman/pull/626) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/google-tag-manager from 2.3.1 to 2.3.2 [\#625](https://github.com/liyasthomas/postwoman/pull/625) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- test: purge travis [\#623](https://github.com/liyasthomas/postwoman/pull/623) ([yubathom](https://github.com/yubathom))
+- Added shortcut to quickly run the GraphQL query [\#620](https://github.com/liyasthomas/postwoman/pull/620) ([AndrewBastin](https://github.com/AndrewBastin))
+- docs: add dmitryyankowski as a contributor [\#619](https://github.com/liyasthomas/postwoman/pull/619) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- Link multiple auth providers [\#618](https://github.com/liyasthomas/postwoman/pull/618) ([liyasthomas](https://github.com/liyasthomas))
+- Add --staged parameter to pretty-quick pre-commit [\#617](https://github.com/liyasthomas/postwoman/pull/617) ([dmitryyankowski](https://github.com/dmitryyankowski))
+- :bug: FIxed URI not updating on Clear content, minor formData improve… [\#612](https://github.com/liyasthomas/postwoman/pull/612) ([liyasthomas](https://github.com/liyasthomas))
+- Update proxy information. [\#610](https://github.com/liyasthomas/postwoman/pull/610) ([NBTX](https://github.com/NBTX))
+- Fixed install extension toast appearing even when extension is installed [\#609](https://github.com/liyasthomas/postwoman/pull/609) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps-dev\): bump lint-staged from 10.0.7 to 10.0.8 [\#606](https://github.com/liyasthomas/postwoman/pull/606) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- JSON linting in the code editor [\#605](https://github.com/liyasthomas/postwoman/pull/605) ([AndrewBastin](https://github.com/AndrewBastin))
+- Added regex to handle url parts [\#603](https://github.com/liyasthomas/postwoman/pull/603) ([JacobAnavisca](https://github.com/JacobAnavisca))
+- GraphQL page improvements, and more [\#602](https://github.com/liyasthomas/postwoman/pull/602) ([dmitryyankowski](https://github.com/dmitryyankowski))
+- I18n [\#601](https://github.com/liyasthomas/postwoman/pull/601) ([liyasthomas](https://github.com/liyasthomas))
+- feat\(i18n\): add Korean [\#600](https://github.com/liyasthomas/postwoman/pull/600) ([9j](https://github.com/9j))
+- Improve page load/unload experience \(remove FOUCs\) [\#599](https://github.com/liyasthomas/postwoman/pull/599) ([NBTX](https://github.com/NBTX))
+- Feature: Add prettier/pretty-quick formatting w/ Husky pre-commit [\#596](https://github.com/liyasthomas/postwoman/pull/596) ([dmitryyankowski](https://github.com/dmitryyankowski))
+
 ## [v1.9.0](https://github.com/liyasthomas/postwoman/tree/v1.9.0) (2020-02-24)
 
 [Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.8.0...v1.9.0)
 
-**Implemented enhancements:**
-
-- Disable SSL cert for websockets [\#557](https://github.com/liyasthomas/postwoman/issues/557)
-- Feature request: Keyboard shortcuts for folder creation [\#539](https://github.com/liyasthomas/postwoman/issues/539)
-- Friendly minded  GraphQL [\#468](https://github.com/liyasthomas/postwoman/issues/468)
-- multipart/form-data support [\#434](https://github.com/liyasthomas/postwoman/issues/434)
-- Implement pre-request and post-request scripts \(and request chaining\) [\#218](https://github.com/liyasthomas/postwoman/issues/218)
-- Environment management and configuration [\#147](https://github.com/liyasthomas/postwoman/issues/147)
-- POST request body editor reacts to the content type [\#594](https://github.com/liyasthomas/postwoman/pull/594) ([AndrewBastin](https://github.com/AndrewBastin))
-- Environment Mangement [\#591](https://github.com/liyasthomas/postwoman/pull/591) ([JacobAnavisca](https://github.com/JacobAnavisca))
-- GraphQL Query Autocompletion [\#590](https://github.com/liyasthomas/postwoman/pull/590) ([AndrewBastin](https://github.com/AndrewBastin))
-- Postman collection parsing [\#574](https://github.com/liyasthomas/postwoman/pull/574) ([JacobAnavisca](https://github.com/JacobAnavisca))
-- Added toggle to decide whether extensions should be used [\#551](https://github.com/liyasthomas/postwoman/pull/551) ([AndrewBastin](https://github.com/AndrewBastin))
-- Show Ctrl instead of Command for shortcuts non-Apple platforms [\#549](https://github.com/liyasthomas/postwoman/pull/549) ([AndrewBastin](https://github.com/AndrewBastin))
-- Updated GraphQL Query Variable Editor [\#534](https://github.com/liyasthomas/postwoman/pull/534) ([AndrewBastin](https://github.com/AndrewBastin))
-
 **Fixed bugs:**
 
 - Auto Theme Selection is kinda difficult to see [\#563](https://github.com/liyasthomas/postwoman/issues/563)
@@ -32,16 +398,25 @@
 
 - don't run [\#577](https://github.com/liyasthomas/postwoman/issues/577)
 - Get correct response data but occurs with error "Cannot read property 'value' of undefined" [\#575](https://github.com/liyasthomas/postwoman/issues/575)
-- firebase\_app\_\_WEBPACK\_IMPORTED\_MODULE\_2\_\_\_default.a.firestore is not  a function  [\#558](https://github.com/liyasthomas/postwoman/issues/558)
+- firebase_app\_\_WEBPACK_IMPORTED_MODULE_2\_\_\_default.a.firestore is not a function [\#558](https://github.com/liyasthomas/postwoman/issues/558)
+- Disable SSL cert for websockets [\#557](https://github.com/liyasthomas/postwoman/issues/557)
 - relative module not found during start [\#552](https://github.com/liyasthomas/postwoman/issues/552)
 - Feature Request: Subfolders [\#540](https://github.com/liyasthomas/postwoman/issues/540)
+- Feature request: Keyboard shortcuts for folder creation [\#539](https://github.com/liyasthomas/postwoman/issues/539)
 - Add max-height and overflow: auto to "parameter list" textarea [\#532](https://github.com/liyasthomas/postwoman/issues/532)
+- Friendly minded GraphQL [\#468](https://github.com/liyasthomas/postwoman/issues/468)
+- multipart/form-data support [\#434](https://github.com/liyasthomas/postwoman/issues/434)
 - IE Support [\#386](https://github.com/liyasthomas/postwoman/issues/386)
 - ⏬ Import a Postman's Collection [\#333](https://github.com/liyasthomas/postwoman/issues/333)
+- Implement pre-request and post-request scripts \(and request chaining\) [\#218](https://github.com/liyasthomas/postwoman/issues/218)
+- Environment management and configuration [\#147](https://github.com/liyasthomas/postwoman/issues/147)
 
 **Merged pull requests:**
 
+- POST request body editor reacts to the content type [\#594](https://github.com/liyasthomas/postwoman/pull/594) ([AndrewBastin](https://github.com/AndrewBastin))
 - Fix variablesJSONString store default for GraphQL page [\#593](https://github.com/liyasthomas/postwoman/pull/593) ([dmitryyankowski](https://github.com/dmitryyankowski))
+- Environment Mangement [\#591](https://github.com/liyasthomas/postwoman/pull/591) ([JacobAnavisca](https://github.com/JacobAnavisca))
+- GraphQL Query Autocompletion [\#590](https://github.com/liyasthomas/postwoman/pull/590) ([AndrewBastin](https://github.com/AndrewBastin))
 - Refactor/lint [\#589](https://github.com/liyasthomas/postwoman/pull/589) ([liyasthomas](https://github.com/liyasthomas))
 - Even [\#588](https://github.com/liyasthomas/postwoman/pull/588) ([liyasthomas](https://github.com/liyasthomas))
 - chore\(deps\): bump firebase from 7.9.0 to 7.9.1 [\#587](https://github.com/liyasthomas/postwoman/pull/587) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
@@ -53,6 +428,7 @@
 - Even [\#579](https://github.com/liyasthomas/postwoman/pull/579) ([liyasthomas](https://github.com/liyasthomas))
 - Refactor/lint [\#578](https://github.com/liyasthomas/postwoman/pull/578) ([liyasthomas](https://github.com/liyasthomas))
 - chore\(deps\): bump vue-virtual-scroll-list from 1.4.4 to 1.4.5 [\#576](https://github.com/liyasthomas/postwoman/pull/576) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Postman collection parsing [\#574](https://github.com/liyasthomas/postwoman/pull/574) ([JacobAnavisca](https://github.com/JacobAnavisca))
 - Unify Chrome and Firefox extensions [\#573](https://github.com/liyasthomas/postwoman/pull/573) ([levrik](https://github.com/levrik))
 - fix: drop the toast which doesn't show up [\#572](https://github.com/liyasthomas/postwoman/pull/572) ([jamesgeorge007](https://github.com/jamesgeorge007))
 - :sparkles: Native share + updated meta description [\#571](https://github.com/liyasthomas/postwoman/pull/571) ([liyasthomas](https://github.com/liyasthomas))
@@ -68,6 +444,8 @@
 - Support for Formdata [\#555](https://github.com/liyasthomas/postwoman/pull/555) ([liyasthomas](https://github.com/liyasthomas))
 - chore\(deps\): bump @nuxtjs/pwa from 3.0.0-beta.19 to 3.0.0-beta.20 [\#554](https://github.com/liyasthomas/postwoman/pull/554) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps\): bump @nuxtjs/axios from 5.9.4 to 5.9.5 [\#553](https://github.com/liyasthomas/postwoman/pull/553) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Added toggle to decide whether extensions should be used [\#551](https://github.com/liyasthomas/postwoman/pull/551) ([AndrewBastin](https://github.com/AndrewBastin))
+- Show Ctrl instead of Command for shortcuts non-Apple platforms [\#549](https://github.com/liyasthomas/postwoman/pull/549) ([AndrewBastin](https://github.com/AndrewBastin))
 - fix\(chore\): Take letter casing into account while checking for duplicate collection [\#548](https://github.com/liyasthomas/postwoman/pull/548) ([jamesgeorge007](https://github.com/jamesgeorge007))
 - update e2e tests [\#546](https://github.com/liyasthomas/postwoman/pull/546) ([yubathom](https://github.com/yubathom))
 - chore\(deps\): bump @nuxtjs/axios from 5.9.3 to 5.9.4 [\#545](https://github.com/liyasthomas/postwoman/pull/545) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
@@ -77,35 +455,14 @@
 - i18n [\#538](https://github.com/liyasthomas/postwoman/pull/538) ([liyasthomas](https://github.com/liyasthomas))
 - Modification of French translations [\#537](https://github.com/liyasthomas/postwoman/pull/537) ([thomasbnt](https://github.com/thomasbnt))
 - Even [\#535](https://github.com/liyasthomas/postwoman/pull/535) ([liyasthomas](https://github.com/liyasthomas))
+- Updated GraphQL Query Variable Editor [\#534](https://github.com/liyasthomas/postwoman/pull/534) ([AndrewBastin](https://github.com/AndrewBastin))
 - Updating spanish translation [\#529](https://github.com/liyasthomas/postwoman/pull/529) ([liyasthomas](https://github.com/liyasthomas))
-- chore\(deps\): bump nuxt-i18n from 6.4.1 to 6.5.0 [\#522](https://github.com/liyasthomas/postwoman/pull/522) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- even merge [\#528](https://github.com/liyasthomas/postwoman/pull/528) ([liyasthomas](https://github.com/liyasthomas))
 
 ## [v1.8.0](https://github.com/liyasthomas/postwoman/tree/v1.8.0) (2020-01-28)
 
 [Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.5.0...v1.8.0)
 
-**Implemented enhancements:**
-
-- Sync collection with a cloud storage \(e.g: Google drive\) [\#507](https://github.com/liyasthomas/postwoman/issues/507)
-- Application contains many hard-coded strings that aren't translatable [\#488](https://github.com/liyasthomas/postwoman/issues/488)
-- ULR parsing and var auto creation [\#469](https://github.com/liyasthomas/postwoman/issues/469)
-- What about additional loaders: + Pug, TypeScript, SASS, material-vue ? [\#467](https://github.com/liyasthomas/postwoman/issues/467)
-- \[suggestion\] - Tests tab [\#465](https://github.com/liyasthomas/postwoman/issues/465)
-- cookie not found support [\#443](https://github.com/liyasthomas/postwoman/issues/443)
-- Feature Request: Consumer Driven Contract Testing [\#420](https://github.com/liyasthomas/postwoman/issues/420)
-- Feature Request: Support OAuth2/OIDC [\#337](https://github.com/liyasthomas/postwoman/issues/337)
-- Add DB cache [\#26](https://github.com/liyasthomas/postwoman/issues/26)
-- Update asset/\*. js to  asset/\*. ts. [\#517](https://github.com/liyasthomas/postwoman/pull/517) ([Sn005](https://github.com/Sn005))
-- Auth [\#513](https://github.com/liyasthomas/postwoman/pull/513) ([liyasthomas](https://github.com/liyasthomas))
-- Support for Google Chrome Extension [\#512](https://github.com/liyasthomas/postwoman/pull/512) ([AndrewBastin](https://github.com/AndrewBastin))
-- GraphQL query validation based on schema [\#508](https://github.com/liyasthomas/postwoman/pull/508) ([AndrewBastin](https://github.com/AndrewBastin))
-- Syntax Error marking in GraphQL query editor [\#505](https://github.com/liyasthomas/postwoman/pull/505) ([AndrewBastin](https://github.com/AndrewBastin))
-- Refactoring proxy handling to be done in strategies [\#500](https://github.com/liyasthomas/postwoman/pull/500) ([AndrewBastin](https://github.com/AndrewBastin))
-- Firefox Extension compatibility [\#494](https://github.com/liyasthomas/postwoman/pull/494) ([AndrewBastin](https://github.com/AndrewBastin))
-- Network Strategies [\#487](https://github.com/liyasthomas/postwoman/pull/487) ([AndrewBastin](https://github.com/AndrewBastin))
-- chore\(oauth\): Added method signatures as per JSDoc conventions [\#486](https://github.com/liyasthomas/postwoman/pull/486) ([jamesgeorge007](https://github.com/jamesgeorge007))
-- GraphQL Type Highlight and Links [\#479](https://github.com/liyasthomas/postwoman/pull/479) ([AndrewBastin](https://github.com/AndrewBastin))
-
 **Fixed bugs:**
 
 - Warn the user if name field was left blank while creating a new collection [\#515](https://github.com/liyasthomas/postwoman/issues/515)
@@ -117,84 +474,63 @@
 
 - Allow importing Postman collections [\#524](https://github.com/liyasthomas/postwoman/issues/524)
 - Request descriptions [\#511](https://github.com/liyasthomas/postwoman/issues/511)
+- Sync collection with a cloud storage \(e.g: Google drive\) [\#507](https://github.com/liyasthomas/postwoman/issues/507)
 - Ability to run all requests of a folder/collection [\#498](https://github.com/liyasthomas/postwoman/issues/498)
 - Change import/export collection on requests page icon [\#495](https://github.com/liyasthomas/postwoman/issues/495)
+- Application contains many hard-coded strings that aren't translatable [\#488](https://github.com/liyasthomas/postwoman/issues/488)
 - import cURL error [\#477](https://github.com/liyasthomas/postwoman/issues/477)
 - move to postwoman org [\#475](https://github.com/liyasthomas/postwoman/issues/475)
 - Create standalone vue components of the request builder. [\#474](https://github.com/liyasthomas/postwoman/issues/474)
+- ULR parsing and var auto creation [\#469](https://github.com/liyasthomas/postwoman/issues/469)
+- What about additional loaders: + Pug, TypeScript, SASS, material-vue ? [\#467](https://github.com/liyasthomas/postwoman/issues/467)
+- \[suggestion\] - Tests tab [\#465](https://github.com/liyasthomas/postwoman/issues/465)
+- cookie not found support [\#443](https://github.com/liyasthomas/postwoman/issues/443)
+- Feature Request: Consumer Driven Contract Testing [\#420](https://github.com/liyasthomas/postwoman/issues/420)
+- Feature Request: Support OAuth2/OIDC [\#337](https://github.com/liyasthomas/postwoman/issues/337)
 - Enable running proxy as a backend for Request Capture [\#325](https://github.com/liyasthomas/postwoman/issues/325)
 - Label doesn't change when switching between collection requests [\#291](https://github.com/liyasthomas/postwoman/issues/291)
+- Add DB cache [\#26](https://github.com/liyasthomas/postwoman/issues/26)
 
 **Merged pull requests:**
 
 - Enhancements [\#531](https://github.com/liyasthomas/postwoman/pull/531) ([jamesgeorge007](https://github.com/jamesgeorge007))
 - Merge pull request \#530 from liyasthomas/feature/post-request-tests [\#530](https://github.com/liyasthomas/postwoman/pull/530) ([liyasthomas](https://github.com/liyasthomas))
-- even merge [\#528](https://github.com/liyasthomas/postwoman/pull/528) ([liyasthomas](https://github.com/liyasthomas))
 - Refactor [\#523](https://github.com/liyasthomas/postwoman/pull/523) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump nuxt-i18n from 6.4.1 to 6.5.0 [\#522](https://github.com/liyasthomas/postwoman/pull/522) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps\): bump v-tooltip from 2.0.2 to 2.0.3 [\#521](https://github.com/liyasthomas/postwoman/pull/521) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps-dev\): bump cypress from 3.8.2 to 3.8.3 [\#520](https://github.com/liyasthomas/postwoman/pull/520) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - Feature/post request tests [\#518](https://github.com/liyasthomas/postwoman/pull/518) ([nickpalenchar](https://github.com/nickpalenchar))
 - Validations for edit and create collections activity [\#516](https://github.com/liyasthomas/postwoman/pull/516) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- Auth [\#513](https://github.com/liyasthomas/postwoman/pull/513) ([liyasthomas](https://github.com/liyasthomas))
+- Support for Google Chrome Extension [\#512](https://github.com/liyasthomas/postwoman/pull/512) ([AndrewBastin](https://github.com/AndrewBastin))
 - Validate duplicate collections [\#510](https://github.com/liyasthomas/postwoman/pull/510) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- GraphQL query validation based on schema [\#508](https://github.com/liyasthomas/postwoman/pull/508) ([AndrewBastin](https://github.com/AndrewBastin))
 - Lint and refactor [\#506](https://github.com/liyasthomas/postwoman/pull/506) ([liyasthomas](https://github.com/liyasthomas))
-- Merge pull request \#504 from liyasthomas/dependabot/npm\_and\_yarn/node-sass-4.13.1 [\#504](https://github.com/liyasthomas/postwoman/pull/504) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Syntax Error marking in GraphQL query editor [\#505](https://github.com/liyasthomas/postwoman/pull/505) ([AndrewBastin](https://github.com/AndrewBastin))
+- Merge pull request \#504 from liyasthomas/dependabot/npm_and_yarn/node-sass-4.13.1 [\#504](https://github.com/liyasthomas/postwoman/pull/504) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps\): bump @nuxtjs/axios from 5.9.2 to 5.9.3 [\#503](https://github.com/liyasthomas/postwoman/pull/503) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps-dev\): bump sass-loader from 8.0.1 to 8.0.2 [\#502](https://github.com/liyasthomas/postwoman/pull/502) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps\): bump ace-builds from 1.4.7 to 1.4.8 [\#501](https://github.com/liyasthomas/postwoman/pull/501) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Refactoring proxy handling to be done in strategies [\#500](https://github.com/liyasthomas/postwoman/pull/500) ([AndrewBastin](https://github.com/AndrewBastin))
 - 💚 Fixed \#497 [\#499](https://github.com/liyasthomas/postwoman/pull/499) ([pushrbx](https://github.com/pushrbx))
 - Feat/firefox strategy [\#496](https://github.com/liyasthomas/postwoman/pull/496) ([liyasthomas](https://github.com/liyasthomas))
+- Firefox Extension compatibility [\#494](https://github.com/liyasthomas/postwoman/pull/494) ([AndrewBastin](https://github.com/AndrewBastin))
 - i18n Japanese: Added new translations [\#492](https://github.com/liyasthomas/postwoman/pull/492) ([reefqi037](https://github.com/reefqi037))
 - Merge pull request \#491 from liyasthomas/i18n [\#491](https://github.com/liyasthomas/postwoman/pull/491) ([liyasthomas](https://github.com/liyasthomas))
 - Replaced hard-coded strings with localizable strings [\#490](https://github.com/liyasthomas/postwoman/pull/490) ([liyasthomas](https://github.com/liyasthomas))
+- Network Strategies [\#487](https://github.com/liyasthomas/postwoman/pull/487) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(oauth\): Added method signatures as per JSDoc conventions [\#486](https://github.com/liyasthomas/postwoman/pull/486) ([jamesgeorge007](https://github.com/jamesgeorge007))
 - chore: Minor tweaks [\#485](https://github.com/liyasthomas/postwoman/pull/485) ([jamesgeorge007](https://github.com/jamesgeorge007))
-- Porting \(most of\) code to typescript [\#484](https://github.com/liyasthomas/postwoman/pull/484) ([AndrewBastin](https://github.com/AndrewBastin))
 - ⬆️ Bump cypress from 3.8.1 to 3.8.2 [\#483](https://github.com/liyasthomas/postwoman/pull/483) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump sass-loader from 8.0.0 to 8.0.1 [\#482](https://github.com/liyasthomas/postwoman/pull/482) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump @nuxtjs/google-analytics from 2.2.2 to 2.2.3 [\#481](https://github.com/liyasthomas/postwoman/pull/481) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- GraphQL Type Highlight and Links [\#479](https://github.com/liyasthomas/postwoman/pull/479) ([AndrewBastin](https://github.com/AndrewBastin))
 - OAuth 2.0/OIDC Access Token Retrieval Support [\#476](https://github.com/liyasthomas/postwoman/pull/476) ([reefqi037](https://github.com/reefqi037))
 
 ## [v1.5.0](https://github.com/liyasthomas/postwoman/tree/v1.5.0) (2020-01-04)
 
 [Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.0.0...v1.5.0)
 
-**Implemented enhancements:**
-
-- Can WSDL be implemented, similar to SoapUI? [\#461](https://github.com/liyasthomas/postwoman/issues/461)
-- Raw Request Body should be supported  to format the JSON string [\#446](https://github.com/liyasthomas/postwoman/issues/446)
-- Ability to send Binary data using Postwoman [\#415](https://github.com/liyasthomas/postwoman/issues/415)
-- Custom request method [\#398](https://github.com/liyasthomas/postwoman/issues/398)
-- \[request\]: CLI possibilities [\#363](https://github.com/liyasthomas/postwoman/issues/363)
-- Feature request: OAuth header support/integration [\#358](https://github.com/liyasthomas/postwoman/issues/358)
-- i18n support [\#348](https://github.com/liyasthomas/postwoman/issues/348)
-- Separate layers in dockerfile to improve image build [\#339](https://github.com/liyasthomas/postwoman/issues/339)
--  Internal server environment usage requirements [\#336](https://github.com/liyasthomas/postwoman/issues/336)
-- Server Sent Events [\#329](https://github.com/liyasthomas/postwoman/issues/329)
-- Generate API documentation [\#326](https://github.com/liyasthomas/postwoman/issues/326)
-- Auth info on WebSocket connections [\#321](https://github.com/liyasthomas/postwoman/issues/321)
-- Set response panel to fullscreen [\#320](https://github.com/liyasthomas/postwoman/issues/320)
-- Graphql support  [\#312](https://github.com/liyasthomas/postwoman/issues/312)
-- Keyboard shortcuts [\#302](https://github.com/liyasthomas/postwoman/issues/302)
-- File/binary request body support  [\#298](https://github.com/liyasthomas/postwoman/issues/298)
-- It's possible to tab into read only and non-form elements [\#287](https://github.com/liyasthomas/postwoman/issues/287)
-- Change cursor to disabled on disabled inputs [\#286](https://github.com/liyasthomas/postwoman/issues/286)
-- Hover Styling on Inputs [\#285](https://github.com/liyasthomas/postwoman/issues/285)
-- Focus Styles on Buttons [\#284](https://github.com/liyasthomas/postwoman/issues/284)
-- Missing Focus on Inputs [\#279](https://github.com/liyasthomas/postwoman/issues/279)
-- Download the request result into a file. [\#278](https://github.com/liyasthomas/postwoman/issues/278)
-- Improve UI Contrast [\#277](https://github.com/liyasthomas/postwoman/issues/277)
-- \[UI\] \[UX\] Allow app to take width of browser [\#236](https://github.com/liyasthomas/postwoman/issues/236)
-- Extend syntax highlighting with ACE for pre-request script textarea [\#235](https://github.com/liyasthomas/postwoman/issues/235)
-- Store pre-request scripts in history [\#233](https://github.com/liyasthomas/postwoman/issues/233)
-- Store the time spent on fetching a response [\#225](https://github.com/liyasthomas/postwoman/issues/225)
-- Cache view [\#188](https://github.com/liyasthomas/postwoman/issues/188)
-- chore: stick to Vue.js best practices [\#432](https://github.com/liyasthomas/postwoman/pull/432) ([jamesgeorge007](https://github.com/jamesgeorge007))
-- Header key autocompletion [\#421](https://github.com/liyasthomas/postwoman/pull/421) ([AndrewBastin](https://github.com/AndrewBastin))
-- Custom methods support [\#400](https://github.com/liyasthomas/postwoman/pull/400) ([liyasthomas](https://github.com/liyasthomas))
-- Two Way Data Binding \(v-model\) to Ace Editor component [\#379](https://github.com/liyasthomas/postwoman/pull/379) ([AndrewBastin](https://github.com/AndrewBastin))
-- Basic i18n support [\#351](https://github.com/liyasthomas/postwoman/pull/351) ([liyasthomas](https://github.com/liyasthomas))
-- Undo header/param/body param deletion [\#350](https://github.com/liyasthomas/postwoman/pull/350) ([AndrewBastin](https://github.com/AndrewBastin))
-- refactor: minor improvements [\#343](https://github.com/liyasthomas/postwoman/pull/343) ([jamesgeorge007](https://github.com/jamesgeorge007))
-
 **Fixed bugs:**
 
 - WebSocket page freezes when pasting long URL [\#471](https://github.com/liyasthomas/postwoman/issues/471)
@@ -214,39 +550,67 @@
 
 **Closed issues:**
 
+- Can WSDL be implemented, similar to SoapUI? [\#461](https://github.com/liyasthomas/postwoman/issues/461)
 - Module not found: Error: Can't resolve '../.postwoman/version.json' [\#457](https://github.com/liyasthomas/postwoman/issues/457)
-- \* ../.postwoman/version.json in ./node\_modules/babel-loader/lib??ref--2-0!./node\_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&        friendly-errors 11:12:37   [\#448](https://github.com/liyasthomas/postwoman/issues/448)
+- \* ../.postwoman/version.json in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js& friendly-errors 11:12:37 [\#448](https://github.com/liyasthomas/postwoman/issues/448)
+- Raw Request Body should be supported to format the JSON string [\#446](https://github.com/liyasthomas/postwoman/issues/446)
 - npm run dev module was not found: ../.postwoman/version.json [\#442](https://github.com/liyasthomas/postwoman/issues/442)
 - graphql and websocket work, but http and https do not [\#441](https://github.com/liyasthomas/postwoman/issues/441)
 - Can I test localhost? [\#433](https://github.com/liyasthomas/postwoman/issues/433)
 - No 'Access-Control-Allow-Origin' [\#426](https://github.com/liyasthomas/postwoman/issues/426)
 - When uninstall the PWA the "install PWA" link in postwoman.io isn't appear anymore [\#419](https://github.com/liyasthomas/postwoman/issues/419)
 - Toggling options will reset the UI to English [\#417](https://github.com/liyasthomas/postwoman/issues/417)
+- Ability to send Binary data using Postwoman [\#415](https://github.com/liyasthomas/postwoman/issues/415)
 - Oh my dear god why don't we just wrap it in electron [\#413](https://github.com/liyasthomas/postwoman/issues/413)
 - UI improvement suggestion for request method drop down [\#409](https://github.com/liyasthomas/postwoman/issues/409)
 - Can I share a request with my team? [\#408](https://github.com/liyasthomas/postwoman/issues/408)
 - Does it not support the post method? [\#403](https://github.com/liyasthomas/postwoman/issues/403)
 - Post can't send request [\#401](https://github.com/liyasthomas/postwoman/issues/401)
 - \[Bug\] fix header icons overlap [\#399](https://github.com/liyasthomas/postwoman/issues/399)
+- Custom request method [\#398](https://github.com/liyasthomas/postwoman/issues/398)
 - Improve translate for pt-BR \(i18n\) [\#395](https://github.com/liyasthomas/postwoman/issues/395)
 - Raw input disabled is not working properly [\#394](https://github.com/liyasthomas/postwoman/issues/394)
 - Input area is not clearly to identify for users because the dark mode [\#393](https://github.com/liyasthomas/postwoman/issues/393)
 - \[UX\] Setting to make sidebar buttons small [\#389](https://github.com/liyasthomas/postwoman/issues/389)
 - \[UX\] Improve responsive breaking points [\#388](https://github.com/liyasthomas/postwoman/issues/388)
-- \[UX\] Hide history/collections  [\#387](https://github.com/liyasthomas/postwoman/issues/387)
+- \[UX\] Hide history/collections [\#387](https://github.com/liyasthomas/postwoman/issues/387)
 - Clearing shortcut overrides browser default [\#374](https://github.com/liyasthomas/postwoman/issues/374)
 - Proxy server default configuration [\#373](https://github.com/liyasthomas/postwoman/issues/373)
 - Intent to translate [\#367](https://github.com/liyasthomas/postwoman/issues/367)
+- \[request\]: CLI possibilities [\#363](https://github.com/liyasthomas/postwoman/issues/363)
+- Feature request: OAuth header support/integration [\#358](https://github.com/liyasthomas/postwoman/issues/358)
 - Static builds on releases [\#352](https://github.com/liyasthomas/postwoman/issues/352)
 - fix:SSE onclose handle [\#349](https://github.com/liyasthomas/postwoman/issues/349)
+- i18n support [\#348](https://github.com/liyasthomas/postwoman/issues/348)
+- Separate layers in dockerfile to improve image build [\#339](https://github.com/liyasthomas/postwoman/issues/339)
+- Internal server environment usage requirements [\#336](https://github.com/liyasthomas/postwoman/issues/336)
+- Server Sent Events [\#329](https://github.com/liyasthomas/postwoman/issues/329)
+- Generate API documentation [\#326](https://github.com/liyasthomas/postwoman/issues/326)
 - \[Request\] Use responses for next request? [\#324](https://github.com/liyasthomas/postwoman/issues/324)
+- Auth info on WebSocket connections [\#321](https://github.com/liyasthomas/postwoman/issues/321)
+- Set response panel to fullscreen [\#320](https://github.com/liyasthomas/postwoman/issues/320)
+- Graphql support [\#312](https://github.com/liyasthomas/postwoman/issues/312)
+- Keyboard shortcuts [\#302](https://github.com/liyasthomas/postwoman/issues/302)
+- File/binary request body support [\#298](https://github.com/liyasthomas/postwoman/issues/298)
 - Make response body area expandable [\#294](https://github.com/liyasthomas/postwoman/issues/294)
+- It's possible to tab into read only and non-form elements [\#287](https://github.com/liyasthomas/postwoman/issues/287)
+- Change cursor to disabled on disabled inputs [\#286](https://github.com/liyasthomas/postwoman/issues/286)
+- Hover Styling on Inputs [\#285](https://github.com/liyasthomas/postwoman/issues/285)
+- Focus Styles on Buttons [\#284](https://github.com/liyasthomas/postwoman/issues/284)
 - Mobile can't see console for request errors [\#283](https://github.com/liyasthomas/postwoman/issues/283)
+- Missing Focus on Inputs [\#279](https://github.com/liyasthomas/postwoman/issues/279)
+- Download the request result into a file. [\#278](https://github.com/liyasthomas/postwoman/issues/278)
+- Improve UI Contrast [\#277](https://github.com/liyasthomas/postwoman/issues/277)
 - Duplicated query string in generated code [\#272](https://github.com/liyasthomas/postwoman/issues/272)
 - Query parameters are duplicated [\#271](https://github.com/liyasthomas/postwoman/issues/271)
 - Generated code is incorrect [\#269](https://github.com/liyasthomas/postwoman/issues/269)
+- \[UI\] \[UX\] Allow app to take width of browser [\#236](https://github.com/liyasthomas/postwoman/issues/236)
+- Extend syntax highlighting with ACE for pre-request script textarea [\#235](https://github.com/liyasthomas/postwoman/issues/235)
+- Store pre-request scripts in history [\#233](https://github.com/liyasthomas/postwoman/issues/233)
 - Lacking documentation and wiki [\#232](https://github.com/liyasthomas/postwoman/issues/232)
+- Store the time spent on fetching a response [\#225](https://github.com/liyasthomas/postwoman/issues/225)
 - I can't send POST method [\#210](https://github.com/liyasthomas/postwoman/issues/210)
+- Cache view [\#188](https://github.com/liyasthomas/postwoman/issues/188)
 - Handling request failures when build number is obtained from GitHub [\#122](https://github.com/liyasthomas/postwoman/issues/122)
 
 **Merged pull requests:**
@@ -263,6 +627,7 @@
 - Various UI tweaks [\#439](https://github.com/liyasthomas/postwoman/pull/439) ([liyasthomas](https://github.com/liyasthomas))
 - i18n [\#438](https://github.com/liyasthomas/postwoman/pull/438) ([liyasthomas](https://github.com/liyasthomas))
 - Burmese translation added [\#437](https://github.com/liyasthomas/postwoman/pull/437) ([ZattWine](https://github.com/ZattWine))
+- chore: stick to Vue.js best practices [\#432](https://github.com/liyasthomas/postwoman/pull/432) ([jamesgeorge007](https://github.com/jamesgeorge007))
 - Styled select input [\#431](https://github.com/liyasthomas/postwoman/pull/431) ([liyasthomas](https://github.com/liyasthomas))
 - Bumped dependencies and Improved UI contrast [\#430](https://github.com/liyasthomas/postwoman/pull/430) ([liyasthomas](https://github.com/liyasthomas))
 - ⬆️ Bump cypress from 3.7.0 to 3.8.0 [\#429](https://github.com/liyasthomas/postwoman/pull/429) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
@@ -271,6 +636,7 @@
 - Even [\#424](https://github.com/liyasthomas/postwoman/pull/424) ([liyasthomas](https://github.com/liyasthomas))
 - I18n [\#423](https://github.com/liyasthomas/postwoman/pull/423) ([liyasthomas](https://github.com/liyasthomas))
 - I18n German translation added [\#422](https://github.com/liyasthomas/postwoman/pull/422) ([NJannasch](https://github.com/NJannasch))
+- Header key autocompletion [\#421](https://github.com/liyasthomas/postwoman/pull/421) ([AndrewBastin](https://github.com/AndrewBastin))
 - Update id-ID.js [\#416](https://github.com/liyasthomas/postwoman/pull/416) ([williamsp](https://github.com/williamsp))
 - Improving translation for id-ID [\#414](https://github.com/liyasthomas/postwoman/pull/414) ([williamsp](https://github.com/williamsp))
 - Fixing bug on request saving [\#410](https://github.com/liyasthomas/postwoman/pull/410) ([adevr](https://github.com/adevr))
@@ -278,10 +644,12 @@
 - ⬆️ Bump vue-virtual-scroll-list from 1.4.3 to 1.4.4 [\#406](https://github.com/liyasthomas/postwoman/pull/406) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump nuxt-i18n from 6.4.0 to 6.4.1 [\#405](https://github.com/liyasthomas/postwoman/pull/405) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - I18n [\#404](https://github.com/liyasthomas/postwoman/pull/404) ([yubathom](https://github.com/yubathom))
+- Custom methods support [\#400](https://github.com/liyasthomas/postwoman/pull/400) ([liyasthomas](https://github.com/liyasthomas))
 - App UI [\#391](https://github.com/liyasthomas/postwoman/pull/391) ([liyasthomas](https://github.com/liyasthomas))
 - i18n [\#383](https://github.com/liyasthomas/postwoman/pull/383) ([liyasthomas](https://github.com/liyasthomas))
 - Added Turkish Language Support [\#382](https://github.com/liyasthomas/postwoman/pull/382) ([AliAnilKocak](https://github.com/AliAnilKocak))
 - Translated new words to Farsi lang [\#380](https://github.com/liyasthomas/postwoman/pull/380) ([hosseinnedaee](https://github.com/hosseinnedaee))
+- Two Way Data Binding \(v-model\) to Ace Editor component [\#379](https://github.com/liyasthomas/postwoman/pull/379) ([AndrewBastin](https://github.com/AndrewBastin))
 - fix: twitter summary card image url [\#378](https://github.com/liyasthomas/postwoman/pull/378) ([peterpeterparker](https://github.com/peterpeterparker))
 - Added nav shortcuts to GraphQL query and response, updated GraphQL shortcut icons [\#377](https://github.com/liyasthomas/postwoman/pull/377) ([AndrewBastin](https://github.com/AndrewBastin))
 - Bump cypress from 3.6.1 to 3.7.0 [\#376](https://github.com/liyasthomas/postwoman/pull/376) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
@@ -298,61 +666,17 @@
 - Added Brazilian Portuguese language support [\#359](https://github.com/liyasthomas/postwoman/pull/359) ([tetri](https://github.com/tetri))
 - Added Farsi language support [\#357](https://github.com/liyasthomas/postwoman/pull/357) ([hosseinnedaee](https://github.com/hosseinnedaee))
 - Adding french language basic [\#355](https://github.com/liyasthomas/postwoman/pull/355) ([thomasbnt](https://github.com/thomasbnt))
+- Basic i18n support [\#351](https://github.com/liyasthomas/postwoman/pull/351) ([liyasthomas](https://github.com/liyasthomas))
+- Undo header/param/body param deletion [\#350](https://github.com/liyasthomas/postwoman/pull/350) ([AndrewBastin](https://github.com/AndrewBastin))
+- Added ability to run GraphQL queries [\#346](https://github.com/liyasthomas/postwoman/pull/346) ([AndrewBastin](https://github.com/AndrewBastin))
 - Add Proxy URL option [\#345](https://github.com/liyasthomas/postwoman/pull/345) ([NBTX](https://github.com/NBTX))
+- ♻️ Refactor Functions [\#344](https://github.com/liyasthomas/postwoman/pull/344) ([athul](https://github.com/athul))
+- refactor: minor improvements [\#343](https://github.com/liyasthomas/postwoman/pull/343) ([jamesgeorge007](https://github.com/jamesgeorge007))
 
 ## [v1.0.0](https://github.com/liyasthomas/postwoman/tree/v1.0.0) (2019-11-04)
 
 [Full Changelog](https://github.com/liyasthomas/postwoman/compare/v0.1.0...v1.0.0)
 
-**Implemented enhancements:**
-
-- Chain requests. Execute a bunch of requests one by one and produce results [\#196](https://github.com/liyasthomas/postwoman/issues/196)
-- Allow User to Choose Whether to Include Authentication in Permalink [\#178](https://github.com/liyasthomas/postwoman/issues/178)
-- Allow HTTP \(not HTTPS\) on postwoman.io [\#175](https://github.com/liyasthomas/postwoman/issues/175)
-- Docker-compose in development [\#168](https://github.com/liyasthomas/postwoman/issues/168)
-- Add Docker [\#164](https://github.com/liyasthomas/postwoman/issues/164)
-- Clear Input [\#155](https://github.com/liyasthomas/postwoman/issues/155)
--  introduce some script language to parse the response and pass environment variable as request parameter  [\#139](https://github.com/liyasthomas/postwoman/issues/139)
-- Add links to the footer version and commit sha [\#134](https://github.com/liyasthomas/postwoman/issues/134)
-- Please add a label for each request. It will be helpful. [\#133](https://github.com/liyasthomas/postwoman/issues/133)
-- Use 'icon buttons' instead of 'text buttons' [\#130](https://github.com/liyasthomas/postwoman/issues/130)
-- Change .editorconfig [\#115](https://github.com/liyasthomas/postwoman/issues/115)
-- \[UX\] Provide Focus State for Buttons, etc. [\#112](https://github.com/liyasthomas/postwoman/issues/112)
-- Add linter semistandard [\#98](https://github.com/liyasthomas/postwoman/issues/98)
-- Show "Send" button all over the page or enable hotkeys [\#94](https://github.com/liyasthomas/postwoman/issues/94)
-- Import request from cURL [\#93](https://github.com/liyasthomas/postwoman/issues/93)
-- Search on History [\#92](https://github.com/liyasthomas/postwoman/issues/92)
-- Add support for "application/hal+json" Content-Type [\#88](https://github.com/liyasthomas/postwoman/issues/88)
-- The query string is built incorrectly when the path contains a parameter [\#87](https://github.com/liyasthomas/postwoman/issues/87)
-- Option to Copy request as Fetch or XHR Or CURL  [\#76](https://github.com/liyasthomas/postwoman/issues/76)
-- Add Tests [\#65](https://github.com/liyasthomas/postwoman/issues/65)
-- Request Headers [\#57](https://github.com/liyasthomas/postwoman/issues/57)
-- Colored response codes based on status code [\#46](https://github.com/liyasthomas/postwoman/issues/46)
-- Improve SEO [\#45](https://github.com/liyasthomas/postwoman/issues/45)
-- Add html preview to response section [\#41](https://github.com/liyasthomas/postwoman/issues/41)
-- websocket support [\#40](https://github.com/liyasthomas/postwoman/issues/40)
-- Raw request body for POST requests and Authorization key/value in Header [\#36](https://github.com/liyasthomas/postwoman/issues/36)
-- Code highlight on response body [\#33](https://github.com/liyasthomas/postwoman/issues/33)
-- Template selector [\#32](https://github.com/liyasthomas/postwoman/issues/32)
-- Vue template [\#31](https://github.com/liyasthomas/postwoman/issues/31)
-- Add copy response to clipboard button [\#30](https://github.com/liyasthomas/postwoman/issues/30)
-- Ability to store/share/create collections [\#29](https://github.com/liyasthomas/postwoman/issues/29)
-- Send request on Enter Key press [\#17](https://github.com/liyasthomas/postwoman/issues/17)
-- Readable [\#5](https://github.com/liyasthomas/postwoman/issues/5)
-- Serialize a request into JSON? [\#4](https://github.com/liyasthomas/postwoman/issues/4)
-- Add brand new logo to the project [\#244](https://github.com/liyasthomas/postwoman/pull/244) ([caneco](https://github.com/caneco))
-- Feature/pre request script [\#231](https://github.com/liyasthomas/postwoman/pull/231) ([nickpalenchar](https://github.com/nickpalenchar))
-- Add the ApolloTV proxy server [\#217](https://github.com/liyasthomas/postwoman/pull/217) ([NBTX](https://github.com/NBTX))
-- bug: keeping information on page change [\#211](https://github.com/liyasthomas/postwoman/pull/211) ([breno-pereira](https://github.com/breno-pereira))
-- Work in Progress: feature/allow-collections-importing [\#209](https://github.com/liyasthomas/postwoman/pull/209) ([vlad0337187](https://github.com/vlad0337187))
-- Feature/log errors [\#207](https://github.com/liyasthomas/postwoman/pull/207) ([nickpalenchar](https://github.com/nickpalenchar))
-- Use returned value from toggle component on change event [\#205](https://github.com/liyasthomas/postwoman/pull/205) ([hosseinnedaee](https://github.com/hosseinnedaee))
-- Fix CORS and mixed content issue [\#199](https://github.com/liyasthomas/postwoman/pull/199) ([hosseinnedaee](https://github.com/hosseinnedaee))
-- Added Tooltips [\#197](https://github.com/liyasthomas/postwoman/pull/197) ([AndrewBastin](https://github.com/AndrewBastin))
-- Added auto theme [\#185](https://github.com/liyasthomas/postwoman/pull/185) ([AndrewBastin](https://github.com/AndrewBastin))
-- Add Request name label for every requests [\#184](https://github.com/liyasthomas/postwoman/pull/184) ([sharath2106](https://github.com/sharath2106))
-- Collections [\#176](https://github.com/liyasthomas/postwoman/pull/176) ([TheHollidayInn](https://github.com/TheHollidayInn))
-
 **Fixed bugs:**
 
 - Bearer Token value still left even after being cleared [\#212](https://github.com/liyasthomas/postwoman/issues/212)
@@ -375,24 +699,58 @@
 - Unsupported URLs \[BUG\]? [\#229](https://github.com/liyasthomas/postwoman/issues/229)
 - Credentials are still being included in Permalink even when "Include in URL" is turned off [\#227](https://github.com/liyasthomas/postwoman/issues/227)
 - Display sendRequest runtime errors in the console [\#206](https://github.com/liyasthomas/postwoman/issues/206)
+- Chain requests. Execute a bunch of requests one by one and produce results [\#196](https://github.com/liyasthomas/postwoman/issues/196)
+- Allow User to Choose Whether to Include Authentication in Permalink [\#178](https://github.com/liyasthomas/postwoman/issues/178)
+- Allow HTTP \(not HTTPS\) on postwoman.io [\#175](https://github.com/liyasthomas/postwoman/issues/175)
+- Docker-compose in development [\#168](https://github.com/liyasthomas/postwoman/issues/168)
+- Add Docker [\#164](https://github.com/liyasthomas/postwoman/issues/164)
 - Missing "Landing/start page" [\#162](https://github.com/liyasthomas/postwoman/issues/162)
 - Response with content-type "application/hal+json" shows as \[Object object\] [\#158](https://github.com/liyasthomas/postwoman/issues/158)
+- Clear Input [\#155](https://github.com/liyasthomas/postwoman/issues/155)
 - A place to discuss [\#149](https://github.com/liyasthomas/postwoman/issues/149)
 - Inconsistent version name [\#141](https://github.com/liyasthomas/postwoman/issues/141)
+- introduce some script language to parse the response and pass environment variable as request parameter [\#139](https://github.com/liyasthomas/postwoman/issues/139)
+- Add links to the footer version and commit sha [\#134](https://github.com/liyasthomas/postwoman/issues/134)
+- Please add a label for each request. It will be helpful. [\#133](https://github.com/liyasthomas/postwoman/issues/133)
+- Use 'icon buttons' instead of 'text buttons' [\#130](https://github.com/liyasthomas/postwoman/issues/130)
+- Change .editorconfig [\#115](https://github.com/liyasthomas/postwoman/issues/115)
+- \[UX\] Provide Focus State for Buttons, etc. [\#112](https://github.com/liyasthomas/postwoman/issues/112)
 - Autoresize the textarea [\#102](https://github.com/liyasthomas/postwoman/issues/102)
 - Content-Type revamping [\#99](https://github.com/liyasthomas/postwoman/issues/99)
+- Add linter semistandard [\#98](https://github.com/liyasthomas/postwoman/issues/98)
 - Add version number in footer [\#97](https://github.com/liyasthomas/postwoman/issues/97)
+- Show "Send" button all over the page or enable hotkeys [\#94](https://github.com/liyasthomas/postwoman/issues/94)
+- Import request from cURL [\#93](https://github.com/liyasthomas/postwoman/issues/93)
+- Search on History [\#92](https://github.com/liyasthomas/postwoman/issues/92)
+- Add support for "application/hal+json" Content-Type [\#88](https://github.com/liyasthomas/postwoman/issues/88)
+- The query string is built incorrectly when the path contains a parameter [\#87](https://github.com/liyasthomas/postwoman/issues/87)
 - The history doesn't show a date with the timestamp. [\#81](https://github.com/liyasthomas/postwoman/issues/81)
+- Option to Copy request as Fetch or XHR Or CURL [\#76](https://github.com/liyasthomas/postwoman/issues/76)
 - Not working on Brave Browser anymore [\#71](https://github.com/liyasthomas/postwoman/issues/71)
 - Why da fuq is your name plastered all over the README? [\#70](https://github.com/liyasthomas/postwoman/issues/70)
 - Comparison with Postman is missing [\#69](https://github.com/liyasthomas/postwoman/issues/69)
+- Add Tests [\#65](https://github.com/liyasthomas/postwoman/issues/65)
 - HTTP request with different library [\#61](https://github.com/liyasthomas/postwoman/issues/61)
 - Editorconfig file [\#60](https://github.com/liyasthomas/postwoman/issues/60)
 - 500 this.isValidURL is not a function [\#58](https://github.com/liyasthomas/postwoman/issues/58)
+- Request Headers [\#57](https://github.com/liyasthomas/postwoman/issues/57)
+- Colored response codes based on status code [\#46](https://github.com/liyasthomas/postwoman/issues/46)
+- Improve SEO [\#45](https://github.com/liyasthomas/postwoman/issues/45)
+- Add html preview to response section [\#41](https://github.com/liyasthomas/postwoman/issues/41)
+- websocket support [\#40](https://github.com/liyasthomas/postwoman/issues/40)
 - Styling with Tailwindcss [\#38](https://github.com/liyasthomas/postwoman/issues/38)
 - Not Working in IE 11 [\#37](https://github.com/liyasthomas/postwoman/issues/37)
+- Raw request body for POST requests and Authorization key/value in Header [\#36](https://github.com/liyasthomas/postwoman/issues/36)
+- Code highlight on response body [\#33](https://github.com/liyasthomas/postwoman/issues/33)
+- Template selector [\#32](https://github.com/liyasthomas/postwoman/issues/32)
+- Vue template [\#31](https://github.com/liyasthomas/postwoman/issues/31)
+- Add copy response to clipboard button [\#30](https://github.com/liyasthomas/postwoman/issues/30)
+- Ability to store/share/create collections [\#29](https://github.com/liyasthomas/postwoman/issues/29)
 - PWA not installable [\#19](https://github.com/liyasthomas/postwoman/issues/19)
-- Simple Misspelling  [\#8](https://github.com/liyasthomas/postwoman/issues/8)
+- Send request on Enter Key press [\#17](https://github.com/liyasthomas/postwoman/issues/17)
+- Simple Misspelling [\#8](https://github.com/liyasthomas/postwoman/issues/8)
+- Readable [\#5](https://github.com/liyasthomas/postwoman/issues/5)
+- Serialize a request into JSON? [\#4](https://github.com/liyasthomas/postwoman/issues/4)
 
 **Merged pull requests:**
 
@@ -414,12 +772,14 @@
 - docs: add liyasthomas as a contributor [\#247](https://github.com/liyasthomas/postwoman/pull/247) ([allcontributors[bot]](https://github.com/apps/allcontributors))
 - Make page changes more fluid [\#246](https://github.com/liyasthomas/postwoman/pull/246) ([NBTX](https://github.com/NBTX))
 - Minor tweaks [\#245](https://github.com/liyasthomas/postwoman/pull/245) ([liyasthomas](https://github.com/liyasthomas))
+- Add brand new logo to the project [\#244](https://github.com/liyasthomas/postwoman/pull/244) ([caneco](https://github.com/caneco))
 - ⬆️ Bump @nuxtjs/google-tag-manager from 2.3.0 to 2.3.1 [\#243](https://github.com/liyasthomas/postwoman/pull/243) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump yargs-parser from 15.0.0 to 16.1.0 [\#242](https://github.com/liyasthomas/postwoman/pull/242) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump @nuxtjs/toast from 3.2.1 to 3.3.0 [\#241](https://github.com/liyasthomas/postwoman/pull/241) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump highlight.js from 9.15.10 to 9.16.2 [\#240](https://github.com/liyasthomas/postwoman/pull/240) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump cypress from 3.5.0 to 3.6.0 [\#239](https://github.com/liyasthomas/postwoman/pull/239) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - Fix legend labels in Firefox, fix colored labels slider [\#238](https://github.com/liyasthomas/postwoman/pull/238) ([NBTX](https://github.com/NBTX))
+- Feature/pre request script [\#231](https://github.com/liyasthomas/postwoman/pull/231) ([nickpalenchar](https://github.com/nickpalenchar))
 - Documentation Cleanup [\#230](https://github.com/liyasthomas/postwoman/pull/230) ([amitdash291](https://github.com/amitdash291))
 - Fix \#227 Exclude credentials from permalink [\#228](https://github.com/liyasthomas/postwoman/pull/228) ([reefqi037](https://github.com/reefqi037))
 - ⬆️ Bump cypress from 3.4.1 to 3.5.0 [\#224](https://github.com/liyasthomas/postwoman/pull/224) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
@@ -428,23 +788,33 @@
 - ⬆️ Bump nuxt from 2.10.1 to 2.10.2 [\#221](https://github.com/liyasthomas/postwoman/pull/221) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump @nuxtjs/google-analytics from 2.2.0 to 2.2.1 [\#220](https://github.com/liyasthomas/postwoman/pull/220) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump vuex-persist from 2.1.0 to 2.1.1 [\#219](https://github.com/liyasthomas/postwoman/pull/219) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Add the ApolloTV proxy server [\#217](https://github.com/liyasthomas/postwoman/pull/217) ([NBTX](https://github.com/NBTX))
 - Fixed frame colors toggle [\#216](https://github.com/liyasthomas/postwoman/pull/216) ([mateusppereira](https://github.com/mateusppereira))
 - Re-order sections and add toggle for including authentication in URL [\#215](https://github.com/liyasthomas/postwoman/pull/215) ([NBTX](https://github.com/NBTX))
 - chore: minor code refactor [\#214](https://github.com/liyasthomas/postwoman/pull/214) ([jamesgeorge007](https://github.com/jamesgeorge007))
 - Fix \#212 Clear bearer token value [\#213](https://github.com/liyasthomas/postwoman/pull/213) ([reefqi037](https://github.com/reefqi037))
+- bug: keeping information on page change [\#211](https://github.com/liyasthomas/postwoman/pull/211) ([breno-pereira](https://github.com/breno-pereira))
+- Work in Progress: feature/allow-collections-importing [\#209](https://github.com/liyasthomas/postwoman/pull/209) ([vlad0337187](https://github.com/vlad0337187))
 - fix: don't display 'Collection is empty' label if collection has any … [\#208](https://github.com/liyasthomas/postwoman/pull/208) ([vlad0337187](https://github.com/vlad0337187))
+- Feature/log errors [\#207](https://github.com/liyasthomas/postwoman/pull/207) ([nickpalenchar](https://github.com/nickpalenchar))
+- Use returned value from toggle component on change event [\#205](https://github.com/liyasthomas/postwoman/pull/205) ([hosseinnedaee](https://github.com/hosseinnedaee))
 - Fix proxy URL [\#201](https://github.com/liyasthomas/postwoman/pull/201) ([NBTX](https://github.com/NBTX))
 - Fix CORS and Mixed-Content issue & Bug Fixes [\#200](https://github.com/liyasthomas/postwoman/pull/200) ([NBTX](https://github.com/NBTX))
+- Fix CORS and mixed content issue [\#199](https://github.com/liyasthomas/postwoman/pull/199) ([hosseinnedaee](https://github.com/hosseinnedaee))
 - ⬆️ Bump start-server-and-test from 1.10.5 to 1.10.6 [\#198](https://github.com/liyasthomas/postwoman/pull/198) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Added Tooltips [\#197](https://github.com/liyasthomas/postwoman/pull/197) ([AndrewBastin](https://github.com/AndrewBastin))
 - ⬆️ Bump start-server-and-test from 1.10.3 to 1.10.5 [\#194](https://github.com/liyasthomas/postwoman/pull/194) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump @nuxtjs/google-tag-manager from 2.2.1 to 2.3.0 [\#193](https://github.com/liyasthomas/postwoman/pull/193) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump nuxt from 2.10.0 to 2.10.1 [\#192](https://github.com/liyasthomas/postwoman/pull/192) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - ⬆️ Bump yargs-parser from 14.0.0 to 15.0.0 [\#191](https://github.com/liyasthomas/postwoman/pull/191) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - Add quotation marks for generated code [\#187](https://github.com/liyasthomas/postwoman/pull/187) ([johnhenry](https://github.com/johnhenry))
+- Added auto theme [\#185](https://github.com/liyasthomas/postwoman/pull/185) ([AndrewBastin](https://github.com/AndrewBastin))
+- Add Request name label for every requests [\#184](https://github.com/liyasthomas/postwoman/pull/184) ([sharath2106](https://github.com/sharath2106))
 - updated threshold and rootMargin for IntersectionObserver [\#182](https://github.com/liyasthomas/postwoman/pull/182) ([edisonaugusthy](https://github.com/edisonaugusthy))
 - Add basic e2e tests [\#181](https://github.com/liyasthomas/postwoman/pull/181) ([yubathom](https://github.com/yubathom))
 - ⬆️ Bump nuxt from 2.9.2 to 2.10.0 [\#179](https://github.com/liyasthomas/postwoman/pull/179) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - 🐛 Fixed sitemap configuration [\#177](https://github.com/liyasthomas/postwoman/pull/177) ([NicoPennec](https://github.com/NicoPennec))
+- Collections [\#176](https://github.com/liyasthomas/postwoman/pull/176) ([TheHollidayInn](https://github.com/TheHollidayInn))
 - Code Refactoring [\#173](https://github.com/liyasthomas/postwoman/pull/173) ([edisonaugusthy](https://github.com/edisonaugusthy))
 - Added Black Theme [\#172](https://github.com/liyasthomas/postwoman/pull/172) ([AndrewBastin](https://github.com/AndrewBastin))
 
@@ -452,6 +822,4 @@
 
 [Full Changelog](https://github.com/liyasthomas/postwoman/compare/91c08a5e6305cc95a0df46a33fdd0013bf7339b4...v0.1.0)
 
-
-
-\* *This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)*
+\* _This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)_

CODE_OF_CONDUCT.md

@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at liyascthomas@gmail.com. All
+reported by contacting the project team at hello@postwoman.io. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <a href="https://postwoman.io"><img src="static/logo.png" alt="Postwoman.io logo" height="160"></a>
+  <a href="https://postwoman.io"><img src="https://raw.githubusercontent.com/liyasthomas/postwoman/master/static/logo.png" alt="Postwoman.io logo" height="160"></a>
   <br>
   <br>
   <p>
@@ -10,7 +10,7 @@
   </p>
   <p>
 
-  [![Travis Build Status](https://img.shields.io/travis/com/liyasthomas/postwoman?logo=Travis)](https://travis-ci.com/liyasthomas/postwoman) [![GitHub release](https://img.shields.io/github/release/liyasthomas/postwoman/all?logo=GitHub)](https://github.com/liyasthomas/postwoman/releases/latest) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fpostwoman.io&logo=Postwoman)](https://postwoman.io) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen)](CONTRIBUTING.md) [![Financial Contributors on Open Collective](https://img.shields.io/opencollective/all/postwoman?logo=Open-Collective&label=financial+contributors)](https://opencollective.com/postwoman) [![Donate on PayPal](https://img.shields.io/badge/support-PayPal-blue?logo=PayPal)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet?logo=Telegram)](https://t.me/postwoman_app) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fpostwoman.io%2F)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fpostwoman.io&text=%F0%9F%91%BD%20Postwoman%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520Postwoman%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fpostwoman.io%26hashtags%3Dpostwoman%26via%3Dliyasthomas&via=liyasthomas&hashtags=postwoman)
+[![Travis Build Status](https://img.shields.io/travis/com/liyasthomas/postwoman?logo=Travis)](https://travis-ci.com/liyasthomas/postwoman) [![GitHub release](https://img.shields.io/github/release/liyasthomas/postwoman/all?logo=GitHub)](https://github.com/liyasthomas/postwoman/releases/latest) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fpostwoman.io&logo=Postwoman)](https://postwoman.io) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen)](CONTRIBUTING.md) [![Financial Contributors on Open Collective](https://img.shields.io/opencollective/all/postwoman?logo=Open-Collective&label=financial+contributors)](https://opencollective.com/postwoman) [![Donate on PayPal](https://img.shields.io/badge/support-PayPal-blue?logo=PayPal)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet?logo=Telegram)](https://t.me/postwoman_app) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fpostwoman.io%2F)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fpostwoman.io&text=%F0%9F%91%BD%20Postwoman%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520Postwoman%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fpostwoman.io%26hashtags%3Dpostwoman%26via%3Dliyasthomas&via=liyasthomas&hashtags=postwoman)
 
   </p>
   <p>
@@ -23,174 +23,198 @@
 
 ---
 
-**Read: _[Story behind Postwoman](https://dev.to/liyasthomas/i-created-postwoman-an-online-open-source-api-request-builder-41md), [Postwoman v1.0](https://dev.to/liyasthomas/postwoman-v1-0-a-free-fast-beautiful-alternative-to-postman-mn0)_**
+**Read: [Story behind Postwoman](https://dev.to/liyasthomas/i-created-postwoman-an-online-open-source-api-request-builder-41md)**
 
-**Chat: _[Telegram](https://t.me/postwoman_app), [Discord](https://discord.gg/GAMWxmR)_**
+**Chat: [Telegram](https://t.me/postwoman_app), [Discord](https://discord.gg/GAMWxmR)**
 
-**Donate: _[PayPal](https://www.paypal.me/liyascthomas), [Open Collective](https://opencollective.com/postwoman), [Patreon](https://www.patreon.com/liyasthomas)_**
+**Donate: [GitHub Sponsors](https://github.com/sponsors/postwoman-io), [Open Collective](https://opencollective.com/postwoman), [Patreon](https://www.patreon.com/liyasthomas), [PayPal](https://www.paypal.me/liyascthomas)**
 
 <div align="center">
-  <br>
-  <img src="static/images/screenshot1.png" alt="Screenshot1" width="100%">
-  <br>
+  <a href="https://postwoman.io"><img src="https://raw.githubusercontent.com/liyasthomas/postwoman/master/static/images/screenshot1.png" alt="Screenshot1" width="100%"></a>
 </div>
 
+<details>
+  <summary>Table of contents</summary>
+
+---
+
+- [Features](#features-)
+- [Demo](#demo--)
+- [Usage](#usage-)
+- [Built with](#built-with-)
+- [Developing](#developing-)
+  - [Browser based development environment](#browser-based-development-environment)
+  - [Local development environment](#local-development-environment)
+  - [Docker compose](#docker-compose)
+- [Docker](#docker--)
+- [Releasing](#releasing-)
+- [Contributing](#contributing-)
+- [Continuous Integration](#continuous-integration--)
+- [Versioning](#versioning--)
+- [Change log](#change-log-)
+- [Authors](#authors-)
+  - [Lead Developers](#lead-developers)
+  - [Testing and Debugging](#testing-and-debugging)
+  - [Collaborators](#collaborators-)
+  - [Thanks](#thanks)
+  - [Financial Contributors](#financial-contributors)
+    - [Organizations](#organizations)
+    - [Individuals](#individuals)
+  - [Code Contributors](#code-contributors)
+- [License](#license-)
+- [Acknowledgements](#acknowledgements-)
+- [Badges](#badges-)
+
+---
+
+</details>
+
 ### Features ✨
 
-❤️ **Lightweight**: Crafted with minimalistic UI design - simple design is the best design.
+❤️ **Lightweight**: Crafted with minimalistic UI design.
 
-⚡️ **Fast**: Send requests and get/copy responses in real-time - fast software is the best software.
+⚡️ **Fast**: Send requests and get/copy responses in real-time.
 
 **Methods:**
- - `GET` - Retrieve information about the REST API resource
- - `HEAD` - Retrieve response headers identical to those of a GET request, but without the response body.
- - `POST` - Create a REST API resource
- - `PUT` - Update a REST API resource
- - `DELETE` - Delete a REST API resource or related component
- - `CONNECT` - Establishes a tunnel to the server identified by the target resource
- - `OPTIONS` - Describe the communication options for the target resource
- - `TRACE` - Performs a message loop-back test along the path to the target resource
- - `PATCH` - Apply partial modifications to a REST API resource
- - `<custom>` - Some APIs use custom request methods such as `LIST`. Type in your custom methods.
 
-🌈 **Make it yours**: Customizable combinations for background, foreground and accent colors: because customization is freedom. [Customize now ✨](https://postwoman.io/settings).
+- `GET` - Retrieve information about the REST API resource
+- `HEAD` - Retrieve response headers identical to those of a GET request, but without the response body.
+- `POST` - Create a REST API resource
+- `PUT` - Update a REST API resource
+- `DELETE` - Delete a REST API resource or related component
+- `CONNECT` - Establishes a tunnel to the server identified by the target resource
+- `OPTIONS` - Describe the communication options for the target resource
+- `TRACE` - Performs a message loop-back test along the path to the target resource
+- `PATCH` - Apply partial modifications to a REST API resource
+- `<custom>` - Some APIs use custom request methods such as `LIST`. Type in your custom methods.
 
-**Customizations:**
- - Choose theme: Kinda Dark (default), Clearly White, Just Black and System theme
- - Choose accent color: Green (default), Yellow, Pink, Red, Purple, Orange, Cyan and Blue
- - Toggle multi-colored headings
+🌈 **Make it yours**: Customizable combinations for background, foreground and accent colors.
+
+**Theming:** [Customize now ✨](https://postwoman.io/settings)
+
+- Choose theme: Kinda Dark (default), Clearly White, Just Black and System theme
+- Choose accent color: Green (default), Yellow, Pink, Red, Purple, Orange, Cyan and Blue
+- Toggle multi-colored headings
+- Toggle auto-scroll to response
 
 _Customized themes are synced with local session storage_
 
 🔥 **PWA**: Install as a [PWA](https://developers.google.com/web/progressive-web-apps) on your device.
 
 **Features:**
- - 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
- - Desktop PWA
- - ([full features](https://developers.google.com/web/progressive-web-apps))
+
+- Instant loading with Service Workers
+- Offline support
+- Low RAM/memory and CPU usage
+- Add to Home Screen
+- Desktop PWA
 
 🚀 **Request**: Retrieve response from endpoint instantly.
 
- - Choose `method`
- - Enter `URL` and `Path`
- - Send
+- Choose `method`
+- Enter `URL`
+- Send
 
 **Features:**
- - Copy/share public "Share URL"
- - Generate request code for `JavaScript XHR`, `Fetch` and `cURL`
- - Copy generated request code to clipboard
- - Import `cURL`
- - Label requests
+
+- Copy/share public "Share URL"
+- Generate/copy request code for `JavaScript XHR`, `Fetch` and `cURL`
+- Import `cURL`
+- Label requests
 
 🔌 **WebSocket**: Establish full-duplex communication channels over a single TCP connection.
 
- - Send and receive data
- - Basic and Bearer Token authentication
+- Send and receive data
+- Basic and Bearer Token authentication
 
 📡 **Server Sent Events**: Receive a stream of updates from a server over a HTTP connection without resorting to polling.
 
+🌩 **Socket.IO**: Send and Receive data with SocketIO server.
+
+🦟 **MQTT**: Subscribe and Publish to topics of a MQTT Broker.
+
 🔮 **GraphQL**: GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
 
- - Set endpoint and get schemas
- - Multi-column docs
- - Set custom request headers
- - Query schema
- - Get query response
+- Set endpoint and get schemas
+- Multi-column docs
+- Set custom request headers
+- Query schema
+- Get query response
 
 🔐 **Authentication**: Allows to identify the end user.
 
 **Types:**
- - None
- - Basic
- - Bearer Token
- - OAuth 2.0
- - OIDC Access Token/PKCE (Proof Key for Code Exchange)
+
+- None
+- Basic
+- Bearer Token
+- OAuth 2.0
+- OIDC Access Token/PKCE
 
 📢 **Headers**: Describes the format the body of your request is being sent as.
 
- - Add or remove Header list
-
 📫 **Parameters**: Use request parameters to set varying parts in simulated requests.
 
 📃 **Request Body**: Used to send and receive data via the REST API.
 
 **Options:**
- - Set `Content Type`
- - Add or remove Parameter list
- - Toggle between key-value and RAW input Parameter list
+
+- Set `Content Type`
+- Add or remove Parameter list
+- Toggle between key-value and RAW input parameter list
 
 👋 **Responses**: Contains the status line, headers and the message/response body.
 
- - Copy response to clipboard
- - Download response to as a file
- - View preview of HTML responses
+- Copy response to clipboard
+- Download response as a file
+- View preview of HTML responses
 
-⏰ **History**: Request entries are synced with local session storage to reuse with a single click.
-
-**Fields:**
- - Star
- - Label
- - Method
- - Status code
- - URL
- - Path
- - Timestamp
- - Duration
- - Pre-request script
-
-_History entries can be sorted by any fields_
-
-_Histories can be deleted one-by-one or all together_
+⏰ **History**: Request entries are synced with cloud / local session storage to restore with a single click.
 
 📁 **Collections**: Keep your API requests organized with collections and folders. Reuse them with a single click.
 
-**Options:**
- - Create infinite collections, folders and requests
- - Edit, delete, move, export, import and replace
-
-_Collections are synced with local session storage_
+_Collections are synced with cloud / local session storage_
 
 🌐 **Proxy**: Enable Proxy Mode from Settings to access blocked APIs.
 
 **Features:**
- - Hide your IP address
- - Fixes [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Resource Sharing) issues
- - Access APIs served in non-HTTPS (`http://`)
- - Use custom Proxy URL
 
-_Official Postwoman Proxy is hosted by ApolloTV - **[Privacy policy](https://apollotv.xyz/legal)**_
+- Hide your IP address
+- Fixes [`CORS`](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Resource Sharing) issues
+- Access APIs served in non-HTTPS (`http://`)
+- Use custom Proxy URL
+
+_Official Postwoman Proxy is hosted by Apollo Software - **[Privacy Policy](https://apollosoftware.xyz/legal/postwoman)**_
 
 📜 **Pre-Request Scripts β**: Snippets of code associated with a request that are executed before the request is sent.
 
 **Use-cases:**
- - Include timestamp in the request headers
- - Send a random alphanumeric string in the URL parameters
 
-_Requests with Pre-Request Scripts are indicated in History entries_
+- Include timestamp in the request headers
+- Send a random alphanumeric string in the URL parameters
 
 📄 **API Documentation**: Create and share dynamic API documentation easily, quickly.
 
 **Usage:**
- 1. Add your requests to Collections and Folders
- 2. Export Collections and easily share your APIs with the rest of your team
- 3. Import Collections and Generate Documentation on-the-go
+
+1. Add your requests to Collections and Folders
+2. Export Collections and easily share your APIs with the rest of your team
+3. Import Collections and Generate Documentation on-the-go
 
 ⌨️ **Keyboard Shortcuts**: Optimized for efficiency.
 
 **Shortcuts:**
- - Send Request <kbd>Ctrl</kbd> + <kbd>G</kbd>
- - Save to Collections <kbd>Ctrl</kbd> + <kbd>S</kbd>
- - Copy Request Link <kbd>Ctrl</kbd> + <kbd>K</kbd>
- - Reset Request <kbd>Ctrl</kbd> + <kbd>L</kbd>
+
+- Send/Cancel Request <kbd>Ctrl</kbd> + <kbd>G</kbd>
+- Save to Collections <kbd>Ctrl</kbd> + <kbd>S</kbd>
+- Copy Request Link <kbd>Ctrl</kbd> + <kbd>K</kbd>
+- Reset Request <kbd>Ctrl</kbd> + <kbd>L</kbd>
 
 🌎 **i18n β**: Experience the app in your own language.
 
- 1. Scroll down to the footer
- 2. Click "Choose Language" icon button
- 3. Select your language from the menu
+1. Scroll down to the footer
+2. Click "Choose Language" icon button
+3. Select your language from the menu
 
 _Keep in mind: Translations aren't available for all source and target language combinations_
 
@@ -200,32 +224,49 @@ _**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/li
 
 📦 **Add-ons**: Official add-ons for Postwoman.
 
- - **[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** - Browser extensions that simplifies access to Postwoman
+- **[Proxy](https://github.com/postwoman-io/proxywoman)** - 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-extension)** - 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) &nbsp;|&nbsp; [![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-extension))
+  [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_16x16.png) **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/postwoman) &nbsp;|&nbsp; [![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)
 
-   >**Extensions fixes `CORS` issues.**
+  > **Extensions fixes `CORS` issues.**
 
 _Add-ons are developed and maintained under **[Official Postwoman Organization](https://github.com/postwoman-io)**._
 
 ☁️ **Auth + Sync**: Sign in and sync in real-time.
 
 **Sign in with:**
- - Google
- - GitHub
+
+- Google
+- GitHub
 
 **Sync:**
- - History
- - Collections
+
+- History
+- Collections
+- Environments
+- Notes
 
 ✅ **Post-Request Tests β**: Write tests associated with a request that are executed after the request response.
 
 **Use-cases:**
- - Check the status code as an integer
- - Filter response headers
- - Parse the response data
+
+- Check the status code as an integer
+- Filter response headers
+- Parse the response data
+
+📝 **Notes** : Instantly jot down notes, tasks or whatever you feel like as they come to your mind.
+
+_Notes are only available for signed-in users_
+
+🌱 **Environments** : Environment variables allow you to store and reuse values in your requests and scripts.
+
+**Use-cases:**
+
+- By storing a value in a variable, you can reference it throughout your request section
+- If you need to update the value, you only have to change it in one place
+- Using variables increases your ability to work efficiently and minimizes the likelihood of error
 
 **To find out more, please check out [Postwoman Wiki](https://github.com/liyasthomas/postwoman/wiki).**
 
@@ -233,46 +274,43 @@ _Add-ons are developed and maintained under **[Official Postwoman Organization](
 
 [postwoman.io](https://postwoman.io)
 
-<a href="https://www.netlify.com">
-  <img src="https://www.netlify.com/img/global/badges/netlify-light.svg"/>
-</a>
-
 ## Usage 💡
 
-1. Specify your request `method`
-2. Type in your API `URL` and `path`
+1. Choose `method`
+2. Enter `URL`
 3. Send request
 4. Get response
 
-You're done!
-
 ## Built with 🔧
 
-* [Chromium](https://github.com/chromium/chromium) - Thanks for being so fast!
-* HTML - For the web framework
-* CSS - For styling components
-* JavaScript - For magic!
-* [Vue](https://vuejs.org/) - To add to the JavaScript magic!
-* [Nuxt](https://nuxtjs.org/) - To add to the Vue magic!
+- HTML - For the web framework
+- CSS - For styling components
+- JavaScript - For magic!
+- [Vue](https://vuejs.org/)
+- [Nuxt](https://nuxtjs.org/)
 
 ## Developing 👷
 
-#### Use a browser based development environment:
+0. Update [`.env.example`](https://github.com/liyasthomas/postwoman/blob/master/.env.example) file found in repository's root directory with your own keys and rename it to `.env`.
+
+_Sample keys only works with the [production build](https://postwoman.io)._
+
+#### Browser based development environment
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/liyasthomas/postwoman)
 
-#### Or, with local development environment:
+#### Local development environment
 
 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
 2. Install dependencies by running `npm install` within the directory that you cloned (probably `postwoman`).
 3. Start the development server with `npm run dev`.
-4. Open development site by going to [http://localhost:3000](http://localhost:3000) in your browser.
+4. Open development site by going to [`http://localhost:3000`](http://localhost:3000) in your browser.
 
-#### Or, with docker-compose:
+#### Docker compose
 
 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
 2. Run `docker-compose up`
-3. Open development site by going to [http://localhost:3000](http://localhost:3000) in your browser.
+3. Open development site by going to [`http://localhost:3000`](http://localhost:3000) in your browser.
 
 ## Docker 🐳 [![Docker Cloud Build Status](https://img.shields.io/docker/cloud/build/liyasthomas/postwoman?logo=Docker)](https://hub.docker.com/r/liyasthomas/postwoman)
 
@@ -284,10 +322,10 @@ docker pull liyasthomas/postwoman
 docker run -p 3000:3000 liyasthomas/postwoman:latest
 
 #build
-docker build -t postwoman:latest
+docker build -t postwoman:latest .
 ```
 
-## Releasing 🏷️
+## Releasing 🧞
 
 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
 2. Install dependencies by running `npm install` within the directory that you cloned (probably `postwoman`).
@@ -296,7 +334,7 @@ docker build -t postwoman:latest
 
 ## Contributing 🍰
 
-Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our [CODE OF CONDUCT](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
+Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
 
 ## Continuous Integration 💚 [![Travis Build Status](https://img.shields.io/travis/com/liyasthomas/postwoman?logo=Travis)](https://travis-ci.com/liyasthomas/postwoman)
 
@@ -308,71 +346,70 @@ This project is developed by [Liyas Thomas](https://github.com/liyasthomas) usin
 
 ## Change log 📝
 
-See the [CHANGELOG](CHANGELOG.md) file for details.
+See the [`CHANGELOG`](CHANGELOG.md) file for details.
 
-## Authors 🔮
+## Authors 🧙
 
 ### Lead Developers
 
-* **[Liyas Thomas](https://github.com/liyasthomas)** - *Author*
-* **[John Harker](https://github.com/NBTX)** - *Lead developer*
-* **[Andrew Bastin](https://github.com/andrewbastin)** - *Lead developer*
-* **[James George](https://github.com/jamesgeorge007)** - *Lead maintainer*
-* **[Caneco](https://twitter.com/caneco)** - *Logo and banner designer*
+- **[Liyas Thomas](https://github.com/liyasthomas)** - _Author_
+- **[John Harker](https://github.com/NBTX)** - _Lead developer_
+- **[Andrew Bastin](https://github.com/andrewbastin)** - _Lead developer_
+- **[James George](https://github.com/jamesgeorge007)** - _Lead maintainer_
+- **[Caneco](https://twitter.com/caneco)** - _Logo and banner designer_
 
 ### Testing and Debugging
 
-* ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
+- [Contributors](https://github.com/liyasthomas/postwoman/graphs/contributors)
 
 ### Collaborators <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
+[![All Contributors](https://img.shields.io/badge/all_contributors-14-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://liyasthomas.web.app"><img src="https://avatars1.githubusercontent.com/u/10395817?v=4" width="100px;" alt="Liyas Thomas"/><br /><sub><b>Liyas Thomas</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=liyasthomas" title="Code">💻</a> <a href="#design-liyasthomas" title="Design">🎨</a></td>
-    <td align="center"><a href="https://github.com/NBTX"><img src="https://avatars3.githubusercontent.com/u/43181178?v=4" width="100px;" alt="John Harker"/><br /><sub><b>John Harker</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=NBTX" title="Code">💻</a> <a href="#design-NBTX" title="Design">🎨</a></td>
-    <td align="center"><a href="https://nicholaslaroux.com"><img src="https://avatars0.githubusercontent.com/u/1557529?v=4" width="100px;" alt="Nicholas La Roux"/><br /><sub><b>Nicholas La Roux</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=larouxn" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/yubathom"><img src="https://avatars3.githubusercontent.com/u/4117768?v=4" width="100px;" alt="Thomas Yuba"/><br /><sub><b>Thomas Yuba</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=yubathom" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.linkedin.com/in/nickpalenchar"><img src="https://avatars1.githubusercontent.com/u/7539781?v=4" width="100px;" alt="Nick Palenchar"/><br /><sub><b>Nick Palenchar</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nickpalenchar" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/AndrewBastin"><img src="https://avatars2.githubusercontent.com/u/9131943?v=4" width="100px;" alt="Andrew Bastin"/><br /><sub><b>Andrew Bastin</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=AndrewBastin" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/vlad0337187"><img src="https://avatars1.githubusercontent.com/u/12682937?v=4" width="100px;" alt="Vladislav"/><br /><sub><b>Vladislav</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=vlad0337187" title="Code">💻</a></td>
+    <td align="center"><a href="https://liyasthomas.web.app"><img src="https://avatars1.githubusercontent.com/u/10395817?v=4" width="100px;" alt=""/><br /><sub><b>Liyas Thomas</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=liyasthomas" title="Code">💻</a> <a href="#design-liyasthomas" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/NBTX"><img src="https://avatars3.githubusercontent.com/u/43181178?v=4" width="100px;" alt=""/><br /><sub><b>John Harker</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=NBTX" title="Code">💻</a> <a href="#design-NBTX" title="Design">🎨</a></td>
+    <td align="center"><a href="https://nicholaslaroux.com"><img src="https://avatars0.githubusercontent.com/u/1557529?v=4" width="100px;" alt=""/><br /><sub><b>Nicholas La Roux</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=larouxn" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/yubathom"><img src="https://avatars3.githubusercontent.com/u/4117768?v=4" width="100px;" alt=""/><br /><sub><b>Thomas Yuba</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=yubathom" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.linkedin.com/in/nickpalenchar"><img src="https://avatars1.githubusercontent.com/u/7539781?v=4" width="100px;" alt=""/><br /><sub><b>Nick Palenchar</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nickpalenchar" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/AndrewBastin"><img src="https://avatars2.githubusercontent.com/u/9131943?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Bastin</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=AndrewBastin" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/vlad0337187"><img src="https://avatars1.githubusercontent.com/u/12682937?v=4" width="100px;" alt=""/><br /><sub><b>Vladislav</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=vlad0337187" title="Code">💻</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/izerozlu"><img src="https://avatars3.githubusercontent.com/u/17386157?v=4" width="100px;" alt="izerozlu"/><br /><sub><b>izerozlu</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=izerozlu" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/JacobAnavisca"><img src="https://avatars2.githubusercontent.com/u/21232366?v=4" width="100px;" alt="Jacob Anavisca"/><br /><sub><b>Jacob Anavisca</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=JacobAnavisca" title="Code">💻</a></td>
-    <td align="center"><a href="http://nityanandagohain.github.io"><img src="https://avatars3.githubusercontent.com/u/26831659?v=4" width="100px;" alt="Nityananda Gohain"/><br /><sub><b>Nityananda Gohain</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nityanandagohain" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/hosseinnedaee"><img src="https://avatars2.githubusercontent.com/u/42691357?v=4" width="100px;" alt="Hossein Nedaee"/><br /><sub><b>Hossein Nedaee</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=hosseinnedaee" title="Code">💻</a></td>
-    <td align="center"><a href="https://ghuser.io/jamesgeorge007"><img src="https://avatars2.githubusercontent.com/u/25279263?v=4" width="100px;" alt="James George"/><br /><sub><b>James George</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=jamesgeorge007" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/izerozlu"><img src="https://avatars3.githubusercontent.com/u/17386157?v=4" width="100px;" alt=""/><br /><sub><b>izerozlu</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=izerozlu" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/JacobAnavisca"><img src="https://avatars2.githubusercontent.com/u/21232366?v=4" width="100px;" alt=""/><br /><sub><b>Jacob Anavisca</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=JacobAnavisca" title="Code">💻</a></td>
+    <td align="center"><a href="http://nityanandagohain.github.io"><img src="https://avatars3.githubusercontent.com/u/26831659?v=4" width="100px;" alt=""/><br /><sub><b>Nityananda Gohain</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nityanandagohain" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/hosseinnedaee"><img src="https://avatars2.githubusercontent.com/u/42691357?v=4" width="100px;" alt=""/><br /><sub><b>Hossein Nedaee</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=hosseinnedaee" title="Code">💻</a></td>
+    <td align="center"><a href="https://ghuser.io/jamesgeorge007"><img src="https://avatars2.githubusercontent.com/u/25279263?v=4" width="100px;" alt=""/><br /><sub><b>James George</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=jamesgeorge007" title="Code">💻</a></td>
+    <td align="center"><a href="https://dmitryyankowski.com"><img src="https://avatars0.githubusercontent.com/u/20114263?v=4" width="100px;" alt=""/><br /><sub><b>Dmitry Yankowski</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=dmitryyankowski" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.sboulema.nl"><img src="https://avatars2.githubusercontent.com/u/1820661?v=4" width="100px;" alt=""/><br /><sub><b>Samir Boulema</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=sboulema" title="Code">💻</a></td>
   </tr>
 </table>
 
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 See the list of [contributors](https://github.com/liyasthomas/postwoman/graphs/contributors) who participated in this project.
 
 ### Thanks
 
-* [dev.to 👩‍💻👨‍💻](https://dev.to)
-
-### Code Contributors
-
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-
-<a href="https://github.com/liyasthomas/postwoman/graphs/contributors"><img src="https://opencollective.com/postwoman/contributors.svg?width=890&button=false" /></a>
+- [dev.to 👩‍💻👨‍💻](https://dev.to)
 
 ### Financial Contributors
 
-Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/postwoman/contribute)]
-
-#### Individuals
-
-<a href="https://opencollective.com/postwoman"><img src="https://opencollective.com/postwoman/individuals.svg"></a>
+Become a financial contributor and help us sustain our community [[Contribute](https://opencollective.com/postwoman/contribute)].
 
 #### Organizations
 
-Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/postwoman/contribute)]
+Support this project with your organization. Your logo will show up here with a link to your website [[Contribute](https://opencollective.com/postwoman/contribute)].
 
 <a href="https://opencollective.com/postwoman/organization/0/website"><img src="https://opencollective.com/postwoman/organization/0/avatar.svg"></a>
 <a href="https://opencollective.com/postwoman/organization/1/website"><img src="https://opencollective.com/postwoman/organization/1/avatar.svg"></a>
@@ -385,45 +422,110 @@ Support this project with your organization. Your logo will show up here with a
 <a href="https://opencollective.com/postwoman/organization/8/website"><img src="https://opencollective.com/postwoman/organization/8/avatar.svg"></a>
 <a href="https://opencollective.com/postwoman/organization/9/website"><img src="https://opencollective.com/postwoman/organization/9/avatar.svg"></a>
 
+#### Individuals
+
+<a href="https://opencollective.com/postwoman"><img src="https://opencollective.com/postwoman/individuals.svg"></a>
+
+### Code Contributors
+
+This project exists thanks to all the people who contribute [[Contribute](CONTRIBUTING.md)].
+
+<a href="https://github.com/liyasthomas/postwoman/graphs/contributors"><img src="https://opencollective.com/postwoman/contributors.svg?width=890&button=false" /></a>
+
 ## License 📄
 
-This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [`LICENSE`](LICENSE) file for details.
 
 ## Acknowledgements 🙏
 
-* Hat tip to anyone whose code was used
-* Inspirations:
-  * [Dribbble](https://dribbble.com)
+- Hat tip to anyone whose code was used
+- Inspirations:
+  - [Dribbble](https://dribbble.com)
 
-## Badges
+## Badges 📛
 
 <table>
-<tr>
-<th>Preview</th>
-<th>Markdown code</th>
-</tr>
-<tbody>
-<tr>
-<td align="center" width="200px"><a href="https://postwoman.io"><br/><img src="https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman"/></a><br/><sub>Default<sub></td>
-<td><code>[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman)](https://postwoman.io)</code></td>
-</tr>
-<tr>
-<td align="center" width="200px"><a href="https://postwoman.io"><br/><img src="https://img.shields.io/badge/Tested_on-Postwoman-success?logo=Postwoman"/></a><br/><sub>Success<sub></td>
-<td><code>[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-success?logo=Postwoman)](https://postwoman.io)</code></td>
-</tr>
-<tr>
-<td align="center" width="200px"><a href="https://postwoman.io"><br/><img src="https://img.shields.io/badge/Tested_on-Postwoman-critical?logo=Postwoman"/></a><br/><sub>Critical<sub></td>
-<td><code>[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-critical?logo=Postwoman)](https://postwoman.io)</code></td>
-</tr>
-<tr>
-<td align="center" width="200px"><a href="https://postwoman.io"><br/><img src="https://img.shields.io/badge/Tested_on-Postwoman-blueviolet?logo=Postwoman"/></a><br/><sub>Custom<sub></td>
-<td><code>[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-blueviolet?logo=Postwoman)](https://postwoman.io)</code></td>
-</tr>
-<tr>
-<td align="center" width="200px"><a href="https://postwoman.io"><br/><img src="https://img.shields.io/badge/your_text-Postwoman-hex_color_code?logo=Postwoman"/></a><br/><sub>Customize<sub></td>
-<td><code>[![Postwoman](https://img.shields.io/badge/your_text-Postwoman-hex_color_code?logo=Postwoman)](https://postwoman.io)</code></td>
-</tr>
-</tbody>
+	<tr>
+		<th>Preview</th>
+		<th>Markdown code</th>
+	</tr>
+	<tbody>
+		<tr>
+			<td align="center" width="200px">
+				<a href="https://postwoman.io">
+					<br/>
+					<img src="https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman"/>
+				</a>
+				<br/>
+				<sub>
+          Default
+        </sub>
+			</td>
+			<td>
+				<code>[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman)](https://postwoman.io)</code>
+			</td>
+		</tr>
+		<tr>
+			<td align="center" width="200px">
+				<a href="https://postwoman.io">
+					<br/>
+					<img src="https://img.shields.io/badge/Tested_on-Postwoman-success?logo=Postwoman"/>
+				</a>
+				<br/>
+				<sub>
+          Success
+        </sub>
+			</td>
+			<td>
+				<code>[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-success?logo=Postwoman)](https://postwoman.io)</code>
+			</td>
+		</tr>
+		<tr>
+			<td align="center" width="200px">
+				<a href="https://postwoman.io">
+					<br/>
+					<img src="https://img.shields.io/badge/Tested_on-Postwoman-critical?logo=Postwoman"/>
+				</a>
+				<br/>
+				<sub>
+          Critical
+        </sub>
+			</td>
+			<td>
+				<code>[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-critical?logo=Postwoman)](https://postwoman.io)</code>
+			</td>
+		</tr>
+		<tr>
+			<td align="center" width="200px">
+				<a href="https://postwoman.io">
+					<br/>
+					<img src="https://img.shields.io/badge/Tested_on-Postwoman-blueviolet?logo=Postwoman"/>
+				</a>
+				<br/>
+				<sub>
+          Custom
+        </sub>
+			</td>
+			<td>
+				<code>[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-blueviolet?logo=Postwoman)](https://postwoman.io)</code>
+			</td>
+		</tr>
+		<tr>
+			<td align="center" width="200px">
+				<a href="https://postwoman.io">
+					<br/>
+					<img src="https://img.shields.io/badge/your_text-Postwoman-hex_color_code?logo=Postwoman"/>
+				</a>
+				<br/>
+				<sub>
+          Customize
+        </sub>
+			</td>
+			<td>
+				<code>[![Postwoman](https://img.shields.io/badge/your_text-Postwoman-hex_color_code?logo=Postwoman)](https://postwoman.io)</code>
+			</td>
+		</tr>
+	</tbody>
 </table>
 
 <div align="center">

TRANSLATIONS.md

@@ -0,0 +1,50 @@
+# Translations
+
+Thanks for your interest in helping translating the software!
+
+## Starting a translation
+
+Before you start working on a translation, look through the [open pull requests](https://github.com/liyasthomas/postwoman/pulls) to see if anyone else is already working on one for your language.
+
+If there's not, then today is your day to lead this effort! Here's how to start:
+
+1. [Fork this repository](https://github.com/liyasthomas/postwoman/fork)
+2. Create a new branch for your translation work e.g. `es`.
+3. Copy `lang/en-US.json` to your target language file e.g. `lang/es-ES.json` and translate all the strings.
+4. Add your language entry to `nuxt.config.js`.
+
+   e.g.
+
+   ```
+    i18n: {
+      locales: [
+        {
+          code: "en",
+          name: "English",
+          iso: "en-US",
+          file: "en-US.json",
+        },
+        {
+          code: 'es',
+          name: 'Español',
+          iso: 'es-ES',
+          file: 'es-ES.js'
+        }
+      ]
+    }
+   ```
+
+5. Save & commit changes.
+6. Send a pull request. (You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However your pull request will not be merged until all steps above are complete.)
+
+Completing an initial translation of the whole site is a fairly large task. One way to break that task up is to work with other translators through pull requests on your fork. You can also [add collaborators to your fork](https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository) if you'd like to inivte other translators to commit directly to your fork and share responsibility for merging pull requests.
+
+## Updating a translation
+
+### Corrections
+
+If you notice spelling or grammar errors, typos, or opportunities for better phrasing, open a pull request with your suggested fix. If you see a problem that you aren't sure of or don't have time to fix, open an issue.
+
+### Broken links
+
+When tests find broken links, try to fix them across all translations. Ideally, only update the linked URLs, so that translation changes will definitely not be necessary.

assets/css/fonts.scss

@@ -6,8 +6,10 @@
   font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
-  src: url("~static/fonts/material-icons-v48.woff2") format("woff2");
+  // Do not use font-display: swap for the icon font - it looks really bad when the page
+  // loads.
+  font-display: block;
+  src: url("~static/fonts/material-icons-v52.woff2") format("woff2");
 }
 
 .material-icons {
@@ -38,9 +40,7 @@
   font-display: swap;
   src: local("Poppins Medium"), local("Poppins-Medium"),
     url("~static/fonts/poppins-v9-latin-500.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("~static/fonts/poppins-v9-latin-500.woff") format("woff");
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    url("~static/fonts/poppins-v9-latin-500.woff") format("woff");
 }
 
 /* poppins-700 - latin */
@@ -51,9 +51,7 @@
   font-display: swap;
   src: local("Poppins Bold"), local("Poppins-Bold"),
     url("~static/fonts/poppins-v9-latin-700.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("~static/fonts/poppins-v9-latin-700.woff") format("woff");
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    url("~static/fonts/poppins-v9-latin-700.woff") format("woff");
 }
 
 /* roboto-mono-regular - latin */
@@ -64,7 +62,5 @@
   font-display: swap;
   src: local("Roboto Mono"), local("RobotoMono-Regular"),
     url("~static/fonts/roboto-mono-v7-latin-regular.woff2") format("woff2"),
-    /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("~static/fonts/roboto-mono-v7-latin-regular.woff") format("woff");
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    url("~static/fonts/roboto-mono-v7-latin-regular.woff") format("woff");
 }

assets/css/styles.scss

@@ -1,17 +1,3 @@
-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
-  transition: opacity 0.2s;
-}
-
-.page-enter,
-.page-leave-active,
-.layout-enter,
-.layout-leave-active {
-  opacity: 0;
-}
-
 $responsiveWidth: 768px;
 
 ::selection {
@@ -22,10 +8,12 @@ $responsiveWidth: 768px;
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
+  border-radius: 4px;
   background-color: var(--bg-dark-color);
 }
 
 ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
   background-color: var(--fg-light-color);
 
   &:hover {
@@ -91,6 +79,20 @@ footer {
   }
 }
 
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.2s;
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+  opacity: 0;
+}
+
 .wrapper {
   min-height: 100vh;
   display: flex;
@@ -109,31 +111,6 @@ footer {
   flex: 1;
 }
 
-.slide-in {
-  position: relative;
-  animation: slideIn 0.2s forwards ease-in-out;
-}
-
-@keyframes slideIn {
-  0% {
-    opacity: 0;
-    left: -16px;
-  }
-
-  100% {
-    opacity: 1;
-    left: 0px;
-  }
-}
-
-.logo {
-  font-size: 22px;
-
-  &:hover {
-    color: var(--ac-color);
-  }
-}
-
 .nav-first,
 .sticky-inner {
   display: flex;
@@ -144,14 +121,6 @@ footer {
   align-self: flex-start;
 }
 
-.nav-first {
-  z-index: 1;
-  height: 100vh;
-  padding: 0 8px;
-  background-color: var(--bg-dark-color);
-  transition: all 0.2s ease-in-out;
-}
-
 .main {
   display: flex;
   flex-flow: column;
@@ -159,97 +128,6 @@ footer {
   order: 2;
   position: relative;
   padding: 0 16px;
-  height: 100%;
-}
-
-.nav-second {
-  display: flex;
-  width: 10%;
-  order: 3;
-  // comment below this to display
-  display: none;
-}
-
-nav.primary-nav {
-  display: flex;
-  flex-flow: column nowrap;
-
-  svg {
-    fill: var(--fg-light-color);
-    transition: all 0.2s ease-in-out;
-  }
-
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    padding: 14px;
-    border-radius: 50%;
-    background-color: var(--bg-light-color);
-    color: var(--fg-light-color);
-    fill: var(--fg-light-color);
-    margin: 8px 0;
-
-    &:hover {
-      color: var(--fg-color);
-      fill: var(--fg-color);
-
-      svg {
-        fill: var(--fg-color);
-      }
-    }
-
-    &.nuxt-link-exact-active {
-      background-color: var(--ac-color);
-      color: var(--act-color);
-      fill: var(--act-color);
-      border-radius: 16px;
-
-      svg {
-        fill: var(--act-color);
-      }
-    }
-  }
-}
-
-nav.secondary-nav {
-  display: flex;
-  border-top: 1px dashed var(--brd-color);
-
-  ul {
-    display: flex;
-    flex-flow: column nowrap;
-
-    li {
-      display: flex;
-
-      a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        padding: 14px;
-        border-radius: 50%;
-        background-color: var(--bg-dark-color);
-        color: var(--fg-light-color);
-        margin: 8px 0;
-
-        &:hover {
-          color: var(--fg-color);
-        }
-
-        &.current {
-          color: var(--ac-color);
-          fill: var(--ac-color);
-        }
-      }
-    }
-  }
-}
-
-.footer {
-  flex-flow: column nowrap;
 }
 
 h1,
@@ -262,14 +140,19 @@ h4 {
   font-weight: 700;
 }
 
-hr {
-  border-bottom: 1px dashed var(--brd-color);
+h3.title {
+  margin: 4px;
 }
 
 p {
   transition: all 0.2s ease-in-out;
 }
 
+hr {
+  border-bottom: 1px dashed var(--brd-color);
+  margin: 16px 0;
+}
+
 .tooltip {
   $bgcolor: var(--tt-color);
   $fgcolor: var(--fg-color);
@@ -370,6 +253,16 @@ p {
       box-shadow: 0 5px 30px rgba(black, 0.1);
       max-height: 256px;
       overflow: auto;
+
+      div {
+        display: flex;
+        align-items: stretch;
+        flex-direction: column;
+      }
+
+      button {
+        justify-content: start;
+      }
     }
 
     .popover-arrow {
@@ -390,13 +283,14 @@ p {
   }
 }
 
-h3.title {
-  margin: 4px;
-}
-
-.info {
+.info:not(.toasted) {
   margin-left: 4px;
   color: var(--fg-light-color);
+
+  .material-icons {
+    vertical-align: middle;
+    margin-right: 8px;
+  }
 }
 
 .bg-color {
@@ -409,7 +303,7 @@ button {
   justify-content: center;
   margin: 4px;
   padding: 6px 16px;
-  border-radius: 20px;
+  border-radius: 8px;
   background-color: var(--ac-color);
   color: var(--act-color);
   font-size: 16px;
@@ -422,6 +316,7 @@ button {
   span {
     display: inline-flex;
     margin-left: 8px;
+    text-align: left;
   }
 
   &:not([disabled]):hover,
@@ -475,13 +370,6 @@ button {
   animation: beat 0.5s forwards 1;
 }
 
-fieldset {
-  margin: 16px 0;
-  border-radius: 16px;
-  background-color: var(--bg-dark-color);
-  transition: all 0.2s ease-in-out;
-}
-
 fieldset:target,
 section:target {
   animation: highlight 2s ease;
@@ -493,63 +381,8 @@ section:target {
   }
 }
 
-legend {
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-  color: var(--fg-color);
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  * {
-    vertical-align: middle;
-  }
-
-  i {
-    margin-left: 8px;
-  }
-}
-
-fieldset.blue legend {
-  color: #57b5f9;
-}
-
-fieldset.gray legend {
-  color: #bcc2cd;
-}
-
-fieldset.green legend {
-  color: #50fa7b;
-}
-
-fieldset.cyan legend {
-  color: #8be9fd;
-}
-
-fieldset.purple legend {
-  color: #bd93f9;
-}
-
-fieldset.orange legend {
-  color: #ffb86c;
-}
-
-fieldset.pink legend {
-  color: #ff79c6;
-}
-
-fieldset.red legend {
-  color: #ff5555;
-}
-
-fieldset.yellow legend {
-  color: #f1fa8c;
-}
-
 input[type="file"],
 input[type="radio"],
-.tab,
 .hide-on-large-screen,
 #installPWA,
 .hidden {
@@ -617,6 +450,7 @@ pre {
 
   input {
     text-transform: uppercase;
+    min-width: 128px;
   }
 
   .trigger {
@@ -717,8 +551,12 @@ ul li,
 ol li {
   display: inline-flex;
   flex-flow: column nowrap;
-  flex-grow: 1;
+  flex: 1;
   justify-content: center;
+
+  &.shrink {
+    flex-grow: 0;
+  }
 }
 
 .flex-wrap {
@@ -730,7 +568,7 @@ ol li {
 
   * {
     display: inline-flex;
-    flex-flow: row wrap;
+    flex-flow: row nowrap;
     align-items: center;
     justify-content: center;
   }
@@ -741,7 +579,7 @@ ol li {
 }
 
 .show-on-large-screen {
-  display: inline-flex;
+  display: flex;
   flex: 1;
 }
 
@@ -813,43 +651,19 @@ ol li {
   &.show {
     display: flex;
     position: fixed;
-    top: 12px;
-    right: 12px;
-    z-index: 2;
+    bottom: 86px;
+    left: 50%;
+    z-index: 10001;
+    transform: translateX(-50%);
+    box-shadow: 0 4px 24px rgba(black, 0.2);
+    transition: all 0.2s ease-in-out;
   }
 }
 
 section {
   display: flex;
   flex-wrap: wrap;
-  border-radius: 16px;
-}
-
-.tab {
-  width: 100%;
-  order: 1;
-}
-
-input[type="radio"] + label {
-  padding: 8px 16px;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  &:hover,
-  &:active,
-  &:focus {
-    border-color: var(--brd-color);
-  }
-}
-
-input[type="radio"]:checked + label {
-  border-color: var(--fg-color);
-  color: var(--fg-color);
-}
-
-input[type="radio"]:checked + label + .tab {
-  display: block;
+  border-radius: 8px;
 }
 
 .toasted-container .toasted {
@@ -894,44 +708,6 @@ input[type="radio"]:checked + label + .tab {
     flex-flow: column;
   }
 
-  .nav-first {
-    position: fixed;
-    top: auto;
-    bottom: 0;
-    height: auto;
-    padding: 0;
-    width: 100%;
-    background-color: var(--bg-color);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
-  }
-
-  nav.primary-nav {
-    flex-flow: row nowrap;
-    overflow: auto;
-    justify-content: space-between;
-    background-color: var(--bg-dark-color);
-
-    a {
-      background-color: transparent;
-      margin: 8px;
-      flex: 1;
-
-      &.nuxt-link-exact-active {
-        background-color: transparent;
-        color: var(--ac-color);
-        fill: var(--ac-color);
-
-        svg {
-          fill: var(--ac-color);
-        }
-      }
-    }
-  }
-
-  nav.secondary-nav {
-    display: none;
-  }
-
   .main {
     padding: 0 8px 68px;
   }
@@ -972,3 +748,37 @@ input[type="radio"]:checked + label + .tab {
     margin-bottom: 68px;
   }
 }
+
+.toasted-ad {
+  background-color: #fefefe;
+  color: #121212;
+  padding: 16px !important;
+  font-weight: 700;
+  font-size: 16px;
+  border-radius: 8px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  .action {
+    text-transform: none !important;
+    background-color: #121212;
+    color: #fefefe;
+    padding: 12px 16px !important;
+    font-weight: 500 !important;
+    font-size: 16px !important;
+    border-radius: 8px;
+    margin: 0 !important;
+    margin-left: 8px !important;
+  }
+}
+
+.virtual-list {
+  overflow: auto;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}

assets/css/themes.scss

@@ -11,9 +11,9 @@
   // Background color
   --bg-color: rgba(32, 33, 36, 1);
   // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0.02);
+  --bg-light-color: rgba(255, 255, 255, 0.04);
   // Dark Background color
-  --bg-dark-color: rgba(0, 0, 0, 0.1);
+  --bg-dark-color: rgba(0, 0, 0, 0.2);
   // Text color
   --fg-color: rgba(255, 255, 255, 0.9);
   // Light Text color
@@ -36,7 +36,7 @@
   // Background color
   --bg-color: rgba(255, 255, 255, 1);
   // Light Background color
-  --bg-light-color: rgba(0, 0, 0, 0.02);
+  --bg-light-color: rgba(0, 0, 0, 0.05);
   // Dark Background color
   --bg-dark-color: rgba(0, 0, 0, 0.02);
   // Text color
@@ -63,7 +63,7 @@
   // Light Background color
   --bg-light-color: rgba(255, 255, 255, 0.02);
   // Dark Background color
-  --bg-dark-color: rgba(255, 255, 255, 0.02);
+  --bg-dark-color: rgba(255, 255, 255, 0.04);
   // Text color
   --fg-color: rgba(255, 255, 255, 0.9);
   // Light Text color

assets/js/curlparser.js

@@ -1,128 +1,125 @@
-import * as cookie from "cookie";
-import * as URL from "url";
-import * as querystring from "querystring";
+import * as cookie from "cookie"
+import * as URL from "url"
+import * as querystring from "querystring"
 
 /**
  * given this: [ 'msg1=value1', 'msg2=value2' ]
  * output this: 'msg1=value1&msg2=value2'
  * @param dataArguments
  */
-const joinDataArguments = dataArguments => {
-  let data = "";
+const joinDataArguments = (dataArguments) => {
+  let data = ""
   dataArguments.forEach((argument, i) => {
     if (i === 0) {
-      data += argument;
+      data += argument
     } else {
-      data += `&${argument}`;
+      data += `&${argument}`
     }
-  });
-  return data;
-};
+  })
+  return data
+}
 
-const parseCurlCommand = curlCommand => {
-  let newlineFound = /\r|\n/.exec(curlCommand);
+const parseCurlCommand = (curlCommand) => {
+  let newlineFound = /\r|\n/.exec(curlCommand)
   if (newlineFound) {
     // remove newlines
-    curlCommand = curlCommand.replace(/\r|\n/g, "");
+    curlCommand = curlCommand.replace(/\r|\n/g, "")
   }
   // yargs parses -XPOST as separate arguments. just prescreen for it.
-  curlCommand = curlCommand.replace(/ -XPOST/, " -X POST");
-  curlCommand = curlCommand.replace(/ -XGET/, " -X GET");
-  curlCommand = curlCommand.replace(/ -XPUT/, " -X PUT");
-  curlCommand = curlCommand.replace(/ -XPATCH/, " -X PATCH");
-  curlCommand = curlCommand.replace(/ -XDELETE/, " -X DELETE");
-  curlCommand = curlCommand.trim();
-  let parsedArguments = require("yargs-parser")(curlCommand);
-  let cookieString;
-  let cookies;
-  let url = parsedArguments._[1];
+  curlCommand = curlCommand.replace(/ -XPOST/, " -X POST")
+  curlCommand = curlCommand.replace(/ -XGET/, " -X GET")
+  curlCommand = curlCommand.replace(/ -XPUT/, " -X PUT")
+  curlCommand = curlCommand.replace(/ -XPATCH/, " -X PATCH")
+  curlCommand = curlCommand.replace(/ -XDELETE/, " -X DELETE")
+  curlCommand = curlCommand.trim()
+  let parsedArguments = require("yargs-parser")(curlCommand)
+  let cookieString
+  let cookies
+  let url = parsedArguments._[1]
   if (!url) {
     for (let argName in parsedArguments) {
       if (typeof parsedArguments[argName] === "string") {
         if (["http", "www."].includes(parsedArguments[argName])) {
-          url = parsedArguments[argName];
+          url = parsedArguments[argName]
         }
       }
     }
   }
-  let headers;
+  let headers
 
-  const parseHeaders = headerFieldName => {
+  const parseHeaders = (headerFieldName) => {
     if (parsedArguments[headerFieldName]) {
       if (!headers) {
-        headers = {};
+        headers = {}
       }
       if (!Array.isArray(parsedArguments[headerFieldName])) {
-        parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
+        parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]]
       }
-      parsedArguments[headerFieldName].forEach(header => {
+      parsedArguments[headerFieldName].forEach((header) => {
         if (header.includes("Cookie")) {
           // stupid javascript tricks: closure
-          cookieString = header;
+          cookieString = header
         } else {
-          let colonIndex = header.indexOf(":");
-          let headerName = header.substring(0, colonIndex);
-          let headerValue = header.substring(colonIndex + 1).trim();
-          headers[headerName] = headerValue;
+          let colonIndex = header.indexOf(":")
+          let headerName = header.substring(0, colonIndex)
+          let headerValue = header.substring(colonIndex + 1).trim()
+          headers[headerName] = headerValue
         }
-      });
+      })
     }
-  };
+  }
 
-  parseHeaders("H");
-  parseHeaders("header");
+  parseHeaders("H")
+  parseHeaders("header")
   if (parsedArguments.A) {
     if (!headers) {
-      headers = [];
+      headers = []
     }
-    headers["User-Agent"] = parsedArguments.A;
+    headers["User-Agent"] = parsedArguments.A
   } else if (parsedArguments["user-agent"]) {
     if (!headers) {
-      headers = [];
+      headers = []
     }
-    headers["User-Agent"] = parsedArguments["user-agent"];
+    headers["User-Agent"] = parsedArguments["user-agent"]
   }
 
   if (parsedArguments.b) {
-    cookieString = parsedArguments.b;
+    cookieString = parsedArguments.b
   }
   if (parsedArguments.cookie) {
-    cookieString = parsedArguments.cookie;
+    cookieString = parsedArguments.cookie
   }
-  let multipartUploads;
+  let multipartUploads
   if (parsedArguments.F) {
-    multipartUploads = {};
+    multipartUploads = {}
     if (!Array.isArray(parsedArguments.F)) {
-      parsedArguments.F = [parsedArguments.F];
+      parsedArguments.F = [parsedArguments.F]
     }
-    parsedArguments.F.forEach(multipartArgument => {
+    parsedArguments.F.forEach((multipartArgument) => {
       // input looks like key=value. value could be json or a file path prepended with an @
-      const [key, value] = multipartArgument.split("=", 2);
-      multipartUploads[key] = value;
-    });
+      const [key, value] = multipartArgument.split("=", 2)
+      multipartUploads[key] = value
+    })
   }
   if (cookieString) {
     const cookieParseOptions = {
-      decode: s => s
-    };
+      decode: (s) => s,
+    }
     // separate out cookie headers into separate data structure
     // note: cookie is case insensitive
-    cookies = cookie.parse(
-      cookieString.replace(/^Cookie: /gi, ""),
-      cookieParseOptions
-    );
+    cookies = cookie.parse(cookieString.replace(/^Cookie: /gi, ""), cookieParseOptions)
   }
-  let method;
+  let method
   if (parsedArguments.X === "POST") {
-    method = "post";
+    method = "post"
   } else if (parsedArguments.X === "PUT" || parsedArguments["T"]) {
-    method = "put";
+    method = "put"
   } else if (parsedArguments.X === "PATCH") {
-    method = "patch";
+    method = "patch"
   } else if (parsedArguments.X === "DELETE") {
-    method = "delete";
+    method = "delete"
   } else if (parsedArguments.X === "OPTIONS") {
-    method = "options";
+    method = "options"
   } else if (
     (parsedArguments["d"] ||
       parsedArguments["data"] ||
@@ -132,95 +129,94 @@ const parseCurlCommand = curlCommand => {
       parsedArguments["form"]) &&
     !(parsedArguments["G"] || parsedArguments["get"])
   ) {
-    method = "post";
+    method = "post"
   } else if (parsedArguments["I"] || parsedArguments["head"]) {
-    method = "head";
+    method = "head"
   } else {
-    method = "get";
+    method = "get"
   }
 
-  let compressed = !!parsedArguments.compressed;
-  let urlObject = URL.parse(url); // eslint-disable-line
+  let compressed = !!parsedArguments.compressed
+  let urlObject = URL.parse(url) // eslint-disable-line
 
   // if GET request with data, convert data to query string
   // NB: the -G flag does not change the http verb. It just moves the data into the url.
   if (parsedArguments["G"] || parsedArguments["get"]) {
-    urlObject.query = urlObject.query ? urlObject.query : "";
-    let option =
-      "d" in parsedArguments ? "d" : "data" in parsedArguments ? "data" : null;
+    urlObject.query = urlObject.query ? urlObject.query : ""
+    let option = "d" in parsedArguments ? "d" : "data" in parsedArguments ? "data" : null
     if (option) {
-      let urlQueryString = "";
+      let urlQueryString = ""
 
       if (!url.includes("?")) {
-        url += "?";
+        url += "?"
       } else {
-        urlQueryString += "&";
+        urlQueryString += "&"
       }
 
       if (typeof parsedArguments[option] === "object") {
-        urlQueryString += parsedArguments[option].join("&");
+        urlQueryString += parsedArguments[option].join("&")
       } else {
-        urlQueryString += parsedArguments[option];
+        urlQueryString += parsedArguments[option]
       }
-      urlObject.query += urlQueryString;
-      url += urlQueryString;
-      delete parsedArguments[option];
+      urlObject.query += urlQueryString
+      url += urlQueryString
+      delete parsedArguments[option]
     }
   }
   let query = querystring.parse(urlObject.query, null, null, {
-    maxKeys: 10000
-  });
+    maxKeys: 10000,
+  })
 
-  urlObject.search = null; // Clean out the search/query portion.
+  urlObject.search = null // Clean out the search/query portion.
   const request = {
     url,
-    urlWithoutQuery: URL.format(urlObject)
-  };
+    urlWithoutQuery: URL.format(urlObject),
+  }
   if (compressed) {
-    request["compressed"] = true;
+    request["compressed"] = true
   }
 
   if (Object.keys(query).length > 0) {
-    request.query = query;
+    request.query = query
   }
   if (headers) {
-    request.headers = headers;
+    request.headers = headers
   }
-  request["method"] = method;
+  request["method"] = method
 
   if (cookies) {
-    request.cookies = cookies;
-    request.cookieString = cookieString.replace("Cookie: ", "");
+    request.cookies = cookies
+    request.cookieString = cookieString.replace("Cookie: ", "")
   }
   if (multipartUploads) {
-    request.multipartUploads = multipartUploads;
+    request.multipartUploads = multipartUploads
   }
   if (parsedArguments.data) {
-    request.data = parsedArguments.data;
+    request.data = parsedArguments.data
   } else if (parsedArguments["data-binary"]) {
-    request.data = parsedArguments["data-binary"];
-    request.isDataBinary = true;
+    request.data = parsedArguments["data-binary"]
+    request.isDataBinary = true
   } else if (parsedArguments["d"]) {
-    request.data = parsedArguments["d"];
+    request.data = parsedArguments["d"]
   } else if (parsedArguments["data-ascii"]) {
-    request.data = parsedArguments["data-ascii"];
+    request.data = parsedArguments["data-ascii"]
   }
 
   if (parsedArguments["u"]) {
-    request.auth = parsedArguments["u"];
+    request.auth = parsedArguments["u"]
   }
   if (parsedArguments["user"]) {
-    request.auth = parsedArguments["user"];
+    request.auth = parsedArguments["user"]
   }
   if (Array.isArray(request.data)) {
-    request.dataArray = request.data;
-    request.data = joinDataArguments(request.data);
+    request.dataArray = request.data
+    request.data = joinDataArguments(request.data)
   }
 
   if (parsedArguments["k"] || parsedArguments["insecure"]) {
-    request.insecure = true;
+    request.insecure = true
   }
-  return request;
-};
+  return request
+}
 
-export default parseCurlCommand;
+export default parseCurlCommand

assets/js/oauth.js

@@ -1,4 +1,4 @@
-const redirectUri = `${window.location.origin}/`;
+const redirectUri = `${window.location.origin}/`
 
 // GENERAL HELPER FUNCTIONS
 
@@ -12,24 +12,24 @@ const redirectUri = `${window.location.origin}/`;
 
 const sendPostRequest = async (url, params) => {
   const body = Object.keys(params)
-    .map(key => `${key}=${params[key]}`)
-    .join("&");
+    .map((key) => `${key}=${params[key]}`)
+    .join("&")
   const options = {
     method: "post",
     headers: {
-      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
+      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
     },
-    body
-  };
-  try {
-    const response = await fetch(url, options);
-    const data = await response.json();
-    return data;
-  } catch (err) {
-    console.error("Request failed", err);
-    throw err;
+    body,
   }
-};
+  try {
+    const response = await fetch(url, options)
+    const data = await response.json()
+    return data
+  } catch (err) {
+    console.error("Request failed", err)
+    throw err
+  }
+}
 
 /**
  * Parse a query string into an object
@@ -38,17 +38,14 @@ const sendPostRequest = async (url, params) => {
  * @returns {Object}
  */
 
-const parseQueryString = searchQuery => {
+const parseQueryString = (searchQuery) => {
   if (searchQuery === "") {
-    return {};
+    return {}
   }
-  const segments = searchQuery.split("&").map(s => s.split("="));
-  const queryString = segments.reduce(
-    (obj, el) => ({ ...obj, [el[0]]: el[1] }),
-    {}
-  );
-  return queryString;
-};
+  const segments = searchQuery.split("&").map((s) => s.split("="))
+  const queryString = segments.reduce((obj, el) => ({ ...obj, [el[0]]: el[1] }), {})
+  return queryString
+}
 
 /**
  * Get OAuth configuration from OpenID Discovery endpoint
@@ -56,22 +53,22 @@ const parseQueryString = searchQuery => {
  * @returns {Object}
  */
 
-const getTokenConfiguration = async endpoint => {
+const getTokenConfiguration = async (endpoint) => {
   const options = {
     method: "GET",
     headers: {
-      "Content-type": "application/json"
-    }
-  };
-  try {
-    const response = await fetch(endpoint, options);
-    const config = await response.json();
-    return config;
-  } catch (err) {
-    console.error("Request failed", err);
-    throw err;
+      "Content-type": "application/json",
+    },
   }
-};
+  try {
+    const response = await fetch(endpoint, options)
+    const config = await response.json()
+    return config
+  } catch (err) {
+    console.error("Request failed", err)
+    throw err
+  }
+}
 
 // PKCE HELPER FUNCTIONS
 
@@ -82,10 +79,10 @@ const getTokenConfiguration = async endpoint => {
  */
 
 const generateRandomString = () => {
-  const array = new Uint32Array(28);
-  window.crypto.getRandomValues(array);
-  return Array.from(array, dec => `0${dec.toString(16)}`.substr(-2)).join("");
-};
+  const array = new Uint32Array(28)
+  window.crypto.getRandomValues(array)
+  return Array.from(array, (dec) => `0${dec.toString(16)}`.substr(-2)).join("")
+}
 
 /**
  * Calculate the SHA256 hash of the input text
@@ -93,11 +90,11 @@ const generateRandomString = () => {
  * @returns {Promise<ArrayBuffer>}
  */
 
-const sha256 = plain => {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(plain);
-  return window.crypto.subtle.digest("SHA-256", data);
-};
+const sha256 = (plain) => {
+  const encoder = new TextEncoder()
+  const data = encoder.encode(plain)
+  return window.crypto.subtle.digest("SHA-256", data)
+}
 
 /**
  * Encodes the input string into Base64 format
@@ -115,7 +112,7 @@ const base64urlencode = (
   btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
     .replace(/\+/g, "-")
     .replace(/\//g, "_")
-    .replace(/=+$/, "");
+    .replace(/=+$/, "")
 
 /**
  * Return the base64-urlencoded sha256 hash for the PKCE challenge
@@ -124,10 +121,10 @@ const base64urlencode = (
  * @returns {String}
  */
 
-const pkceChallengeFromVerifier = async v => {
-  const hashed = await sha256(v);
-  return base64urlencode(hashed);
-};
+const pkceChallengeFromVerifier = async (v) => {
+  const hashed = await sha256(v)
+  return base64urlencode(hashed)
+}
 
 // OAUTH REQUEST
 
@@ -144,32 +141,29 @@ const tokenRequest = async ({
   authUrl,
   accessTokenUrl,
   clientId,
-  scope
+  scope,
 }) => {
   // Check oauth configuration
   if (oidcDiscoveryUrl !== "") {
-    const {
-      authorization_endpoint,
-      token_endpoint
-    } = await getTokenConfiguration(oidcDiscoveryUrl);
-    authUrl = authorization_endpoint;
-    accessTokenUrl = token_endpoint;
+    const { authorization_endpoint, token_endpoint } = await getTokenConfiguration(oidcDiscoveryUrl)
+    authUrl = authorization_endpoint
+    accessTokenUrl = token_endpoint
   }
 
   // Store oauth information
-  localStorage.setItem("token_endpoint", accessTokenUrl);
-  localStorage.setItem("client_id", clientId);
+  localStorage.setItem("token_endpoint", accessTokenUrl)
+  localStorage.setItem("client_id", clientId)
 
   // Create and store a random state value
-  const state = generateRandomString();
-  localStorage.setItem("pkce_state", state);
+  const state = generateRandomString()
+  localStorage.setItem("pkce_state", state)
 
   // Create and store a new PKCE code_verifier (the plaintext random secret)
-  const code_verifier = generateRandomString();
-  localStorage.setItem("pkce_code_verifier", code_verifier);
+  const code_verifier = generateRandomString()
+  localStorage.setItem("pkce_code_verifier", code_verifier)
 
   // Hash and base64-urlencode the secret to use as the challenge
-  const code_challenge = await pkceChallengeFromVerifier(code_verifier);
+  const code_challenge = await pkceChallengeFromVerifier(code_verifier)
 
   // Build the authorization URL
   const buildUrl = () =>
@@ -177,15 +171,13 @@ const tokenRequest = async ({
       clientId
     )}&state=${encodeURIComponent(state)}&scope=${encodeURIComponent(
       scope
-    )}&redirect_uri=${encodeURIComponent(
-      redirectUri
-    )}&code_challenge=${encodeURIComponent(
+    )}&redirect_uri=${encodeURIComponent(redirectUri)}&code_challenge=${encodeURIComponent(
       code_challenge
-    )}&code_challenge_method=S256`;
+    )}&code_challenge_method=S256`
 
   // Redirect to the authorization server
-  window.location = buildUrl();
-};
+  window.location = buildUrl()
+}
 
 // OAUTH REDIRECT HANDLING
 
@@ -197,42 +189,39 @@ const tokenRequest = async ({
  */
 
 const oauthRedirect = async () => {
-  let tokenResponse = "";
-  let q = parseQueryString(window.location.search.substring(1));
+  let tokenResponse = ""
+  let q = parseQueryString(window.location.search.substring(1))
   // Check if the server returned an error string
   if (q.error) {
-    alert(`Error returned from authorization server: ${q.error}`);
+    alert(`Error returned from authorization server: ${q.error}`)
   }
   // If the server returned an authorization code, attempt to exchange it for an access token
   if (q.code) {
     // Verify state matches what we set at the beginning
     if (localStorage.getItem("pkce_state") != q.state) {
-      alert("Invalid state");
+      alert("Invalid state")
     } else {
       try {
         // Exchange the authorization code for an access token
-        tokenResponse = await sendPostRequest(
-          localStorage.getItem("token_endpoint"),
-          {
-            grant_type: "authorization_code",
-            code: q.code,
-            client_id: localStorage.getItem("client_id"),
-            redirect_uri: redirectUri,
-            code_verifier: localStorage.getItem("pkce_code_verifier")
-          }
-        );
+        tokenResponse = await sendPostRequest(localStorage.getItem("token_endpoint"), {
+          grant_type: "authorization_code",
+          code: q.code,
+          client_id: localStorage.getItem("client_id"),
+          redirect_uri: redirectUri,
+          code_verifier: localStorage.getItem("pkce_code_verifier"),
+        })
       } catch (err) {
-        console.log(`${error.error}\n\n${error.error_description}`);
+        console.log(`${error.error}\n\n${error.error_description}`)
       }
     }
     // Clean these up since we don't need them anymore
-    localStorage.removeItem("pkce_state");
-    localStorage.removeItem("pkce_code_verifier");
-    localStorage.removeItem("token_endpoint");
-    localStorage.removeItem("client_id");
-    return tokenResponse;
+    localStorage.removeItem("pkce_state")
+    localStorage.removeItem("pkce_code_verifier")
+    localStorage.removeItem("token_endpoint")
+    localStorage.removeItem("client_id")
+    return tokenResponse
   }
-  return tokenResponse;
-};
+  return tokenResponse
+}
 
-export { tokenRequest, oauthRedirect };
+export { tokenRequest, oauthRedirect }

assets/js/pwa.js

@@ -2,55 +2,50 @@ export default () => {
   //*** Determine whether or not the PWA has been installed. ***//
 
   // Step 1: Check local storage
-  let pwaInstalled = localStorage.getItem("pwaInstalled") === "yes";
+  let pwaInstalled = localStorage.getItem("pwaInstalled") === "yes"
 
   // Step 2: Check if the display-mode is standalone. (Only permitted for PWAs.)
-  if (
-    !pwaInstalled &&
-    window.matchMedia("(display-mode: standalone)").matches
-  ) {
-    localStorage.setItem("pwaInstalled", "yes");
-    pwaInstalled = true;
+  if (!pwaInstalled && window.matchMedia("(display-mode: standalone)").matches) {
+    localStorage.setItem("pwaInstalled", "yes")
+    pwaInstalled = true
   }
 
   // Step 3: Check if the navigator is in standalone mode. (Again, only permitted for PWAs.)
   if (!pwaInstalled && window.navigator.standalone === true) {
-    localStorage.setItem("pwaInstalled", "yes");
-    pwaInstalled = true;
+    localStorage.setItem("pwaInstalled", "yes")
+    pwaInstalled = true
   }
 
   //*** If the PWA has not been installed, show the install PWA prompt.. ***//
-  let deferredPrompt = null;
-  window.addEventListener("beforeinstallprompt", event => {
-    deferredPrompt = event;
+  let deferredPrompt = null
+  window.addEventListener("beforeinstallprompt", (event) => {
+    deferredPrompt = event
 
     // Show the install button if the prompt appeared.
     if (!pwaInstalled) {
-      document.querySelector("#installPWA").style.display = "inline-flex";
+      document.querySelector("#installPWA").style.display = "inline-flex"
     }
-  });
+  })
 
   // When the app is installed, remove install prompts.
-  window.addEventListener("appinstalled", event => {
-    localStorage.setItem("pwaInstalled", "yes");
-    pwaInstalled = true;
-    document.getElementById("installPWA").style.display = "none";
-  });
+  window.addEventListener("appinstalled", (event) => {
+    localStorage.setItem("pwaInstalled", "yes")
+    pwaInstalled = true
+    document.getElementById("installPWA").style.display = "none"
+  })
 
   // When the app is uninstalled, add the prompts back
   return async () => {
     if (deferredPrompt) {
-      deferredPrompt.prompt();
-      let outcome = await deferredPrompt.userChoice;
+      deferredPrompt.prompt()
+      let outcome = await deferredPrompt.userChoice
 
       if (outcome === "accepted") {
-        console.log("Postwoman was installed successfully.");
+        console.log("Postwoman was installed successfully.")
       } else {
-        console.log(
-          "Postwoman could not be installed. (Installation rejected by user.)"
-        );
+        console.log("Postwoman could not be installed. (Installation rejected by user.)")
       }
-      deferredPrompt = null;
+      deferredPrompt = null
     }
-  };
-};
+  }
+}

build.js

@@ -1,27 +1,23 @@
-const axios = require("axios");
-const fs = require("fs");
-const { spawnSync } = require("child_process");
-const runCommand = (command, args) =>
-  spawnSync(command, args)
-    .stdout.toString()
-    .replace(/\n/g, "");
+const axios = require("axios")
+const fs = require("fs")
+const { spawnSync } = require("child_process")
+const runCommand = (command, args) => spawnSync(command, args).stdout.toString().replace(/\n/g, "")
 
-const FAIL_ON_ERROR = false;
-const PW_BUILD_DATA_DIR = "./.postwoman";
-const IS_DEV_MODE = process.argv.includes("--dev");
+const FAIL_ON_ERROR = false
+const PW_BUILD_DATA_DIR = "./.postwoman"
+// const IS_DEV_MODE = process.argv.includes("--dev")
 
 try {
-  (async () => {
+  ;(async () => {
     // Create the build data directory if it does not exist.
     if (!fs.existsSync(PW_BUILD_DATA_DIR)) {
-      fs.mkdirSync(PW_BUILD_DATA_DIR);
+      fs.mkdirSync(PW_BUILD_DATA_DIR)
     }
 
-    let version = {};
+    let version = {}
     // Get the current version name as the tag from Git.
     version.name =
-      process.env.TRAVIS_TAG ||
-      runCommand("git", ["tag --sort=committerdate | tail -1"]);
+      process.env.TRAVIS_TAG || runCommand("git", ["tag --sort=committerdate | tail -1"])
 
     // FALLBACK: If version.name was unset, let's grab it from GitHub.
     if (!version.name) {
@@ -29,35 +25,32 @@ try {
         await axios
           .get("https://api.github.com/repos/liyasthomas/postwoman/releases")
           // If we can't get it from GitHub, we'll resort to getting it from package.json
-          .catch(ex => ({
+          .catch((ex) => ({
             data: [
               {
-                tag_name: require("./package.json").version
-              }
-            ]
+                tag_name: require("./package.json").version,
+              },
+            ],
           }))
-      ).data[0]["tag_name"];
+      ).data[0]["tag_name"]
     }
 
     // Get the current version hash as the short hash from Git.
-    version.hash = runCommand("git", ["rev-parse", "--short", "HEAD"]);
+    // version.hash = runCommand("git", ["rev-parse", "--short", "HEAD"])
     // Get the 'variant' name as the branch, if it's not master.
-    version.variant =
-      process.env.TRAVIS_BRANCH ||
-      runCommand("git", ["branch"])
-        .split("* ")[1]
-        .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
-    if (["", "master"].includes(version.variant)) {
-      delete version.variant;
-    }
+    // version.variant =
+    //   process.env.TRAVIS_BRANCH ||
+    //   runCommand("git", ["branch"])
+    //     .split("* ")[1]
+    //     .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "")
+    // if (["", "master"].includes(version.variant)) {
+    //   delete version.variant
+    // }
 
     // Write version data into a file
-    fs.writeFileSync(
-      `${PW_BUILD_DATA_DIR}/version.json`,
-      JSON.stringify(version)
-    );
-  })();
+    fs.writeFileSync(`${PW_BUILD_DATA_DIR}/version.json`, JSON.stringify(version))
+  })()
 } catch (ex) {
-  console.error(ex);
-  process.exit(FAIL_ON_ERROR ? 1 : 0);
+  console.error(ex)
+  process.exit(FAIL_ON_ERROR ? 1 : 0)
 }

components/ace-editor.vue

@@ -1,91 +0,0 @@
-<template>
-  <pre ref="editor"></pre>
-</template>
-
-<script>
-const DEFAULT_THEME = "twilight";
-
-import ace from "ace-builds";
-import "ace-builds/webpack-resolver";
-
-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: ""
-    };
-  },
-
-  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.cacheValue = content;
-    });
-  },
-
-  methods: {
-    defineTheme() {
-      if (this.theme) {
-        return this.theme;
-      }
-      return (
-        this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
-      );
-    }
-  },
-
-  beforeDestroy() {
-    this.editor.destroy();
-    this.editor.container.remove();
-  }
-};
-</script>

components/collections/addCollection.vue

@@ -43,44 +43,43 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "~/helpers/fb"
 
 export default {
   props: {
-    show: Boolean
+    show: Boolean,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   methods: {
     syncCollections() {
       if (fb.currentUser !== null) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections))
-          );
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
         }
       }
     },
     addNewCollection() {
       if (!this.$data.name) {
-        this.$toast.info($t("invalid_collection_name"));
-        return;
+        this.$toast.info(this.$t("invalid_collection_name"))
+        return
       }
       this.$store.commit("postwoman/addNewCollection", {
-        name: this.$data.name
-      });
-      this.$emit("hide-modal");
-      this.syncCollections();
+        name: this.$data.name,
+      })
+      this.$emit("hide-modal")
+      this.syncCollections()
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+      this.$data.name = undefined
+    },
+  },
+}
 </script>

components/collections/addFolder.vue

@@ -43,31 +43,41 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     show: Boolean,
     collection: Object,
-    collectionIndex: Number
+    collectionIndex: Number,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   methods: {
     addNewFolder() {
       this.$store.commit("postwoman/addNewFolder", {
         folder: { name: this.$data.name },
-        collectionIndex: this.$props.collectionIndex
-      });
-      this.hideModal();
+        collectionIndex: this.$props.collectionIndex,
+      })
+      this.hideModal()
+      this.syncCollections()
+    },
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+    },
+  },
+}
 </script>

components/collections/collection.vue

@@ -1,43 +1,47 @@
 <template>
   <div>
     <div class="flex-wrap">
+      <button class="icon" @click="toggleShowChildren">
+        <i class="material-icons" v-show="!showChildren">arrow_right</i>
+        <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
+        <i class="material-icons">folder</i>
+        <span>{{ collection.name }}</span>
+      </button>
       <div>
-        <button class="icon" @click="toggleShowChildren">
-          <i class="material-icons" v-show="!showChildren">arrow_right</i>
-          <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
-          <i class="material-icons">folder</i>
-          <span>{{ collection.name }}</span>
+        <button
+          v-if="doc"
+          class="icon"
+          @click="$emit('select-collection')"
+          v-tooltip.left="$t('import')"
+        >
+          <i class="material-icons">topic</i>
         </button>
+        <v-popover>
+          <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+            <i class="material-icons">more_vert</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <button class="icon" @click="$emit('add-folder')" v-close-popover>
+                <i class="material-icons">create_new_folder</i>
+                <span>{{ $t("new_folder") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="$emit('edit-collection')" v-close-popover>
+                <i class="material-icons">create</i>
+                <span>{{ $t("edit") }}</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="removeCollection" v-close-popover>
+                <i class="material-icons">delete</i>
+                <span>{{ $t("delete") }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
       </div>
-      <v-popover>
-        <button class="tooltip-target icon" v-tooltip="$t('more')">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template slot="popover">
-          <div>
-            <button class="icon" @click="$emit('add-folder')" v-close-popover>
-              <i class="material-icons">create_new_folder</i>
-              <span>{{ $t("new_folder") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              class="icon"
-              @click="$emit('edit-collection')"
-              v-close-popover
-            >
-              <i class="material-icons">create</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button class="icon" @click="removeCollection" v-close-popover>
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
-        </template>
-      </v-popover>
     </div>
 
     <div v-show="showChildren">
@@ -47,15 +51,12 @@
             :folder="folder"
             :folderIndex="index"
             :collection-index="collectionIndex"
+            :doc="doc"
             @edit-folder="editFolder(collectionIndex, folder, index)"
             @edit-request="$emit('edit-request', $event)"
           />
         </li>
-        <li
-          v-if="
-            collection.folders.length === 0 && collection.requests.length === 0
-          "
-        >
+        <li v-if="collection.folders.length === 0 && collection.requests.length === 0">
           <label>{{ $t("collection_empty") }}</label>
         </li>
       </ul>
@@ -66,12 +67,13 @@
             :collection-index="collectionIndex"
             :folder-index="-1"
             :request-index="index"
+            :doc="doc"
             @edit-request="
               $emit('edit-request', {
                 request,
                 collectionIndex,
                 folderIndex: undefined,
-                requestIndex: index
+                requestIndex: index,
               })
             "
           />
@@ -95,34 +97,45 @@ ul li {
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   components: {
     folder: () => import("./folder"),
-    request: () => import("./request")
+    request: () => import("./request"),
   },
   props: {
     collectionIndex: Number,
-    collection: Object
+    collection: Object,
+    doc: Boolean,
   },
   data() {
     return {
       showChildren: false,
-      selectedFolder: {}
-    };
+      selectedFolder: {},
+    }
   },
   methods: {
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
+    },
     toggleShowChildren() {
-      this.showChildren = !this.showChildren;
+      this.showChildren = !this.showChildren
     },
     removeCollection() {
-      if (!confirm("Are you sure you want to remove this Collection?")) return;
+      if (!confirm("Are you sure you want to remove this Collection?")) return
       this.$store.commit("postwoman/removeCollection", {
-        collectionIndex: this.collectionIndex
-      });
+        collectionIndex: this.collectionIndex,
+      })
+      this.syncCollections()
     },
     editFolder(collectionIndex, folder, folderIndex) {
-      this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
-    }
-  }
-};
+      this.$emit("edit-folder", { collectionIndex, folder, folderIndex })
+    },
+  },
+}
 </script>

components/collections/editCollection.vue

@@ -43,39 +43,49 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     show: Boolean,
     editingCollection: Object,
-    editingCollectionIndex: Number
+    editingCollectionIndex: Number,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   methods: {
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
+    },
     saveCollection() {
       if (!this.$data.name) {
-        this.$toast.info($t("invalid_collection_name"));
-        return;
+        this.$toast.info(this.$t("invalid_collection_name"))
+        return
       }
       const collectionUpdated = {
         ...this.$props.editingCollection,
-        name: this.$data.name
-      };
+        name: this.$data.name,
+      }
       this.$store.commit("postwoman/editCollection", {
         collection: collectionUpdated,
-        collectionIndex: this.$props.editingCollectionIndex
-      });
-      this.$emit("hide-modal");
+        collectionIndex: this.$props.editingCollectionIndex,
+      })
+      this.$emit("hide-modal")
+      this.syncCollections()
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+    },
+  },
+}
 </script>

components/collections/editFolder.vue

@@ -17,12 +17,7 @@
     <div slot="body">
       <ul>
         <li>
-          <input
-            type="text"
-            v-model="name"
-            :placeholder="folder.name"
-            @keyup.enter="editFolder"
-          />
+          <input type="text" v-model="name" :placeholder="folder.name" @keyup.enter="editFolder" />
         </li>
       </ul>
     </div>
@@ -43,34 +38,44 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     show: Boolean,
     collection: Object,
     collectionIndex: Number,
     folder: Object,
-    folderIndex: Number
+    folderIndex: Number,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   methods: {
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
+    },
     editFolder() {
       this.$store.commit("postwoman/editFolder", {
         collectionIndex: this.$props.collectionIndex,
         folder: { ...this.$props.folder, name: this.$data.name },
-        folderIndex: this.$props.folderIndex
-      });
-      this.hideModal();
+        folderIndex: this.$props.folderIndex,
+      })
+      this.hideModal()
+      this.syncCollections()
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+    },
+  },
+}
 </script>

components/collections/editRequest.vue

@@ -27,22 +27,12 @@
           />
           <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
-            <select
-              type="text"
-              id="selectCollection"
-              v-model="requestUpdateData.collectionIndex"
-            >
+            <select type="text" id="selectCollection" v-model="requestUpdateData.collectionIndex">
+              <option :key="undefined" :value="undefined" hidden disabled selected>{{
+                $t("current_collection")
+              }}</option>
               <option
-                :key="undefined"
-                :value="undefined"
-                hidden
-                disabled
-                selected
-                >{{ $t("current_collection") }}</option
-              >
-              <option
-                v-for="(collection, index) in $store.state.postwoman
-                  .collections"
+                v-for="(collection, index) in $store.state.postwoman.collections"
                 :key="index"
                 :value="index"
               >
@@ -52,17 +42,9 @@
           </span>
           <label for="selectFolder">{{ $t("folder") }}</label>
           <span class="select-wrapper">
-            <select
-              type="text"
-              id="selectFolder"
-              v-model="requestUpdateData.folderIndex"
-            >
+            <select type="text" id="selectFolder" v-model="requestUpdateData.folderIndex">
               <option :key="undefined" :value="undefined">/</option>
-              <option
-                v-for="(folder, index) in folders"
-                :key="index"
-                :value="index"
-              >
+              <option v-for="(folder, index) in folders" :key="index" :value="index">
                 {{ folder.name }}
               </option>
             </select>
@@ -87,48 +69,54 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     show: Boolean,
     collectionIndex: Number,
     folderIndex: Number,
     request: Object,
-    requestIndex: Number
+    requestIndex: Number,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
       requestUpdateData: {
         name: undefined,
         collectionIndex: undefined,
-        folderIndex: undefined
-      }
-    };
+        folderIndex: undefined,
+      },
+    }
   },
   watch: {
     "requestUpdateData.collectionIndex": function resetFolderIndex() {
       // if user choosen some folder, than selected other collection, which doesn't have any folders
       // than `requestUpdateData.folderIndex` won't be reseted
-      this.$data.requestUpdateData.folderIndex = undefined;
-    }
+      this.$data.requestUpdateData.folderIndex = undefined
+    },
   },
   computed: {
     folders() {
-      const userSelectedAnyCollection =
-        this.$data.requestUpdateData.collectionIndex !== undefined;
-      if (!userSelectedAnyCollection) return [];
+      const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
+      if (!userSelectedAnyCollection) return []
 
-      return this.$store.state.postwoman.collections[
-        this.$data.requestUpdateData.collectionIndex
-      ].folders;
-    }
+      return this.$store.state.postwoman.collections[this.$data.requestUpdateData.collectionIndex]
+        .folders
+    },
   },
   methods: {
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
+    },
     saveRequest() {
-      const userSelectedAnyCollection =
-        this.$data.requestUpdateData.collectionIndex !== undefined;
+      const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
 
       const requestUpdated = {
         ...this.$props.request,
@@ -136,8 +124,8 @@ export default {
         collection: userSelectedAnyCollection
           ? this.$data.requestUpdateData.collectionIndex
           : this.$props.collectionIndex,
-        folder: this.$data.requestUpdateData.folderIndex
-      };
+        folder: this.$data.requestUpdateData.folderIndex,
+      }
 
       // pass data separately to don't depend on request's collection, folder fields
       // probably, they should be deprecated because they don't describe request itself
@@ -147,14 +135,15 @@ export default {
         requestOldIndex: this.$props.requestIndex,
         requestNew: requestUpdated,
         requestNewCollectionIndex: requestUpdated.collection,
-        requestNewFolderIndex: requestUpdated.folder
-      });
+        requestNewFolderIndex: requestUpdated.folder,
+      })
 
-      this.hideModal();
+      this.hideModal()
+      this.syncCollections()
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+    },
+  },
+}
 </script>

components/collections/folder.vue

@@ -10,7 +10,7 @@
         </button>
       </div>
       <v-popover>
-        <button class="tooltip-target icon" v-tooltip="$t('more')">
+        <button class="tooltip-target icon" v-tooltip.left="$t('more')">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
@@ -38,12 +38,13 @@
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
             :request-index="index"
+            :doc="doc"
             @edit-request="
               $emit('edit-request', {
                 request,
                 collectionIndex,
                 folderIndex,
-                requestIndex: index
+                requestIndex: index,
               })
             "
           />
@@ -70,37 +71,48 @@ ul li {
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     folder: Object,
     collectionIndex: Number,
-    folderIndex: Number
+    folderIndex: Number,
+    doc: Boolean,
   },
   components: {
-    request: () => import("./request")
+    request: () => import("./request"),
   },
   data() {
     return {
-      showChildren: false
-    };
+      showChildren: false,
+    }
   },
   methods: {
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
+    },
     toggleShowChildren() {
-      this.showChildren = !this.showChildren;
+      this.showChildren = !this.showChildren
     },
     selectRequest(request) {
-      this.$store.commit("postwoman/selectRequest", { request });
+      this.$store.commit("postwoman/selectRequest", { request })
     },
     removeFolder() {
-      if (!confirm("Are you sure you want to remove this folder?")) return;
+      if (!confirm("Are you sure you want to remove this folder?")) return
       this.$store.commit("postwoman/removeFolder", {
         collectionIndex: this.collectionIndex,
-        folderIndex: this.folderIndex
-      });
+        folderIndex: this.folderIndex,
+      })
+      this.syncCollections()
     },
     editFolder() {
-      this.$emit("edit-folder");
-    }
-  }
-};
+      this.$emit("edit-folder")
+    },
+  },
+}
 </script>

components/collections/importExportCollections.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Import / Export Collections</h3>
+            <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -14,16 +14,10 @@
           <div class="flex-wrap">
             <span
               v-tooltip="{
-                content: !fb.currentUser
-                  ? $t('login_first')
-                  : $t('replace_current')
+                content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
               }"
             >
-              <button
-                :disabled="!fb.currentUser"
-                class="icon"
-                @click="syncCollections"
-              >
+              <button :disabled="!fb.currentUser" class="icon" @click="syncCollections">
                 <i class="material-icons">folder_shared</i>
                 <span>{{ $t("import_from_sync") }}</span>
               </button>
@@ -72,11 +66,7 @@
           <button class="icon" @click="hideModal">
             {{ $t("cancel") }}
           </button>
-          <button
-            class="icon primary"
-            @click="exportJSON"
-            v-tooltip="$t('download_file')"
-          >
+          <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
             {{ $t("export") }}
           </button>
         </span>
@@ -86,120 +76,115 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
     return {
-      fb
-    };
+      fb,
+    }
   },
   props: {
-    show: Boolean
+    show: Boolean,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   computed: {
     collectionJson() {
-      return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
-    }
+      return JSON.stringify(this.$store.state.postwoman.collections, null, 2)
+    },
   },
   methods: {
     hideModal() {
-      this.$emit("hide-modal");
+      this.$emit("hide-modal")
     },
     openDialogChooseFileToReplaceWith() {
-      this.$refs.inputChooseFileToReplaceWith.click();
+      this.$refs.inputChooseFileToReplaceWith.click()
     },
     openDialogChooseFileToImportFrom() {
-      this.$refs.inputChooseFileToImportFrom.click();
+      this.$refs.inputChooseFileToImportFrom.click()
     },
     replaceWithJSON() {
-      let reader = new FileReader();
-      reader.onload = event => {
-        let content = event.target.result;
-        let collections = JSON.parse(content);
+      let reader = new FileReader()
+      reader.onload = (event) => {
+        let content = event.target.result
+        let collections = JSON.parse(content)
         if (collections[0]) {
-          let [name, folders, requests] = Object.keys(collections[0]);
-          if (
-            name === "name" &&
-            folders === "folders" &&
-            requests === "requests"
-          ) {
+          let [name, folders, requests] = Object.keys(collections[0])
+          if (name === "name" && folders === "folders" && requests === "requests") {
             // Do nothing
           }
-        } else if (
-          collections.info &&
-          collections.info.schema.includes("v2.1.0")
-        ) {
-          collections = this.parsePostmanCollection(collections);
+        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+          collections = this.parsePostmanCollection(collections)
         } else {
-          return this.failedImport();
+          return this.failedImport()
         }
-        this.$store.commit("postwoman/importCollections", collections);
-        this.fileImported();
-      };
-      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
+        this.$store.commit("postwoman/replaceCollections", collections)
+        this.fileImported()
+        this.syncToFBCollections()
+      }
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
     },
     importFromJSON() {
-      let reader = new FileReader();
-      reader.onload = event => {
-        let content = event.target.result;
-        let collections = JSON.parse(content);
+      let reader = new FileReader()
+      reader.onload = (event) => {
+        let content = event.target.result
+        let collections = JSON.parse(content)
         if (collections[0]) {
-          let [name, folders, requests] = Object.keys(collections[0]);
-          if (
-            name === "name" &&
-            folders === "folders" &&
-            requests === "requests"
-          ) {
+          let [name, folders, requests] = Object.keys(collections[0])
+          if (name === "name" && folders === "folders" && requests === "requests") {
             // Do nothing
           }
-        } else if (
-          collections.info &&
-          collections.info.schema.includes("v2.1.0")
-        ) {
-          collections = this.parsePostmanCollection(collections);
+        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+          collections = this.parsePostmanCollection(collections)
         } else {
-          return this.failedImport();
+          return this.failedImport()
         }
-        this.$store.commit("postwoman/importCollections", collections);
-        this.fileImported();
-      };
-      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
+        this.$store.commit("postwoman/importCollections", collections)
+        this.fileImported()
+        this.syncToFBCollections()
+      }
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
     },
     exportJSON() {
-      let text = this.collectionJson;
-      text = text.replace(/\n/g, "\r\n");
+      let text = this.collectionJson
+      text = text.replace(/\n/g, "\r\n")
       let blob = new Blob([text], {
-        type: "text/json"
-      });
-      let anchor = document.createElement("a");
-      anchor.download = "postwoman-collection.json";
-      anchor.href = window.URL.createObjectURL(blob);
-      anchor.target = "_blank";
-      anchor.style.display = "none";
-      document.body.appendChild(anchor);
-      anchor.click();
-      document.body.removeChild(anchor);
+        type: "text/json",
+      })
+      let anchor = document.createElement("a")
+      anchor.download = "postwoman-collection.json"
+      anchor.href = window.URL.createObjectURL(blob)
+      anchor.target = "_blank"
+      anchor.style.display = "none"
+      document.body.appendChild(anchor)
+      anchor.click()
+      document.body.removeChild(anchor)
       this.$toast.success(this.$t("download_started"), {
-        icon: "done"
-      });
+        icon: "done",
+      })
     },
     syncCollections() {
-      this.$store.commit("postwoman/replaceCollections", fb.currentCollections);
-      this.fileImported();
+      this.$store.commit("postwoman/replaceCollections", fb.currentCollections)
+      this.fileImported()
+    },
+    syncToFBCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
     },
     fileImported() {
       this.$toast.info(this.$t("file_imported"), {
-        icon: "folder_shared"
-      });
+        icon: "folder_shared",
+      })
     },
     failedImport() {
       this.$toast.error(this.$t("import_failed"), {
-        icon: "error"
-      });
+        icon: "error",
+      })
     },
     parsePostmanCollection(collection, folders = true) {
       let postwomanCollection = folders
@@ -207,39 +192,31 @@ export default {
             {
               name: "",
               folders: [],
-              requests: []
-            }
+              requests: [],
+            },
           ]
         : {
             name: "",
-            requests: []
-          };
+            requests: [],
+          }
       for (let collectionItem of collection.item) {
         if (collectionItem.request) {
           if (postwomanCollection[0]) {
-            postwomanCollection[0].name = collection.info
-              ? collection.info.name
-              : "";
-            postwomanCollection[0].requests.push(
-              this.parsePostmanRequest(collectionItem)
-            );
+            postwomanCollection[0].name = collection.info ? collection.info.name : ""
+            postwomanCollection[0].requests.push(this.parsePostmanRequest(collectionItem))
           } else {
-            postwomanCollection.name = collection.name ? collection.name : "";
-            postwomanCollection.requests.push(
-              this.parsePostmanRequest(collectionItem)
-            );
+            postwomanCollection.name = collection.name ? collection.name : ""
+            postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
           }
         } else if (collectionItem.item) {
           if (collectionItem.item[0]) {
-            postwomanCollection[0].folders.push(
-              this.parsePostmanCollection(collectionItem, false)
-            );
+            postwomanCollection[0].folders.push(this.parsePostmanCollection(collectionItem, false))
           }
         }
       }
-      return postwomanCollection;
+      return postwomanCollection
     },
-    parsePostmanRequest(requestObject) {
+    parsePostmanRequest({ name, request }) {
       let pwRequest = {
         url: "",
         path: "",
@@ -256,69 +233,63 @@ export default {
         rawInput: false,
         contentType: "",
         requestType: "",
-        name: ""
-      };
+        name: "",
+      }
 
-      pwRequest.name = requestObject.name;
-      let requestObjectUrl = requestObject.request.url.raw.match(
-        /^(.+:\/\/[^\/]+|{[^\/]+})(\/[^\?]+|).*$/
-      );
-      pwRequest.url = requestObjectUrl[1];
-      pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : "";
-      pwRequest.method = requestObject.request.method;
-      let itemAuth = requestObject.request.auth
-        ? requestObject.request.auth
-        : "";
-      let authType = itemAuth ? itemAuth.type : "";
+      pwRequest.name = name
+      let requestObjectUrl = request.url.raw.match(/^(.+:\/\/[^\/]+|{[^\/]+})(\/[^\?]+|).*$/)
+      if (requestObjectUrl) {
+        pwRequest.url = requestObjectUrl[1]
+        pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
+      }
+      pwRequest.method = request.method
+      let itemAuth = request.auth ? request.auth : ""
+      let authType = itemAuth ? itemAuth.type : ""
       if (authType === "basic") {
-        pwRequest.auth = "Basic Auth";
+        pwRequest.auth = "Basic Auth"
         pwRequest.httpUser =
-          itemAuth.basic[0].key === "username"
-            ? itemAuth.basic[0].value
-            : itemAuth.basic[1].value;
+          itemAuth.basic[0].key === "username" ? itemAuth.basic[0].value : itemAuth.basic[1].value
         pwRequest.httpPassword =
-          itemAuth.basic[0].key === "password"
-            ? itemAuth.basic[0].value
-            : itemAuth.basic[1].value;
+          itemAuth.basic[0].key === "password" ? itemAuth.basic[0].value : itemAuth.basic[1].value
       } else if (authType === "oauth2") {
-        pwRequest.auth = "OAuth 2.0";
+        pwRequest.auth = "OAuth 2.0"
         pwRequest.bearerToken =
           itemAuth.oauth2[0].key === "accessToken"
             ? itemAuth.oauth2[0].value
-            : itemAuth.oauth2[1].value;
+            : itemAuth.oauth2[1].value
       } else if (authType === "bearer") {
-        pwRequest.auth = "Bearer Token";
-        pwRequest.bearerToken = itemAuth.bearer[0].value;
+        pwRequest.auth = "Bearer Token"
+        pwRequest.bearerToken = itemAuth.bearer[0].value
       }
-      let requestObjectHeaders = requestObject.request.header;
+      let requestObjectHeaders = request.header
       if (requestObjectHeaders) {
-        pwRequest.headers = requestObjectHeaders;
+        pwRequest.headers = requestObjectHeaders
         for (let header of pwRequest.headers) {
-          delete header.name;
-          delete header.type;
+          delete header.name
+          delete header.type
         }
       }
-      let requestObjectParams = requestObject.request.url.query;
+      let requestObjectParams = request.url.query
       if (requestObjectParams) {
-        pwRequest.params = requestObjectParams;
+        pwRequest.params = requestObjectParams
         for (let param of pwRequest.params) {
-          delete param.disabled;
+          delete param.disabled
         }
       }
-      if (requestObject.request.body) {
-        if (requestObject.request.body.mode === "urlencoded") {
-          let params = requestObject.request.body.urlencoded;
-          pwRequest.bodyParams = params ? params : [];
+      if (request.body) {
+        if (request.body.mode === "urlencoded") {
+          let params = request.body.urlencoded
+          pwRequest.bodyParams = params ? params : []
           for (let param of pwRequest.bodyParams) {
-            delete param.type;
+            delete param.type
           }
-        } else if (requestObject.request.body.mode === "raw") {
-          pwRequest.rawInput = true;
-          pwRequest.rawParams = requestObject.request.body.raw;
+        } else if (request.body.mode === "raw") {
+          pwRequest.rawInput = true
+          pwRequest.rawParams = request.body.raw
         }
       }
-      return pwRequest;
-    }
-  }
-};
+      return pwRequest
+    },
+  },
+}
 </script>

components/collections/index.vue

@@ -56,48 +56,36 @@ TODO:
           rel="noopener"
         >
           <button class="icon" v-tooltip="'Wiki'">
-            <i class="material-icons">help</i>
+            <i class="material-icons">help_outline</i>
           </button>
         </a> -->
       </div>
     </div>
     <p v-if="collections.length === 0" class="info">
-      Create new collection
+      <i class="material-icons">help_outline</i> Create new collection
     </p>
-    <virtual-list
-      class="virtual-list"
-      :class="{ filled: collections.length }"
-      :size="152"
-      :remain="Math.min(5, collections.length)"
-    >
+    <div class="virtual-list">
       <ul>
         <li v-for="(collection, index) in collections" :key="collection.name">
           <collection
             :collection-index="index"
             :collection="collection"
+            :doc="doc"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder(collection, index)"
             @edit-folder="editFolder($event)"
             @edit-request="editRequest($event)"
+            @select-collection="$emit('use-collection', collection)"
           />
         </li>
-        <li v-if="collections.length === 0">
-          <label>Collections are empty</label>
-        </li>
       </ul>
-    </virtual-list>
-    <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
-      <button class="icon">
-        <i class="material-icons">books</i>
-        <span>{{ $t("generate_docs") }}</span>
-      </button>
-    </nuxt-link>
+    </div>
   </pw-section>
 </template>
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 276px);
+  max-height: calc(100vh - 245px);
 }
 
 ul {
@@ -107,20 +95,22 @@ ul {
 </style>
 
 <script>
-import collection from "./collection";
-import { fb } from "../../functions/fb";
+import collection from "./collection"
+import { fb } from "~/helpers/fb"
 
 export default {
   components: {
     collection,
-    "pw-section": () => import("../section"),
+    "pw-section": () => import("../layout/section"),
     addCollection: () => import("./addCollection"),
     addFolder: () => import("./addFolder"),
     editCollection: () => import("./editCollection"),
     editFolder: () => import("./editFolder"),
     editRequest: () => import("./editRequest"),
     importExportCollections: () => import("./importExportCollections"),
-    VirtualList: () => import("vue-virtual-scroll-list")
+  },
+  props: {
+    doc: Boolean,
   },
   data() {
     return {
@@ -135,100 +125,100 @@ export default {
       editingFolder: undefined,
       editingFolderIndex: undefined,
       editingRequest: undefined,
-      editingRequestIndex: undefined
-    };
+      editingRequestIndex: undefined,
+    }
   },
   computed: {
     collections() {
-      return this.$store.state.postwoman.collections;
-    }
+      return fb.currentUser !== null
+        ? fb.currentCollections
+        : this.$store.state.postwoman.collections
+    },
   },
   async mounted() {
-    this._keyListener = function(e) {
+    this._keyListener = function (e) {
       if (e.key === "Escape") {
-        e.preventDefault();
-        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false;
+        e.preventDefault()
+        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false
       }
-    };
-    document.addEventListener("keydown", this._keyListener.bind(this));
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
   },
   methods: {
     displayModalAdd(shouldDisplay) {
-      this.showModalAdd = shouldDisplay;
+      this.showModalAdd = shouldDisplay
     },
     displayModalEdit(shouldDisplay) {
-      this.showModalEdit = shouldDisplay;
+      this.showModalEdit = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     displayModalImportExport(shouldDisplay) {
-      this.showModalImportExport = shouldDisplay;
+      this.showModalImportExport = shouldDisplay
     },
     displayModalAddFolder(shouldDisplay) {
-      this.showModalAddFolder = shouldDisplay;
+      this.showModalAddFolder = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     displayModalEditFolder(shouldDisplay) {
-      this.showModalEditFolder = shouldDisplay;
+      this.showModalEditFolder = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     displayModalEditRequest(shouldDisplay) {
-      this.showModalEditRequest = shouldDisplay;
+      this.showModalEditRequest = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     editCollection(collection, collectionIndex) {
-      this.$data.editingCollection = collection;
-      this.$data.editingCollectionIndex = collectionIndex;
-      this.displayModalEdit(true);
-      this.syncCollections();
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.displayModalEdit(true)
+      this.syncCollections()
     },
     addFolder(collection, collectionIndex) {
-      this.$data.editingCollection = collection;
-      this.$data.editingCollectionIndex = collectionIndex;
-      this.displayModalAddFolder(true);
-      this.syncCollections();
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.displayModalAddFolder(true)
+      this.syncCollections()
     },
     editFolder(payload) {
-      const { collectionIndex, folder, folderIndex } = payload;
-      this.$data.editingCollection = collection;
-      this.$data.editingCollectionIndex = collectionIndex;
-      this.$data.editingFolder = folder;
-      this.$data.editingFolderIndex = folderIndex;
-      this.displayModalEditFolder(true);
-      this.syncCollections();
+      const { collectionIndex, folder, folderIndex } = payload
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolder = folder
+      this.$data.editingFolderIndex = folderIndex
+      this.displayModalEditFolder(true)
+      this.syncCollections()
     },
     editRequest(payload) {
-      const { request, collectionIndex, folderIndex, requestIndex } = payload;
-      this.$data.editingCollectionIndex = collectionIndex;
-      this.$data.editingFolderIndex = folderIndex;
-      this.$data.editingRequest = request;
-      this.$data.editingRequestIndex = requestIndex;
-      this.displayModalEditRequest(true);
-      this.syncCollections();
+      const { request, collectionIndex, folderIndex, requestIndex } = payload
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolderIndex = folderIndex
+      this.$data.editingRequest = request
+      this.$data.editingRequestIndex = requestIndex
+      this.displayModalEditRequest(true)
+      this.syncCollections()
     },
     resetSelectedData() {
-      this.$data.editingCollection = undefined;
-      this.$data.editingCollectionIndex = undefined;
-      this.$data.editingFolder = undefined;
-      this.$data.editingFolderIndex = undefined;
-      this.$data.editingRequest = undefined;
-      this.$data.editingRequestIndex = undefined;
+      this.$data.editingCollection = undefined
+      this.$data.editingCollectionIndex = undefined
+      this.$data.editingFolder = undefined
+      this.$data.editingFolderIndex = undefined
+      this.$data.editingRequest = undefined
+      this.$data.editingRequestIndex = undefined
     },
     syncCollections() {
       if (fb.currentUser !== null) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections))
-          );
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
         }
       }
-    }
+    },
   },
   beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener);
-  }
-};
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
 </script>

components/collections/request.vue

@@ -3,8 +3,8 @@
     <div>
       <button
         class="icon"
-        @click="selectRequest()"
-        v-tooltip="$t('use_request')"
+        @click="!doc ? selectRequest() : {}"
+        v-tooltip="!doc ? $t('use_request') : ''"
       >
         <i class="material-icons">insert_drive_file</i>
         <span>{{ request.name }}</span>
@@ -46,25 +46,36 @@ ul li {
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     request: Object,
     collectionIndex: Number,
     folderIndex: Number,
-    requestIndex: Number
+    requestIndex: Number,
+    doc: Boolean,
   },
   methods: {
+    syncCollections() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[0].value) {
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
+        }
+      }
+    },
     selectRequest() {
-      this.$store.commit("postwoman/selectRequest", { request: this.request });
+      this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     removeRequest() {
-      if (!confirm("Are you sure you want to remove this request?")) return;
+      if (!confirm("Are you sure you want to remove this request?")) return
       this.$store.commit("postwoman/removeRequest", {
         collectionIndex: this.collectionIndex,
         folderIndex: this.folderIndex,
-        requestIndex: this.requestIndex
-      });
-    }
-  }
-};
+        requestIndex: this.requestIndex,
+      })
+      this.syncCollections()
+    },
+  },
+}
 </script>

components/collections/saveRequestAs.vue

@@ -27,22 +27,12 @@
           />
           <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
-            <select
-              type="text"
-              id="selectCollection"
-              v-model="requestData.collectionIndex"
-            >
+            <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
+              <option :key="undefined" :value="undefined" hidden disabled selected>{{
+                $t("select_collection")
+              }}</option>
               <option
-                :key="undefined"
-                :value="undefined"
-                hidden
-                disabled
-                selected
-                >{{ $t("select_collection") }}</option
-              >
-              <option
-                v-for="(collection, index) in $store.state.postwoman
-                  .collections"
+                v-for="(collection, index) in $store.state.postwoman.collections"
                 :key="index"
                 :value="index"
               >
@@ -52,34 +42,18 @@
           </span>
           <label for="selectFolder">{{ $t("folder") }}</label>
           <span class="select-wrapper">
-            <select
-              type="text"
-              id="selectFolder"
-              v-model="requestData.folderIndex"
-            >
+            <select type="text" id="selectFolder" v-model="requestData.folderIndex">
               <option :key="undefined" :value="undefined">/</option>
-              <option
-                v-for="(folder, index) in folders"
-                :key="index"
-                :value="index"
-              >
+              <option v-for="(folder, index) in folders" :key="index" :value="index">
                 {{ folder.name }}
               </option>
             </select>
           </span>
           <label for="selectRequest">{{ $t("request") }}</label>
           <span class="select-wrapper">
-            <select
-              type="text"
-              id="selectRequest"
-              v-model="requestData.requestIndex"
-            >
+            <select type="text" id="selectRequest" v-model="requestData.requestIndex">
               <option :key="undefined" :value="undefined">/</option>
-              <option
-                v-for="(folder, index) in requests"
-                :key="index"
-                :value="index"
-              >
+              <option v-for="(folder, index) in requests" :key="index" :value="index">
                 {{ folder.name }}
               </option>
             </select>
@@ -104,15 +78,15 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "~/helpers/fb"
 
 export default {
   props: {
     show: Boolean,
-    editingRequest: Object
+    editingRequest: Object,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -121,106 +95,99 @@ export default {
         name: undefined,
         collectionIndex: undefined,
         folderIndex: undefined,
-        requestIndex: undefined
-      }
-    };
+        requestIndex: undefined,
+      },
+    }
   },
   watch: {
     "requestData.collectionIndex": function resetFolderAndRequestIndex() {
       // if user choosen some folder, than selected other collection, which doesn't have any folders
       // than `requestUpdateData.folderIndex` won't be reseted
-      this.$data.requestData.folderIndex = undefined;
-      this.$data.requestData.requestIndex = undefined;
+      this.$data.requestData.folderIndex = undefined
+      this.$data.requestData.requestIndex = undefined
     },
     "requestData.folderIndex": function resetRequestIndex() {
-      this.$data.requestData.requestIndex = undefined;
-    }
+      this.$data.requestData.requestIndex = undefined
+    },
+    editingRequest(request) {
+      this.defaultRequestName = request.label || "My Request"
+    },
   },
   computed: {
     folders() {
-      const userSelectedAnyCollection =
-        this.$data.requestData.collectionIndex !== undefined;
-      if (!userSelectedAnyCollection) return [];
+      const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
+      if (!userSelectedAnyCollection) return []
 
       const noCollectionAvailable =
-        this.$store.state.postwoman.collections[
-          this.$data.requestData.collectionIndex
-        ] !== undefined;
-      if (!noCollectionAvailable) return [];
+        this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !==
+        undefined
+      if (!noCollectionAvailable) return []
 
-      return this.$store.state.postwoman.collections[
-        this.$data.requestData.collectionIndex
-      ].folders;
+      return this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex].folders
     },
     requests() {
-      const userSelectedAnyCollection =
-        this.$data.requestData.collectionIndex !== undefined;
-      if (!userSelectedAnyCollection) return [];
+      const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
+      if (!userSelectedAnyCollection) return []
 
-      const userSelectedAnyFolder =
-        this.$data.requestData.folderIndex !== undefined;
+      const userSelectedAnyFolder = this.$data.requestData.folderIndex !== undefined
       if (userSelectedAnyFolder) {
         const collection = this.$store.state.postwoman.collections[
           this.$data.requestData.collectionIndex
-        ];
-        const folder = collection.folders[this.$data.requestData.folderIndex];
-        const requests = folder.requests;
-        return requests;
+        ]
+        const folder = collection.folders[this.$data.requestData.folderIndex]
+        const requests = folder.requests
+        return requests
       } else {
         const collection = this.$store.state.postwoman.collections[
           this.$data.requestData.collectionIndex
-        ];
+        ]
         const noCollectionAvailable =
-          this.$store.state.postwoman.collections[
-            this.$data.requestData.collectionIndex
-          ] !== undefined;
-        if (!noCollectionAvailable) return [];
+          this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !==
+          undefined
+        if (!noCollectionAvailable) return []
 
-        const requests = collection.requests;
-        return requests;
+        const requests = collection.requests
+        return requests
       }
-    }
+    },
   },
   methods: {
     syncCollections() {
       if (fb.currentUser !== null) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections))
-          );
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
         }
       }
     },
     saveRequestAs() {
-      const userDidntSpecifyCollection =
-        this.$data.requestData.collectionIndex === undefined;
+      const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
       if (userDidntSpecifyCollection) {
         this.$toast.error(this.$t("select_collection"), {
-          icon: "error"
-        });
-        return;
+          icon: "error",
+        })
+        return
       }
 
       const requestUpdated = {
         ...this.$props.editingRequest,
         name: this.$data.requestData.name || this.$data.defaultRequestName,
-        collection: this.$data.requestData.collectionIndex
-      };
+        collection: this.$data.requestData.collectionIndex,
+      }
 
       this.$store.commit("postwoman/saveRequestAs", {
         request: requestUpdated,
         collectionIndex: this.$data.requestData.collectionIndex,
         folderIndex: this.$data.requestData.folderIndex,
-        requestIndex: this.$data.requestData.requestIndex
-      });
+        requestIndex: this.$data.requestData.requestIndex,
+      })
 
-      this.hideModal();
-      this.syncCollections();
+      this.hideModal()
+      this.syncCollections()
     },
     hideModal() {
-      this.$emit("hide-modal");
-      this.$emit("hide-model"); // for backward compatibility  // TODO: use fixed event
-    }
-  }
-};
+      this.$emit("hide-modal")
+      this.$emit("hide-model") // for backward compatibility  // TODO: use fixed event
+    },
+  },
+}
 </script>

components/environments/addEnvironment.vue

@@ -43,52 +43,50 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "~/helpers/fb"
 
 export default {
   props: {
-    show: Boolean
+    show: Boolean,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   methods: {
     syncEnvironments() {
       if (fb.currentUser !== null) {
         if (fb.currentSettings[1].value) {
-          fb.writeEnvironments(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
-          );
+          fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
         }
       }
     },
     addNewEnvironment() {
       if (!this.$data.name) {
-        this.$toast.info(this.$t("invalid_environment_name"));
-        return;
+        this.$toast.info(this.$t("invalid_environment_name"))
+        return
       }
       let newEnvironment = [
         {
           name: this.$data.name,
-          variables: []
-        }
-      ];
+          variables: [],
+        },
+      ]
       this.$store.commit("postwoman/importAddEnvironments", {
         environments: newEnvironment,
-        confirmation: "Environment added"
-      });
-      this.$emit("hide-modal");
-      this.syncEnvironments();
+        confirmation: "Environment added",
+      })
+      this.$emit("hide-modal")
+      this.syncEnvironments()
     },
     hideModal() {
-      this.$data.name = undefined;
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+      this.$data.name = undefined
+    },
+  },
+}
 </script>

components/environments/editEnvironment.vue

@@ -30,29 +30,14 @@
           <div class="flex-wrap">
             <label for="variableList">{{ $t("env_variable_list") }}</label>
             <div>
-              <button
-                class="icon"
-                @click="clearContent($event)"
-                v-tooltip.bottom="$t('clear')"
-              >
+              <button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
                 <i class="material-icons">clear_all</i>
               </button>
             </div>
           </div>
-          <textarea
-            id="variableList"
-            readonly
-            v-textarea-auto-height="variableString"
-            v-model="variableString"
-            :placeholder="$t('add_one_variable')"
-            rows="1"
-          ></textarea>
         </li>
       </ul>
-      <ul
-        v-for="(variable, index) in this.editingEnvCopy.variables"
-        :key="index"
-      >
+      <ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
         <li>
           <input
             :placeholder="$t('parameter_count', { count: index + 1 })"
@@ -61,7 +46,7 @@
             @change="
               $store.commit('postwoman/setVariableKey', {
                 index,
-                value: $event.target.value
+                value: $event.target.value,
               })
             "
             autofocus
@@ -72,14 +57,12 @@
             :placeholder="$t('value_count', { count: index + 1 })"
             :name="'value' + index"
             :value="
-              typeof variable.value === 'string'
-              ? variable.value
-              : JSON.stringify(variable.value)
+              typeof variable.value === 'string' ? variable.value : JSON.stringify(variable.value)
             "
             @change="
               $store.commit('postwoman/setVariableValue', {
                 index,
-                value: $event.target.value
+                value: $event.target.value,
               })
             "
           />
@@ -123,99 +106,101 @@
 </template>
 
 <script>
-import textareaAutoHeight from "../../directives/textareaAutoHeight";
+import { fb } from "~/helpers/fb"
 
 export default {
-  directives: {
-    textareaAutoHeight
-  },
   props: {
     show: Boolean,
     editingEnvironment: Object,
-    editingEnvironmentIndex: Number
+    editingEnvironmentIndex: Number,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   watch: {
-    editingEnvironment: function(update) {
-      this.name = this.$props.editingEnvironment && this.$props.editingEnvironment.name
-      ? this.$props.editingEnvironment.name
-      : undefined
-      this.$store.commit(
-        "postwoman/setEditingEnvironment",
-        this.$props.editingEnvironment
-      );
-    }
+    editingEnvironment: function (update) {
+      this.name =
+        this.$props.editingEnvironment && this.$props.editingEnvironment.name
+          ? this.$props.editingEnvironment.name
+          : undefined
+      this.$store.commit("postwoman/setEditingEnvironment", this.$props.editingEnvironment)
+    },
   },
   computed: {
     editingEnvCopy() {
-      return this.$store.state.postwoman.editingEnvironment;
+      return this.$store.state.postwoman.editingEnvironment
     },
     variableString() {
-      const result = this.editingEnvCopy.variables;
-      return result === "" ? "" : JSON.stringify(result);
-    }
+      const result = this.editingEnvCopy.variables
+      return result === "" ? "" : JSON.stringify(result)
+    },
   },
   methods: {
+    syncEnvironments() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[1].value) {
+          fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
+        }
+      }
+    },
     clearContent(e) {
-      this.$store.commit("postwoman/removeVariables", []);
-      e.target.innerHTML = this.doneButton;
+      this.$store.commit("postwoman/removeVariables", [])
+      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
-      );
+        icon: "clear_all",
+      })
+      setTimeout(() => (e.target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
     },
     addEnvironmentVariable() {
-      let value = { key: "", value: "" };
-      this.$store.commit("postwoman/addVariable", value);
+      let value = { key: "", value: "" }
+      this.$store.commit("postwoman/addVariable", value)
+      this.syncEnvironments()
     },
     removeEnvironmentVariable(index) {
-      let variableIndex = index;
-      const oldVariables = this.editingEnvCopy.variables.slice();
+      let variableIndex = index
+      const oldVariables = this.editingEnvCopy.variables.slice()
       const newVariables = this.editingEnvCopy.variables.filter(
         (variable, index) => variableIndex !== index
-      );
+      )
 
-      this.$store.commit("postwoman/removeVariable", newVariables);
+      this.$store.commit("postwoman/removeVariable", newVariables)
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
           text: this.$t("undo"),
           onClick: (e, toastObject) => {
-            this.$store.commit("postwoman/removeVariable", oldVariables);
-            toastObject.remove();
-          }
-        }
-      });
+            this.$store.commit("postwoman/removeVariable", oldVariables)
+            toastObject.remove()
+          },
+        },
+      })
+      this.syncEnvironments()
     },
     saveEnvironment() {
       if (!this.$data.name) {
-        this.$toast.info(this.$t("invalid_environment_name"));
-        return;
+        this.$toast.info(this.$t("invalid_environment_name"))
+        return
       }
       const environmentUpdated = {
         ...this.editingEnvCopy,
-        name: this.$data.name
-      };
+        name: this.$data.name,
+      }
       this.$store.commit("postwoman/saveEnvironment", {
         environment: environmentUpdated,
-        environmentIndex: this.$props.editingEnvironmentIndex
-      });
-      this.$emit("hide-modal");
+        environmentIndex: this.$props.editingEnvironmentIndex,
+      })
+      this.$emit("hide-modal")
+      this.syncEnvironments()
     },
     hideModal() {
-      this.$data.name = undefined;
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+      this.$data.name = undefined
+    },
+  },
+}
 </script>

components/environments/environment.vue

@@ -4,23 +4,19 @@
       <button
         class="icon"
         @click="$emit('select-environment')"
-        v-tooltip="$t('use_environment')"
+        v-tooltip.bottom="$t('use_environment')"
       >
         <i class="material-icons">insert_drive_file</i>
         <span>{{ environment.name }}</span>
       </button>
     </div>
     <v-popover>
-      <button class="tooltip-target icon" v-tooltip="$t('more')">
+      <button class="tooltip-target icon" v-tooltip.left="$t('more')">
         <i class="material-icons">more_vert</i>
       </button>
       <template slot="popover">
         <div>
-          <button
-            class="icon"
-            @click="$emit('edit-environment')"
-            v-close-popover
-          >
+          <button class="icon" @click="$emit('edit-environment')" v-close-popover>
             <i class="material-icons">create</i>
             <span>{{ $t("edit") }}</span>
           </button>
@@ -50,16 +46,26 @@ ul li {
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     environment: Object,
-    environmentIndex: Number
+    environmentIndex: Number,
   },
   methods: {
+    syncEnvironments() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[1].value) {
+          fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
+        }
+      }
+    },
     removeEnvironment() {
-      if (!confirm("Are you sure you want to remove this environment?")) return;
-      this.$store.commit("postwoman/removeEnvironment", this.environmentIndex);
-    }
-  }
-};
+      if (!confirm("Are you sure you want to remove this environment?")) return
+      this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
+      this.syncEnvironments()
+    },
+  },
+}
 </script>

components/environments/importExportEnvironment.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Import / Export Environment</h3>
+            <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -14,16 +14,10 @@
           <div class="flex-wrap">
             <span
               v-tooltip="{
-                content: !fb.currentUser
-                  ? $t('login_first')
-                  : $t('replace_current')
+                content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
               }"
             >
-              <button
-                :disabled="!fb.currentUser"
-                class="icon"
-                @click="syncEnvironments"
-              >
+              <button :disabled="!fb.currentUser" class="icon" @click="syncEnvironments">
                 <i class="material-icons">folder_shared</i>
                 <span>{{ $t("import_from_sync") }}</span>
               </button>
@@ -72,11 +66,7 @@
           <button class="icon" @click="hideModal">
             {{ $t("cancel") }}
           </button>
-          <button
-            class="icon primary"
-            @click="exportJSON"
-            v-tooltip="$t('download_file')"
-          >
+          <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
             {{ $t("export") }}
           </button>
         </span>
@@ -86,88 +76,112 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
     return {
-      fb
-    };
+      fb,
+    }
   },
   props: {
-    show: Boolean
+    show: Boolean,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("~/components/ui/modal"),
   },
   computed: {
     environmentJson() {
-      return JSON.stringify(this.$store.state.postwoman.environments, null, 2);
-    }
+      return JSON.stringify(this.$store.state.postwoman.environments, null, 2)
+    },
   },
   methods: {
     hideModal() {
-      this.$emit("hide-modal");
+      this.$emit("hide-modal")
     },
     openDialogChooseFileToReplaceWith() {
-      this.$refs.inputChooseFileToReplaceWith.click();
+      this.$refs.inputChooseFileToReplaceWith.click()
     },
     openDialogChooseFileToImportFrom() {
-      this.$refs.inputChooseFileToImportFrom.click();
+      this.$refs.inputChooseFileToImportFrom.click()
     },
     replaceWithJSON() {
-      let reader = new FileReader();
-      reader.onload = event => {
-        let content = event.target.result;
-        let environments = JSON.parse(content);
-        this.$store.commit("postwoman/replaceEnvironments", environments);
-      };
-      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
-      this.fileImported();
+      let reader = new FileReader()
+      reader.onload = (event) => {
+        let content = event.target.result
+        let environments = JSON.parse(content)
+        this.$store.commit("postwoman/replaceEnvironments", environments)
+      }
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
+      this.fileImported()
+      this.syncToFBEnvironments()
     },
     importFromJSON() {
-      let reader = new FileReader();
-      reader.onload = event => {
-        let content = event.target.result;
-        let environments = JSON.parse(content);
-        let confirmation = this.$t("file_imported")
-        this.$store.commit("postwoman/importAddEnvironments", {
-          environments,
-          confirmation
-        });
-      };
-      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
+      let reader = new FileReader()
+      reader.onload = (event) => {
+        let content = event.target.result
+        let importFileObj = JSON.parse(content)
+        if (
+          importFileObj["_postman_variable_scope"] === "environment" ||
+          importFileObj["_postman_variable_scope"] === "globals"
+        ) {
+          this.importFromPostman(importFileObj)
+        } else {
+          this.importFromPostwoman(importFileObj)
+        }
+      }
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
+      this.syncToFBEnvironments()
+    },
+    importFromPostwoman(environments) {
+      let confirmation = this.$t("file_imported")
+      this.$store.commit("postwoman/importAddEnvironments", {
+        environments,
+        confirmation,
+      })
+    },
+    importFromPostman(importFileObj) {
+      let environment = { name: importFileObj.name, variables: [] }
+      importFileObj.values.forEach((element) =>
+        environment.variables.push({ key: element.key, value: element.value })
+      )
+      let environments = [environment]
+      this.importFromPostwoman(environments)
     },
     exportJSON() {
-      let text = this.environmentJson;
-      text = text.replace(/\n/g, "\r\n");
+      let text = this.environmentJson
+      text = text.replace(/\n/g, "\r\n")
       let blob = new Blob([text], {
-        type: "text/json"
-      });
-      let anchor = document.createElement("a");
-      anchor.download = "postwoman-environment.json";
-      anchor.href = window.URL.createObjectURL(blob);
-      anchor.target = "_blank";
-      anchor.style.display = "none";
-      document.body.appendChild(anchor);
-      anchor.click();
-      document.body.removeChild(anchor);
+        type: "text/json",
+      })
+      let anchor = document.createElement("a")
+      anchor.download = "postwoman-environment.json"
+      anchor.href = window.URL.createObjectURL(blob)
+      anchor.target = "_blank"
+      anchor.style.display = "none"
+      document.body.appendChild(anchor)
+      anchor.click()
+      document.body.removeChild(anchor)
       this.$toast.success(this.$t("download_started"), {
-        icon: "done"
-      });
+        icon: "done",
+      })
     },
     syncEnvironments() {
-      this.$store.commit(
-        "postwoman/replaceEnvironments",
-        fb.currentEnvironments
-      );
-      this.fileImported();
+      this.$store.commit("postwoman/replaceEnvironments", fb.currentEnvironments)
+      this.fileImported()
+    },
+    syncToFBEnvironments() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[1].value) {
+          fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
+        }
+      }
     },
     fileImported() {
       this.$toast.info(this.$t("file_imported"), {
-        icon: "folder_shared"
-      });
-    }
-  }
-};
+        icon: "folder_shared",
+      })
+    },
+  },
+}
 </script>

components/environments/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <pw-section
-    class="green"
-    icon="history"
-    :label="$t('environment')"
-    ref="environment"
-  >
+  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
     <addEnvironment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <editEnvironment
       :show="showModalEdit"
@@ -30,19 +25,11 @@
       </div>
     </div>
     <p v-if="environments.length === 0" class="info">
-      Create new environment
+      <i class="material-icons">help_outline</i> Create new environment
     </p>
-    <virtual-list
-      class="virtual-list"
-      :class="{ filled: environments.length }"
-      :size="152"
-      :remain="Math.min(5, environments.length)"
-    >
+    <div class="virtual-list">
       <ul>
-        <li
-          v-for="(environment, index) in environments"
-          :key="environment.name"
-        >
+        <li v-for="(environment, index) in environments" :key="environment.name">
           <environment
             :environmentIndex="index"
             :environment="environment"
@@ -50,17 +37,14 @@
             @select-environment="$emit('use-environment', environment)"
           />
         </li>
-        <li v-if="environments.length === 0">
-          <label>Environments are empty</label>
-        </li>
       </ul>
-    </virtual-list>
+    </div>
   </pw-section>
 </template>
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 276px);
+  max-height: calc(100vh - 245px);
 }
 
 ul {
@@ -70,20 +54,16 @@ ul {
 </style>
 
 <script>
-import environment from "./environment";
-import { fb } from "../../functions/fb";
-
-const updateOnLocalStorage = (propertyName, property) =>
-  window.localStorage.setItem(propertyName, JSON.stringify(property));
+import environment from "./environment"
+import { fb } from "~/helpers/fb"
 
 export default {
   components: {
     environment,
-    "pw-section": () => import("../section"),
+    "pw-section": () => import("../layout/section"),
     addEnvironment: () => import("./addEnvironment"),
     editEnvironment: () => import("./editEnvironment"),
     importExportEnvironment: () => import("./importExportEnvironment"),
-    VirtualList: () => import("vue-virtual-scroll-list")
   },
   data() {
     return {
@@ -91,57 +71,57 @@ export default {
       showModalAdd: false,
       showModalEdit: false,
       editingEnvironment: undefined,
-      editingEnvironmentIndex: undefined
-    };
+      editingEnvironmentIndex: undefined,
+    }
   },
   computed: {
     environments() {
-      return this.$store.state.postwoman.environments;
-    }
+      return fb.currentUser !== null
+        ? fb.currentEnvironments
+        : this.$store.state.postwoman.environments
+    },
   },
   async mounted() {
-    this._keyListener = function(e) {
+    this._keyListener = function (e) {
       if (e.key === "Escape") {
-        e.preventDefault();
-        this.showModalImportExport = false;
+        e.preventDefault()
+        this.showModalImportExport = this.showModalAdd = this.showModalEdit = false
       }
-    };
-    document.addEventListener("keydown", this._keyListener.bind(this));
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
   },
   methods: {
     displayModalAdd(shouldDisplay) {
-      this.showModalAdd = shouldDisplay;
+      this.showModalAdd = shouldDisplay
     },
     displayModalEdit(shouldDisplay) {
-      this.showModalEdit = shouldDisplay;
+      this.showModalEdit = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     displayModalImportExport(shouldDisplay) {
-      this.showModalImportExport = shouldDisplay;
+      this.showModalImportExport = shouldDisplay
     },
     editEnvironment(environment, environmentIndex) {
-      this.$data.editingEnvironment = environment;
-      this.$data.editingEnvironmentIndex = environmentIndex;
-      this.displayModalEdit(true);
-      this.syncEnvironments;
+      this.$data.editingEnvironment = environment
+      this.$data.editingEnvironmentIndex = environmentIndex
+      this.displayModalEdit(true)
+      this.syncEnvironments()
     },
     resetSelectedData() {
-      this.$data.editingEnvironment = undefined;
-      this.$data.editingEnvironmentIndex = undefined;
+      this.$data.editingEnvironment = undefined
+      this.$data.editingEnvironmentIndex = undefined
     },
     syncEnvironments() {
       if (fb.currentUser !== null) {
         if (fb.currentSettings[1].value) {
-          fb.writeEnvironments(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
-          );
+          fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
         }
       }
-    }
+    },
   },
   beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener);
-  }
-};
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
 </script>

components/firebase/feeds.vue

@@ -1,11 +1,5 @@
 <template>
-  <virtual-list
-    v-if="fb.currentFeeds.length !== 0"
-    class="virtual-list"
-    :class="{ filled: fb.currentFeeds.length }"
-    :size="90"
-    :remain="Math.min(5, fb.currentFeeds.length)"
-  >
+  <div v-if="fb.currentFeeds.length !== 0" class="virtual-list">
     <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
       <div class="show-on-large-screen">
         <li class="info">
@@ -23,7 +17,7 @@
         </li>
       </div>
     </ul>
-  </virtual-list>
+  </div>
   <ul v-else>
     <li>
       <label class="info">{{ $t("empty") }}</label>
@@ -33,7 +27,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 288px);
+  max-height: calc(100vh - 298px);
 }
 
 ul,
@@ -55,24 +49,21 @@ ol {
 </style>
 
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "~/helpers/fb"
 
 export default {
-  components: {
-    VirtualList: () => import("vue-virtual-scroll-list")
-  },
   data() {
     return {
-      fb
-    };
+      fb,
+    }
   },
   methods: {
     deleteFeed(feed) {
-      fb.deleteFeed(feed.id);
+      fb.deleteFeed(feed.id)
       this.$toast.error(this.$t("deleted"), {
-        icon: "delete"
-      });
-    }
-  }
-};
+        icon: "delete",
+      })
+    },
+  },
+}
 </script>

components/firebase/inputform.vue

@@ -46,24 +46,24 @@ ol {
 </style>
 
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
     return {
       message: null,
-      label: null
-    };
+      label: null,
+    }
   },
   methods: {
     formPost() {
       if (!(this.message || this.label)) {
-        return;
+        return
       }
-      fb.writeFeeds(this.message, this.label);
-      this.message = null;
-      this.label = null;
-    }
-  }
-};
+      fb.writeFeeds(this.message, this.label)
+      this.message = null
+      this.label = null
+    },
+  },
+}
 </script>

components/firebase/login.vue

@@ -1,115 +1,244 @@
 <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>
+  <div>
+    <div>
+      <button class="icon" @click="signInWithGoogle" v-close-popover>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="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" class="material-icons">
+          <path
+            d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.509 11.509 0 0112 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+          />
+        </svg>
+        <span>GitHub</span>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
-import firebase from "firebase/app";
-import { fb } from "../../functions/fb";
+import firebase from "firebase/app"
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
     return {
-      fb
-    };
+      fb,
+    }
   },
-
   methods: {
+    showLoginSuccess() {
+      this.$toast.info(this.$t("login_success"), {
+        icon: "vpn_key",
+      })
+    },
     signInWithGoogle() {
-      const provider = new firebase.auth.GoogleAuthProvider();
+      const provider = new firebase.auth.GoogleAuthProvider()
+      const self = this
       firebase
         .auth()
         .signInWithPopup(provider)
         .then(({ additionalUserInfo }) => {
           if (additionalUserInfo.isNewUser) {
-            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+            self.$toast.info(`${self.$t("turn_on")} ${self.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,
               action: {
-                text: this.$t("yes"),
+                text: self.$t("yes"),
                 onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", false);
-                  fb.writeSettings("syncCollections", true);
-                  this.$router.push({ path: "/settings" });
-                  toastObject.remove();
+                  fb.writeSettings("syncHistory", true)
+                  fb.writeSettings("syncCollections", true)
+                  fb.writeSettings("syncEnvironments", true)
+                  self.$router.push({ path: "/settings" })
+                  toastObject.remove()
+                },
+              },
+            })
+          }
+          self.showLoginSuccess()
+        })
+        .catch((err) => {
+          // An error happened.
+          if (err.code === "auth/account-exists-with-different-credential") {
+            // Step 2.
+            // User's email already exists.
+            // The pending Google credential.
+            const pendingCred = err.credential
+            // The provider account's email address.
+            const email = err.email
+            // Get sign-in methods for this email.
+            firebase
+              .auth()
+              .fetchSignInMethodsForEmail(email)
+              .then((methods) => {
+                // Step 3.
+                // If the user has several sign-in methods,
+                // the first method in the list will be the "recommended" method to use.
+                if (methods[0] === "password") {
+                  // Asks the user their password.
+                  // In real scenario, you should handle this asynchronously.
+                  const password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                  auth
+                    .signInWithEmailAndPassword(email, password)
+                    .then((
+                      user // Step 4a.
+                    ) => user.linkWithCredential(pendingCred))
+                    .then(() => {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
                 }
-              }
-            });
+
+                self.$toast.info(`${self.$t("login_with")}`, {
+                  icon: "vpn_key",
+                  duration: null,
+                  closeOnSwipe: false,
+                  action: {
+                    text: self.$t("yes"),
+                    onClick: (e, toastObject) => {
+                      // All the other cases are external providers.
+                      // Construct provider object for that provider.
+                      // TODO: implement getProviderForProviderId.
+                      const provider = new firebase.auth.GithubAuthProvider()
+                      // At this point, you should let the user know that they already has an account
+                      // but with a different provider, and let them validate the fact they want to
+                      // sign in with this provider.
+                      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
+                      // so in real scenario you should ask the user to click on a "continue" button
+                      // that will trigger the signInWithPopup.
+                      firebase
+                        .auth()
+                        .signInWithPopup(provider)
+                        .then(({ user }) => {
+                          // Remember that the user may have signed in with an account that has a different email
+                          // address than the first one. This can happen as Firebase doesn't control the provider's
+                          // sign in flow and the user is free to login using whichever account they own.
+                          // Step 4b.
+                          // Link to Google credential.
+                          // As we have access to the pending credential, we can directly call the link method.
+                          user.linkAndRetrieveDataWithCredential(pendingCred).then((usercred) => {
+                            // Google account successfully linked to the existing Firebase user.
+                            self.showLoginSuccess()
+                          })
+                        })
+
+                      toastObject.remove()
+                    },
+                  },
+                })
+              })
           }
         })
-        .catch(err => {
-          this.$toast.show(err.message || err, {
-            icon: "error"
-          });
-        });
     },
     signInWithGithub() {
-      const provider = new firebase.auth.GithubAuthProvider();
+      const provider = new firebase.auth.GithubAuthProvider()
+      const self = this
       firebase
         .auth()
         .signInWithPopup(provider)
         .then(({ additionalUserInfo }) => {
           if (additionalUserInfo.isNewUser) {
-            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+            self.$toast.info(`${self.$t("turn_on")} ${self.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,
               action: {
-                text: this.$t("yes"),
+                text: self.$t("yes"),
                 onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", false);
-                  fb.writeSettings("syncCollections", true);
-                  this.$router.push({ path: "/settings" });
-                  toastObject.remove();
+                  fb.writeSettings("syncHistory", true)
+                  fb.writeSettings("syncCollections", true)
+                  fb.writeSettings("syncEnvironments", true)
+                  self.$router.push({ path: "/settings" })
+                  toastObject.remove()
+                },
+              },
+            })
+          }
+          self.showLoginSuccess()
+        })
+        .catch((err) => {
+          // An error happened.
+          if (err.code === "auth/account-exists-with-different-credential") {
+            // Step 2.
+            // User's email already exists.
+            // The pending Google credential.
+            const pendingCred = err.credential
+            // The provider account's email address.
+            const email = err.email
+            // Get sign-in methods for this email.
+            firebase
+              .auth()
+              .fetchSignInMethodsForEmail(email)
+              .then((methods) => {
+                // Step 3.
+                // If the user has several sign-in methods,
+                // the first method in the list will be the "recommended" method to use.
+                if (methods[0] === "password") {
+                  // Asks the user their password.
+                  // In real scenario, you should handle this asynchronously.
+                  const password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                  firebase
+                    .auth()
+                    .signInWithEmailAndPassword(email, password)
+                    .then((
+                      user // Step 4a.
+                    ) => user.linkWithCredential(pendingCred))
+                    .then(() => {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
                 }
-              }
-            });
+
+                self.$toast.info(`${self.$t("login_with")}`, {
+                  icon: "vpn_key",
+                  duration: null,
+                  closeOnSwipe: false,
+                  action: {
+                    text: self.$t("yes"),
+                    onClick: (e, toastObject) => {
+                      // All the other cases are external providers.
+                      // Construct provider object for that provider.
+                      // TODO: implement getProviderForProviderId.
+                      const provider = new firebase.auth.GoogleAuthProvider()
+                      // At this point, you should let the user know that they already has an account
+                      // but with a different provider, and let them validate the fact they want to
+                      // sign in with this provider.
+                      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
+                      // so in real scenario you should ask the user to click on a "continue" button
+                      // that will trigger the signInWithPopup.
+                      firebase
+                        .auth()
+                        .signInWithPopup(provider)
+                        .then(({ user }) => {
+                          // Remember that the user may have signed in with an account that has a different email
+                          // address than the first one. This can happen as Firebase doesn't control the provider's
+                          // sign in flow and the user is free to login using whichever account they own.
+                          // Step 4b.
+                          // Link to Google credential.
+                          // As we have access to the pending credential, we can directly call the link method.
+                          user.linkAndRetrieveDataWithCredential(pendingCred).then((usercred) => {
+                            self.showLoginSuccess()
+                          })
+                        })
+
+                      toastObject.remove()
+                    },
+                  },
+                })
+              })
           }
         })
-        .catch(err => {
-          this.$toast.show(err.message || err, {
-            icon: "error"
-          });
-        });
-    }
-  }
-};
+    },
+  },
+}
 </script>

components/firebase/logout.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <button class="icon" @click="logout" v-close-popover>
+      <i class="material-icons">exit_to_app</i>
+      <span>{{ $t("logout") }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+import firebase from "firebase/app"
+import { fb } from "~/helpers/fb"
+
+export default {
+  data() {
+    return {
+      fb,
+    }
+  },
+  methods: {
+    logout() {
+      fb.currentUser = null
+      const self = this
+      firebase
+        .auth()
+        .signOut()
+        .catch((err) => {
+          self.$toast.show(err.message || err, {
+            icon: "error",
+          })
+        })
+      self.$toast.info(this.$t("logged_out"), {
+        icon: "vpn_key",
+      })
+    },
+  },
+}
+</script>

components/graphql/argument.vue

@@ -11,28 +11,28 @@
 <style scoped lang="scss"></style>
 
 <script>
-import typelink from "./typelink";
+import typelink from "./typelink"
 
 export default {
   components: {
-    typelink: typelink
+    typelink: typelink,
   },
 
   props: {
-    gqlArg: Object
+    gqlArg: Object,
   },
 
   computed: {
     argName() {
-      return this.gqlArg.name;
+      return this.gqlArg.name
     },
     argType() {
-      return this.gqlArg.type;
-    }
+      return this.gqlArg.type
+    },
   },
 
   methods: {
-    jumpCallback(typeName) {}
-  }
-};
+    jumpCallback(typeName) {},
+  },
+}
 </script>

components/graphql/field.vue

@@ -6,10 +6,7 @@
         (
         <span v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
-          <typelink
-            :gqlType="field.type"
-            :jumpTypeCallback="jumpTypeCallback"
-          />
+          <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
           <span v-if="index !== fieldArgs.length - 1">
             ,
           </span>
@@ -41,7 +38,7 @@
   display: inline-block;
   padding: 4px 8px;
   margin: 4px 0;
-  border-radius: 4px;
+  border-radius: 8px;
   font-size: 14px;
   font-weight: 700;
 }
@@ -53,41 +50,36 @@
 </style>
 
 <script>
-import typelink from "./typelink";
+import typelink from "./typelink"
 
 export default {
   components: {
-    typelink: typelink
+    typelink: typelink,
   },
 
   props: {
     gqlField: Object,
-    jumpTypeCallback: Function
+    jumpTypeCallback: Function,
   },
 
   computed: {
     fieldString() {
-      const args = (this.gqlField.args || []).reduce((acc, arg, index) => {
-        return (
-          acc +
-          `${arg.name}: ${arg.type.toString()}${
-            index !== this.gqlField.args.length - 1 ? ", " : ""
-          }`
-        );
-      }, "");
-      const argsString = args.length > 0 ? `(${args})` : "";
-      return `${
-        this.gqlField.name
-      }${argsString}: ${this.gqlField.type.toString()}`;
+      const args = (this.gqlField.args || []).reduce(
+        (acc, { name, type }, index) =>
+          acc + `${name}: ${type.toString()}${index !== this.gqlField.args.length - 1 ? ", " : ""}`,
+        ""
+      )
+      const argsString = args.length > 0 ? `(${args})` : ""
+      return `${this.gqlField.name}${argsString}: ${this.gqlField.type.toString()}`
     },
 
     fieldName() {
-      return this.gqlField.name;
+      return this.gqlField.name
     },
 
     fieldArgs() {
-      return this.gqlField.args || [];
-    }
-  }
-};
+      return this.gqlField.args || []
+    },
+  },
+}
 </script>

components/graphql/queryeditor.vue

@@ -1,88 +1,118 @@
 <template>
-  <pre ref="editor"></pre>
+  <div class="show-if-initialized" :class="{ initialized }">
+    <pre ref="editor"></pre>
+  </div>
 </template>
 
-<script>
-const DEFAULT_THEME = "twilight";
+<style lang="scss">
+.show-if-initialized {
+  opacity: 0;
 
-import ace from "ace-builds";
-import * as gql from "graphql";
-import { getAutocompleteSuggestions } from "graphql-language-service-interface";
-import "ace-builds/webpack-resolver";
-import "ace-builds/src-noconflict/ext-language_tools";
-import debounce from "../../functions/utils/debounce";
+  &.initialized {
+    opacity: 1;
+  }
+
+  & > * {
+    transition: none;
+  }
+}
+</style>
+
+<script>
+const DEFAULT_THEME = "twilight"
+
+import ace from "ace-builds"
+import "ace-builds/webpack-resolver"
+import "ace-builds/src-noconflict/ext-language_tools"
+import "ace-builds/src-noconflict/mode-graphqlschema"
+import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
+
+import * as gql from "graphql"
+import { getAutocompleteSuggestions } from "graphql-language-service-interface"
+import debounce from "~/helpers/utils/debounce"
 
 export default {
   props: {
     value: {
       type: String,
-      default: ""
+      default: "",
     },
     theme: {
       type: String,
-      required: false
+      required: false,
     },
-    lang: {
-      type: String,
-      default: "json"
+    onRunGQLQuery: {
+      type: Function,
+      default: () => {},
     },
     options: {
       type: Object,
-      default: {}
-    }
+      default: {},
+    },
   },
 
   data() {
     return {
+      initialized: false,
       editor: null,
       cacheValue: "",
-      validationSchema: null
-    };
+      validationSchema: null,
+    }
   },
 
   watch: {
     value(value) {
       if (value !== this.cacheValue) {
-        this.editor.session.setValue(value, 1);
-        this.cacheValue = value;
+        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}`);
+      this.initialized = false
+      this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+        this.$nextTick().then(() => {
+          this.initialized = true
+        })
+      })
     },
     options(value) {
-      this.editor.setOptions(value);
-    }
+      this.editor.setOptions(value)
+    },
   },
 
   mounted() {
-    let langTools = ace.require("ace/ext/language_tools");
+    defineGQLLanguageMode(ace)
+
+    let langTools = ace.require("ace/ext/language_tools")
 
     const editor = ace.edit(this.$refs.editor, {
-      theme: `ace/theme/${this.defineTheme()}`,
-      mode: `ace/mode/${this.lang}`,
+      mode: `ace/mode/gql-query`,
       enableBasicAutocompletion: true,
       enableLiveAutocompletion: true,
-      ...this.options
-    });
+      ...this.options,
+    })
+
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true
+      })
+    })
+
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true
+      })
+    })
 
     const completer = {
-      getCompletions: (
-        editor,
-        _session,
-        { row, column },
-        _prefix,
-        callback
-      ) => {
+      getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
         if (this.validationSchema) {
-          const completions = getAutocompleteSuggestions(
-            this.validationSchema,
-            editor.getValue(),
-            { line: row, character: column }
-          );
+          const completions = getAutocompleteSuggestions(this.validationSchema, editor.getValue(), {
+            line: row,
+            character: column,
+          })
 
           callback(
             null,
@@ -90,64 +120,88 @@ export default {
               name: label,
               value: label,
               score: 1.0,
-              meta: detail
+              meta: detail,
             }))
-          );
+          )
         } else {
-          callback(null, []);
+          callback(null, [])
         }
-      }
-    };
+      },
+    }
 
-    langTools.setCompleters([completer]);
+    langTools.setCompleters([completer])
 
-    if (this.value) editor.setValue(this.value, 1);
+    if (this.value) editor.setValue(this.value, 1)
 
-    this.editor = editor;
-    this.cacheValue = this.value;
+    this.editor = editor
+    this.cacheValue = this.value
+
+    editor.commands.addCommand({
+      name: "runGQLQuery",
+      exec: () => this.onRunGQLQuery(this.editor.getValue()),
+      bindKey: {
+        mac: "cmd-enter",
+        win: "ctrl-enter",
+      },
+    })
+
+    editor.commands.addCommand({
+      name: "prettifyGQLQuery",
+      exec: () => this.prettifyQuery(),
+      bindKey: {
+        mac: "cmd-p",
+        win: "ctrl-p",
+      },
+    })
 
     editor.on("change", () => {
-      const content = editor.getValue();
-      this.$emit("input", content);
-      this.parseContents(content);
-      this.cacheValue = content;
-    });
+      const content = editor.getValue()
+      this.$emit("input", content)
+      this.parseContents(content)
+      this.cacheValue = content
+    })
 
-    this.parseContents(this.value);
+    this.parseContents(this.value)
   },
 
   methods: {
+    prettifyQuery() {
+      try {
+        this.value = gql.print(gql.parse(this.editor.getValue()))
+      } catch (e) {
+        this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
+          icon: "error",
+        })
+      }
+    },
+
     defineTheme() {
       if (this.theme) {
-        return this.theme;
+        return this.theme
       } else {
-        return (
-          this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
-        );
+        return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
       }
     },
 
     setValidationSchema(schema) {
-      this.validationSchema = schema;
-      this.parseContents(this.cacheValue);
+      this.validationSchema = schema
+      this.parseContents(this.cacheValue)
     },
 
-    parseContents: debounce(function(content) {
+    parseContents: debounce(function (content) {
       if (content !== "") {
         try {
-          const doc = gql.parse(content);
+          const doc = gql.parse(content)
 
           if (this.validationSchema) {
             this.editor.session.setAnnotations(
-              gql
-                .validate(this.validationSchema, doc)
-                .map(({ locations, message }) => ({
-                  row: locations[0].line - 1,
-                  column: locations[0].column - 1,
-                  text: message,
-                  type: "error"
-                }))
-            );
+              gql.validate(this.validationSchema, doc).map(({ locations, message }) => ({
+                row: locations[0].line - 1,
+                column: locations[0].column - 1,
+                text: message,
+                type: "error",
+              }))
+            )
           }
         } catch (e) {
           this.editor.session.setAnnotations([
@@ -155,19 +209,18 @@ export default {
               row: e.locations[0].line - 1,
               column: e.locations[0].column - 1,
               text: e.message,
-              type: "error"
-            }
-          ]);
+              type: "error",
+            },
+          ])
         }
       } else {
-        this.editor.session.setAnnotations([]);
+        this.editor.session.setAnnotations([])
       }
-    }, 2000)
+    }, 2000),
   },
 
   beforeDestroy() {
-    this.editor.destroy();
-    this.editor.container.remove();
-  }
-};
+    this.editor.destroy()
+  },
+}
 </script>

components/graphql/type.vue

@@ -33,12 +33,12 @@
 <script>
 export default {
   components: {
-    "gql-field": () => import("./field")
+    "gql-field": () => import("./field"),
   },
 
   props: {
     gqlType: {},
-    jumpTypeCallback: Function
-  }
-};
+    jumpTypeCallback: Function,
+  },
+}
 </script>

components/graphql/typelink.vue

@@ -16,19 +16,19 @@ export default {
   props: {
     gqlType: null,
     // (typeName: string) => void
-    jumpTypeCallback: Function
+    jumpTypeCallback: Function,
   },
 
   computed: {
     typeString() {
-      return this.gqlType.toString();
-    }
+      return this.gqlType.toString()
+    },
   },
 
   methods: {
     jumpToType() {
-      this.jumpTypeCallback(this.gqlType);
-    }
-  }
-};
+      this.jumpTypeCallback(this.gqlType)
+    },
+  },
+}
 </script>

components/layout/contributors.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <p class="info">
+      {{ $t("donate_info1") }}
+    </p>
+    <p class="info">
+      {{ $t("donate_info2") }}
+    </p>
+    <div class="flex-wrap">
+      <span>
+        <a
+          href="https://github.com/sponsors/postwoman-io"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('recurring')"
+        >
+          <button class="icon">
+            <i class="material-icons">
+              <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>
+            </i>
+            <span>GitHub Sponsors</span>
+          </button>
+        </a>
+      </span>
+    </div>
+    <div class="flex-wrap">
+      <span>
+        <a
+          href="https://opencollective.com/postwoman"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('one_time_recurring')"
+        >
+          <button class="icon">
+            <i class="material-icons">donut_large</i>
+            <span>{{ $t("open_collective") }}</span>
+          </button>
+        </a>
+      </span>
+    </div>
+    <div>
+      <a
+        href="https://www.patreon.com/liyasthomas"
+        target="_blank"
+        rel="noopener"
+        v-tooltip.right="$t('recurring')"
+      >
+        <button class="icon">
+          <i class="material-icons">local_parking</i>
+          <span>{{ $t("patreon") }}</span>
+        </button>
+      </a>
+    </div>
+    <div>
+      <a
+        href="https://www.paypal.me/liyascthomas"
+        target="_blank"
+        rel="noopener"
+        v-tooltip.right="$t('one_time')"
+      >
+        <button class="icon">
+          <i class="material-icons">payment</i>
+          <span>{{ $t("paypal") }}</span>
+        </button>
+      </a>
+    </div>
+    <hr />
+    <h3 class="title">Financial Contributors</h3>
+    <p class="info">
+      Become a financial contributor and help us sustain our community.
+      <a class="link" href="https://opencollective.com/postwoman/contribute">Contribute</a>.
+    </p>
+    <h3 class="title">Organizations</h3>
+    <p class="info">
+      Support this project with your organization. Your logo will show up here with a link to your
+      website.
+      <a class="link" href="https://opencollective.com/postwoman/contribute">Contribute</a>.
+    </p>
+    <div class="contributors">
+      <a href="https://tyk.io" target="_blank" rel="noopener">
+        <img
+          style="max-width: 320px;"
+          src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
+          alt="Tyk Banner"
+        />
+      </a>
+    </div>
+    <div class="contributors">
+      <a href="https://opencollective.com/postwoman/organization/0/website">
+        <img src="https://opencollective.com/postwoman/organization/0/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/1/website">
+        <img src="https://opencollective.com/postwoman/organization/1/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/2/website">
+        <img src="https://opencollective.com/postwoman/organization/2/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/3/website">
+        <img src="https://opencollective.com/postwoman/organization/3/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/4/website">
+        <img src="https://opencollective.com/postwoman/organization/4/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/5/website">
+        <img src="https://opencollective.com/postwoman/organization/5/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/6/website">
+        <img src="https://opencollective.com/postwoman/organization/6/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/7/website">
+        <img src="https://opencollective.com/postwoman/organization/7/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/8/website">
+        <img src="https://opencollective.com/postwoman/organization/8/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/9/website">
+        <img src="https://opencollective.com/postwoman/organization/9/avatar.svg" />
+      </a>
+    </div>
+    <h3 class="title">Individuals</h3>
+    <p class="info">
+      Support this project with your organization. Your logo will show up here with a link to your
+      website.
+      <a class="link" href="https://opencollective.com/postwoman/contribute">Contribute</a>.
+    </p>
+    <div class="contributors">
+      <a href="http://tom.preston-werner.com" target="_blank" rel="noopener">
+        <img
+          style="max-width: 64px; max-height: 64px; border-radius: 100%;"
+          src="https://github.com/mojombo.png?size=64"
+          alt="Tom Preston-Werner"
+        />
+      </a>
+      <a href="https://opencollective.com/postwoman">
+        <img src="https://opencollective.com/postwoman/individuals.svg" />
+      </a>
+    </div>
+    <h3 class="title">Code Contributors</h3>
+    <p class="info">
+      This project exists thanks to all the people who contribute.
+    </p>
+    <div class="contributors">
+      <a href="https://github.com/liyasthomas/postwoman/graphs/contributors">
+        <img src="https://opencollective.com/postwoman/contributors.svg" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.contributors {
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  overflow: auto;
+  padding: 8px 0;
+  margin: 8px 0;
+  max-width: calc(100vw - 72px);
+}
+</style>
+
+<script>
+export default {}
+</script>

components/layout/footer.vue

@@ -0,0 +1,98 @@
+<template>
+  <footer class="footer">
+    <div class="flex-wrap">
+      <span v-if="version.name" class="mono">
+        <a
+          class="footer-link"
+          :href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name"
+          target="_blank"
+          rel="noopener"
+          v-tooltip="'GitHub'"
+        >
+          {{ version.name }}
+        </a>
+        <a
+          class="footer-link hide-on-small-screen"
+          href="https://www.netlify.com"
+          target="_blank"
+          rel="noopener"
+        >
+          Powered by Netlify
+        </a>
+        <!-- <span v-if="version.hash">
+          -
+          <a
+            :href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
+            target="_blank"
+            rel="noopener"
+          >{{version.hash}}</a>
+        </span> -->
+        <!-- <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:hello@postwoman.io" target="_blank" rel="noopener">
+          <button class="icon" v-tooltip="$t('contact_us')">
+            <i class="material-icons">email</i>
+          </button>
+        </a>
+        <v-popover>
+          <button class="icon" v-tooltip="$t('choose_language')">
+            <i class="material-icons">translate</i>
+          </button>
+          <template slot="popover">
+            <div v-for="locale in availableLocales" :key="locale.code">
+              <nuxt-link :to="switchLocalePath(locale.code)">
+                <button class="icon" v-close-popover>
+                  {{ locale.name }}
+                </button>
+              </nuxt-link>
+            </div>
+          </template>
+        </v-popover>
+      </span>
+    </div>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+.footer {
+  flex-flow: column nowrap;
+}
+
+.footer-link {
+  margin: 8px 16px;
+  color: var(--fg-light-color);
+
+  &:hover {
+    color: var(--fg-color);
+  }
+}
+</style>
+
+<script>
+import * as version from "../../.postwoman/version.json"
+
+export default {
+  data() {
+    return {
+      version: {},
+    }
+  },
+
+  beforeMount() {
+    // Set version data
+    this.version = version.default
+  },
+
+  computed: {
+    availableLocales() {
+      return this.$i18n.locales.filter(({ code }) => code !== this.$i18n.locale)
+    },
+  },
+}
+</script>

components/layout/header.vue

@@ -0,0 +1,420 @@
+<template>
+  <header class="header">
+    <div class="flex-wrap">
+      <span class="slide-in">
+        <nuxt-link :to="localePath('index')">
+          <h1 class="logo">Postwoman</h1>
+        </nuxt-link>
+      </span>
+      <span>
+        <button
+          class="icon"
+          id="installPWA"
+          @click.prevent="showInstallPrompt()"
+          v-tooltip="$t('install_pwa')"
+        >
+          <i class="material-icons">offline_bolt</i>
+        </button>
+        <a
+          href="https://github.com/liyasthomas/postwoman"
+          target="_blank"
+          aria-label="GitHub"
+          rel="noopener"
+        >
+          <button class="icon" aria-label="GitHub" v-tooltip="'GitHub'">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="material-icons">
+              <path
+                d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.509 11.509 0 0112 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+              />
+            </svg>
+          </button>
+        </a>
+        <v-popover v-if="fb.currentUser === null">
+          <button class="icon" v-tooltip="$t('login_with')">
+            <i class="material-icons">login</i>
+          </button>
+          <template slot="popover">
+            <login />
+          </template>
+        </v-popover>
+        <v-popover v-else>
+          <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>')
+            "
+            aria-label="Account"
+          >
+            <img
+              v-if="fb.currentUser.photoURL"
+              :src="fb.currentUser.photoURL"
+              class="material-icons"
+              alt="Profile image"
+            />
+            <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>
+              <logout />
+            </div>
+          </template>
+        </v-popover>
+        <v-popover>
+          <button class="icon" v-tooltip="$t('more')">
+            <i class="material-icons">drag_indicator</i>
+          </button>
+          <template slot="popover">
+            <button class="icon" @click="showExtensions = true" v-close-popover>
+              <i class="material-icons">extension</i>
+              <span>{{ $t("extensions") }}</span>
+            </button>
+            <button class="icon" @click="showShortcuts = true" v-close-popover>
+              <i class="material-icons">keyboard</i>
+              <span>{{ $t("shortcuts") }}</span>
+            </button>
+            <button class="icon" @click="showSupport = true" v-close-popover>
+              <i class="material-icons">favorite</i>
+              <span>{{ $t("support_us") }}</span>
+            </button>
+            <button
+              class="icon"
+              onClick="window.open('https://twitter.com/share?text=👽 Postwoman • A free, fast and beautiful API request builder - Web alternative to Postman - Helps you create requests faster, saving precious time on development.&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
+              v-close-popover
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                <path
+                  d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
+                />
+              </svg>
+              <span>{{ $t("tweet") }}</span>
+            </button>
+            <button
+              v-if="navigatorShare"
+              class="icon"
+              @click="nativeShare"
+              v-close-popover
+              v-tooltip="$t('more')"
+            >
+              <i class="material-icons">share</i>
+              <span>Share</span>
+            </button>
+          </template>
+        </v-popover>
+      </span>
+    </div>
+    <modal v-if="showExtensions" @close="showExtensions = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">{{ $t("extensions") }}</h3>
+              <div>
+                <button class="icon" @click="showExtensions = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <p class="info">
+          {{ $t("extensions_info1") }}
+        </p>
+        <div>
+          <a
+            href="https://addons.mozilla.org/en-US/firefox/addon/postwoman"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                <path
+                  d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181C6.36 3.312 9.027 2 12 2c5.912 0 8.263 4.283 8.003 6.657z"
+                />
+              </svg>
+              <span>Firefox</span>
+              <span class="icon" v-if="hasFirefoxExtInstalled" v-tooltip="$t('installed')">
+                <i class="material-icons">done</i>
+              </span>
+            </button>
+          </a>
+        </div>
+        <div>
+          <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">
+                <path
+                  d="M2.897 4.181A11.87 11.87 0 0111.969 0c4.288 0 8.535 2.273 10.717 6.554h-9.293c-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644L2.897 4.181zM8.007 12c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991S8.007 9.8 8.007 12zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225A11.856 11.856 0 000 11.956c0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214a5.463 5.463 0 011.007 6.719 1815.43 1815.43 0 01-5.46 9.248C18.437 24.419 24 18.616 24 12.004c0-1.313-.22-2.66-.69-3.995h-7.609z"
+                />
+              </svg>
+              <span>Chrome</span>
+              <span class="icon" v-if="hasChromeExtInstalled" v-tooltip="$t('installed')">
+                <i class="material-icons">done</i>
+              </span>
+            </button>
+          </a>
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </modal>
+    <modal v-if="showShortcuts" @close="showShortcuts = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">{{ $t("shortcuts") }}</h3>
+              <div>
+                <button class="icon" @click="showShortcuts = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <div>
+          <label>{{ $t("send_request") }}</label>
+          <kbd>{{ getSpecialKey() }} G</kbd>
+        </div>
+        <div>
+          <label>{{ $t("save_to_collections") }}</label>
+          <kbd>{{ getSpecialKey() }} S</kbd>
+        </div>
+        <div>
+          <label>{{ $t("copy_request_link") }}</label>
+          <kbd>{{ getSpecialKey() }} K</kbd>
+        </div>
+        <div>
+          <label>{{ $t("reset_request") }}</label>
+          <kbd>{{ getSpecialKey() }} L</kbd>
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </modal>
+    <modal v-if="showSupport" @close="showSupport = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">{{ $t("support_us") }}</h3>
+              <div>
+                <button class="icon" @click="showSupport = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <contributors />
+      </div>
+      <div slot="footer"></div>
+    </modal>
+  </header>
+</template>
+
+<style scoped lang="scss">
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    left: -16px;
+  }
+
+  100% {
+    opacity: 1;
+    left: 0px;
+  }
+}
+
+.slide-in {
+  position: relative;
+  animation: slideIn 0.2s forwards ease-in-out;
+}
+
+.logo {
+  font-size: 22px;
+
+  &:hover {
+    color: var(--ac-color);
+  }
+}
+</style>
+
+<script>
+import intializePwa from "~/assets/js/pwa"
+import {
+  hasExtensionInstalled,
+  hasChromeExtensionInstalled,
+  hasFirefoxExtensionInstalled,
+} from "~/helpers/strategies/ExtensionStrategy"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import firebase from "firebase/app"
+import { fb } from "~/helpers/fb"
+
+export default {
+  components: {
+    modal: () => import("../ui/modal"),
+    login: () => import("../firebase/login"),
+    logout: () => import("../firebase/logout"),
+    contributors: () => import("./contributors"),
+  },
+
+  data() {
+    return {
+      // Once the PWA code is initialized, this holds a method
+      // that can be called to show the user the installation
+      // prompt.
+      showInstallPrompt: null,
+      showExtensions: false,
+      hasChromeExtInstalled: hasChromeExtensionInstalled(),
+      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
+      showShortcuts: false,
+      showSupport: false,
+      fb,
+      navigatorShare: navigator.share,
+    }
+  },
+
+  mounted() {
+    // Initializes the PWA code - checks if the app is installed,
+    // etc.
+    ;(async () => {
+      this.showInstallPrompt = await intializePwa()
+      let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
+      if (!cookiesAllowed) {
+        this.$toast.show(this.$t("we_use_cookies"), {
+          icon: "info",
+          duration: 5000,
+          theme: "toasted-primary",
+          action: [
+            {
+              text: this.$t("dismiss"),
+              onClick: (e, toastObject) => {
+                localStorage.setItem("cookiesAllowed", "yes")
+                toastObject.goAway(0)
+              },
+            },
+          ],
+        })
+      }
+
+      // let showAd = localStorage.getItem("showAd") === "no"
+      // if (!showAd) {
+      //   setTimeout(() => {
+      //     this.$toast.clear()
+      //     this.$toast.show(
+      //       "<span>Get <u><a href='https://gum.co/keky' target='_blank' rel='noopener'>De-Coding The Passion Project</a></u> book, expertly crafted by the creator of Postwoman. Whoosh this away to dismiss →</span>",
+      //       {
+      //         icon: "",
+      //         duration: 0,
+      //         theme: "toasted-ad",
+      //         action: [
+      //           {
+      //             text: "Get",
+      //             icon: "chevron_right",
+      //             onClick: (e, toastObject) => {
+      //               localStorage.setItem("showAd", "no")
+      //               toastObject.goAway(0)
+      //               window.open("https://gum.co/keky")
+      //             },
+      //           },
+      //         ],
+      //         onComplete() {
+      //           localStorage.setItem("showAd", "no")
+      //         },
+      //       }
+      //     )
+      //   }, 11000)
+      // }
+
+      let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
+
+      // Just return if showExtensionsToast is "no"
+      if (!showExtensionsToast) return
+
+      setTimeout(() => {
+        if (!hasExtensionInstalled()) {
+          this.$toast.show(this.$t("extensions_info2"), {
+            icon: "extension",
+            duration: 5000,
+            theme: "toasted-primary",
+            action: [
+              {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  this.showExtensions = true
+                  localStorage.setItem("showExtensionsToast", "yes")
+                  toastObject.goAway(0)
+                },
+              },
+              {
+                text: this.$t("no"),
+                onClick: (e, toastObject) => {
+                  this.$store.commit("setMiscState", {
+                    value: false,
+                    attribute: "showExtensionsToast",
+                  })
+                  localStorage.setItem("showExtensionsToast", "no")
+                  toastObject.goAway(0)
+                },
+              },
+            ],
+          })
+        }
+      }, 5000)
+
+      this._keyListener = function (e) {
+        if (e.key === "Escape") {
+          e.preventDefault()
+          this.showExtensions = this.showShortcuts = this.showSupport = false
+        }
+      }
+      document.addEventListener("keydown", this._keyListener.bind(this))
+    })()
+  },
+
+  methods: {
+    getSpecialKey: getPlatformSpecialKey,
+    nativeShare() {
+      if (navigator.share) {
+        navigator
+          .share({
+            title: "Postwoman",
+            text:
+              "Postwoman • A free, fast and beautiful API request builder - Web alternative to Postman - Helps you create requests faster, saving precious time on development.",
+            url: "https://postwoman.io/",
+          })
+          .then(() => {})
+          .catch(console.error)
+      } else {
+        // fallback
+      }
+    },
+  },
+
+  computed: {
+    availableLocales() {
+      return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale)
+    },
+  },
+}
+</script>

components/layout/history.vue

@@ -1,26 +1,12 @@
 <template>
   <pw-section class="green" icon="history" :label="$t('history')" ref="history">
-    <ul>
-      <div class="show-on-large-screen">
-        <li id="filter-history">
-          <input
-            aria-label="Search"
-            type="search"
-            :placeholder="$t('search')"
-            v-model="filterText"
-          />
-        </li>
-        <button class="icon">
-          <i class="material-icons">search</i>
-        </button>
-      </div>
-    </ul>
-    <virtual-list
-      class="virtual-list"
-      :class="{ filled: filteredHistory.length }"
-      :size="185"
-      :remain="Math.min(5, filteredHistory.length)"
-    >
+    <div class="show-on-large-screen">
+      <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
+      <button class="icon">
+        <i class="material-icons">search</i>
+      </button>
+    </div>
+    <div class="virtual-list" :class="{ filled: filteredHistory.length }">
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
         <div class="show-on-large-screen">
           <button
@@ -28,7 +14,7 @@
             :class="{ stared: entry.star }"
             @click="toggleStar(entry)"
             v-tooltip="{
-              content: !entry.star ? $t('add_star') : $t('remove_star')
+              content: !entry.star ? $t('add_star') : $t('remove_star'),
             }"
           >
             <i class="material-icons">
@@ -161,16 +147,14 @@
           </div>
         </transition>
       </ul>
-    </virtual-list>
-    <ul
-      :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
-    >
+    </div>
+    <ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
       <li>
         <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
       </li>
     </ul>
     <p v-if="history.length === 0" class="info">
-      {{ $t("history_empty") }}
+      <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0">
       <div class="flex-wrap" v-if="!isClearingHistory">
@@ -201,11 +185,7 @@
               </button>
             </div>
             <div>
-              <button
-                class="icon"
-                @click="sort_by_status_code()"
-                v-close-popover
-              >
+              <button class="icon" @click="sort_by_status_code()" v-close-popover>
                 <i class="material-icons">assistant</i>
                 <span>{{ $t("status") }}</span>
               </button>
@@ -241,7 +221,7 @@
       </div>
       <div class="flex-wrap" v-else>
         <label for="clear-history-button" class="info">
-          {{ $t("are_you_sure") }}
+          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
         </label>
         <div>
           <button
@@ -268,7 +248,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 284px);
+  max-height: calc(100vh - 290px);
 
   [readonly] {
     cursor: default;
@@ -326,16 +306,15 @@ ol {
 </style>
 
 <script>
-import { findStatusGroup } from "../pages/index";
-import { fb } from "../functions/fb";
+import { findStatusGroup } from "~/pages/index"
+import { fb } from "~/helpers/fb"
 
 const updateOnLocalStorage = (propertyName, property) =>
-  window.localStorage.setItem(propertyName, JSON.stringify(property));
+  window.localStorage.setItem(propertyName, JSON.stringify(property))
 
 export default {
   components: {
-    "pw-section": () => import("./section"),
-    VirtualList: () => import("vue-virtual-scroll-list")
+    "pw-section": () => import("../layout/section"),
   },
   data() {
     return {
@@ -351,166 +330,144 @@ export default {
       reverse_sort_status_code: false,
       reverse_sort_url: false,
       reverse_sort_path: false,
-      showMore: false
-    };
+      showMore: false,
+    }
   },
   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 => {
-          let value = entry[key];
-          value = typeof value !== "string" ? value.toString() : value;
-          return value.toLowerCase().includes(filterText);
-        });
-      });
-    }
+          : JSON.parse(window.localStorage.getItem("history")) || []
+      return this.history.filter((entry) => {
+        const filterText = this.filterText.toLowerCase()
+        return Object.keys(entry).some((key) => {
+          let value = entry[key]
+          value = typeof value !== "string" ? value.toString() : value
+          return value.toLowerCase().includes(filterText)
+        })
+      })
+    },
   },
   methods: {
     clearHistory() {
       if (fb.currentUser !== null) {
-        fb.clearHistory();
+        fb.clearHistory()
       }
-      this.history = [];
-      this.filterText = "";
-      this.disableHistoryClearing();
-      updateOnLocalStorage("history", this.history);
+      this.history = []
+      this.filterText = ""
+      this.disableHistoryClearing()
+      updateOnLocalStorage("history", this.history)
       this.$toast.error(this.$t("history_deleted"), {
-        icon: "delete"
-      });
+        icon: "delete",
+      })
     },
     useHistory(entry) {
-      this.$emit("useHistory", entry);
+      this.$emit("useHistory", entry)
     },
     findEntryStatus(entry) {
-      const foundStatusGroup = findStatusGroup(entry.status);
+      const foundStatusGroup = findStatusGroup(entry.status)
       return (
         foundStatusGroup || {
-          className: ""
+          className: "",
         }
-      );
+      )
     },
     deleteHistory(entry) {
       if (fb.currentUser !== null) {
-        fb.deleteHistory(entry);
+        fb.deleteHistory(entry)
       }
-      this.history.splice(this.history.indexOf(entry), 1);
+      this.history.splice(this.history.indexOf(entry), 1)
       if (this.history.length === 0) {
-        this.filterText = "";
+        this.filterText = ""
       }
-      updateOnLocalStorage("history", this.history);
+      updateOnLocalStorage("history", this.history)
       this.$toast.error(this.$t("deleted"), {
-        icon: "delete"
-      });
+        icon: "delete",
+      })
     },
     addEntry(entry) {
-      this.history.push(entry);
-      updateOnLocalStorage("history", this.history);
+      this.history.push(entry)
+      updateOnLocalStorage("history", this.history)
     },
     enableHistoryClearing() {
-      if (!this.history || !this.history.length) return;
-      this.isClearingHistory = true;
+      if (!this.history || !this.history.length) return
+      this.isClearingHistory = true
     },
     disableHistoryClearing() {
-      this.isClearingHistory = false;
+      this.isClearingHistory = false
     },
     sort_by_time() {
-      let byDate = this.history.slice(0);
+      let byDate = this.history.slice(0)
       byDate.sort((a, b) => {
-        let date_a = a.date.split("/");
-        let date_b = b.date.split("/");
-        let time_a = a.time.split(":");
-        let time_b = b.time.split(":");
-        let final_a = new Date(
-          date_a[2],
-          date_a[1],
-          date_a[0],
-          time_a[0],
-          time_a[1],
-          time_a[2]
-        );
-        let final_b = new Date(
-          date_b[2],
-          date_b[1],
-          date_b[0],
-          time_b[0],
-          time_b[1],
-          time_b[2]
-        );
-        if (this.reverse_sort_time) return final_b - final_a;
-        else return final_a - final_b;
-      });
-      this.history = byDate;
-      this.reverse_sort_time = !this.reverse_sort_time;
+        let date_a = a.date.split("/")
+        let date_b = b.date.split("/")
+        let time_a = a.time.split(":")
+        let time_b = b.time.split(":")
+        let final_a = new Date(date_a[2], date_a[1], date_a[0], time_a[0], time_a[1], time_a[2])
+        let final_b = new Date(date_b[2], date_b[1], date_b[0], time_b[0], time_b[1], time_b[2])
+        if (this.reverse_sort_time) return final_b - final_a
+        else return final_a - final_b
+      })
+      this.history = byDate
+      this.reverse_sort_time = !this.reverse_sort_time
     },
     sort_by_status_code() {
-      let byCode = this.history.slice(0);
+      let byCode = this.history.slice(0)
       byCode.sort((a, b) => {
-        if (this.reverse_sort_status_code) return b.status - a.status;
-        else return a.status - b.status;
-      });
-      this.history = byCode;
-      this.reverse_sort_status_code = !this.reverse_sort_status_code;
+        if (this.reverse_sort_status_code) return b.status - a.status
+        else return a.status - b.status
+      })
+      this.history = byCode
+      this.reverse_sort_status_code = !this.reverse_sort_status_code
     },
     sort_by_url() {
-      let byUrl = this.history.slice(0);
+      let byUrl = this.history.slice(0)
       byUrl.sort((a, b) => {
-        if (this.reverse_sort_url)
-          return a.url === b.url ? 0 : +(a.url < b.url) || -1;
-        else return a.url === b.url ? 0 : +(a.url > b.url) || -1;
-      });
-      this.history = byUrl;
-      this.reverse_sort_url = !this.reverse_sort_url;
+        if (this.reverse_sort_url) return a.url === b.url ? 0 : +(a.url < b.url) || -1
+        else return a.url === b.url ? 0 : +(a.url > b.url) || -1
+      })
+      this.history = byUrl
+      this.reverse_sort_url = !this.reverse_sort_url
     },
     sort_by_label() {
-      let byLabel = this.history.slice(0);
+      let byLabel = this.history.slice(0)
       byLabel.sort((a, b) => {
-        if (this.reverse_sort_label)
-          return a.label === b.label ? 0 : +(a.label < b.label) || -1;
-        else return a.label === b.label ? 0 : +(a.label > b.label) || -1;
-      });
-      this.history = byLabel;
-      this.reverse_sort_label = !this.reverse_sort_label;
+        if (this.reverse_sort_label) return a.label === b.label ? 0 : +(a.label < b.label) || -1
+        else return a.label === b.label ? 0 : +(a.label > b.label) || -1
+      })
+      this.history = byLabel
+      this.reverse_sort_label = !this.reverse_sort_label
     },
     sort_by_path() {
-      let byPath = this.history.slice(0);
+      let byPath = this.history.slice(0)
       byPath.sort((a, b) => {
-        if (this.reverse_sort_path)
-          return a.path === b.path ? 0 : +(a.path < b.path) || -1;
-        else return a.path === b.path ? 0 : +(a.path > b.path) || -1;
-      });
-      this.history = byPath;
-      this.reverse_sort_path = !this.reverse_sort_path;
+        if (this.reverse_sort_path) return a.path === b.path ? 0 : +(a.path < b.path) || -1
+        else return a.path === b.path ? 0 : +(a.path > b.path) || -1
+      })
+      this.history = byPath
+      this.reverse_sort_path = !this.reverse_sort_path
     },
     sort_by_duration() {
-      let byDuration = this.history.slice(0);
+      let byDuration = this.history.slice(0)
       byDuration.sort((a, b) => {
         if (this.reverse_sort_duration)
-          return a.duration === b.duration
-            ? 0
-            : +(a.duration < b.duration) || -1;
-        else
-          return a.duration === b.duration
-            ? 0
-            : +(a.duration > b.duration) || -1;
-      });
-      this.history = byDuration;
-      this.reverse_sort_duration = !this.reverse_sort_duration;
+          return a.duration === b.duration ? 0 : +(a.duration < b.duration) || -1
+        else return a.duration === b.duration ? 0 : +(a.duration > b.duration) || -1
+      })
+      this.history = byDuration
+      this.reverse_sort_duration = !this.reverse_sort_duration
     },
     toggleCollapse() {
-      this.showMore = !this.showMore;
+      this.showMore = !this.showMore
     },
     toggleStar(entry) {
       if (fb.currentUser !== null) {
-        fb.toggleStar(entry, !entry.star);
+        fb.toggleStar(entry, !entry.star)
       }
-      entry.star = !entry.star;
-      updateOnLocalStorage("history", this.history);
-    }
-  }
-};
+      entry.star = !entry.star
+      updateOnLocalStorage("history", this.history)
+    },
+  },
+}
 </script>

components/layout/logo.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg viewBox="0 0 612.001 612.001">
+    <path
+      :fill="color"
+      data-old_color="#202124"
+      class="active-path"
+      data-original="#202124"
+      d="M64.601 236.822C64.601 394.256 192.786 612 306.001 612 412.582 612 547.4 394.256 547.4 236.822S439.322 0 306 0 64.601 79.388 64.601 236.822zm304.12 116.415c29.475-29.475 70.598-40.195 108.552-32.173 8.021 37.954-2.698 79.077-32.173 108.552-29.475 29.476-70.598 40.196-108.552 32.174-8.022-37.955 2.698-79.078 32.173-108.552zm-233.994-32.174c37.954-8.02 79.077 2.698 108.552 32.173 29.475 29.475 40.195 70.598 32.173 108.552-37.954 8.021-79.077-2.698-108.552-32.173-29.475-29.476-40.194-70.598-32.173-108.552z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+    },
+  },
+}
+</script>

components/layout/section.vue

@@ -0,0 +1,116 @@
+<template>
+  <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
+    <legend @click.prevent="collapse">
+      <span>{{ label }}</span>
+      <i class="material-icons">
+        {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
+      </i>
+    </legend>
+    <div class="collapsible" :class="{ hidden: isCollapsed(label.toLowerCase()) }">
+      <slot />
+    </div>
+  </fieldset>
+</template>
+
+<style scoped lang="scss">
+fieldset {
+  margin: 16px 0;
+  border-radius: 8px;
+  background-color: var(--bg-dark-color);
+  transition: all 0.2s ease-in-out;
+
+  legend {
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+    color: var(--fg-color);
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    * {
+      vertical-align: middle;
+    }
+
+    i {
+      margin-left: 8px;
+    }
+  }
+
+  &.blue legend {
+    color: #57b5f9;
+  }
+
+  &.gray legend {
+    color: #bcc2cd;
+  }
+
+  &.green legend {
+    color: #50fa7b;
+  }
+
+  &.cyan legend {
+    color: #8be9fd;
+  }
+
+  &.purple legend {
+    color: #bd93f9;
+  }
+
+  &.orange legend {
+    color: #ffb86c;
+  }
+
+  &.pink legend {
+    color: #ff79c6;
+  }
+
+  &.red legend {
+    color: #ff5555;
+  }
+
+  &.yellow legend {
+    color: #f1fa8c;
+  }
+}
+
+fieldset.no-colored-frames legend {
+  color: var(--fg-color);
+}
+</style>
+
+<script>
+export default {
+  computed: {
+    frameColorsEnabled() {
+      return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false
+    },
+    sectionString() {
+      return `${this.$route.path.replace(/\/+$/, "")}/${this.label}`
+    },
+  },
+
+  props: {
+    label: {
+      type: String,
+      default: "Section",
+    },
+    collapsed: {
+      type: Boolean,
+    },
+  },
+
+  methods: {
+    collapse({ target }) {
+      const parent = target.parentNode.parentNode
+      parent.querySelector(".collapsible").classList.toggle("hidden")
+
+      // Save collapsed section into the collapsedSections array
+      this.$store.commit("setCollapsedSection", this.sectionString)
+    },
+    isCollapsed(label) {
+      return this.$store.state.theme.collapsedSections.includes(this.sectionString) || false
+    },
+  },
+}
+</script>

components/layout/sidenav.vue

@@ -0,0 +1,349 @@
+<template>
+  <aside class="nav-first">
+    <nav class="primary-nav">
+      <!--
+        We're using manual checks for linkActive because the query string
+        seems to mess up the nuxt-link active class.
+      -->
+      <nuxt-link
+        :to="localePath('index')"
+        :class="linkActive('/')"
+        v-tooltip.right="$t('home')"
+        :aria-label="$t('home')"
+      >
+        <logo alt class="material-icons" style="height: 24px;"></logo>
+      </nuxt-link>
+      <nuxt-link
+        :to="localePath('realtime')"
+        :class="linkActive('/realtime')"
+        v-tooltip.right="$t('realtime')"
+      >
+        <i class="material-icons">language</i>
+      </nuxt-link>
+      <nuxt-link
+        :to="localePath('graphql')"
+        :class="linkActive('/graphql')"
+        v-tooltip.right="$t('graphql')"
+        :aria-label="$t('graphql')"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 29.999 30">
+          <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
+          <path d="M2.727 20.53h24.538v1.272H2.727z" />
+          <path
+            d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"
+          />
+          <path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
+          <path
+            d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"
+          />
+          <path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
+          <path
+            d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347"
+          />
+        </svg>
+      </nuxt-link>
+      <nuxt-link
+        :to="localePath('doc')"
+        :class="linkActive('/doc')"
+        v-tooltip.right="$t('documentation')"
+        :aria-label="$t('documentation')"
+      >
+        <i class="material-icons">topic</i>
+      </nuxt-link>
+      <nuxt-link
+        :to="localePath('settings')"
+        :class="linkActive('/settings')"
+        v-tooltip.right="$t('settings')"
+        :aria-label="$t('settings')"
+      >
+        <i class="material-icons">settings</i>
+      </nuxt-link>
+    </nav>
+    <div v-if="$route.path == '/'">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#request" v-tooltip.right="$t('request')">
+              <i class="material-icons">cloud_upload</i>
+            </a>
+          </li>
+          <li>
+            <a href="#options" v-tooltip.right="$t('options')">
+              <i class="material-icons">toc</i>
+            </a>
+          </li>
+          <li>
+            <a href="#response" v-tooltip.right="$t('response')">
+              <i class="material-icons">cloud_download</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div v-else-if="$route.path.includes('/realtime')">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#request" v-tooltip.right="$t('request')">
+              <i class="material-icons">cloud_upload</i>
+            </a>
+          </li>
+          <li>
+            <a href="#response" v-tooltip.right="$t('communication')">
+              <i class="material-icons">cloud_download</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div v-else-if="$route.path.includes('/graphql')">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#endpoint" v-tooltip.right="$t('endpoint')">
+              <i class="material-icons">cloud</i>
+            </a>
+          </li>
+          <li>
+            <a href="#schema" v-tooltip.right="$t('schema')">
+              <i class="material-icons">assignment_returned</i>
+            </a>
+          </li>
+          <li>
+            <a href="#query" v-tooltip.right="$t('query')">
+              <i class="material-icons">cloud_upload</i>
+            </a>
+          </li>
+          <li>
+            <a href="#response" v-tooltip.right="$t('response')">
+              <i class="material-icons">cloud_download</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div v-else-if="$route.path.includes('/doc')">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#import" v-tooltip.right="$t('import')">
+              <i class="material-icons">folder</i>
+            </a>
+          </li>
+          <li>
+            <a href="#documentation" v-tooltip.right="'Documentation'">
+              <i class="material-icons">insert_drive_file</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div v-else-if="$route.path.includes('/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>
+            </a>
+          </li>
+          <li>
+            <a href="#extensions" v-tooltip.right="$t('extensions')">
+              <i class="material-icons">extensions</i>
+            </a>
+          </li>
+          <li>
+            <a href="#proxy" v-tooltip.right="$t('proxy')">
+              <i class="material-icons">public</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </aside>
+</template>
+
+<style scoped lang="scss">
+$responsiveWidth: 768px;
+
+.nav-first {
+  z-index: 1;
+  height: 100vh;
+  padding: 0 8px;
+  background-color: var(--bg-dark-color);
+  transition: all 0.2s ease-in-out;
+}
+
+nav.primary-nav {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: var(--fg-light-color);
+    transition: all 0.2s ease-in-out;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 14px;
+    border-radius: 50%;
+    background-color: var(--bg-light-color);
+    color: var(--fg-light-color);
+    fill: var(--fg-light-color);
+    margin: 8px 0;
+
+    &:hover {
+      color: var(--fg-color);
+      fill: var(--fg-color);
+
+      svg {
+        fill: var(--fg-color);
+      }
+    }
+
+    &.nuxt-link-exact-active {
+      background-color: var(--ac-color);
+      color: var(--act-color);
+      fill: var(--act-color);
+      border-radius: 16px;
+
+      svg {
+        fill: var(--act-color);
+      }
+    }
+  }
+}
+
+nav.secondary-nav {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  border-top: 2px dashed var(--brd-color);
+  margin-top: 4px;
+
+  ul {
+    display: flex;
+    flex-flow: column nowrap;
+
+    li {
+      display: flex;
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        padding: 14px;
+        border-radius: 50%;
+        background-color: var(--bg-dark-color);
+        color: var(--fg-light-color);
+        fill: var(--fg-light-color);
+        margin: 8px 0;
+
+        &:hover {
+          color: var(--fg-color);
+          fill: var(--fg-color);
+        }
+
+        &.current {
+          color: var(--ac-color);
+          fill: var(--ac-color);
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $responsiveWidth) {
+  .nav-first {
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    height: auto;
+    padding: 0;
+    width: 100%;
+    background-color: var(--bg-color);
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
+  }
+
+  nav.primary-nav {
+    flex-flow: row nowrap;
+    overflow: auto;
+    justify-content: space-between;
+    background-color: var(--bg-dark-color);
+
+    a {
+      background-color: transparent;
+      margin: 8px;
+      flex: 1;
+
+      &.nuxt-link-exact-active {
+        background-color: transparent;
+        color: var(--ac-color);
+        fill: var(--ac-color);
+
+        svg {
+          fill: var(--ac-color);
+        }
+      }
+    }
+  }
+
+  nav.secondary-nav {
+    display: none;
+  }
+}
+</style>
+
+<script>
+export default {
+  components: {
+    logo: () => import("./logo"),
+  },
+
+  methods: {
+    linkActive(path) {
+      return {
+        "nuxt-link-exact-active": this.$route.path === path,
+        "nuxt-link-active": this.$route.path === path,
+      }
+    },
+  },
+
+  mounted() {
+    window.addEventListener("scroll", (event) => {
+      let mainNavLinks = document.querySelectorAll("nav ul li a")
+      let fromTop = window.scrollY
+      mainNavLinks.forEach(({ hash, classList }) => {
+        let section = document.querySelector(hash)
+
+        if (
+          section &&
+          section.offsetTop <= fromTop &&
+          section.offsetTop + section.offsetHeight > fromTop
+        ) {
+          classList.add("current")
+        } else {
+          classList.remove("current")
+        }
+      })
+    })
+  },
+
+  watch: {
+    $route() {
+      // this.$toast.clear();
+    },
+  },
+}
+</script>

components/lenses/ResponseBodyRenderer.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tabs>
+      <tab
+        v-for="(lens, index) in validLenses"
+        :key="lens.lensName"
+        :id="lens.lensName"
+        :label="lens.lensName"
+        :selected="index === 0"
+      >
+        <component :is="lens.renderer" :response="response" />
+      </tab>
+      <tab
+        v-if="Object.keys(response.headers).length !== 0"
+        id="headers"
+        :label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
+      >
+        <headers :headers="response.headers" />
+      </tab>
+    </tabs>
+  </div>
+</template>
+
+<script>
+import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
+
+export default {
+  components: {
+    tabs: () => import("../ui/tabs"),
+    tab: () => import("../ui/tab"),
+    headers: () => import("./headers"),
+    // Lens Renderers
+    ...getLensRenderers(),
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    validLenses() {
+      return getSuitableLenses(this.response)
+    },
+  },
+}
+</script>

components/lenses/headers.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <ul v-for="(value, key) in headers" :key="key">
+      <li>
+        <input :value="`${key} → ${value}`" :name="key" class="bg-color" readonly />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headers: {},
+  },
+}
+</script>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -0,0 +1,153 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            v-if="response.body"
+            class="icon"
+            @click.prevent="togglePreview"
+            v-tooltip="{
+              content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !previewEnabled ? "visibility" : "visibility_off" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'html'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+        <iframe
+          :class="{ hidden: !previewEnabled }"
+          class="covers-response"
+          ref="previewFrame"
+          src="about:blank"
+        ></iframe>
+      </div>
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+      previewEnabled: false,
+    }
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: "text/html" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response 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)
+    },
+    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.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+    togglePreview() {
+      this.previewEnabled = !this.previewEnabled
+      if (this.previewEnabled) {
+        if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+        // Use DOMParser to parse document HTML.
+        const previewDocument = new DOMParser().parseFromString(this.responseBodyText, "text/html")
+        // 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)
+      }
+    },
+  },
+}
+</script>

components/lenses/renderers/ImageLensRenderer.vue

@@ -0,0 +1,102 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <img class="response-image" :src="imageSource" />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped lang="scss">
+.response-image {
+  max-width: 100%;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      imageSource: "",
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+    }
+  },
+  computed: {
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  watch: {
+    response: {
+      immediate: true,
+      handler(newValue) {
+        this.imageSource = ""
+
+        const buf = this.response.body
+        const bytes = new Uint8Array(buf)
+        const blob = new Blob([bytes.buffer])
+
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          this.imageSource = e.target.result
+        }
+        reader.readAsDataURL(blob)
+      },
+    },
+  },
+  mounted() {
+    this.imageSource = ""
+
+    const buf = this.response.body
+    const bytes = new Uint8Array(buf)
+    const blob = new Blob([bytes.buffer])
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      this.imageSource = e.target.result
+    }
+    reader.readAsDataURL(blob)
+  },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.response.body
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response 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)
+    },
+  },
+}
+</script>

components/lenses/renderers/JSONLensRenderer.vue

@@ -0,0 +1,149 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div class="valid-warning" v-if="jsonInvalid">
+        <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="jsonBodyText"
+          :lang="'json'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import AceEditor from "../../ui/ace-editor"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      jsonInvalid: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
+  computed: {
+    jsonBodyText() {
+      try {
+        this.jsonInvalid = false
+        return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
+      } catch (e) {
+        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        this.jsonInvalid = true
+        return this.responseBodyText
+      }
+    },
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response 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)
+    },
+    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.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+  },
+}
+</script>

components/lenses/renderers/RawLensRenderer.vue

@@ -0,0 +1,134 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'plain_text'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
+  computed: {
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response 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)
+    },
+    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.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+  },
+}
+</script>

components/lenses/renderers/XMLLensRenderer.vue

@@ -0,0 +1,125 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'xml'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  mixins: [TextContentRendererMixin],
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
+  computed: {
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response 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)
+    },
+    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.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+  },
+}
+</script>

components/lenses/renderers/mixins/TextContentRendererMixin.js

@@ -0,0 +1,11 @@
+export default {
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      if (typeof this.response.body === "string") return this.response.body
+      return new TextDecoder("utf-8").decode(this.response.body)
+    },
+  },
+}

components/logo.vue

@@ -1,56 +0,0 @@
-<template>
-  <svg
-    version="1.1"
-    id="Capa_1"
-    x="0px"
-    y="0px"
-    viewBox="0 0 612.001 612.001"
-    style="enable-background:new 0 0 612.001 612.001;"
-    xml:space="preserve"
-  >
-    <defs id="defs11" />
-    <g id="g3826" transform="translate(-516.40798,-163.88978)">
-      <circle
-        :fill="color"
-        transform="scale(1,-1)"
-        style="stroke-width:1.19531453"
-        r="178.70923"
-        cy="-501.55591"
-        cx="822.40845"
-        id="circle3814"
-      />
-      <g id="g3820" transform="translate(516.40798,163.89028)">
-        <g id="g3818">
-          <path
-            :fill="color"
-            id="path3816"
-            data-old_color="#202124"
-            class="active-path"
-            data-original="#202124"
-            d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
-          />
-        </g>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<style scoped lang="scss">
-#circle3814 {
-  /* fill: var(--fg-color); */
-  fill: transparent;
-}
-/* #path3816 {
-    fill: var(--bg-color);
-  } */
-</style>
-
-<script>
-export default {
-  props: {
-    color: {
-      type: String
-    }
-  }
-};
-</script>

components/realtime/log.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <label for="log">{{ title }}</label>
+    <div name="log" class="realtime-log" ref="log">
+      <span v-if="log">
+        <span v-for="(logEntry, index) in log" :style="{ color: logEntry.color }" :key="index"
+          >@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source) }}{{ logEntry.payload }}</span
+        >
+      </span>
+      <span v-else>{{ $t("waiting_for_connection") }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+div.realtime-log {
+  margin: 4px;
+  padding: 8px 16px;
+  width: calc(100% - 8px);
+  border-radius: 8px;
+  background-color: var(--bg-dark-color);
+  color: var(--fg-color);
+  height: 256px;
+  overflow: auto;
+
+  &,
+  span {
+    font-size: 16px;
+    font-family: "Roboto Mono", monospace;
+    font-weight: 400;
+    user-select: text;
+  }
+
+  span {
+    display: block;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+}
+</style>
+
+<script>
+import { getSourcePrefix } from "~/helpers/utils/string"
+
+export default {
+  props: ["log", "title"],
+  methods: {
+    getSourcePrefix,
+  },
+  updated: function () {
+    this.$nextTick(function () {
+      if (this.$refs.log) {
+        this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
+      }
+    })
+  },
+}
+</script>

components/realtime/mqtt.vue

@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <pw-section class="blue" :label="$t('request')">
+      <ul>
+        <li>
+          <label for="mqtt-url">{{ $t("url") }}</label>
+          <input id="mqtt-url" type="url" v-model="url" spellcheck="false" />
+        </li>
+        <div>
+          <li>
+            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
+            <button id="connect" :disabled="!validUrl" @click="toggleConnection">
+              {{ this.connectionState ? $t("disconnect") : $t("connect") }}
+              <span>
+                <i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
+              </span>
+            </button>
+          </li>
+        </div>
+      </ul>
+    </pw-section>
+
+    <pw-section class="blue" :label="$t('communication')">
+      <ul>
+        <li>
+          <realtime-log :title="$t('log')" :log="this.log" />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
+          <input id="pub_topic" type="text" v-model="pub_topic" spellcheck="false" />
+        </li>
+        <li>
+          <label for="mqtt-message">{{ $t("message") }}</label>
+          <input id="mqtt-message" type="text" v-model="msg" spellcheck="false" />
+        </li>
+        <div>
+          <li>
+            <label for="publish" class="hide-on-small-screen">&nbsp;</label>
+            <button id="publish" name="get" :disabled="!canpublish" @click="publish">
+              {{ $t("mqtt_publish") }}
+              <span>
+                <i class="material-icons">send</i>
+              </span>
+            </button>
+          </li>
+        </div>
+      </ul>
+      <ul>
+        <li>
+          <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
+          <input id="sub_topic" type="text" v-model="sub_topic" spellcheck="false" />
+        </li>
+        <div>
+          <li>
+            <label for="subscribe" class="hide-on-small-screen">&nbsp;</label>
+            <button id="subscribe" name="get" :disabled="!cansubscribe" @click="toggleSubscription">
+              {{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
+              <span>
+                <i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>
+              </span>
+            </button>
+          </li>
+        </div>
+      </ul>
+    </pw-section>
+  </div>
+</template>
+
+<script>
+import Paho from "paho-mqtt"
+import { wsValid } from "~/helpers/utils/valid"
+
+export default {
+  components: {
+    "pw-section": () => import("~/components/layout/section"),
+    realtimeLog: () => import("./log"),
+  },
+  data: function () {
+    return {
+      url: "wss://test.mosquitto.org:8081",
+      client: null,
+      pub_topic: "",
+      sub_topic: "",
+      msg: "",
+      connectionState: false,
+      log: null,
+      manualDisconnect: false,
+      subscriptionState: false,
+    }
+  },
+  computed: {
+    validUrl() {
+      return wsValid(this.url)
+    },
+    canpublish() {
+      return this.pub_topic != "" && this.msg != "" && this.connectionState
+    },
+    cansubscribe() {
+      return this.sub_topic != "" && this.connectionState
+    },
+  },
+  methods: {
+    connect() {
+      this.log = [
+        {
+          payload: this.$t("connecting_to", { name: this.url }),
+          source: "info",
+          color: "var(--ac-color)",
+          ts: new Date().toLocaleTimeString(),
+        },
+      ]
+      let parseUrl = new URL(this.url)
+      this.client = new Paho.Client(
+        parseUrl.hostname,
+        parseUrl.port != "" ? Number(parseUrl.port) : 8081,
+        "postwoman"
+      )
+      this.client.connect({
+        onSuccess: this.onConnectionSuccess,
+        onFailure: this.onConnectionFailure,
+        useSSL: true,
+      })
+      this.client.onConnectionLost = this.onConnectionLost
+      this.client.onMessageArrived = this.onMessageArrived
+    },
+    onConnectionFailure() {
+      this.connectionState = false
+      this.log.push({
+        payload: this.$t("error_occurred"),
+        source: "info",
+        color: "#ff5555",
+        ts: new Date().toLocaleTimeString(),
+      })
+    },
+    onConnectionSuccess() {
+      this.connectionState = true
+      this.log.push({
+        payload: this.$t("connected_to", { name: this.url }),
+        source: "info",
+        color: "var(--ac-color)",
+        ts: new Date().toLocaleTimeString(),
+      })
+      this.$toast.success(this.$t("connected"), {
+        icon: "sync",
+      })
+    },
+    onMessageArrived(message) {
+      this.log.push({
+        payload: `Message: ${message.payloadString} arrived on topic: ${message.destinationName}`,
+        source: "info",
+        color: "var(--ac-color)",
+        ts: new Date().toLocaleTimeString(),
+      })
+    },
+    toggleConnection() {
+      if (this.connectionState) {
+        this.disconnect()
+      } else {
+        this.connect()
+      }
+    },
+    disconnect() {
+      this.manualDisconnect = true
+      this.client.disconnect()
+      this.log.push({
+        payload: this.$t("disconnected_from", { name: this.url }),
+        source: "info",
+        color: "#ff5555",
+        ts: new Date().toLocaleTimeString(),
+      })
+    },
+    onConnectionLost() {
+      this.connectionState = false
+      if (this.manualDisconnect) {
+        this.$toast.error(this.$t("disconnected"), {
+          icon: "sync_disabled",
+        })
+      } else {
+        this.$toast.error(this.$t("something_went_wrong"), {
+          icon: "error",
+        })
+      }
+      this.manualDisconnect = false
+      this.subscriptionState = false
+    },
+    publish() {
+      try {
+        this.client.publish(this.pub_topic, this.msg, 0, false)
+        this.log.push({
+          payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
+          ts: new Date().toLocaleTimeString(),
+          source: "info",
+          color: "var(--ac-color)",
+        })
+      } catch (e) {
+        this.log.push({
+          payload:
+            this.$t("error_occurred") +
+            `while publishing msg: ${this.msg} to topic:  ${this.pub_topic}`,
+          source: "info",
+          color: "#ff5555",
+          ts: new Date().toLocaleTimeString(),
+        })
+      }
+    },
+    toggleSubscription() {
+      if (this.subscriptionState) {
+        this.unsubscribe()
+      } else {
+        this.subscribe()
+      }
+    },
+    subscribe() {
+      try {
+        this.client.subscribe(this.sub_topic, {
+          onSuccess: this.usubSuccess,
+          onFailure: this.usubFailure,
+        })
+      } catch (e) {
+        this.log.push({
+          payload: this.$t("error_occurred") + `while subscribing to topic:  ${this.sub_topic}`,
+          source: "info",
+          color: "#ff5555",
+          ts: new Date().toLocaleTimeString(),
+        })
+      }
+    },
+    usubSuccess() {
+      this.subscriptionState = !this.subscriptionState
+      this.log.push({
+        payload:
+          `Successfully ` +
+          (this.subscriptionState ? "subscribed" : "unsubscribed") +
+          ` to topic: ${this.sub_topic}`,
+        source: "info",
+        color: "var(--ac-color)",
+        ts: new Date().toLocaleTimeString(),
+      })
+    },
+    usubFailure() {
+      this.log.push({
+        payload:
+          `Failed to ` +
+          (this.subscriptionState ? "unsubscribe" : "subscribe") +
+          ` to topic: ${this.sub_topic}`,
+        source: "info",
+        color: "#ff5555",
+        ts: new Date().toLocaleTimeString(),
+      })
+    },
+    unsubscribe() {
+      this.client.unsubscribe(this.sub_topic, {
+        onSuccess: this.usubSuccess,
+        onFailure: this.usubFailure,
+      })
+    },
+  },
+}
+</script>

components/realtime/socketio.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <pw-section class="blue" :label="$t('request')" ref="request">
+      <ul>
+        <li>
+          <label for="socketio-url">{{ $t("url") }}</label>
+          <input
+            id="socketio-url"
+            type="url"
+            spellcheck="false"
+            :class="{ error: !urlValid }"
+            v-model="url"
+            @keyup.enter="urlValid ? toggleConnection() : null"
+          />
+        </li>
+        <div>
+          <li>
+            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
+            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+              {{ !connectionState ? $t("connect") : $t("disconnect") }}
+              <span>
+                <i class="material-icons">
+                  {{ !connectionState ? "sync" : "sync_disabled" }}
+                </i>
+              </span>
+            </button>
+          </li>
+        </div>
+      </ul>
+    </pw-section>
+
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+      <ul>
+        <li>
+          <realtime-log :title="$t('log')" :log="communication.log" />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <label for="event_name">{{ $t("event_name") }}</label>
+          <input
+            id="event_name"
+            name="event_name"
+            type="text"
+            v-model="communication.eventName"
+            :readonly="!connectionState"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <label for="socketio-message">{{ $t("message") }}</label>
+          <input
+            id="socketio-message"
+            name="message"
+            type="text"
+            v-model="communication.input"
+            :readonly="!connectionState"
+            @keyup.enter="connectionState ? sendMessage() : null"
+          />
+        </li>
+        <div>
+          <li>
+            <label for="send" class="hide-on-small-screen">&nbsp;</label>
+            <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
+              {{ $t("send") }}
+              <span>
+                <i class="material-icons">send</i>
+              </span>
+            </button>
+          </li>
+        </div>
+      </ul>
+    </pw-section>
+  </div>
+</template>
+
+<script>
+import { socketioValid } from "~/helpers/utils/valid"
+import io from "socket.io-client"
+import wildcard from "socketio-wildcard"
+
+export default {
+  components: {
+    "pw-section": () => import("~/components/layout/section"),
+    realtimeLog: () => import("./log"),
+  },
+  data() {
+    return {
+      url: "ws://",
+      connectionState: false,
+      io: null,
+      communication: {
+        log: null,
+        eventName: "",
+        input: "",
+      },
+    }
+  },
+  computed: {
+    urlValid() {
+      return socketioValid(this.url)
+    },
+  },
+  methods: {
+    toggleConnection() {
+      // If it is connecting:
+      if (!this.connectionState) return this.connect()
+      // Otherwise, it's disconnecting.
+      else return this.disconnect()
+    },
+    connect() {
+      this.communication.log = [
+        {
+          payload: this.$t("connecting_to", { name: this.url }),
+          source: "info",
+          color: "var(--ac-color)",
+        },
+      ]
+
+      try {
+        this.io = new io(this.url)
+        // Add ability to listen to all events
+        wildcard(io.Manager)(this.io)
+        this.io.on("connect", () => {
+          this.connectionState = true
+          this.communication.log = [
+            {
+              payload: this.$t("connected_to", { name: this.url }),
+              source: "info",
+              color: "var(--ac-color)",
+              ts: new Date().toLocaleTimeString(),
+            },
+          ]
+          this.$toast.success(this.$t("connected"), {
+            icon: "sync",
+          })
+        })
+        this.io.on("*", ({ data }) => {
+          const [eventName, message] = data
+          this.communication.log.push({
+            payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
+            source: "server",
+            ts: new Date().toLocaleTimeString(),
+          })
+        })
+        this.io.on("connect_error", (error) => {
+          this.handleError(error)
+        })
+        this.io.on("reconnect_error", (error) => {
+          this.handleError(error)
+        })
+        this.io.on("error", (data) => {
+          this.handleError()
+        })
+        this.io.on("disconnect", () => {
+          this.connectionState = false
+          this.communication.log.push({
+            payload: this.$t("disconnected_from", { name: this.url }),
+            source: "info",
+            color: "#ff5555",
+            ts: new Date().toLocaleTimeString(),
+          })
+          this.$toast.error(this.$t("disconnected"), {
+            icon: "sync_disabled",
+          })
+        })
+      } catch (ex) {
+        this.handleError(ex)
+        this.$toast.error(this.$t("something_went_wrong"), {
+          icon: "error",
+        })
+      }
+    },
+    disconnect() {
+      this.io.close()
+    },
+    handleError(error) {
+      this.disconnect()
+      this.connectionState = false
+      this.communication.log.push({
+        payload: this.$t("error_occurred"),
+        source: "info",
+        color: "#ff5555",
+        ts: new Date().toLocaleTimeString(),
+      })
+      if (error !== null)
+        this.communication.log.push({
+          payload: error,
+          source: "info",
+          color: "#ff5555",
+          ts: new Date().toLocaleTimeString(),
+        })
+    },
+    sendMessage() {
+      const eventName = this.communication.eventName
+      let message
+
+      try {
+        message = JSON.parse(this.communication.input)
+      } catch (err) {
+        message = this.communication.input
+      }
+
+      if (this.io) {
+        // TODO: support only one argument now
+        // maybe should support more argument
+        this.io.emit(eventName, message, (data) => {
+          // receive response from server
+          this.communication.log.push({
+            payload: `[${eventName}] ${JSON.stringify(data)}`,
+            source: "server",
+            ts: new Date().toLocaleTimeString(),
+          })
+        })
+
+        this.communication.log.push({
+          payload: `[${eventName}] ${JSON.stringify(message)}`,
+          source: "client",
+          ts: new Date().toLocaleTimeString(),
+        })
+        this.communication.input = ""
+      }
+    },
+  },
+}
+</script>

components/realtime/sse.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="page">
+    <pw-section class="blue" :label="$t('request')" ref="request">
+      <ul>
+        <li>
+          <label for="server">{{ $t("server") }}</label>
+          <input
+            id="server"
+            type="url"
+            :class="{ error: !serverValid }"
+            v-model="server"
+            @keyup.enter="serverValid ? toggleSSEConnection() : null"
+          />
+        </li>
+        <div>
+          <li>
+            <label for="start" class="hide-on-small-screen">&nbsp;</label>
+            <button :disabled="!serverValid" id="start" name="start" @click="toggleSSEConnection">
+              {{ !connectionSSEState ? $t("start") : $t("stop") }}
+              <span>
+                <i class="material-icons">
+                  {{ !connectionSSEState ? "sync" : "sync_disabled" }}
+                </i>
+              </span>
+            </button>
+          </li>
+        </div>
+      </ul>
+    </pw-section>
+
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+      <ul>
+        <li>
+          <realtime-log :title="$t('events')" :log="events.log" />
+          <div id="result"></div>
+        </li>
+      </ul>
+    </pw-section>
+  </div>
+</template>
+
+<script>
+import { httpValid } from "~/helpers/utils/valid"
+
+export default {
+  components: {
+    "pw-section": () => import("../layout/section"),
+    realtimeLog: () => import("./log"),
+  },
+  data() {
+    return {
+      connectionSSEState: false,
+      server: "https://express-eventsource.herokuapp.com/events",
+      sse: null,
+      events: {
+        log: null,
+        input: "",
+      },
+    }
+  },
+  computed: {
+    serverValid() {
+      return httpValid(this.server)
+    },
+  },
+  methods: {
+    toggleSSEConnection() {
+      // If it is connecting:
+      if (!this.connectionSSEState) return this.start()
+      // Otherwise, it's disconnecting.
+      else return this.stop()
+    },
+    start() {
+      this.events.log = [
+        {
+          payload: this.$t("connecting_to", { name: this.server }),
+          source: "info",
+          color: "var(--ac-color)",
+        },
+      ]
+      if (typeof EventSource !== "undefined") {
+        try {
+          this.sse = new EventSource(this.server)
+          this.sse.onopen = (event) => {
+            this.connectionSSEState = true
+            this.events.log = [
+              {
+                payload: this.$t("connected_to", { name: this.server }),
+                source: "info",
+                color: "var(--ac-color)",
+                ts: new Date().toLocaleTimeString(),
+              },
+            ]
+            this.$toast.success(this.$t("connected"), {
+              icon: "sync",
+            })
+          }
+          this.sse.onerror = (event) => {
+            this.handleSSEError()
+          }
+          this.sse.onclose = (event) => {
+            this.connectionSSEState = false
+            this.events.log.push({
+              payload: this.$t("disconnected_from", { name: this.server }),
+              source: "info",
+              color: "#ff5555",
+              ts: new Date().toLocaleTimeString(),
+            })
+            this.$toast.error(this.$t("disconnected"), {
+              icon: "sync_disabled",
+            })
+          }
+          this.sse.onmessage = ({ data }) => {
+            this.events.log.push({
+              payload: data,
+              source: "server",
+              ts: new Date().toLocaleTimeString(),
+            })
+          }
+        } catch (ex) {
+          this.handleSSEError(ex)
+          this.$toast.error(this.$t("something_went_wrong"), {
+            icon: "error",
+          })
+        }
+      } else {
+        this.events.log = [
+          {
+            payload: this.$t("browser_support_sse"),
+            source: "info",
+            color: "#ff5555",
+            ts: new Date().toLocaleTimeString(),
+          },
+        ]
+      }
+    },
+    handleSSEError(error) {
+      this.stop()
+      this.connectionSSEState = false
+      this.events.log.push({
+        payload: this.$t("error_occurred"),
+        source: "info",
+        color: "#ff5555",
+        ts: new Date().toLocaleTimeString(),
+      })
+      if (error !== null)
+        this.events.log.push({
+          payload: error,
+          source: "info",
+          color: "#ff5555",
+          ts: new Date().toLocaleTimeString(),
+        })
+    },
+    stop() {
+      this.sse.onclose()
+      this.sse.close()
+    },
+  },
+}
+</script>

components/realtime/websocket.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="page">
+    <pw-section class="blue" :label="$t('request')" ref="request">
+      <ul>
+        <li>
+          <label for="websocket-url">{{ $t("url") }}</label>
+          <input
+            id="websocket-url"
+            type="url"
+            spellcheck="false"
+            :class="{ error: !urlValid }"
+            v-model="url"
+            @keyup.enter="urlValid ? toggleConnection() : null"
+          />
+        </li>
+        <div>
+          <li>
+            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
+            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+              {{ !connectionState ? $t("connect") : $t("disconnect") }}
+              <span>
+                <i class="material-icons">
+                  {{ !connectionState ? "sync" : "sync_disabled" }}
+                </i>
+              </span>
+            </button>
+          </li>
+        </div>
+      </ul>
+    </pw-section>
+
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+      <ul>
+        <li>
+          <realtime-log :title="$t('log')" :log="communication.log" />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <label for="websocket-message">{{ $t("message") }}</label>
+          <input
+            id="websocket-message"
+            name="message"
+            type="text"
+            v-model="communication.input"
+            :readonly="!connectionState"
+            @keyup.enter="connectionState ? sendMessage() : null"
+            @keyup.up="connectionState ? walkHistory('up') : null"
+            @keyup.down="connectionState ? walkHistory('down') : null"
+          />
+        </li>
+        <div>
+          <li>
+            <label for="send" class="hide-on-small-screen">&nbsp;</label>
+            <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
+              {{ $t("send") }}
+              <span>
+                <i class="material-icons">send</i>
+              </span>
+            </button>
+          </li>
+        </div>
+      </ul>
+    </pw-section>
+  </div>
+</template>
+
+<script>
+import { wsValid } from "~/helpers/utils/valid"
+
+export default {
+  components: {
+    "pw-section": () => import("../layout/section"),
+    realtimeLog: () => import("./log"),
+  },
+  data() {
+    return {
+      connectionState: false,
+      url: "wss://echo.websocket.org",
+      socket: null,
+      communication: {
+        log: null,
+        input: "",
+      },
+      currentIndex: -1, //index of the message log array to put in input box
+    }
+  },
+  computed: {
+    urlValid() {
+      return wsValid(this.url)
+    },
+  },
+  methods: {
+    toggleConnection() {
+      // If it is connecting:
+      if (!this.connectionState) return this.connect()
+      // Otherwise, it's disconnecting.
+      else return this.disconnect()
+    },
+    connect() {
+      this.communication.log = [
+        {
+          payload: this.$t("connecting_to", { name: this.url }),
+          source: "info",
+          color: "var(--ac-color)",
+        },
+      ]
+      try {
+        this.socket = new WebSocket(this.url)
+        this.socket.onopen = (event) => {
+          this.connectionState = true
+          this.communication.log = [
+            {
+              payload: this.$t("connected_to", { name: this.url }),
+              source: "info",
+              color: "var(--ac-color)",
+              ts: new Date().toLocaleTimeString(),
+            },
+          ]
+          this.$toast.success(this.$t("connected"), {
+            icon: "sync",
+          })
+        }
+        this.socket.onerror = (event) => {
+          this.handleError()
+        }
+        this.socket.onclose = (event) => {
+          this.connectionState = false
+          this.communication.log.push({
+            payload: this.$t("disconnected_from", { name: this.url }),
+            source: "info",
+            color: "#ff5555",
+            ts: new Date().toLocaleTimeString(),
+          })
+          this.$toast.error(this.$t("disconnected"), {
+            icon: "sync_disabled",
+          })
+        }
+        this.socket.onmessage = ({ data }) => {
+          this.communication.log.push({
+            payload: data,
+            source: "server",
+            ts: new Date().toLocaleTimeString(),
+          })
+        }
+      } catch (ex) {
+        this.handleError(ex)
+        this.$toast.error(this.$t("something_went_wrong"), {
+          icon: "error",
+        })
+      }
+    },
+    disconnect() {
+      this.socket.close()
+    },
+    handleError(error) {
+      this.disconnect()
+      this.connectionState = false
+      this.communication.log.push({
+        payload: this.$t("error_occurred"),
+        source: "info",
+        color: "#ff5555",
+        ts: new Date().toLocaleTimeString(),
+      })
+      if (error !== null)
+        this.communication.log.push({
+          payload: error,
+          source: "info",
+          color: "#ff5555",
+          ts: new Date().toLocaleTimeString(),
+        })
+    },
+    sendMessage() {
+      const message = this.communication.input
+      this.socket.send(message)
+      this.communication.log.push({
+        payload: message,
+        source: "client",
+        ts: new Date().toLocaleTimeString(),
+      })
+      this.communication.input = ""
+    },
+    walkHistory(direction) {
+      const clientMessages = this.communication.log.filter(({ source }) => source === "client")
+      const length = clientMessages.length
+      switch (direction) {
+        case "up":
+          if (length > 0 && this.currentIndex !== 0) {
+            //does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
+            if (this.currentIndex === -1) {
+              this.currentIndex = length - 1
+              this.communication.input = clientMessages[this.currentIndex].payload
+            } else if (this.currentIndex === 0) {
+              this.communication.input = clientMessages[0].payload
+            } else if (this.currentIndex > 0) {
+              this.currentIndex = this.currentIndex - 1
+              this.communication.input = clientMessages[this.currentIndex].payload
+            }
+          }
+          break
+        case "down":
+          if (length > 0 && this.currentIndex > -1) {
+            if (this.currentIndex === length - 1) {
+              this.currentIndex = -1
+              this.communication.input = ""
+            } else if (this.currentIndex < length - 1) {
+              this.currentIndex = this.currentIndex + 1
+              this.communication.input = clientMessages[this.currentIndex].payload
+            }
+          }
+          break
+      }
+    },
+  },
+}
+</script>

components/section.vue

@@ -1,56 +0,0 @@
-<template>
-  <fieldset
-    :id="label.toLowerCase()"
-    :class="{ 'no-colored-frames': !frameColorsEnabled }"
-  >
-    <legend @click.prevent="collapse">
-      <span>{{ label }}</span>
-      <i class="material-icons">
-        {{ isCollapsed ? "expand_more" : "expand_less" }}
-      </i>
-    </legend>
-    <div class="collapsible" :class="{ hidden: collapsed }">
-      <slot />
-    </div>
-  </fieldset>
-</template>
-
-<style scoped lang="scss">
-fieldset.no-colored-frames legend {
-  color: var(--fg-color);
-}
-</style>
-
-<script>
-export default {
-  computed: {
-    frameColorsEnabled() {
-      return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
-    }
-  },
-
-  data() {
-    return {
-      isCollapsed: false
-    };
-  },
-
-  props: {
-    label: {
-      type: String,
-      default: "Section"
-    },
-    collapsed: {
-      type: Boolean
-    }
-  },
-
-  methods: {
-    collapse({ target }) {
-      const parent = target.parentNode.parentNode;
-      parent.querySelector(".collapsible").classList.toggle("hidden");
-      this.isCollapsed = !this.isCollapsed;
-    }
-  }
-};
-</script>

components/settings/swatch.vue

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

components/ui/ace-editor.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="show-if-initialized" :class="{ initialized }">
+    <pre ref="editor"></pre>
+  </div>
+</template>
+
+<style lang="scss">
+.show-if-initialized {
+  opacity: 0;
+
+  &.initialized {
+    opacity: 1;
+  }
+
+  & > * {
+    transition: none;
+  }
+}
+</style>
+
+<script>
+const DEFAULT_THEME = "twilight"
+
+import ace from "ace-builds"
+import "ace-builds/webpack-resolver"
+import jsonParse from "~/helpers/jsonParse"
+import debounce from "~/helpers/utils/debounce"
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    theme: {
+      type: String,
+      required: false,
+    },
+    lang: {
+      type: String,
+      default: "json",
+    },
+    lint: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    options: {
+      type: Object,
+      default: {},
+    },
+  },
+
+  data() {
+    return {
+      initialized: false,
+      editor: null,
+      cacheValue: "",
+    }
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.cacheValue) {
+        this.editor.session.setValue(value, 1)
+        this.cacheValue = value
+        if (this.lint) this.provideLinting(value)
+      }
+    },
+    theme() {
+      this.initialized = false
+      this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+        this.$nextTick().then(() => {
+          this.initialized = true
+        })
+      })
+    },
+    lang(value) {
+      this.editor.getSession().setMode("ace/mode/" + value)
+    },
+    options(value) {
+      this.editor.setOptions(value)
+    },
+  },
+
+  mounted() {
+    const editor = ace.edit(this.$refs.editor, {
+      mode: `ace/mode/${this.lang}`,
+      ...this.options,
+    })
+
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true
+      })
+    })
+
+    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.cacheValue = content
+      if (this.lint) this.provideLinting(content)
+    })
+
+    // Disable linting, if lint prop is false
+    if (this.lint) this.provideLinting(this.value)
+  },
+
+  methods: {
+    defineTheme() {
+      if (this.theme) {
+        return this.theme
+      }
+      return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+    },
+
+    provideLinting: debounce(function (code) {
+      if (this.lang === "json") {
+        try {
+          jsonParse(code)
+          this.editor.session.setAnnotations([])
+        } catch (e) {
+          const pos = this.editor.session.getDocument().indexToPosition(e.start, 0)
+          this.editor.session.setAnnotations([
+            {
+              row: pos.row,
+              column: pos.column,
+              text: e.message,
+              type: "error",
+            },
+          ])
+        }
+      }
+    }, 2000),
+  },
+
+  destroyed() {
+    this.editor.destroy()
+  },
+}
+</script>

components/ui/autocomplete.vue

@@ -76,42 +76,42 @@
 </style>
 
 <script>
-const KEY_TAB = 9;
-const KEY_ESC = 27;
+const KEY_TAB = 9
+const KEY_ESC = 27
 
-const KEY_ARROW_UP = 38;
-const KEY_ARROW_DOWN = 40;
+const KEY_ARROW_UP = 38
+const KEY_ARROW_DOWN = 40
 
 export default {
   props: {
     spellcheck: {
       type: Boolean,
       default: true,
-      required: false
+      required: false,
     },
 
     placeholder: {
       type: String,
       default: "",
-      required: false
+      required: false,
     },
 
     source: {
       type: Array,
-      required: true
+      required: true,
     },
 
     value: {
       type: String,
       default: "",
-      required: false
-    }
+      required: false,
+    },
   },
 
   watch: {
     text() {
-      this.$emit("input", this.text);
-    }
+      this.$emit("input", this.text)
+    },
   },
 
   data() {
@@ -120,69 +120,67 @@ export default {
       selectionStart: 0,
       suggestionsOffsetLeft: 0,
       currentSuggestionIndex: -1,
-      suggestionsVisible: false
-    };
+      suggestionsVisible: false,
+    }
   },
 
   methods: {
     updateSuggestions(event) {
       // Hide suggestions if ESC pressed.
       if (event.which && event.which === KEY_ESC) {
-        event.preventDefault();
-        this.suggestionsVisible = false;
-        this.currentSuggestionIndex = -1;
-        return;
+        event.preventDefault()
+        this.suggestionsVisible = false
+        this.currentSuggestionIndex = -1
+        return
       }
 
       // As suggestions is a reactive property, this implicitly
       // causes suggestions to update.
-      this.selectionStart = this.$refs.acInput.selectionStart;
-      this.suggestionsOffsetLeft = 12 * this.selectionStart;
-      this.suggestionsVisible = true;
+      this.selectionStart = this.$refs.acInput.selectionStart
+      this.suggestionsOffsetLeft = 12 * this.selectionStart
+      this.suggestionsVisible = true
     },
 
     forceSuggestion(text) {
-      let input = this.text.substring(0, this.selectionStart);
-      this.text = input + text;
+      let input = this.text.substring(0, this.selectionStart)
+      this.text = input + text
 
-      this.selectionStart = this.text.length;
-      this.suggestionsVisible = true;
-      this.currentSuggestionIndex = -1;
+      this.selectionStart = this.text.length
+      this.suggestionsVisible = true
+      this.currentSuggestionIndex = -1
     },
 
     handleKeystroke(event) {
       switch (event.which) {
         case KEY_ARROW_UP:
-          event.preventDefault();
+          event.preventDefault()
           this.currentSuggestionIndex =
-            this.currentSuggestionIndex - 1 >= 0
-              ? this.currentSuggestionIndex - 1
-              : 0;
-          break;
+            this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0
+          break
 
         case KEY_ARROW_DOWN:
-          event.preventDefault();
+          event.preventDefault()
           this.currentSuggestionIndex =
             this.currentSuggestionIndex < this.suggestions.length - 1
               ? this.currentSuggestionIndex + 1
-              : this.suggestions.length - 1;
-          break;
+              : this.suggestions.length - 1
+          break
 
         case KEY_TAB:
-          event.preventDefault();
+          event.preventDefault()
           let activeSuggestion = this.suggestions[
             this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
-          ];
+          ]
           if (activeSuggestion) {
-            let input = this.text.substring(0, this.selectionStart);
-            this.text = input + activeSuggestion;
+            let input = this.text.substring(0, this.selectionStart)
+            this.text = input + activeSuggestion
           }
-          break;
+          break
 
         default:
-          break;
+          break
       }
-    }
+    },
   },
 
   computed: {
@@ -192,28 +190,28 @@ export default {
      * @returns {default.props.source|{type, required}}
      */
     suggestions() {
-      let input = this.text.substring(0, this.selectionStart);
+      let input = this.text.substring(0, this.selectionStart)
 
       return (
         this.source
-          .filter(entry => {
+          .filter((entry) => {
             return (
               entry.toLowerCase().startsWith(input.toLowerCase()) &&
               input.toLowerCase() !== entry.toLowerCase()
-            );
+            )
           })
           // Cut off the part that's already been typed.
-          .map(entry => entry.substring(this.selectionStart))
+          .map((entry) => entry.substring(this.selectionStart))
           // We only want the top 6 suggestions.
           .slice(0, 6)
-      );
-    }
+      )
+    },
   },
 
   mounted() {
     this.updateSuggestions({
-      target: this.$refs.acInput
-    });
-  }
-};
+      target: this.$refs.acInput,
+    })
+  },
+}
 </script>

components/ui/modal.vue

@@ -8,6 +8,8 @@
           </div>
           <div class="modal-body">
             <slot name="body"></slot>
+            <!-- <div class="fade top"></div>
+            <div class="fade bottom"></div> -->
           </div>
           <div class="modal-footer">
             <slot name="footer"></slot>
@@ -37,10 +39,10 @@
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-  max-width: 720px;
 }
 
 .modal-container {
+  position: relative;
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -48,9 +50,10 @@
   padding: 16px;
   transition: all 0.2s ease;
   background-color: var(--bg-color);
-  border-radius: 16px;
+  border-radius: 8px;
   box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
-  max-height: calc(100vh - 32px);
+  max-height: calc(100vh - 128px);
+  max-width: 720px;
 }
 
 .modal-body {
@@ -76,4 +79,23 @@
   transform: scale(0.8);
   transition: all 0.2s ease-in-out;
 }
+
+.fade {
+  position: absolute;
+  left: 16px;
+  right: 20px;
+  display: block;
+  height: 32px;
+  transition: all 0.2s;
+
+  &.top {
+    top: 68px;
+    background: linear-gradient(to bottom, var(--bg-color), transparent);
+  }
+
+  &.bottom {
+    bottom: 16px;
+    background: linear-gradient(to top, var(--bg-color), transparent);
+  }
+}
 </style>

components/ui/tab.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-show="isActive">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
+
+<script>
+export default {
+  props: {
+    label: { type: String },
+    icon: { type: String },
+    id: { required: true },
+    selected: {
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      isActive: false,
+    }
+  },
+
+  // computed: {
+  //   href() {
+  //     return `#${this.label.toLowerCase().replace(/ /g, "-")}`
+  //   },
+  // },
+
+  mounted() {
+    this.isActive = this.selected
+  },
+}
+</script>

components/ui/tabs.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="tabs-wrapper">
+    <div class="tabs">
+      <ul>
+        <li
+          v-for="(tab, index) in tabs"
+          :class="{ 'is-active': tab.isActive }"
+          :key="index"
+          :tabindex="0"
+          @keyup.enter="selectTab(tab)"
+        >
+          <a :href="tab.href" @click="selectTab(tab)">
+            <i v-if="tab.icon" class="material-icons">
+              {{ tab.icon }}
+            </i>
+            <span v-if="tab.label">{{ tab.label }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="tabs-details">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.tabs-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+  overflow: hidden;
+
+  .tabs {
+    -webkit-overflow-scrolling: touch;
+    display: flex;
+    white-space: nowrap;
+    overflow: auto;
+
+    ul {
+      display: flex;
+      width: 0px;
+    }
+
+    li {
+      display: inline-flex;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 8px 16px;
+        color: var(--fg-light-color);
+        border-radius: 8px;
+        cursor: pointer;
+
+        .material-icons {
+          margin-right: 8px;
+        }
+
+        &:hover {
+          color: var(--fg-color);
+        }
+      }
+
+      &:focus a {
+        color: var(--fg-color);
+      }
+
+      &.is-active a {
+        background-color: var(--brd-color);
+        color: var(--fg-color);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  ul,
+  ol {
+    flex-flow: row nowrap;
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      tabs: [],
+    }
+  },
+
+  created() {
+    this.tabs = this.$children
+  },
+
+  methods: {
+    selectTab({ id }) {
+      this.tabs.forEach((tab) => {
+        tab.isActive = tab.id == id
+      })
+    },
+  },
+}
+</script>

components/ui/toggle.vue

@@ -84,15 +84,15 @@ export default {
   props: {
     on: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
 
   methods: {
     toggle() {
-      const containsOnClass = this.$refs.toggle.classList.toggle("on");
-      this.$emit("change", containsOnClass);
-    }
-  }
-};
+      const containsOnClass = this.$refs.toggle.classList.toggle("on")
+      this.$emit("change", containsOnClass)
+    },
+  },
+}
 </script>

directives/textareaAutoHeight.js

@@ -1,8 +0,0 @@
-export default {
-  name: "textareaAutoHeight",
-  update({ scrollHeight, clientHeight, style }) {
-    if (scrollHeight !== clientHeight) {
-      style.minHeight = `${scrollHeight}px`;
-    }
-  }
-};

firebase.json

@@ -10,11 +10,7 @@
     "target": "postwoman",
     "public": "dist",
     "cleanUrls": true,
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ]
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
   },
   "storage": {
     "rules": "storage.rules"

firestore.indexes.json

@@ -23,4 +23,4 @@
   // ]
   "indexes": [],
   "fieldOverrides": []
-}
+}

functions/fb.js

@@ -1,221 +0,0 @@
-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: [],
-  currentCollections: [],
-  currentEnvironments: [],
-  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
-    };
-    usersCollection
-      .doc(fb.currentUser.uid)
-      .collection("feeds")
-      .add(dt)
-      .catch(e => 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
-    };
-    usersCollection
-      .doc(fb.currentUser.uid)
-      .collection("settings")
-      .doc(setting)
-      .set(st)
-      .catch(e => console.error("error updating", st, e));
-  },
-  writeHistory: async entry => {
-    const hs = entry;
-    usersCollection
-      .doc(fb.currentUser.uid)
-      .collection("history")
-      .add(hs)
-      .catch(e => 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));
-  },
-  writeCollections: async collection => {
-    const cl = {
-      updatedOn: new Date(),
-      author: fb.currentUser.uid,
-      author_name: fb.currentUser.displayName,
-      author_image: fb.currentUser.photoURL,
-      collection: collection
-    };
-    usersCollection
-      .doc(fb.currentUser.uid)
-      .collection("collections")
-      .doc("sync")
-      .set(cl)
-      .catch(e => console.error("error updating", cl, e));
-  },
-  writeEnvironments: async environment => {
-    const ev = {
-      updatedOn: new Date(),
-      author: fb.currentUser.uid,
-      author_name: fb.currentUser.displayName,
-      author_image: fb.currentUser.photoURL,
-      environment: environment
-    };
-    usersCollection
-      .doc(fb.currentUser.uid)
-      .collection("environments")
-      .doc("sync")
-      .set(ev)
-      .catch(e => console.error("error updating", ev, 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
-      };
-      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;
-      });
-
-    usersCollection
-      .doc(fb.currentUser.uid)
-      .collection("collections")
-      .onSnapshot(collectionsRef => {
-        const collections = [];
-        collectionsRef.forEach(doc => {
-          const collection = doc.data();
-          collection.id = doc.id;
-          collections.push(collection);
-        });
-        fb.currentCollections = collections[0].collection;
-      });
-
-    usersCollection
-      .doc(fb.currentUser.uid)
-      .collection("environments")
-      .onSnapshot(environmentsRef => {
-        const environments = [];
-        environmentsRef.forEach(doc => {
-          const environment = doc.data();
-          environment.id = doc.id;
-          environments.push(environment);
-        });
-        fb.currentEnvironments = environments[0].environment;
-      });
-  } else {
-    fb.currentUser = null;
-  }
-});

functions/network.js

@@ -1,42 +0,0 @@
-import AxiosStrategy from "./strategies/AxiosStrategy";
-import ExtensionStrategy, {
-  hasExtensionInstalled
-} from "./strategies/ExtensionStrategy";
-import FirefoxStrategy from "./strategies/FirefoxStrategy";
-import ChromeStrategy, {
-  hasChromeExtensionInstalled
-} from "./strategies/ChromeStrategy";
-
-const isExtensionsAllowed = ({ state }) =>
-  typeof state.postwoman.settings.EXTENSIONS_ENABLED === "undefined" ||
-  state.postwoman.settings.EXTENSIONS_ENABLED;
-
-const runAppropriateStrategy = (req, store) => {
-  if (isExtensionsAllowed(store)) {
-    if (hasExtensionInstalled()) {
-      return ExtensionStrategy(req, store);
-    }
-
-    // The following strategies are deprecated and kept to support older version of the extensions
-
-    // 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);
-    }
-  }
-
-  return AxiosStrategy(req, store);
-};
-
-const sendNetworkRequest = (req, store) =>
-  runAppropriateStrategy(req, store).finally(() =>
-    window.$nuxt.$loading.finish()
-  );
-
-export { sendNetworkRequest };

functions/package-lock.json

@@ -572,9 +572,9 @@
       }
     },
     "dot-prop": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.1.0.tgz",
-      "integrity": "sha512-n1oC6NBF+KM9oVXtjmen4Yo7HyAVWV2UUl50dCYJdw2924K6dX9bf9TTTWaKtYlRn0FEtxG27KS80ayVLixxJA==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
+      "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==",
       "optional": true,
       "requires": {
         "is-obj": "^2.0.0"
@@ -1233,9 +1233,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
     },
     "lodash.at": {
       "version": "4.6.0",

functions/strategies/AxiosStrategy.js

@@ -1,23 +0,0 @@
-import axios from "axios";
-
-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;

functions/strategies/ChromeStrategy.js

@@ -1,63 +0,0 @@
-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 = () =>
-  document.getElementById("chromePWExtensionDetect") !== null;
-
-const chromeWithoutProxy = (req, _store) =>
-  new Promise((resolve, reject) => {
-    chrome.runtime.sendMessage(
-      EXTENSION_ID,
-      {
-        messageType: "send-req",
-        data: {
-          config: req
-        }
-      },
-      ({ data }) => {
-        if (data.error) {
-          reject(data.error);
-        } else {
-          resolve(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
-          }
-        }
-      },
-      ({ data }) => {
-        if (data.error) {
-          reject(error);
-        } else {
-          resolve(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;

functions/strategies/ExtensionStrategy.js

@@ -1,26 +0,0 @@
-export const hasExtensionInstalled = () =>
-  typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined";
-
-const extensionWithProxy = async (req, { state }) => {
-  const { data } = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest({
-    method: "post",
-    url:
-      state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
-    data: req
-  });
-  return data;
-};
-
-const extensionWithoutProxy = async (req, _store) => {
-  const res = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest(req);
-  return res;
-};
-
-const extensionStrategy = (req, store) => {
-  if (store.state.postwoman.settings.PROXY_ENABLED) {
-    return extensionWithProxy(req, store);
-  }
-  return extensionWithoutProxy(req, store);
-};
-
-export default extensionStrategy;

functions/strategies/FirefoxStrategy.js

@@ -1,50 +0,0 @@
-const firefoxWithProxy = (req, { state }) =>
-  new Promise((resolve, reject) => {
-    const eventListener = event => {
-      window.removeEventListener("firefoxExtSendRequestComplete", event);
-
-      if (event.detail.error) {
-        reject(JSON.parse(event.detail.error));
-      } else {
-        resolve(JSON.parse(event.detail.response).data);
-      }
-    };
-
-    window.addEventListener("firefoxExtSendRequestComplete", eventListener);
-
-    window.firefoxExtSendRequest({
-      method: "post",
-      url:
-        state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
-      data: 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;

functions/templating.js

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

helpers/editorutils.js

@@ -3,9 +3,9 @@ const mimeToMode = {
   "text/html": "html",
   "application/xml": "xml",
   "application/hal+json": "json",
-  "application/json": "json"
+  "application/json": "json",
 }
 
 export function getEditorLangForMimeType(mimeType) {
-  return mimeToMode[mimeType] || "plain_text";
+  return mimeToMode[mimeType] || "plain_text"
 }

helpers/fb.js

@@ -0,0 +1,225 @@
+import firebase from "firebase/app"
+import "firebase/firestore"
+import "firebase/auth"
+
+// Initialize Firebase, copied from cloud console
+const firebaseConfig = {
+  apiKey: process.env.API_KEY || "AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM",
+  authDomain: process.env.AUTH_DOMAIN || "postwoman-api.firebaseapp.com",
+  databaseURL: process.env.DATABASE_URL || "https://postwoman-api.firebaseio.com",
+  projectId: process.env.PROJECT_ID || "postwoman-api",
+  storageBucket: process.env.STORAGE_BUCKET || "postwoman-api.appspot.com",
+  messagingSenderId: process.env.MESSAGING_SENDER_ID || "421993993223",
+  appId: process.env.APP_ID || "1:421993993223:web:ec0baa8ee8c02ffa1fc6a2",
+  measurementId: process.env.MEASUREMENT_ID || "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: null,
+  currentFeeds: [],
+  currentSettings: [],
+  currentHistory: [],
+  currentCollections: [],
+  currentEnvironments: [],
+  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,
+    }
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("feeds")
+      .add(dt)
+      .catch((e) => 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,
+    }
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("settings")
+      .doc(setting)
+      .set(st)
+      .catch((e) => console.error("error updating", st, e))
+  },
+  writeHistory: async (entry) => {
+    const hs = entry
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("history")
+      .add(hs)
+      .catch((e) => 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))
+  },
+  writeCollections: async (collection) => {
+    const cl = {
+      updatedOn: new Date(),
+      author: fb.currentUser.uid,
+      author_name: fb.currentUser.displayName,
+      author_image: fb.currentUser.photoURL,
+      collection,
+    }
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("collections")
+      .doc("sync")
+      .set(cl)
+      .catch((e) => console.error("error updating", cl, e))
+  },
+  writeEnvironments: async (environment) => {
+    const ev = {
+      updatedOn: new Date(),
+      author: fb.currentUser.uid,
+      author_name: fb.currentUser.displayName,
+      author_image: fb.currentUser.photoURL,
+      environment,
+    }
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("environments")
+      .doc("sync")
+      .set(ev)
+      .catch((e) => console.error("error updating", ev, 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,
+      }
+      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
+      })
+
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("collections")
+      .onSnapshot((collectionsRef) => {
+        const collections = []
+        collectionsRef.forEach((doc) => {
+          const collection = doc.data()
+          collection.id = doc.id
+          collections.push(collection)
+        })
+        if (collections.length > 0) {
+          fb.currentCollections = collections[0].collection
+        }
+      })
+
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("environments")
+      .onSnapshot((environmentsRef) => {
+        const environments = []
+        environmentsRef.forEach((doc) => {
+          const environment = doc.data()
+          environment.id = doc.id
+          environments.push(environment)
+        })
+        if (environments.length > 0) {
+          fb.currentEnvironments = environments[0].environment
+        }
+      })
+  } else {
+    fb.currentUser = null
+  }
+})

helpers/headers.js

@@ -120,5 +120,5 @@ export const commonHeaders = [
   "X-Pingback",
   "X-Requested-With",
   "X-Robots-Tag",
-  "X-UA-Compatible"
-];
+  "X-UA-Compatible",
+]

helpers/jsonParse.js

@@ -0,0 +1,310 @@
+/**
+ *  Copyright (c) 2019 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+/**
+ * This JSON parser simply walks the input, generating an AST. Use this in lieu
+ * of JSON.parse if you need character offset parse errors and an AST parse tree
+ * with location information.
+ *
+ * If an error is encountered, a SyntaxError will be thrown, with properties:
+ *
+ *   - message: string
+ *   - start: int - the start inclusive offset of the syntax error
+ *   - end: int - the end exclusive offset of the syntax error
+ *
+ */
+export default function jsonParse(str) {
+  string = str
+  strLen = str.length
+  start = end = lastEnd = -1
+  ch()
+  lex()
+  const ast = parseObj()
+  expect("EOF")
+  return ast
+}
+
+let string
+let strLen
+let start
+let end
+let lastEnd
+let code
+let kind
+
+function parseObj() {
+  const nodeStart = start
+  const members = []
+  expect("{")
+  if (!skip("}")) {
+    do {
+      members.push(parseMember())
+    } while (skip(","))
+    expect("}")
+  }
+  return {
+    kind: "Object",
+    start: nodeStart,
+    end: lastEnd,
+    members,
+  }
+}
+
+function parseMember() {
+  const nodeStart = start
+  const key = kind === "String" ? curToken() : null
+  expect("String")
+  expect(":")
+  const value = parseVal()
+  return {
+    kind: "Member",
+    start: nodeStart,
+    end: lastEnd,
+    key,
+    value,
+  }
+}
+
+function parseArr() {
+  const nodeStart = start
+  const values = []
+  expect("[")
+  if (!skip("]")) {
+    do {
+      values.push(parseVal())
+    } while (skip(","))
+    expect("]")
+  }
+  return {
+    kind: "Array",
+    start: nodeStart,
+    end: lastEnd,
+    values,
+  }
+}
+
+function parseVal() {
+  switch (kind) {
+    case "[":
+      return parseArr()
+    case "{":
+      return parseObj()
+    case "String":
+    case "Number":
+    case "Boolean":
+    case "Null":
+      const token = curToken()
+      lex()
+      return token
+  }
+  return expect("Value")
+}
+
+function curToken() {
+  return { kind, start, end, value: JSON.parse(string.slice(start, end)) }
+}
+
+function expect(str) {
+  if (kind === str) {
+    lex()
+    return
+  }
+
+  let found
+  if (kind === "EOF") {
+    found = "[end of file]"
+  } else if (end - start > 1) {
+    found = `\`${string.slice(start, end)}\``
+  } else {
+    const match = string.slice(start).match(/^.+?\b/)
+    found = `\`${match ? match[0] : string[start]}\``
+  }
+
+  throw syntaxError(`Expected ${str} but found ${found}.`)
+}
+
+function syntaxError(message) {
+  return { message, start, end }
+}
+
+function skip(k) {
+  if (kind === k) {
+    lex()
+    return true
+  }
+}
+
+function ch() {
+  if (end < strLen) {
+    end++
+    code = end === strLen ? 0 : string.charCodeAt(end)
+  }
+}
+
+function lex() {
+  lastEnd = end
+
+  while (code === 9 || code === 10 || code === 13 || code === 32) {
+    ch()
+  }
+
+  if (code === 0) {
+    kind = "EOF"
+    return
+  }
+
+  start = end
+
+  switch (code) {
+    // "
+    case 34:
+      kind = "String"
+      return readString()
+    // -, 0-9
+    case 45:
+    case 48:
+    case 49:
+    case 50:
+    case 51:
+    case 52:
+    case 53:
+    case 54:
+    case 55:
+    case 56:
+    case 57:
+      kind = "Number"
+      return readNumber()
+    // f
+    case 102:
+      if (string.slice(start, start + 5) !== "false") {
+        break
+      }
+      end += 4
+      ch()
+
+      kind = "Boolean"
+      return
+    // n
+    case 110:
+      if (string.slice(start, start + 4) !== "null") {
+        break
+      }
+      end += 3
+      ch()
+
+      kind = "Null"
+      return
+    // t
+    case 116:
+      if (string.slice(start, start + 4) !== "true") {
+        break
+      }
+      end += 3
+      ch()
+
+      kind = "Boolean"
+      return
+  }
+
+  kind = string[start]
+  ch()
+}
+
+function readString() {
+  ch()
+  while (code !== 34 && code > 31) {
+    if (code === 92) {
+      // \
+      ch()
+      switch (code) {
+        case 34: // "
+        case 47: // /
+        case 92: // \
+        case 98: // b
+        case 102: // f
+        case 110: // n
+        case 114: // r
+        case 116: // t
+          ch()
+          break
+        case 117: // u
+          ch()
+          readHex()
+          readHex()
+          readHex()
+          readHex()
+          break
+        default:
+          throw syntaxError("Bad character escape sequence.")
+      }
+    } else if (end === strLen) {
+      throw syntaxError("Unterminated string.")
+    } else {
+      ch()
+    }
+  }
+
+  if (code === 34) {
+    ch()
+    return
+  }
+
+  throw syntaxError("Unterminated string.")
+}
+
+function readHex() {
+  if (
+    (code >= 48 && code <= 57) || // 0-9
+    (code >= 65 && code <= 70) || // A-F
+    (code >= 97 && code <= 102) // a-f
+  ) {
+    return ch()
+  }
+  throw syntaxError("Expected hexadecimal digit.")
+}
+
+function readNumber() {
+  if (code === 45) {
+    // -
+    ch()
+  }
+
+  if (code === 48) {
+    // 0
+    ch()
+  } else {
+    readDigits()
+  }
+
+  if (code === 46) {
+    // .
+    ch()
+    readDigits()
+  }
+
+  if (code === 69 || code === 101) {
+    // E e
+    ch()
+    if (code === 43 || code === 45) {
+      // + -
+      ch()
+    }
+    readDigits()
+  }
+}
+
+function readDigits() {
+  if (code < 48 || code > 57) {
+    // 0 - 9
+    throw syntaxError("Expected decimal digit.")
+  }
+  do {
+    ch()
+  } while (code >= 48 && code <= 57) // 0 - 9
+}

helpers/lenses/htmlLens.js

@@ -0,0 +1,8 @@
+const htmlLens = {
+  lensName: "HTML",
+  supportedContentTypes: ["text/html"],
+  renderer: "htmlres",
+  rendererImport: () => import("~/components/lenses/renderers/HTMLLensRenderer"),
+}
+
+export default htmlLens

helpers/lenses/imageLens.js

@@ -0,0 +1,16 @@
+const imageLens = {
+  lensName: "Image",
+  supportedContentTypes: [
+    "image/gif",
+    "image/jpeg",
+    "image/png",
+    "image/bmp",
+    "image/svg+xml",
+    "image/x-icon",
+    "image/vnd.microsoft.icon",
+  ],
+  renderer: "imageres",
+  rendererImport: () => import("~/components/lenses/renderers/ImageLensRenderer"),
+}
+
+export default imageLens

helpers/lenses/jsonLens.js

@@ -0,0 +1,8 @@
+const jsonLens = {
+  lensName: "JSON",
+  supportedContentTypes: ["application/json", "application/hal+json", "application/vnd.api+json"],
+  renderer: "json",
+  rendererImport: () => import("~/components/lenses/renderers/JSONLensRenderer"),
+}
+
+export default jsonLens

helpers/lenses/lenses.js

@@ -0,0 +1,37 @@
+import jsonLens from "./jsonLens"
+import rawLens from "./rawLens"
+import imageLens from "./imageLens"
+import htmlLens from "./htmlLens"
+import xmlLens from "./xmlLens"
+
+const lenses = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
+
+export function getSuitableLenses(response) {
+  const result = []
+
+  if (response && response.headers && response.headers["content-type"]) {
+    const properContentType = response.headers["content-type"].split(";")[0]
+
+    for (const lens of lenses) {
+      if (
+        lens.supportedContentTypes === null ||
+        lens.supportedContentTypes.includes(properContentType)
+      ) {
+        result.push(lens)
+      }
+    }
+  } else {
+    // We don't know the content type, so lets just add rawLens
+    result.push(rawLens)
+  }
+
+  return result
+}
+
+export function getLensRenderers() {
+  const response = {}
+  for (const lens of lenses) {
+    response[lens.renderer] = lens.rendererImport
+  }
+  return response
+}

helpers/lenses/rawLens.js

@@ -0,0 +1,8 @@
+const rawLens = {
+  lensName: "Raw",
+  supportedContentTypes: null,
+  renderer: "raw",
+  rendererImport: () => import("~/components/lenses/renderers/RawLensRenderer"),
+}
+
+export default rawLens

helpers/lenses/xmlLens.js

@@ -0,0 +1,8 @@
+const xmlLens = {
+  lensName: "XML",
+  supportedContentTypes: ["application/xml", "image/svg+xml", "text/xml", "application/rss+xml"],
+  renderer: "xmlres",
+  rendererImport: () => import("~/components/lenses/renderers/XMLLensRenderer"),
+}
+
+export default xmlLens

helpers/network.js

@@ -0,0 +1,28 @@
+import AxiosStrategy, { cancelRunningAxiosRequest } from "./strategies/AxiosStrategy"
+import ExtensionStrategy, {
+  cancelRunningExtensionRequest,
+  hasExtensionInstalled,
+} from "./strategies/ExtensionStrategy"
+
+export const cancelRunningRequest = (store) => {
+  if (isExtensionsAllowed(store) && hasExtensionInstalled()) {
+    cancelRunningExtensionRequest()
+  } else {
+    cancelRunningAxiosRequest()
+  }
+}
+
+const isExtensionsAllowed = ({ state }) =>
+  typeof state.postwoman.settings.EXTENSIONS_ENABLED === "undefined" ||
+  state.postwoman.settings.EXTENSIONS_ENABLED
+
+const runAppropriateStrategy = (req, store) => {
+  if (isExtensionsAllowed(store) && hasExtensionInstalled()) {
+    return ExtensionStrategy(req, store)
+  }
+
+  return AxiosStrategy(req, store)
+}
+
+export const sendNetworkRequest = (req, store) =>
+  runAppropriateStrategy(req, store).finally(() => window.$nuxt.$loading.finish())

helpers/platformutils.js

@@ -0,0 +1,3 @@
+export function getPlatformSpecialKey() {
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl"
+}

helpers/postwomanTesting.js

@@ -1,13 +1,13 @@
-const PASS = "PASS";
-const FAIL = "FAIL";
-const ERROR = "ERROR";
+const PASS = "PASS"
+const FAIL = "FAIL"
+const ERROR = "ERROR"
 
 const styles = {
   [PASS]: { icon: "check", class: "success-response" },
   [FAIL]: { icon: "close", class: "cl-error-response" },
   [ERROR]: { icon: "close", class: "cl-error-response" },
-  none: { icon: "", class: "" }
-};
+  none: { icon: "", class: "" },
+}
 
 // TODO: probably have to use a more global state for `test`
 
@@ -18,158 +18,130 @@ export default function runTestScriptWithVariables(script, variables) {
     _report: "",
     expect(value) {
       try {
-        return expect(value, this._testReports);
+        return expect(value, this._testReports)
       } catch (e) {
-        pw._testReports.push({ result: ERROR, message: e });
+        pw._testReports.push({ result: ERROR, message: e })
       }
     },
-    test: (descriptor, func) => test(descriptor, func, pw._testReports)
+    test: (descriptor, func) => test(descriptor, func, pw._testReports),
     // globals that the script is allowed to have access to.
-  };
-  Object.assign(pw, variables);
+  }
+  Object.assign(pw, variables)
 
   // run pre-request script within this function so that it has access to the pw object.
-  new Function("pw", script)(pw);
+  new Function("pw", script)(pw)
   //
-  const testReports = pw._testReports.map(item => {
+  const testReports = pw._testReports.map((item) => {
     if (item.result) {
-      item.styles = styles[item.result];
+      item.styles = styles[item.result]
     } else {
-      item.styles = styles.none;
+      item.styles = styles.none
     }
-    return item;
-  });
-  return { report: pw._report, errors: pw._errors, testResults: testReports };
+    return item
+  })
+  return { report: pw._report, errors: pw._errors, testResults: testReports }
 }
 
 function test(descriptor, func, _testReports) {
-  _testReports.push({ startBlock: descriptor });
+  _testReports.push({ startBlock: descriptor })
   try {
-    func();
+    func()
   } catch (e) {
-    _testReports.push({ result: ERROR, message: e });
+    _testReports.push({ result: ERROR, message: e })
   }
-  _testReports.push({ endBlock: true });
+  _testReports.push({ endBlock: true })
 
   // TODO: Organize and generate text report of each {descriptor: true} section in testReports.
   // add checkmark or x depending on if each testReport is pass=true or pass=false
 }
 
 function expect(expectValue, _testReports) {
-  return new Expectation(expectValue, null, _testReports);
+  return new Expectation(expectValue, null, _testReports)
 }
 
 class Expectation {
   constructor(expectValue, _not, _testReports) {
-    this.expectValue = expectValue;
-    this.not = _not || new Expectation(this.expectValue, true, _testReports);
-    this._testReports = _testReports; // this values is used within Test.it, which wraps Expectation and passes _testReports value.
-    this._satisfies = function(expectValue, targetValue) {
+    this.expectValue = expectValue
+    this.not = _not || new Expectation(this.expectValue, true, _testReports)
+    this._testReports = _testReports // this values is used within Test.it, which wraps Expectation and passes _testReports value.
+    this._satisfies = function (expectValue, targetValue) {
       // Used for testing if two values match the expectation, which could be === OR !==, depending on if not
       // was used. Expectation#_satisfies prevents the need to have an if(this.not) branch in every test method.
       // Signature is _satisfies([expectValue,] targetValue): if only one argument is given, it is assumed the targetValue, and expectValue is set to this.expectValue
       if (!targetValue) {
-        targetValue = expectValue;
-        expectValue = this.expectValue;
+        targetValue = expectValue
+        expectValue = this.expectValue
       }
       if (this.not === true) {
         // test the inverse. this.not is always truthly, but an Expectation that is inverted will always be strictly `true`
-        return expectValue !== targetValue;
+        return expectValue !== targetValue
       } else {
-        return expectValue === targetValue;
+        return expectValue === targetValue
       }
-    };
+    }
   }
   _fmtNot(message) {
     // given a string with "(not)" in it, replaces with "not" or "", depending if the expectation is expecting the positive or inverse (this._not)
     if (this.not === true) {
-      return message.replace("(not)", "not ");
+      return message.replace("(not)", "not ")
     } else {
-      return message.replace("(not)", "");
+      return message.replace("(not)", "")
     }
   }
   _fail(message) {
-    this._testReports.push({ result: FAIL, message });
+    this._testReports.push({ result: FAIL, message })
   }
   _pass(message) {
-    this._testReports.push({ result: PASS });
+    this._testReports.push({ result: PASS })
   }
   // TEST METHODS DEFINED BELOW
   // these are the usual methods that would follow expect(...)
   toBe(value) {
     return this._satisfies(value)
       ? this._pass()
-      : this._fail(
-          this._fmtNot(`Expected ${this.expectValue} (not)to be ${value}`)
-        );
+      : this._fail(this._fmtNot(`Expected ${this.expectValue} (not)to be ${value}`))
   }
   toHaveProperty(value) {
     return this._satisfies(this.expectValue.hasOwnProperty(value), true)
       ? this._pass()
       : this._fail(
-          this._fmtNot(
-            `Expected object ${this.expectValue} to (not)have property ${value}`
-          )
-        );
+          this._fmtNot(`Expected object ${this.expectValue} to (not)have property ${value}`)
+        )
   }
   toBeLevel2xx() {
-    const code = parseInt(this.expectValue);
+    const code = parseInt(this.expectValue)
     if (Number.isNaN(code)) {
-      return this._fail(
-        `Expected 200-level status but could not parse value ${this.expectValue}`
-      );
+      return this._fail(`Expected 200-level status but could not parse value ${this.expectValue}`)
     }
     return this._satisfies(code >= 200 && code < 300)
       ? this._pass()
-      : this._fail(
-          this._fmtNot(
-            `Expected ${this.expectValue} to (not)be 200-level status`
-          )
-        );
+      : this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 200-level status`))
   }
   toBeLevel3xx() {
-    const code = parseInt(this.expectValue);
+    const code = parseInt(this.expectValue)
     if (Number.isNaN(code)) {
-      return this._fail(
-        `Expected 300-level status but could not parse value ${this.expectValue}`
-      );
+      return this._fail(`Expected 300-level status but could not parse value ${this.expectValue}`)
     }
     return this._satisfies(code >= 300 && code < 400)
       ? this._pass()
-      : this._fail(
-          this._fmtNot(
-            `Expected ${this.expectValue} to (not)be 300-level status`
-          )
-        );
+      : this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 300-level status`))
   }
   toBeLevel4xx() {
-    const code = parseInt(this.expectValue);
+    const code = parseInt(this.expectValue)
     if (Number.isNaN(code)) {
-      return this._fail(
-        `Expected 400-level status but could not parse value ${this.expectValue}`
-      );
+      return this._fail(`Expected 400-level status but could not parse value ${this.expectValue}`)
     }
     return this._satisfies(code >= 400 && code < 500)
       ? this._pass()
-      : this._fail(
-          this._fmtNot(
-            `Expected ${this.expectValue} to (not)be 400-level status`
-          )
-        );
+      : this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 400-level status`))
   }
   toBeLevel5xx() {
-    const code = parseInt(this.expectValue);
+    const code = parseInt(this.expectValue)
     if (Number.isNaN(code)) {
-      return this._fail(
-        `Expected 500-level status but could not parse value ${this.expectValue}`
-      );
+      return this._fail(`Expected 500-level status but could not parse value ${this.expectValue}`)
     }
     return this._satisfies(code >= 500 && code < 600)
       ? this._pass()
-      : this._fail(
-          this._fmtNot(
-            `Expected ${this.expectValue} to (not)be 500-level status`
-          )
-        );
+      : this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 500-level status`))
   }
 }