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

@@ -123,6 +123,15 @@
       "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,

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

.vscode/settings.json

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

CHANGELOG.md

@@ -1,31 +1,289 @@
 # 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)
 
-**Implemented enhancements:**
-
-- Support preview of JSON:API's "application/vnd.api+json" Content-Type [\#694](https://github.com/liyasthomas/postwoman/issues/694)
-- Support SocketIO connections on Realtime page [\#611](https://github.com/liyasthomas/postwoman/issues/611)
-- 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)
-- Added the ability to prettify GraphQL queries [\#650](https://github.com/liyasthomas/postwoman/pull/650) ([AndrewBastin](https://github.com/AndrewBastin))
-- Updated messages for when GraphQL Get Schema fails [\#633](https://github.com/liyasthomas/postwoman/pull/633) ([AndrewBastin](https://github.com/AndrewBastin))
-- Ignore empty GQL Variable Strings [\#629](https://github.com/liyasthomas/postwoman/pull/629) ([AndrewBastin](https://github.com/AndrewBastin))
-- 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))
-- JSON linting in the code editor [\#605](https://github.com/liyasthomas/postwoman/pull/605) ([AndrewBastin](https://github.com/AndrewBastin))
-- GraphQL page improvements, and more [\#602](https://github.com/liyasthomas/postwoman/pull/602) ([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))
-
 **Fixed bugs:**
 
 - Test script is not run after failing request [\#644](https://github.com/liyasthomas/postwoman/issues/644)
@@ -35,10 +293,11 @@
 **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)
+- 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)
@@ -46,11 +305,20 @@
 - 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)
+- 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:**
 
@@ -81,6 +349,7 @@
 - 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))
@@ -89,10 +358,15 @@
 - 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))
@@ -100,31 +374,18 @@
 - 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))
-- Added settings toggle for enabling/disabling auto scrolling \(scrollInto functionality\) [\#595](https://github.com/liyasthomas/postwoman/pull/595) ([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))
-- 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)
@@ -137,15 +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))
@@ -157,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))
@@ -172,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))
@@ -181,6 +455,7 @@
 - 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))
 - even merge [\#528](https://github.com/liyasthomas/postwoman/pull/528) ([liyasthomas](https://github.com/liyasthomas))
 
@@ -188,25 +463,6 @@
 
 [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)
-- \[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)
-- 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))
-- 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)
@@ -218,13 +474,22 @@
 
 - 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:**
 
@@ -235,66 +500,37 @@
 - 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:**
-
-- What about additional loaders: + Pug, TypeScript, SASS, material-vue ? [\#467](https://github.com/liyasthomas/postwoman/issues/467)
-- 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))
-- 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))
-
 **Fixed bugs:**
 
 - WebSocket page freezes when pasting long URL [\#471](https://github.com/liyasthomas/postwoman/issues/471)
@@ -314,40 +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)
-- ⏬ Import a Postman's Collection [\#333](https://github.com/liyasthomas/postwoman/issues/333)
+- 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:**
@@ -364,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))
@@ -372,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))
@@ -379,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))
@@ -399,62 +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)
@@ -477,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:**
 
@@ -516,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))
@@ -530,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))
 
@@ -554,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,178 +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. SocketIO is popular websocket solution.
+🌩 **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
+
+- 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_
 
@@ -204,34 +224,37 @@ _**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
- - Environments
- - Notes
+
+- 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.
 
@@ -240,9 +263,10 @@ _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
+
+- 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).**
 
@@ -250,46 +274,43 @@ _Notes are only available for signed-in users_
 
 [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)
 
@@ -301,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`).
@@ -313,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)
 
@@ -325,24 +346,26 @@ 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-13-orange.svg?style=flat-square)](#contributors-)
+
+[![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 -->
@@ -365,26 +388,28 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
     <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)
+- [dev.to 👩‍💻👨‍💻](https://dev.to)
 
 ### Financial Contributors
 
-Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/postwoman/contribute)]
+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>
@@ -403,49 +428,104 @@ Support this project with your organization. Your logo will show up here with a
 
 ### Code Contributors
 
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+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

@@ -9,7 +9,7 @@
   // 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-v48.woff2") format("woff2");
+  src: url("~static/fonts/material-icons-v52.woff2") format("woff2");
 }
 
 .material-icons {
@@ -40,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 */
@@ -53,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 */
@@ -66,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

@@ -121,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;
@@ -138,93 +130,6 @@ footer {
   padding: 0 16px;
 }
 
-.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;
-    height: 52px;
-
-    &: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);
-        }
-      }
-    }
-  }
-}
-
 h1,
 h2,
 h3,
@@ -235,15 +140,19 @@ h4 {
   font-weight: 700;
 }
 
-hr {
-  border-bottom: 1px dashed var(--brd-color);
-  margin: 16px 0;
+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);
@@ -344,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 {
@@ -364,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 {
@@ -383,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;
@@ -396,6 +316,7 @@ button {
   span {
     display: inline-flex;
     margin-left: 8px;
+    text-align: left;
   }
 
   &:not([disabled]):hover,
@@ -449,67 +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;
-
-  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:target,
 section:target {
   animation: highlight 2s ease;
@@ -590,6 +450,7 @@ pre {
 
   input {
     text-transform: uppercase;
+    min-width: 128px;
   }
 
   .trigger {
@@ -690,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 {
@@ -703,7 +568,7 @@ ol li {
 
   * {
     display: inline-flex;
-    flex-flow: row wrap;
+    flex-flow: row nowrap;
     align-items: center;
     justify-content: center;
   }
@@ -714,7 +579,7 @@ ol li {
 }
 
 .show-on-large-screen {
-  display: inline-flex;
+  display: flex;
   flex: 1;
 }
 
@@ -791,14 +656,14 @@ ol li {
     z-index: 10001;
     transform: translateX(-50%);
     box-shadow: 0 4px 24px rgba(black, 0.2);
-    transition: all .2s ease-in-out;
+    transition: all 0.2s ease-in-out;
   }
 }
 
 section {
   display: flex;
   flex-wrap: wrap;
-  border-radius: 16px;
+  border-radius: 8px;
 }
 
 .toasted-container .toasted {
@@ -843,44 +708,6 @@ section {
     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;
   }
@@ -921,3 +748,37 @@ section {
     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

@@ -7,7 +7,7 @@ import * as querystring from "querystring"
  * output this: 'msg1=value1&msg2=value2'
  * @param dataArguments
  */
-const joinDataArguments = dataArguments => {
+const joinDataArguments = (dataArguments) => {
   let data = ""
   dataArguments.forEach((argument, i) => {
     if (i === 0) {
@@ -19,7 +19,7 @@ const joinDataArguments = dataArguments => {
   return data
 }
 
-const parseCurlCommand = curlCommand => {
+const parseCurlCommand = (curlCommand) => {
   let newlineFound = /\r|\n/.exec(curlCommand)
   if (newlineFound) {
     // remove newlines
@@ -47,7 +47,7 @@ const parseCurlCommand = curlCommand => {
   }
   let headers
 
-  const parseHeaders = headerFieldName => {
+  const parseHeaders = (headerFieldName) => {
     if (parsedArguments[headerFieldName]) {
       if (!headers) {
         headers = {}
@@ -55,7 +55,7 @@ const parseCurlCommand = curlCommand => {
       if (!Array.isArray(parsedArguments[headerFieldName])) {
         parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]]
       }
-      parsedArguments[headerFieldName].forEach(header => {
+      parsedArguments[headerFieldName].forEach((header) => {
         if (header.includes("Cookie")) {
           // stupid javascript tricks: closure
           cookieString = header
@@ -95,7 +95,7 @@ const parseCurlCommand = curlCommand => {
     if (!Array.isArray(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
@@ -103,7 +103,7 @@ const parseCurlCommand = curlCommand => {
   }
   if (cookieString) {
     const cookieParseOptions = {
-      decode: s => s,
+      decode: (s) => s,
     }
     // separate out cookie headers into separate data structure
     // note: cookie is case insensitive

assets/js/oauth.js

@@ -12,7 +12,7 @@ const redirectUri = `${window.location.origin}/`
 
 const sendPostRequest = async (url, params) => {
   const body = Object.keys(params)
-    .map(key => `${key}=${params[key]}`)
+    .map((key) => `${key}=${params[key]}`)
     .join("&")
   const options = {
     method: "post",
@@ -38,11 +38,11 @@ const sendPostRequest = async (url, params) => {
  * @returns {Object}
  */
 
-const parseQueryString = searchQuery => {
+const parseQueryString = (searchQuery) => {
   if (searchQuery === "") {
     return {}
   }
-  const segments = searchQuery.split("&").map(s => s.split("="))
+  const segments = searchQuery.split("&").map((s) => s.split("="))
   const queryString = segments.reduce((obj, el) => ({ ...obj, [el[0]]: el[1] }), {})
   return queryString
 }
@@ -53,7 +53,7 @@ const parseQueryString = searchQuery => {
  * @returns {Object}
  */
 
-const getTokenConfiguration = async endpoint => {
+const getTokenConfiguration = async (endpoint) => {
   const options = {
     method: "GET",
     headers: {
@@ -81,7 +81,7 @@ 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("")
+  return Array.from(array, (dec) => `0${dec.toString(16)}`.substr(-2)).join("")
 }
 
 /**
@@ -90,7 +90,7 @@ const generateRandomString = () => {
  * @returns {Promise<ArrayBuffer>}
  */
 
-const sha256 = plain => {
+const sha256 = (plain) => {
   const encoder = new TextEncoder()
   const data = encoder.encode(plain)
   return window.crypto.subtle.digest("SHA-256", data)
@@ -121,7 +121,7 @@ const base64urlencode = (
  * @returns {String}
  */
 
-const pkceChallengeFromVerifier = async v => {
+const pkceChallengeFromVerifier = async (v) => {
   const hashed = await sha256(v)
   return base64urlencode(hashed)
 }

assets/js/pwa.js

@@ -18,7 +18,7 @@ export default () => {
 
   //*** If the PWA has not been installed, show the install PWA prompt.. ***//
   let deferredPrompt = null
-  window.addEventListener("beforeinstallprompt", event => {
+  window.addEventListener("beforeinstallprompt", (event) => {
     deferredPrompt = event
 
     // Show the install button if the prompt appeared.
@@ -28,7 +28,7 @@ export default () => {
   })
 
   // When the app is installed, remove install prompts.
-  window.addEventListener("appinstalled", event => {
+  window.addEventListener("appinstalled", (event) => {
     localStorage.setItem("pwaInstalled", "yes")
     pwaInstalled = true
     document.getElementById("installPWA").style.display = "none"

build.js

@@ -1,14 +1,11 @@
 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 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 IS_DEV_MODE = process.argv.includes("--dev")
 
 try {
   ;(async () => {
@@ -28,7 +25,7 @@ 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,
@@ -39,16 +36,16 @@ try {
     }
 
     // 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))

components/collections/addCollection.vue

@@ -43,14 +43,14 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   props: {
     show: Boolean,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -78,6 +78,7 @@ export default {
     },
     hideModal() {
       this.$emit("hide-modal")
+      this.$data.name = undefined
     },
   },
 }

components/collections/addFolder.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     show: Boolean,
@@ -50,7 +52,7 @@ export default {
     collectionIndex: Number,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -64,6 +66,14 @@ export default {
         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")

components/collections/collection.vue

@@ -1,39 +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">
@@ -43,6 +51,7 @@
             :folder="folder"
             :folderIndex="index"
             :collection-index="collectionIndex"
+            :doc="doc"
             @edit-folder="editFolder(collectionIndex, folder, index)"
             @edit-request="$emit('edit-request', $event)"
           />
@@ -58,6 +67,7 @@
             :collection-index="collectionIndex"
             :folder-index="-1"
             :request-index="index"
+            :doc="doc"
             @edit-request="
               $emit('edit-request', {
                 request,
@@ -87,6 +97,8 @@ ul li {
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   components: {
     folder: () => import("./folder"),
@@ -95,6 +107,7 @@ export default {
   props: {
     collectionIndex: Number,
     collection: Object,
+    doc: Boolean,
   },
   data() {
     return {
@@ -103,6 +116,13 @@ export default {
     }
   },
   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
     },
@@ -111,6 +131,7 @@ export default {
       this.$store.commit("postwoman/removeCollection", {
         collectionIndex: this.collectionIndex,
       })
+      this.syncCollections()
     },
     editFolder(collectionIndex, folder, folderIndex) {
       this.$emit("edit-folder", { collectionIndex, folder, folderIndex })

components/collections/editCollection.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     show: Boolean,
@@ -50,7 +52,7 @@ export default {
     editingCollectionIndex: Number,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -58,6 +60,13 @@ export default {
     }
   },
   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(this.$t("invalid_collection_name"))
@@ -72,6 +81,7 @@ export default {
         collectionIndex: this.$props.editingCollectionIndex,
       })
       this.$emit("hide-modal")
+      this.syncCollections()
     },
     hideModal() {
       this.$emit("hide-modal")

components/collections/editFolder.vue

@@ -38,6 +38,8 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     show: Boolean,
@@ -47,7 +49,7 @@ export default {
     folderIndex: Number,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -55,6 +57,13 @@ export default {
     }
   },
   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,
@@ -62,6 +71,7 @@ export default {
         folderIndex: this.$props.folderIndex,
       })
       this.hideModal()
+      this.syncCollections()
     },
     hideModal() {
       this.$emit("hide-modal")

components/collections/editRequest.vue

@@ -69,6 +69,8 @@
 </template>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     show: Boolean,
@@ -78,7 +80,7 @@ export default {
     requestIndex: Number,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -106,6 +108,13 @@ export default {
     },
   },
   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
 
@@ -130,6 +139,7 @@ export default {
       })
 
       this.hideModal()
+      this.syncCollections()
     },
     hideModal() {
       this.$emit("hide-modal")

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,6 +38,7 @@
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
             :request-index="index"
+            :doc="doc"
             @edit-request="
               $emit('edit-request', {
                 request,
@@ -70,11 +71,14 @@ ul li {
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     folder: Object,
     collectionIndex: Number,
     folderIndex: Number,
+    doc: Boolean,
   },
   components: {
     request: () => import("./request"),
@@ -85,6 +89,13 @@ export default {
     }
   },
   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
     },
@@ -97,6 +108,7 @@ export default {
         collectionIndex: this.collectionIndex,
         folderIndex: this.folderIndex,
       })
+      this.syncCollections()
     },
     editFolder() {
       this.$emit("edit-folder")

components/collections/importExportCollections.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
@@ -88,7 +88,7 @@ export default {
     show: Boolean,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   computed: {
     collectionJson() {
@@ -107,7 +107,7 @@ export default {
     },
     replaceWithJSON() {
       let reader = new FileReader()
-      reader.onload = event => {
+      reader.onload = (event) => {
         let content = event.target.result
         let collections = JSON.parse(content)
         if (collections[0]) {
@@ -120,14 +120,15 @@ export default {
         } else {
           return this.failedImport()
         }
-        this.$store.commit("postwoman/importCollections", collections)
+        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 => {
+      reader.onload = (event) => {
         let content = event.target.result
         let collections = JSON.parse(content)
         if (collections[0]) {
@@ -142,6 +143,7 @@ export default {
         }
         this.$store.commit("postwoman/importCollections", collections)
         this.fileImported()
+        this.syncToFBCollections()
       }
       reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
     },
@@ -167,6 +169,13 @@ export default {
       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",
@@ -207,7 +216,7 @@ export default {
       }
       return postwomanCollection
     },
-    parsePostmanRequest(requestObject) {
+    parsePostmanRequest({ name, request }) {
       let pwRequest = {
         url: "",
         path: "",
@@ -227,14 +236,14 @@ export default {
         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 : ""
+      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"
@@ -252,7 +261,7 @@ export default {
         pwRequest.auth = "Bearer Token"
         pwRequest.bearerToken = itemAuth.bearer[0].value
       }
-      let requestObjectHeaders = requestObject.request.header
+      let requestObjectHeaders = request.header
       if (requestObjectHeaders) {
         pwRequest.headers = requestObjectHeaders
         for (let header of pwRequest.headers) {
@@ -260,23 +269,23 @@ export default {
           delete header.type
         }
       }
-      let requestObjectParams = requestObject.request.url.query
+      let requestObjectParams = request.url.query
       if (requestObjectParams) {
         pwRequest.params = requestObjectParams
         for (let param of pwRequest.params) {
           delete param.disabled
         }
       }
-      if (requestObject.request.body) {
-        if (requestObject.request.body.mode === "urlencoded") {
-          let params = requestObject.request.body.urlencoded
+      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
           }
-        } else if (requestObject.request.body.mode === "raw") {
+        } else if (request.body.mode === "raw") {
           pwRequest.rawInput = true
-          pwRequest.rawParams = requestObject.request.body.raw
+          pwRequest.rawParams = request.body.raw
         }
       }
       return pwRequest

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 - 286px);
+  max-height: calc(100vh - 245px);
 }
 
 ul {
@@ -108,7 +96,7 @@ ul {
 
 <script>
 import collection from "./collection"
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   components: {
@@ -120,7 +108,9 @@ export default {
     editFolder: () => import("./editFolder"),
     editRequest: () => import("./editRequest"),
     importExportCollections: () => import("./importExportCollections"),
-    VirtualList: () => import("vue-virtual-scroll-list"),
+  },
+  props: {
+    doc: Boolean,
   },
   data() {
     return {
@@ -140,11 +130,13 @@ export default {
   },
   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

components/collections/request.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="flex-wrap">
     <div>
-      <button class="icon" @click="selectRequest()" v-tooltip="$t('use_request')">
+      <button
+        class="icon"
+        @click="!doc ? selectRequest() : {}"
+        v-tooltip="!doc ? $t('use_request') : ''"
+      >
         <i class="material-icons">insert_drive_file</i>
         <span>{{ request.name }}</span>
       </button>
@@ -42,14 +46,24 @@ ul li {
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     request: Object,
     collectionIndex: Number,
     folderIndex: 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 })
     },
@@ -60,6 +74,7 @@ export default {
         folderIndex: this.folderIndex,
         requestIndex: this.requestIndex,
       })
+      this.syncCollections()
     },
   },
 }

components/collections/saveRequestAs.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   props: {
@@ -86,7 +86,7 @@ export default {
     editingRequest: Object,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -109,6 +109,9 @@ export default {
     "requestData.folderIndex": function resetRequestIndex() {
       this.$data.requestData.requestIndex = undefined
     },
+    editingRequest(request) {
+      this.defaultRequestName = request.label || "My Request"
+    },
   },
   computed: {
     folders() {

components/environments/addEnvironment.vue

@@ -43,14 +43,14 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   props: {
     show: Boolean,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -84,8 +84,8 @@ export default {
       this.syncEnvironments()
     },
     hideModal() {
-      this.$data.name = undefined
       this.$emit("hide-modal")
+      this.$data.name = undefined
     },
   },
 }

components/environments/editEnvironment.vue

@@ -35,14 +35,6 @@
               </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">
@@ -114,19 +106,16 @@
 </template>
 
 <script>
-import textareaAutoHeight from "../../directives/textareaAutoHeight"
+import { fb } from "~/helpers/fb"
 
 export default {
-  directives: {
-    textareaAutoHeight,
-  },
   props: {
     show: Boolean,
     editingEnvironment: Object,
     editingEnvironmentIndex: Number,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   data() {
     return {
@@ -134,7 +123,7 @@ export default {
     }
   },
   watch: {
-    editingEnvironment: function(update) {
+    editingEnvironment: function (update) {
       this.name =
         this.$props.editingEnvironment && this.$props.editingEnvironment.name
           ? this.$props.editingEnvironment.name
@@ -152,6 +141,13 @@ export default {
     },
   },
   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
@@ -163,6 +159,7 @@ export default {
     addEnvironmentVariable() {
       let value = { key: "", value: "" }
       this.$store.commit("postwoman/addVariable", value)
+      this.syncEnvironments()
     },
     removeEnvironmentVariable(index) {
       let variableIndex = index
@@ -182,6 +179,7 @@ export default {
           },
         },
       })
+      this.syncEnvironments()
     },
     saveEnvironment() {
       if (!this.$data.name) {
@@ -197,10 +195,11 @@ export default {
         environmentIndex: this.$props.editingEnvironmentIndex,
       })
       this.$emit("hide-modal")
+      this.syncEnvironments()
     },
     hideModal() {
-      this.$data.name = undefined
       this.$emit("hide-modal")
+      this.$data.name = undefined
     },
   },
 }

components/environments/environment.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="flex-wrap">
     <div>
-      <button class="icon" @click="$emit('select-environment')" v-tooltip="$t('use_environment')">
+      <button
+        class="icon"
+        @click="$emit('select-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">
@@ -42,15 +46,25 @@ ul li {
 </style>
 
 <script>
+import { fb } from "~/helpers/fb"
+
 export default {
   props: {
     environment: Object,
     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)
+      this.syncEnvironments()
     },
   },
 }

components/environments/importExportEnvironment.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script>
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
@@ -88,7 +88,7 @@ export default {
     show: Boolean,
   },
   components: {
-    modal: () => import("../../components/ui/modal"),
+    modal: () => import("~/components/ui/modal"),
   },
   computed: {
     environmentJson() {
@@ -107,26 +107,46 @@ export default {
     },
     replaceWithJSON() {
       let reader = new FileReader()
-      reader.onload = event => {
+      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 => {
+      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,
-        })
+        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
@@ -150,6 +170,13 @@ export default {
       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",

components/environments/index.vue

@@ -25,14 +25,9 @@
       </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">
           <environment
@@ -42,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 - 241px);
+  max-height: calc(100vh - 245px);
 }
 
 ul {
@@ -63,10 +55,7 @@ ul {
 
 <script>
 import environment from "./environment"
-import { fb } from "../../functions/fb"
-
-const updateOnLocalStorage = (propertyName, property) =>
-  window.localStorage.setItem(propertyName, JSON.stringify(property))
+import { fb } from "~/helpers/fb"
 
 export default {
   components: {
@@ -75,7 +64,6 @@ export default {
     addEnvironment: () => import("./addEnvironment"),
     editEnvironment: () => import("./editEnvironment"),
     importExportEnvironment: () => import("./importExportEnvironment"),
-    VirtualList: () => import("vue-virtual-scroll-list"),
   },
   data() {
     return {
@@ -88,14 +76,16 @@ export default {
   },
   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
+        this.showModalImportExport = this.showModalAdd = this.showModalEdit = false
       }
     }
     document.addEventListener("keydown", this._keyListener.bind(this))
@@ -116,7 +106,7 @@ export default {
       this.$data.editingEnvironment = environment
       this.$data.editingEnvironmentIndex = environmentIndex
       this.displayModalEdit(true)
-      this.syncEnvironments
+      this.syncEnvironments()
     },
     resetSelectedData() {
       this.$data.editingEnvironment = undefined

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="180"
-    :remain="Math.min(6, 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 - 294px);
+  max-height: calc(100vh - 298px);
 }
 
 ul,
@@ -55,12 +49,9 @@ 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,

components/firebase/inputform.vue

@@ -46,7 +46,7 @@ ol {
 </style>
 
 <script>
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {

components/firebase/login.vue

@@ -2,13 +2,7 @@
   <div>
     <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"
-        >
+        <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"
           />
@@ -18,15 +12,9 @@
     </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"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="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"
+            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>
@@ -37,7 +25,7 @@
 
 <script>
 import firebase from "firebase/app"
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
@@ -77,34 +65,33 @@ export default {
           }
           self.showLoginSuccess()
         })
-        .catch(err => {
+        .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.
-            var pendingCred = err.credential
+            const pendingCred = err.credential
             // The provider account's email address.
-            var email = err.email
+            const email = err.email
             // Get sign-in methods for this email.
             firebase
               .auth()
               .fetchSignInMethodsForEmail(email)
-              .then(function(methods) {
+              .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.
-                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                  const password = promptUserForPassword() // TODO: implement promptUserForPassword.
                   auth
                     .signInWithEmailAndPassword(email, password)
-                    .then(function(user) {
-                      // Step 4a.
-                      return user.linkWithCredential(pendingCred)
-                    })
-                    .then(function() {
+                    .then((
+                      user // Step 4a.
+                    ) => user.linkWithCredential(pendingCred))
+                    .then(() => {
                       // Google account successfully linked to the existing Firebase user.
                       self.showLoginSuccess()
                     })
@@ -121,7 +108,7 @@ export default {
                       // All the other cases are external providers.
                       // Construct provider object for that provider.
                       // TODO: implement getProviderForProviderId.
-                      var provider = new firebase.auth.GithubAuthProvider()
+                      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.
@@ -131,19 +118,17 @@ export default {
                       firebase
                         .auth()
                         .signInWithPopup(provider)
-                        .then(function(result) {
+                        .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.
-                          result.user
-                            .linkAndRetrieveDataWithCredential(pendingCred)
-                            .then(function(usercred) {
-                              // Google account successfully linked to the existing Firebase user.
-                              self.showLoginSuccess()
-                            })
+                          user.linkAndRetrieveDataWithCredential(pendingCred).then((usercred) => {
+                            // Google account successfully linked to the existing Firebase user.
+                            self.showLoginSuccess()
+                          })
                         })
 
                       toastObject.remove()
@@ -180,35 +165,34 @@ export default {
           }
           self.showLoginSuccess()
         })
-        .catch(err => {
+        .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.
-            var pendingCred = err.credential
+            const pendingCred = err.credential
             // The provider account's email address.
-            var email = err.email
+            const email = err.email
             // Get sign-in methods for this email.
             firebase
               .auth()
               .fetchSignInMethodsForEmail(email)
-              .then(function(methods) {
+              .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.
-                  var password = promptUserForPassword() // TODO: implement promptUserForPassword.
+                  const password = promptUserForPassword() // TODO: implement promptUserForPassword.
                   firebase
                     .auth()
                     .signInWithEmailAndPassword(email, password)
-                    .then(function(user) {
-                      // Step 4a.
-                      return user.linkWithCredential(pendingCred)
-                    })
-                    .then(function() {
+                    .then((
+                      user // Step 4a.
+                    ) => user.linkWithCredential(pendingCred))
+                    .then(() => {
                       // Google account successfully linked to the existing Firebase user.
                       self.showLoginSuccess()
                     })
@@ -225,7 +209,7 @@ export default {
                       // All the other cases are external providers.
                       // Construct provider object for that provider.
                       // TODO: implement getProviderForProviderId.
-                      var provider = new firebase.auth.GoogleAuthProvider()
+                      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.
@@ -235,18 +219,16 @@ export default {
                       firebase
                         .auth()
                         .signInWithPopup(provider)
-                        .then(function(result) {
+                        .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.
-                          result.user
-                            .linkAndRetrieveDataWithCredential(pendingCred)
-                            .then(function(usercred) {
-                              self.showLoginSuccess()
-                            })
+                          user.linkAndRetrieveDataWithCredential(pendingCred).then((usercred) => {
+                            self.showLoginSuccess()
+                          })
                         })
 
                       toastObject.remove()

components/firebase/logout.vue

@@ -9,7 +9,7 @@
 
 <script>
 import firebase from "firebase/app"
-import { fb } from "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   data() {
@@ -24,7 +24,7 @@ export default {
       firebase
         .auth()
         .signOut()
-        .catch(err => {
+        .catch((err) => {
           self.$toast.show(err.message || err, {
             icon: "error",
           })

components/graphql/field.vue

@@ -38,7 +38,7 @@
   display: inline-block;
   padding: 4px 8px;
   margin: 4px 0;
-  border-radius: 4px;
+  border-radius: 8px;
   font-size: 14px;
   font-weight: 700;
 }
@@ -64,14 +64,11 @@ export default {
 
   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 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()}`
     },

components/graphql/queryeditor.vue

@@ -22,11 +22,14 @@
 const DEFAULT_THEME = "twilight"
 
 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"
+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: {
@@ -38,10 +41,6 @@ export default {
       type: String,
       required: false,
     },
-    lang: {
-      type: String,
-      default: "json",
-    },
     onRunGQLQuery: {
       type: Function,
       default: () => {},
@@ -76,19 +75,18 @@ export default {
         })
       })
     },
-    lang(value) {
-      this.editor.getSession().setMode(`ace/mode/${value}`)
-    },
     options(value) {
       this.editor.setOptions(value)
     },
   },
 
   mounted() {
+    defineGQLLanguageMode(ace)
+
     let langTools = ace.require("ace/ext/language_tools")
 
     const editor = ace.edit(this.$refs.editor, {
-      mode: `ace/mode/${this.lang}`,
+      mode: `ace/mode/gql-query`,
       enableBasicAutocompletion: true,
       enableLiveAutocompletion: true,
       ...this.options,
@@ -190,7 +188,7 @@ export default {
       this.parseContents(this.cacheValue)
     },
 
-    parseContents: debounce(function(content) {
+    parseContents: debounce(function (content) {
       if (content !== "") {
         try {
           const doc = gql.parse(content)

components/layout/contributors.vue

@@ -6,48 +6,6 @@
     <p class="info">
       {{ $t("donate_info2") }}
     </p>
-    <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>
-        🔥 HOT
-      </span>
-    </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>
-    <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 class="flex-wrap">
       <span>
         <a
@@ -70,12 +28,52 @@
                 />
               </svg>
             </i>
-            <span>GitHub</span>
+            <span>GitHub Sponsors</span>
           </button>
         </a>
-        🎉 NEW
       </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">
@@ -88,6 +86,15 @@
       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" />
@@ -127,6 +134,13 @@
       <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>
@@ -146,6 +160,7 @@
 <style scoped lang="scss">
 .contributors {
   display: flex;
+  align-items: center;
   flex-flow: row nowrap;
   overflow: auto;
   padding: 8px 0;

components/layout/footer.vue

@@ -35,7 +35,7 @@
             🦄
           </button>
         </a>
-        <a href="mailto:liyascthomas@gmail.com" target="_blank" rel="noopener">
+        <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>
@@ -91,7 +91,7 @@ export default {
 
   computed: {
     availableLocales() {
-      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
+      return this.$i18n.locales.filter(({ code }) => code !== this.$i18n.locale)
     },
   },
 }

components/layout/header.vue

@@ -7,26 +7,6 @@
         </nuxt-link>
       </span>
       <span>
-        <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"
-              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>
-          </button>
-        </a>
         <button
           class="icon"
           id="installPWA"
@@ -35,9 +15,23 @@
         >
           <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">vpn_key</i>
+            <i class="material-icons">login</i>
           </button>
           <template slot="popover">
             <login />
@@ -48,8 +42,8 @@
             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>')
+              '<br>' +
+              (fb.currentUser.email || '<label><i>Email not found</i></label>')
             "
             aria-label="Account"
           >
@@ -79,50 +73,43 @@
         </v-popover>
         <v-popover>
           <button class="icon" v-tooltip="$t('more')">
-            <i class="material-icons">more_vert</i>
+            <i class="material-icons">drag_indicator</i>
           </button>
           <template slot="popover">
-            <div>
-              <button class="icon" @click="showExtensions = true" v-close-popover>
-                <i class="material-icons">extension</i>
-                <span>{{ $t("extensions") }}</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="showShortcuts = true" v-close-popover>
-                <i class="material-icons">keyboard</i>
-                <span>{{ $t("shortcuts") }}</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="showSupport = true" v-close-popover>
-                <i class="material-icons">favorite</i>
-                <span>{{ $t("support_us") }}</span>
-              </button>
-            </div>
-            <div>
-              <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" viewBox="0 0 24 24">
-                  <path
-                    d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
-                  />
-                </svg>
-                <span>{{ $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>
-              </button>
-            </div>
+            <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>
@@ -153,19 +140,13 @@
             rel="noopener"
           >
             <button class="icon">
-              <svg
-                class="material-icons"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-              >
+              <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                 <path
-                  d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm8.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.181 1.832-2.066 4.499-3.378 7.472-3.378 5.912 0 8.263 4.283 8.003 6.657z"
+                  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="firefoxExtInstalled" v-tooltip="$t('installed')">
+              <span class="icon" v-if="hasFirefoxExtInstalled" v-tooltip="$t('installed')">
                 <i class="material-icons">done</i>
               </span>
             </button>
@@ -178,19 +159,13 @@
             rel="noopener"
           >
             <button class="icon">
-              <svg
-                class="material-icons"
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-              >
+              <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                 <path
-                  d="M2.897 4.181c2.43-2.828 5.763-4.181 9.072-4.181 4.288 0 8.535 2.273 10.717 6.554-2.722.001-6.984 0-9.293 0-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644l-3.793-6.596zm5.11 7.819c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991-3.988 1.791-3.988 3.991zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225-1.33 2.04-1.945 4.294-1.945 6.507 0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214c1.864 1.734 2.271 4.542 1.007 6.719-.951 1.641-3.988 6.766-5.46 9.248 7.189.443 12.752-5.36 12.752-11.972 0-1.313-.22-2.66-.69-3.995h-7.609z"
+                  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="chromeExtInstalled" v-tooltip="$t('installed')">
+              <span class="icon" v-if="hasChromeExtInstalled" v-tooltip="$t('installed')">
                 <i class="material-icons">done</i>
               </span>
             </button>
@@ -285,12 +260,15 @@
 </style>
 
 <script>
-import intializePwa from "../../assets/js/pwa"
-import { hasExtensionInstalled } from "../../functions/strategies/ExtensionStrategy"
-import { hasChromeExtensionInstalled } from "../../functions/strategies/ChromeStrategy"
-import { getPlatformSpecialKey } from "../../functions/platformutils"
+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 "../../functions/fb"
+import { fb } from "~/helpers/fb"
 
 export default {
   components: {
@@ -307,6 +285,8 @@ export default {
       // prompt.
       showInstallPrompt: null,
       showExtensions: false,
+      hasChromeExtInstalled: hasChromeExtensionInstalled(),
+      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
       showShortcuts: false,
       showSupport: false,
       fb,
@@ -337,13 +317,42 @@ export default {
         })
       }
 
+      // 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() || hasChromeExtensionInstalled())) {
+        if (!hasExtensionInstalled()) {
           this.$toast.show(this.$t("extensions_info2"), {
             icon: "extension",
             duration: 5000,
@@ -371,9 +380,9 @@ export default {
             ],
           })
         }
-      }, 15000)
+      }, 5000)
 
-      this._keyListener = function(e) {
+      this._keyListener = function (e) {
         if (e.key === "Escape") {
           e.preventDefault()
           this.showExtensions = this.showShortcuts = this.showSupport = false
@@ -404,7 +413,7 @@ export default {
 
   computed: {
     availableLocales() {
-      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
+      return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale)
     },
   },
 }

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
@@ -161,14 +147,14 @@
           </div>
         </transition>
       </ul>
-    </virtual-list>
+    </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">
@@ -235,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
@@ -262,7 +248,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 294px);
+  max-height: calc(100vh - 290px);
 
   [readonly] {
     cursor: default;
@@ -320,8 +306,8 @@ 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))
@@ -329,7 +315,6 @@ const updateOnLocalStorage = (propertyName, property) =>
 export default {
   components: {
     "pw-section": () => import("../layout/section"),
-    VirtualList: () => import("vue-virtual-scroll-list"),
   },
   data() {
     return {
@@ -354,9 +339,9 @@ export default {
         fb.currentUser !== null
           ? fb.currentHistory
           : JSON.parse(window.localStorage.getItem("history")) || []
-      return this.history.filter(entry => {
+      return this.history.filter((entry) => {
         const filterText = this.filterText.toLowerCase()
-        return Object.keys(entry).some(key => {
+        return Object.keys(entry).some((key) => {
           let value = entry[key]
           value = typeof value !== "string" ? value.toString() : value
           return value.toLowerCase().includes(filterText)

components/layout/logo.vue

@@ -1,50 +1,15 @@
 <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 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>
 
-<style scoped lang="scss">
-#circle3814 {
-  /* fill: var(--fg-color); */
-  fill: transparent;
-}
-/* #path3816 {
-    fill: var(--bg-color);
-  } */
-</style>
-
 <script>
 export default {
   props: {

components/layout/section.vue

@@ -13,6 +13,67 @@
 </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);
 }

components/layout/sidenav.vue

@@ -18,7 +18,7 @@
         :class="linkActive('/realtime')"
         v-tooltip.right="$t('realtime')"
       >
-        <i class="material-icons">settings_input_hdmi</i>
+        <i class="material-icons">language</i>
       </nuxt-link>
       <nuxt-link
         :to="localePath('graphql')"
@@ -26,113 +26,20 @@
         v-tooltip.right="$t('graphql')"
         :aria-label="$t('graphql')"
       >
-        <svg
-          class="material-icons"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          x="0px"
-          y="0px"
-          viewBox="0 0 400 400"
-        >
-          <g>
-            <g>
-              <g>
-                <rect
-                  x="122"
-                  y="-0.4"
-                  transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)"
-                  width="16.6"
-                  height="320.3"
-                />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect x="39.8" y="272.2" width="320.3" height="16.6" />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="37.9"
-                  y="312.2"
-                  transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)"
-                  width="185"
-                  height="16.6"
-                />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="177.1"
-                  y="71.1"
-                  transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)"
-                  width="185"
-                  height="16.6"
-                />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="122.1"
-                  y="-13"
-                  transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)"
-                  width="16.6"
-                  height="185"
-                />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="109.6"
-                  y="151.6"
-                  transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)"
-                  width="320.3"
-                  height="16.6"
-                />
-              </g>
-            </g>
-            <g>
-              <g><rect x="52.5" y="107.5" width="16.6" height="185" /></g>
-            </g>
-            <g>
-              <g>
-                <rect x="330.9" y="107.5" width="16.6" height="185" />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="262.4"
-                  y="240.1"
-                  transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)"
-                  width="14.5"
-                  height="160.9"
-                />
-              </g>
-            </g>
-            <path
-              d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8C373.5,259.9,379.2,281.2,369.5,297.9"
-            />
-            <path
-              d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8C94.8,99,100.5,120.3,90.9,137"
-            />
-            <path
-              d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7C61.4,320.3,40.1,314.6,30.5,297.9"
-            />
-            <path
-              d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7C340.1,159.4,318.7,153.7,309.1,137"
-            />
-            <path
-              d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9C234.9,380.1,219.3,395.8,200,395.8"
-            />
-            <path
-              d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9C234.9,58.4,219.3,74,200,74"
-            />
-          </g>
+        <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
@@ -141,7 +48,7 @@
         v-tooltip.right="$t('documentation')"
         :aria-label="$t('documentation')"
       >
-        <i class="material-icons">books</i>
+        <i class="material-icons">topic</i>
       </nuxt-link>
       <nuxt-link
         :to="localePath('settings')"
@@ -152,7 +59,7 @@
         <i class="material-icons">settings</i>
       </nuxt-link>
     </nav>
-    <div v-if="$route.path === '/'">
+    <div v-if="$route.path == '/'">
       <nav class="secondary-nav">
         <ul>
           <li>
@@ -173,7 +80,7 @@
         </ul>
       </nav>
     </div>
-    <div v-else-if="$route.path === '/realtime'">
+    <div v-else-if="$route.path.includes('/realtime')">
       <nav class="secondary-nav">
         <ul>
           <li>
@@ -189,7 +96,7 @@
         </ul>
       </nav>
     </div>
-    <div v-else-if="$route.path === '/graphql'">
+    <div v-else-if="$route.path.includes('/graphql')">
       <nav class="secondary-nav">
         <ul>
           <li>
@@ -215,11 +122,11 @@
         </ul>
       </nav>
     </div>
-    <div v-else-if="$route.path === '/doc'">
+    <div v-else-if="$route.path.includes('/doc')">
       <nav class="secondary-nav">
         <ul>
           <li>
-            <a href="#collections" v-tooltip.right="$t('collections')">
+            <a href="#import" v-tooltip.right="$t('import')">
               <i class="material-icons">folder</i>
             </a>
           </li>
@@ -231,7 +138,7 @@
         </ul>
       </nav>
     </div>
-    <div v-else-if="$route.path === '/settings'">
+    <div v-else-if="$route.path.includes('/settings')">
       <nav class="secondary-nav">
         <ul>
           <li>
@@ -260,6 +167,144 @@
   </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: {
@@ -276,20 +321,20 @@ export default {
   },
 
   mounted() {
-    window.addEventListener("scroll", event => {
+    window.addEventListener("scroll", (event) => {
       let mainNavLinks = document.querySelectorAll("nav ul li a")
       let fromTop = window.scrollY
-      mainNavLinks.forEach(link => {
-        let section = document.querySelector(link.hash)
+      mainNavLinks.forEach(({ hash, classList }) => {
+        let section = document.querySelector(hash)
 
         if (
           section &&
           section.offsetTop <= fromTop &&
           section.offsetTop + section.offsetHeight > fromTop
         ) {
-          link.classList.add("current")
+          classList.add("current")
         } else {
-          link.classList.remove("current")
+          classList.remove("current")
         }
       })
     })

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/realtime/log.vue

@@ -28,6 +28,7 @@ div.realtime-log {
     font-size: 16px;
     font-family: "Roboto Mono", monospace;
     font-weight: 400;
+    user-select: text;
   }
 
   span {
@@ -40,15 +41,15 @@ div.realtime-log {
 </style>
 
 <script>
-import { getSourcePrefix } from "~/functions/utils/string"
+import { getSourcePrefix } from "~/helpers/utils/string"
 
 export default {
   props: ["log", "title"],
   methods: {
     getSourcePrefix,
   },
-  updated: function() {
-    this.$nextTick(function() {
+  updated: function () {
+    this.$nextTick(function () {
       if (this.$refs.log) {
         this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
       }

components/realtime/mqtt.vue

@@ -70,14 +70,14 @@
 
 <script>
 import Paho from "paho-mqtt"
-import { wsValid } from "~/functions/utils/valid"
+import { wsValid } from "~/helpers/utils/valid"
 
 export default {
   components: {
-    "pw-section": () => import("../../components/layout/section"),
+    "pw-section": () => import("~/components/layout/section"),
     realtimeLog: () => import("./log"),
   },
-  data: function() {
+  data: function () {
     return {
       url: "wss://test.mosquitto.org:8081",
       client: null,

components/realtime/socketio.vue

@@ -76,12 +76,13 @@
 </template>
 
 <script>
-import { socketioValid } from "~/functions/utils/valid"
+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"),
+    "pw-section": () => import("~/components/layout/section"),
     realtimeLog: () => import("./log"),
   },
   data() {
@@ -119,6 +120,8 @@ export default {
 
       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 = [
@@ -133,20 +136,21 @@ export default {
             icon: "sync",
           })
         })
-        this.io.on("message", data => {
+        this.io.on("*", ({ data }) => {
+          const [eventName, message] = data
           this.communication.log.push({
-            payload: data,
+            payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
             source: "server",
             ts: new Date().toLocaleTimeString(),
           })
         })
-        this.io.on("connect_error", error => {
+        this.io.on("connect_error", (error) => {
           this.handleError(error)
         })
-        this.io.on("reconnect_error", error => {
+        this.io.on("reconnect_error", (error) => {
           this.handleError(error)
         })
-        this.io.on("error", data => {
+        this.io.on("error", (data) => {
           this.handleError()
         })
         this.io.on("disconnect", () => {
@@ -190,12 +194,18 @@ export default {
     },
     sendMessage() {
       const eventName = this.communication.eventName
-      const message = this.communication.input
+      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 => {
+        this.io.emit(eventName, message, (data) => {
           // receive response from server
           this.communication.log.push({
             payload: `[${eventName}] ${JSON.stringify(data)}`,
@@ -205,7 +215,7 @@ export default {
         })
 
         this.communication.log.push({
-          payload: `[${eventName}] ${message}`,
+          payload: `[${eventName}] ${JSON.stringify(message)}`,
           source: "client",
           ts: new Date().toLocaleTimeString(),
         })

components/realtime/sse.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { sseValid } from "~/functions/utils/valid"
+import { httpValid } from "~/helpers/utils/valid"
 
 export default {
   components: {
@@ -60,7 +60,7 @@ export default {
   },
   computed: {
     serverValid() {
-      return sseValid(this.server)
+      return httpValid(this.server)
     },
   },
   methods: {
@@ -81,7 +81,7 @@ export default {
       if (typeof EventSource !== "undefined") {
         try {
           this.sse = new EventSource(this.server)
-          this.sse.onopen = event => {
+          this.sse.onopen = (event) => {
             this.connectionSSEState = true
             this.events.log = [
               {
@@ -95,10 +95,10 @@ export default {
               icon: "sync",
             })
           }
-          this.sse.onerror = event => {
+          this.sse.onerror = (event) => {
             this.handleSSEError()
           }
-          this.sse.onclose = event => {
+          this.sse.onclose = (event) => {
             this.connectionSSEState = false
             this.events.log.push({
               payload: this.$t("disconnected_from", { name: this.server }),
@@ -110,9 +110,9 @@ export default {
               icon: "sync_disabled",
             })
           }
-          this.sse.onmessage = event => {
+          this.sse.onmessage = ({ data }) => {
             this.events.log.push({
-              payload: event.data,
+              payload: data,
               source: "server",
               ts: new Date().toLocaleTimeString(),
             })

components/realtime/websocket.vue

@@ -45,6 +45,8 @@
             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>
@@ -64,7 +66,7 @@
 </template>
 
 <script>
-import { wsValid } from "~/functions/utils/valid"
+import { wsValid } from "~/helpers/utils/valid"
 
 export default {
   components: {
@@ -80,6 +82,7 @@ export default {
         log: null,
         input: "",
       },
+      currentIndex: -1, //index of the message log array to put in input box
     }
   },
   computed: {
@@ -104,7 +107,7 @@ export default {
       ]
       try {
         this.socket = new WebSocket(this.url)
-        this.socket.onopen = event => {
+        this.socket.onopen = (event) => {
           this.connectionState = true
           this.communication.log = [
             {
@@ -118,10 +121,10 @@ export default {
             icon: "sync",
           })
         }
-        this.socket.onerror = event => {
+        this.socket.onerror = (event) => {
           this.handleError()
         }
-        this.socket.onclose = event => {
+        this.socket.onclose = (event) => {
           this.connectionState = false
           this.communication.log.push({
             payload: this.$t("disconnected_from", { name: this.url }),
@@ -133,9 +136,9 @@ export default {
             icon: "sync_disabled",
           })
         }
-        this.socket.onmessage = event => {
+        this.socket.onmessage = ({ data }) => {
           this.communication.log.push({
-            payload: event.data,
+            payload: data,
             source: "server",
             ts: new Date().toLocaleTimeString(),
           })
@@ -177,6 +180,37 @@ export default {
       })
       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/ui/ace-editor.vue

@@ -23,8 +23,8 @@ const DEFAULT_THEME = "twilight"
 
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
-import jsonParse from "../../functions/jsonParse"
-import debounce from "../../functions/utils/debounce"
+import jsonParse from "~/helpers/jsonParse"
+import debounce from "~/helpers/utils/debounce"
 
 export default {
   props: {
@@ -120,7 +120,7 @@ export default {
       return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
     },
 
-    provideLinting: debounce(function(code) {
+    provideLinting: debounce(function (code) {
       if (this.lang === "json") {
         try {
           jsonParse(code)

components/ui/autocomplete.vue

@@ -194,14 +194,14 @@ export default {
 
       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)
       )

components/ui/modal.vue

@@ -50,7 +50,7 @@
   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 - 128px);
   max-width: 720px;

components/ui/tab.vue

@@ -25,7 +25,7 @@ export default {
 
   // computed: {
   //   href() {
-  //     return `#${this.name.toLowerCase().replace(/ /g, "-")}`
+  //     return `#${this.label.toLowerCase().replace(/ /g, "-")}`
   //   },
   // },
 

components/ui/tabs.vue

@@ -2,7 +2,13 @@
   <div class="tabs-wrapper">
     <div class="tabs">
       <ul>
-        <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
+        <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 }}
@@ -23,6 +29,7 @@
   display: flex;
   flex-flow: column nowrap;
   flex-grow: 1;
+  overflow: hidden;
 
   .tabs {
     -webkit-overflow-scrolling: touch;
@@ -44,7 +51,7 @@
         justify-content: center;
         padding: 8px 16px;
         color: var(--fg-light-color);
-        border-radius: 4px;
+        border-radius: 8px;
         cursor: pointer;
 
         .material-icons {
@@ -56,6 +63,10 @@
         }
       }
 
+      &:focus a {
+        color: var(--fg-color);
+      }
+
       &.is-active a {
         background-color: var(--brd-color);
         color: var(--fg-color);
@@ -86,7 +97,7 @@ export default {
 
   methods: {
     selectTab({ id }) {
-      this.tabs.forEach(tab => {
+      this.tabs.forEach((tab) => {
         tab.isActive = tab.id == id
       })
     },

directives/textareaAutoHeight.js

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

functions/network.js

@@ -1,36 +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.apollosoftware.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.apollosoftware.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.apollosoftware.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,47 +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.apollosoftware.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/utils/valid.js

@@ -1,40 +0,0 @@
-function generateIPRE(protocol) {
-  return new RegExp(
-    `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
-  )
-}
-function generateHostnameRE(protocol) {
-  return new RegExp(
-    `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
-  )
-}
-
-/**
- * valid url for ws/wss
- */
-export function wsValid(url) {
-  const protocol = "^(wss?:\\/\\/)?"
-  const validIP = generateIPRE(protocol)
-  const validHostname = generateHostnameRE(protocol)
-  return validIP.test(url) || validHostname.test(url)
-}
-
-/**
- * valid url for http/https
- */
-export function sseValid(url) {
-  const protocol = "^(https?:\\/\\/)?"
-  const validIP = generateIPRE(protocol)
-  const validHostname = generateHostnameRE(protocol)
-  return validIP.test(url) || validHostname.test(url)
-}
-
-/**
- * valid url for ws/wss/http/https
- */
-export function socketioValid(url) {
-  const protocol = "^((wss?:\\/\\/)|(https?:\\/\\/))?"
-  const validIP = generateIPRE(protocol)
-  const validHostname = generateHostnameRE(protocol)
-  return validIP.test(url) || validHostname.test(url)
-}

helpers/fb.js

@@ -4,14 +4,14 @@ 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",
+  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)
 
@@ -21,7 +21,7 @@ const usersCollection = firebase.firestore().collection("users")
 // the shared state object that any vue component
 // can get access to
 export const fb = {
-  currentUser: {},
+  currentUser: null,
   currentFeeds: [],
   currentSettings: [],
   currentHistory: [],
@@ -40,15 +40,15 @@ export const fb = {
       .doc(fb.currentUser.uid)
       .collection("feeds")
       .add(dt)
-      .catch(e => console.error("error inserting", dt, e))
+      .catch((e) => console.error("error inserting", dt, e))
   },
-  deleteFeed: id => {
+  deleteFeed: (id) => {
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("feeds")
       .doc(id)
       .delete()
-      .catch(e => console.error("error deleting", id, e))
+      .catch((e) => console.error("error deleting", id, e))
   },
   writeSettings: async (setting, value) => {
     const st = {
@@ -64,23 +64,23 @@ export const fb = {
       .collection("settings")
       .doc(setting)
       .set(st)
-      .catch(e => console.error("error updating", st, e))
+      .catch((e) => console.error("error updating", st, e))
   },
-  writeHistory: async entry => {
+  writeHistory: async (entry) => {
     const hs = entry
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("history")
       .add(hs)
-      .catch(e => console.error("error inserting", hs, e))
+      .catch((e) => console.error("error inserting", hs, e))
   },
-  deleteHistory: entry => {
+  deleteHistory: (entry) => {
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("history")
       .doc(entry.id)
       .delete()
-      .catch(e => console.error("error deleting", entry, e))
+      .catch((e) => console.error("error deleting", entry, e))
   },
   clearHistory: () => {
     usersCollection
@@ -88,7 +88,7 @@ export const fb = {
       .collection("history")
       .get()
       .then(({ docs }) => {
-        docs.forEach(e => fb.deleteHistory(e))
+        docs.forEach((e) => fb.deleteHistory(e))
       })
   },
   toggleStar: (entry, value) => {
@@ -97,45 +97,45 @@ export const fb = {
       .collection("history")
       .doc(entry.id)
       .update({ star: value })
-      .catch(e => console.error("error deleting", entry, e))
+      .catch((e) => console.error("error deleting", entry, e))
   },
-  writeCollections: async collection => {
+  writeCollections: async (collection) => {
     const cl = {
       updatedOn: new Date(),
       author: fb.currentUser.uid,
       author_name: fb.currentUser.displayName,
       author_image: fb.currentUser.photoURL,
-      collection: collection,
+      collection,
     }
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("collections")
       .doc("sync")
       .set(cl)
-      .catch(e => console.error("error updating", cl, e))
+      .catch((e) => console.error("error updating", cl, e))
   },
-  writeEnvironments: async environment => {
+  writeEnvironments: async (environment) => {
     const ev = {
       updatedOn: new Date(),
       author: fb.currentUser.uid,
       author_name: fb.currentUser.displayName,
       author_image: fb.currentUser.photoURL,
-      environment: environment,
+      environment,
     }
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("environments")
       .doc("sync")
       .set(ev)
-      .catch(e => console.error("error updating", ev, e))
+      .catch((e) => console.error("error updating", ev, e))
   },
 }
 
 // When a user logs in or out, save that in the store
-firebase.auth().onAuthStateChanged(user => {
+firebase.auth().onAuthStateChanged((user) => {
   if (user) {
     fb.currentUser = user
-    fb.currentUser.providerData.forEach(profile => {
+    fb.currentUser.providerData.forEach((profile) => {
       let us = {
         updatedOn: new Date(),
         provider: profile.providerId,
@@ -147,16 +147,16 @@ firebase.auth().onAuthStateChanged(user => {
       usersCollection
         .doc(fb.currentUser.uid)
         .set(us)
-        .catch(e => console.error("error updating", us, e))
+        .catch((e) => console.error("error updating", us, e))
     })
 
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("feeds")
       .orderBy("createdOn", "desc")
-      .onSnapshot(feedsRef => {
+      .onSnapshot((feedsRef) => {
         const feeds = []
-        feedsRef.forEach(doc => {
+        feedsRef.forEach((doc) => {
           const feed = doc.data()
           feed.id = doc.id
           feeds.push(feed)
@@ -167,9 +167,9 @@ firebase.auth().onAuthStateChanged(user => {
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("settings")
-      .onSnapshot(settingsRef => {
+      .onSnapshot((settingsRef) => {
         const settings = []
-        settingsRef.forEach(doc => {
+        settingsRef.forEach((doc) => {
           const setting = doc.data()
           setting.id = doc.id
           settings.push(setting)
@@ -180,9 +180,9 @@ firebase.auth().onAuthStateChanged(user => {
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("history")
-      .onSnapshot(historyRef => {
+      .onSnapshot((historyRef) => {
         const history = []
-        historyRef.forEach(doc => {
+        historyRef.forEach((doc) => {
           const entry = doc.data()
           entry.id = doc.id
           history.push(entry)
@@ -193,27 +193,31 @@ firebase.auth().onAuthStateChanged(user => {
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("collections")
-      .onSnapshot(collectionsRef => {
+      .onSnapshot((collectionsRef) => {
         const collections = []
-        collectionsRef.forEach(doc => {
+        collectionsRef.forEach((doc) => {
           const collection = doc.data()
           collection.id = doc.id
           collections.push(collection)
         })
-        fb.currentCollections = collections[0].collection
+        if (collections.length > 0) {
+          fb.currentCollections = collections[0].collection
+        }
       })
 
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("environments")
-      .onSnapshot(environmentsRef => {
+      .onSnapshot((environmentsRef) => {
         const environments = []
-        environmentsRef.forEach(doc => {
+        environmentsRef.forEach((doc) => {
           const environment = doc.data()
           environment.id = doc.id
           environments.push(environment)
         })
-        fb.currentEnvironments = environments[0].environment
+        if (environments.length > 0) {
+          fb.currentEnvironments = environments[0].environment
+        }
       })
   } else {
     fb.currentUser = null

helpers/jsonParse.js

@@ -120,10 +120,10 @@ function expect(str) {
   if (kind === "EOF") {
     found = "[end of file]"
   } else if (end - start > 1) {
-    found = "`" + string.slice(start, end) + "`"
+    found = `\`${string.slice(start, end)}\``
   } else {
     const match = string.slice(start).match(/^.+?\b/)
-    found = "`" + (match ? match[0] : string[start]) + "`"
+    found = `\`${match ? match[0] : string[start]}\``
   }
 
   throw syntaxError(`Expected ${str} but found ${found}.`)

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/postwomanTesting.js

@@ -31,7 +31,7 @@ export default function runTestScriptWithVariables(script, variables) {
   // run pre-request script within this function so that it has access to the pw object.
   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]
     } else {
@@ -64,7 +64,7 @@ class Expectation {
     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._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

helpers/requestParams.js

@@ -0,0 +1,15 @@
+export function hasPathParams(params) {
+  return params.some(({ type }) => type === "path")
+}
+
+export function addPathParamsToVariables(params, variables) {
+  params
+    .filter(({ key }) => !!key)
+    .filter(({ type }) => type === "path")
+    .forEach(({ key, value }) => (variables[key] = value))
+  return variables
+}
+
+export function getQueryParams(params) {
+  return params.filter(({ key }) => !!key).filter(({ type }) => type != "path")
+}

helpers/strategies/AxiosStrategy.js

@@ -0,0 +1,70 @@
+import axios from "axios"
+import { decodeB64StringToArrayBuffer } from "../utils/b64"
+
+let cancelSource = axios.CancelToken.source()
+
+export const cancelRunningAxiosRequest = () => {
+  cancelSource.cancel()
+
+  // Create a new cancel token
+  cancelSource = axios.CancelToken.source()
+}
+
+const axiosWithProxy = async (req, { state }) => {
+  try {
+    const { data } = await axios.post(
+      state.postwoman.settings.PROXY_URL || "https://postwoman.apollosoftware.xyz/",
+      {
+        ...req,
+        wantsBinary: true,
+      },
+      {
+        cancelToken: cancelSource.token,
+      }
+    )
+
+    if (!data.data.success) {
+      throw new Error(data.data.message || "Proxy Error")
+    }
+
+    if (data.isBinary) {
+      data.data = decodeB64StringToArrayBuffer(data.data)
+    }
+
+    return data
+  } catch (e) {
+    // Check if the throw is due to a cancellation
+    if (axios.isCancel(e)) {
+      throw "cancellation"
+    } else {
+      throw e
+    }
+  }
+}
+
+const axiosWithoutProxy = async (req, _store) => {
+  try {
+    const res = await axios({
+      ...req,
+      cancelToken: cancelSource.token,
+      responseType: "arraybuffer",
+    })
+
+    return res
+  } catch (e) {
+    if (axios.isCancel(e)) {
+      throw "cancellation"
+    } else {
+      throw e
+    }
+  }
+}
+
+const axiosStrategy = (req, store) => {
+  if (store.state.postwoman.settings.PROXY_ENABLED) {
+    return axiosWithProxy(req, store)
+  }
+  return axiosWithoutProxy(req, store)
+}
+
+export default axiosStrategy

helpers/strategies/ExtensionStrategy.js

@@ -0,0 +1,56 @@
+import { decodeB64StringToArrayBuffer } from "../utils/b64"
+
+export const hasExtensionInstalled = () =>
+  typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined"
+
+export const hasChromeExtensionInstalled = () =>
+  hasExtensionInstalled() && /Chrome/i.test(navigator.userAgent) && /Google/i.test(navigator.vendor)
+
+export const hasFirefoxExtensionInstalled = () =>
+  hasExtensionInstalled() && /Firefox/i.test(navigator.userAgent)
+
+export const cancelRunningExtensionRequest = () => {
+  if (hasExtensionInstalled() && window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest) {
+    window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest()
+  }
+}
+
+const extensionWithProxy = async (req, { state }) => {
+  const { data } = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest({
+    method: "post",
+    url: state.postwoman.settings.PROXY_URL || "https://postwoman.apollosoftware.xyz/",
+    data: {
+      ...req,
+      wantsBinary: true,
+    },
+  })
+
+  const parsedData = JSON.parse(data)
+
+  if (!parsedData.data.success) {
+    throw new Error(parsedData.data.message || "Proxy Error")
+  }
+
+  if (parsedData.isBinary) {
+    parsedData.data = decodeB64StringToArrayBuffer(data.data)
+  }
+
+  return parsedData
+}
+
+const extensionWithoutProxy = async (req, _store) => {
+  const res = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest({
+    ...req,
+    wantsBinary: true,
+  })
+  return res
+}
+
+const extensionStrategy = (req, store) => {
+  if (store.state.postwoman.settings.PROXY_ENABLED) {
+    return extensionWithProxy(req, store)
+  }
+  return extensionWithoutProxy(req, store)
+}
+
+export default extensionStrategy

helpers/syntax/gqlQueryLangMode.js

@@ -0,0 +1,115 @@
+export function defineGQLLanguageMode(ace) {
+  // Highlighting
+  ace.define(
+    "ace/mode/gql-query-highlight",
+    ["require", "exports", "ace/lib/oop", "ace/mode/text_highlight_rules"],
+    (aceRequire, exports) => {
+      const oop = aceRequire("ace/lib/oop")
+
+      const TextHighlightRules = aceRequire("ace/mode/text_highlight_rules").TextHighlightRules
+
+      const GQLQueryTextHighlightRules = function () {
+        const keywords =
+          "type|interface|union|enum|schema|input|implements|extends|scalar|fragment|query|mutation|subscription"
+
+        const dataTypes = "Int|Float|String|ID|Boolean"
+
+        const literalValues = "true|false|null"
+
+        const escapeRe = /\\(?:u[\da-fA-f]{4}|.)/
+
+        const keywordMapper = this.createKeywordMapper(
+          {
+            keyword: keywords,
+            "storage.type": dataTypes,
+            "constant.language": literalValues,
+          },
+          "identifier"
+        )
+
+        this.$rules = {
+          start: [
+            {
+              token: "comment",
+              regex: "#.*$",
+            },
+            {
+              token: "paren.lparen",
+              regex: /[\[({]/,
+              next: "start",
+            },
+            {
+              token: "paren.rparen",
+              regex: /[\])}]/,
+            },
+            {
+              token: keywordMapper,
+              regex: "[a-zA-Z_][a-zA-Z0-9_$]*\\b",
+            },
+            {
+              token: "string", // character
+              regex: `'(?:${escapeRe}|.)?'`,
+            },
+            {
+              token: "string.start",
+              regex: '"',
+              stateName: "qqstring",
+              next: [
+                { token: "string", regex: /\\\s*$/, next: "qqstring" },
+                { token: "constant.language.escape", regex: escapeRe },
+                { token: "string.end", regex: '"|$', next: "start" },
+                { defaultToken: "string" },
+              ],
+            },
+            {
+              token: "string.start",
+              regex: "'",
+              stateName: "singleQuoteString",
+              next: [
+                { token: "string", regex: /\\\s*$/, next: "singleQuoteString" },
+                { token: "constant.language.escape", regex: escapeRe },
+                { token: "string.end", regex: "'|$", next: "start" },
+                { defaultToken: "string" },
+              ],
+            },
+            {
+              token: "constant.numeric",
+              regex: /\d+\.?\d*[eE]?[\+\-]?\d*/,
+            },
+            {
+              token: "variable",
+              regex: /\$[_A-Za-z][_0-9A-Za-z]*/,
+            },
+          ],
+        }
+        this.normalizeRules()
+      }
+
+      oop.inherits(GQLQueryTextHighlightRules, TextHighlightRules)
+
+      exports.GQLQueryTextHighlightRules = GQLQueryTextHighlightRules
+    }
+  )
+
+  // Language Mode Definition
+  ace.define(
+    "ace/mode/gql-query",
+    ["require", "exports", "ace/mode/text", "ace/mode/gql-query-highlight"],
+    (aceRequire, exports) => {
+      const oop = aceRequire("ace/lib/oop")
+      const TextMode = aceRequire("ace/mode/text").Mode
+      const GQLQueryTextHighlightRules = aceRequire("ace/mode/gql-query-highlight")
+        .GQLQueryTextHighlightRules
+      const FoldMode = aceRequire("ace/mode/folding/cstyle").FoldMode
+
+      const Mode = function () {
+        this.HighlightRules = GQLQueryTextHighlightRules
+        this.foldingRules = new FoldMode()
+      }
+
+      oop.inherits(Mode, TextMode)
+
+      exports.Mode = Mode
+    }
+  )
+}

helpers/templating.js

@@ -3,5 +3,5 @@ export default function parseTemplateString(string, variables) {
     return string
   }
   const searchTerm = /<<([^>]*)>>/g // "<<myVariable>>"
-  return string.replace(searchTerm, (match, p1) => variables[p1] || "")
+  return decodeURI(string).replace(searchTerm, (match, p1) => variables[p1] || "")
 }

helpers/utils/b64.js

@@ -0,0 +1,31 @@
+export const decodeB64StringToArrayBuffer = (input) => {
+  const bytes = Math.floor((input.length / 4) * 3)
+  const ab = new ArrayBuffer(bytes)
+  const uarray = new Uint8Array(ab)
+
+  const keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
+
+  let chr1, chr2, chr3
+  let enc1, enc2, enc3, enc4
+  let j = 0
+
+  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "")
+
+  for (let i = 0; i < bytes; i += 3) {
+    //get the 3 octets in 4 ASCII chars
+    enc1 = keyStr.indexOf(input.charAt(j++))
+    enc2 = keyStr.indexOf(input.charAt(j++))
+    enc3 = keyStr.indexOf(input.charAt(j++))
+    enc4 = keyStr.indexOf(input.charAt(j++))
+
+    chr1 = (enc1 << 2) | (enc2 >> 4)
+    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
+    chr3 = ((enc3 & 3) << 6) | enc4
+
+    uarray[i] = chr1
+    if (enc3 != 64) uarray[i + 1] = chr2
+    if (enc4 != 64) uarray[i + 2] = chr3
+  }
+
+  return ab
+}

helpers/utils/contenttypes.js

@@ -0,0 +1,27 @@
+export const knownContentTypes = [
+  "application/json",
+  "application/vnd.api+json",
+  "application/hal+json",
+  "application/xml",
+  "application/x-www-form-urlencoded",
+  "text/html",
+  "text/plain",
+]
+
+export function isJSONContentType(contentType) {
+  if (contentType.includes(";")) {
+    const [justContentType] = contentType.split(";")
+
+    return (
+      justContentType === "application/json" ||
+      justContentType === "application/vnd.api+json" ||
+      justContentType === "application/hal+json"
+    )
+  } else {
+    return (
+      contentType === "application/json" ||
+      contentType === "application/vnd.api+json" ||
+      contentType === "application/hal+json"
+    )
+  }
+}

helpers/utils/debounce.js

@@ -4,7 +4,7 @@
 // NOTE : Don't use lambda functions as this doesn't get bound properly in them, use the 'function (args) {}' format
 const debounce = (func, delay) => {
   let inDebounce
-  return function() {
+  return function () {
     const context = this
     const args = arguments
     clearTimeout(inDebounce)

helpers/utils/uri.js

@@ -0,0 +1,13 @@
+export function parseUrlAndPath(value) {
+  let result = {}
+  try {
+    let url = new URL(value)
+    result.url = url.origin
+    result.path = url.pathname
+  } catch (error) {
+    let uriRegex = value.match(/^((http[s]?:\/\/)?(<<[^\/]+>>)?[^\/]*|)(\/?.*)$/)
+    result.url = uriRegex[1]
+    result.path = uriRegex[4]
+  }
+  return result
+}

helpers/utils/valid.js

@@ -0,0 +1,37 @@
+const [wsRegexIP, wsRegexHostname] = generateREForProtocol("^(wss?:\\/\\/)?")
+const [sseRegexIP, sseRegexHostname] = generateREForProtocol("^(https?:\\/\\/)?")
+const [socketioRegexIP, socketioRegexHostname] = generateREForProtocol(
+  "^((wss?:\\/\\/)|(https?:\\/\\/))?"
+)
+
+function generateREForProtocol(protocol) {
+  return [
+    new RegExp(
+      `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
+    ),
+    new RegExp(
+      `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
+    ),
+  ]
+}
+
+/**
+ * valid url for ws/wss
+ */
+export function wsValid(url) {
+  return wsRegexIP.test(url) || wsRegexHostname.test(url)
+}
+
+/**
+ * valid url for http/https
+ */
+export function httpValid(url) {
+  return sseRegexIP.test(url) || sseRegexHostname.test(url)
+}
+
+/**
+ * valid url for ws/wss/http/https
+ */
+export function socketioValid(url) {
+  return socketioRegexIP.test(url) || socketioRegexHostname.test(url)
+}

lang/en-US.json

@@ -15,7 +15,7 @@
   "subscribe": "Subscribe",
   "choose_language": "Choose Language",
   "shortcuts": "Shortcuts",
-  "send_request": "Send Request",
+  "send_request": "Send/Cancel Request",
   "save_to_collections": "Save to Collections",
   "copy_request_link": "Copy Request Link",
   "reset_request": "Reset Request",
@@ -184,7 +184,10 @@
   "waiting_receive_schema": "(waiting to receive schema)",
   "gql_prettify_invalid_query": "Couldn't prettify an invalid query, solve query syntax errors and try again",
   "prettify_query": "Prettify Query",
+  "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
+  "prettify_body": "Prettify body",
   "cancel": "Cancel",
+  "cancelled": "Cancelled",
   "save": "Save",
   "dismiss": "Dismiss",
   "are_you_sure": "Are you sure?",
@@ -282,5 +285,7 @@
   "mqtt_topic_title": "Publish / Subscribe topic",
   "mqtt_publish": "Publish",
   "mqtt_subscribe": "Subscribe",
-  "mqtt_unsubscribe": "Unsubscribe"
+  "mqtt_unsubscribe": "Unsubscribe",
+  "pre_request_script": "Pre-request Script",
+  "tests": "Tests"
 }

lang/es-ES.json

@@ -29,28 +29,28 @@
   "label": "Etiqueta",
   "again": "De nuevo",
   "content_type": "Tipo de Contenido",
-  "raw_input": "Datos sin Procesar",
+  "raw_input": "Datos sin procesar",
   "parameter_list": "Lista de Parámetros",
-  "raw_request_body": "Cuerpo de la Solicitud sin Procesar",
+  "raw_request_body": "Cuerpo de la solicitud sin procesar",
   "show_code": "Mostrar el código",
   "hide_code": "Ocultar el código",
-  "show_prerequest_script": "Mostrar Script pre solicitud",
+  "show_prerequest_script": "Mostrar script pre solicitud",
   "hide_prerequest_script": "Ocultar Script pre solicitud",
   "authentication": "Autenticación",
   "authentication_type": "Tipo de autenticación",
-  "include_in_url": "Incluir en el URL",
+  "include_in_url": "Incluir en la URL",
   "parameters": "Parámetros",
   "expand_response": "Ampliar Respuesta",
-  "collapse_response": "Contraer Respuesta",
+  "collapse_response": "Contraer respuesta",
   "hide_preview": "Ocultar la vista previa",
-  "preview_html": "Vista Previa del HTML",
+  "preview_html": "Vista previa del HTML",
   "history": "Historial",
   "collections": "Colecciones",
   "import_curl": "Importar cURL",
   "import": "Importar",
   "generate_code": "Generar código",
   "request_type": "Tipo de Petición",
-  "generated_code": "Código Generado",
+  "generated_code": "Código generado",
   "status": "Estado",
   "headers": "Cabeceras",
   "websocket": "WebSocket",
@@ -78,7 +78,7 @@
   "enabled": "Habilitado",
   "disabled": "Deshabilitado",
   "proxy": "Proxy",
-  "postwoman_official_proxy_hosting": "Proxy Oficial de Postwoman está hospedado en Apollo Software.",
+  "postwoman_official_proxy_hosting": "El proxy Oficial de Postwoman está hospedado en Apollo Software.",
   "read_the": "Leer la",
   "apollosw_privacy_policy": "Política de Privacidad de Apollo Software",
   "contact_us": "Contáctenos",
@@ -87,7 +87,7 @@
   "start": "Comienzo",
   "stop": "Detener",
   "access_token": "Token de acceso",
-  "token_list": "Lista de token",
+  "token_list": "Lista de tokens",
   "get_token": "Obtener un nuevo token",
   "manage_token": "Gestionar el token de acceso",
   "save_token": "Guardar el token de acceso",
@@ -97,7 +97,7 @@
   "manage_token_req": "Gestionar la petición del token",
   "use_token_req": "Usar el token de la petición",
   "token_req_name": "Nombre de la petición",
-  "token_req_details": "Petición de detalles",
+  "token_req_details": "Detalles de la petición",
   "token_name": "Nombre del token",
   "oidc_discovery_url": "URL de descubrimiento de OIDC",
   "auth_url": "URL de autenticación",
@@ -108,9 +108,9 @@
   "token_req_list": "Lista de solicitud de token",
   "no_path": "Sin ruta",
   "no_label": "Sin etiqueta",
-  "prerequest_script": "Pre-Request Script",
-  "no_prerequest_script": "Script sin pre-requisito",
-  "search": "buscar historial",
+  "prerequest_script": "Script pre solicitud",
+  "no_prerequest_script": "Script sin pre solicitud",
+  "search": "Buscar",
   "history_empty": "Historial vacío",
   "history_deleted": "Historial borrado",
   "clear": "Limpiar",
@@ -151,16 +151,16 @@
   "connected_to": "Conectado a {name}",
   "disconnected": "Desconectado",
   "disconnected_from": "Desconectado desde {name}",
-  "something_went_wrong": "Algo ha salido mal!",
+  "something_went_wrong": "¡Algo ha salido mal!",
   "error_occurred": "Ha ocurrido un error.",
   "browser_support_sse": "Este navegador parace no tener soporte a los eventos enviados desde el servidor.",
-  "log": "Bitácora",
+  "log": "Registro",
   "no_url": "Sin URL",
   "run_query": "Ejecutar consulta",
   "copy_query": "Copiar consulta",
   "kinda_dark": "Un poco oscúro",
-  "clearly_white": "Claramento blanco",
-  "just_black": "Solo Negro",
+  "clearly_white": "Claramente blanco",
+  "just_black": "Solo negro",
   "auto_system": "Autenticación (sistema)",
   "green": "Verde",
   "yellow": "Amarillo",
@@ -176,7 +176,7 @@
   "cancel": "Cancelar",
   "save": "Guardar",
   "dismiss": "Descartar",
-  "are_you_sure": "Está seguro?",
+  "are_you_sure": "¿Está seguro?",
   "yes": "Sí",
   "no": "No",
   "restore": "Restaurar",
@@ -185,13 +185,13 @@
   "nothing_found": "No se encontró nada",
   "replace_current": "Reemplaza el actual",
   "replace_json": "Reemplazar con JSON",
-  "preserve_current": "Preservar el actual",
+  "preserve_current": "Conservar el actual",
   "import_json": "Importar desde JSON",
   "download_file": "Descargar archivo",
   "upload_file": "Cargar archivo",
   "copy_response": "Copiar respuesta",
-  "copy_code": "Copiar codigo",
-  "copy_schema": "Copiar Esquema",
+  "copy_code": "Copiar código",
+  "copy_schema": "Copiar esquema",
   "use_request": "Usar la petición",
   "documentation": "Documentación",
   "docs": "Documentos",
@@ -216,20 +216,20 @@
   "username": "Nombre de usuario",
   "password": "Contrasaeña",
   "token": "Token",
-  "payload": "Carga",
+  "payload": "Datos",
   "choose_file": "Seleccione un archivo",
   "file_imported": "Archivo imporado",
   "f12_details": "(F12 para ver detalles)",
-  "we_use_cookies": "Usamos las cookies",
+  "we_use_cookies": "Usamos cookies",
   "copied_to_clipboard": "Copiado al portapapeles",
   "finished_in": "Terminado en {duration}ms",
   "check_console_details": "Verifique la consola para más detalles.",
-  "download_started": "Inició la descarga",
-  "url_invalid_format": "La URL no está formateado apropiadamente",
+  "download_started": "Descarga iniciada",
+  "url_invalid_format": "La URL no está formateada apropiadamente",
   "curl_invalid_format": "El cURL no está formateado apropiadamente",
   "enable_proxy": "Pruebe habilitando el Proxy",
   "complete_config_urls": "Por favor, termine la configuración de las urls.",
-  "token_request_saved": "La petición de tToken ha sido guardada",
+  "token_request_saved": "La petición de Token ha sido guardada",
   "donate_info1": "Si le ha gustado su productividad usando Postwoman, considere hacer una donación como un signo de su apreciación.",
   "donate_info2": "Puede ayudar al desarrollo de Postwoman mediante los siguientes métodos:",
   "one_time_recurring": "Una vez o recurrente",
@@ -239,11 +239,11 @@
   "error": "Error",
   "go_home": "Ir al inicio",
   "reload": "Recargar",
-  "enter_curl": "Intruduzca cURL",
+  "enter_curl": "Introduzca cURL",
   "empty": "Vacío",
   "extensions": "Extensiones",
   "extensions_info1": "Extensión del navegador que simplifica el acceso a Postwoman",
-  "extensions_info2": "Obtener la extensión del navegador de Postwoman!",
+  "extensions_info2": "¡Obtener la extensión del navegador de Postwoman!",
   "installed": "Instalado",
   "login_with": "Iniciar sesión con",
   "logged_out": "Sesión cerreda",
@@ -252,9 +252,40 @@
   "sync": "Sync",
   "syncHistory": "Historial",
   "syncCollections": "Colecciones",
-  "syncEnvironments": "Environments",
+  "syncEnvironments": "Entornos",
   "turn_on": "Encender",
   "login_first": "Inicie sesión primero",
   "paste_a_collection": "Pegar una Colección",
-  "import_from_sync": "Importar desde Sync"
+  "import_from_sync": "Importar desde Sync",
+  "add_one_variable": "(añade al menos una variable)",
+  "check_graphql_valid": "Compruebe la URL para ver si es un endpoint GraphQL válido",
+  "edit_environment": "Editar entorno",
+  "env_variable_list": "Lista de variables",
+  "environments": "Entornos",
+  "extensions_use_toggle": "Usar la extensión del navegador para enviar solicitudes (si está presente)",
+  "event_name": "Nombre de envento",
+  "gql_prettify_invalid_query": "No se puede formatear una consulta inválida, resuelva la sintáxis de la query y vuelva a intentarlo",
+  "graphql_introspect_failed": "Error recuperando los detalles del esquema.",
+  "import_failed": "Importe fallido",
+  "invalid_collection_name": "Por favor, proporcione un nombre válido para la colección.",
+  "waiting_receive_schema": "(esperando a recibir el esquema)",
+  "use_environment": "Usar entorno",
+  "socketio": "Socket.IO",
+  "waiting_receive_response": "(esperando a recibir respuesta)",
+  "scrollInto_use_toggle": "Auto scroll",
+  "prettify_query": "Formatear query",
+  "prettify_body": "Formatear cuerpo",
+  "paste_a_note": "Pegar una nota",
+  "notes": "Notas",
+  "new_environment": "Nuevo entorno",
+  "my_new_environment": "Mi nuevo entorno",
+  "mqtt_unsubscribe": "Desuscribirse",
+  "mqtt_topic": "Tema",
+  "mqtt_topic_title": "Publicar / Suscribir a tema",
+  "mqtt_subscribe": "Suscribir",
+  "mqtt_publish": "Publicar",
+  "mqtt": "MQTT",
+  "login_success": "Logueado correctamente",
+  "invalid_environment_name": "Por favor, proporcione un nombre válido para el entorno",
+  "json_prettify_invalid_body": "No se pudo formatear un cuerpo inválido, resuelva los errores de sintaxis y vuelva a intentarlo"
 }