🔖 v1.9.7

Bumps [@nuxtjs/sitemap](https://github.com/nuxt-community/sitemap-module) from 2.2.1 to 2.3.0.
- [Release notes](https://github.com/nuxt-community/sitemap-module/releases)
- [Changelog](https://github.com/nuxt-community/sitemap-module/blob/dev/CHANGELOG.md)
- [Commits](https://github.com/nuxt-community/sitemap-module/compare/v2.2.1...v2.3.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.all-contributorsrc

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

.dependabot/config.yml

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

.env.example

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

.github/FUNDING.yml

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

.prettierignore

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

.travis.yml

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

.vscode/settings.json

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

CHANGELOG.md

@@ -1,5 +1,259 @@
 # Changelog
 
+## [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)
+
+**Implemented enhancements:**
+
+- Unable to use postwoman with latest docker image from docker hub [\#866](https://github.com/liyasthomas/postwoman/issues/866)
+- support response json array [\#805](https://github.com/liyasthomas/postwoman/issues/805)
+- Add Format Body option [\#767](https://github.com/liyasthomas/postwoman/issues/767)
+- Allow importing environment variables via Postman environment json files [\#759](https://github.com/liyasthomas/postwoman/issues/759)
+- Request headers kept same after changing request type [\#752](https://github.com/liyasthomas/postwoman/issues/752)
+- Add compatibility for postman collections & environments [\#746](https://github.com/liyasthomas/postwoman/issues/746)
+- Add GraphQL syntax highlighting [\#741](https://github.com/liyasthomas/postwoman/issues/741)
+- 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)
+- 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)
+- Allow importing environment variables via Postman environment json files [\#862](https://github.com/liyasthomas/postwoman/pull/862) ([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))
+- GraphQL Query Editor Syntax Highlighting [\#838](https://github.com/liyasthomas/postwoman/pull/838) ([AndrewBastin](https://github.com/AndrewBastin))
+
+**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)
+- 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)
+- 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)
+- 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)
+- 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)
+- I used it to post test,but response network error  [\#750](https://github.com/liyasthomas/postwoman/issues/750)
+- Improve documentation on how to use environments [\#742](https://github.com/liyasthomas/postwoman/issues/742)
+- Broken link to translations branch [\#737](https://github.com/liyasthomas/postwoman/issues/737)
+- 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)
+
+**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))
+- 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))
+- 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))
+- chore\(deps\): remove stale dependency [\#839](https://github.com/liyasthomas/postwoman/pull/839) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- 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 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)
+- \[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))
+
+**Fixed bugs:**
+
+- Test script is not run after failing request [\#644](https://github.com/liyasthomas/postwoman/issues/644)
+- \[HELP\] Auth permission denied [\#621](https://github.com/liyasthomas/postwoman/issues/621)
+- Can't login on Brave Browser [\#607](https://github.com/liyasthomas/postwoman/issues/607)
+
+**Closed issues:**
+
+- \[UI/UX\] - Change place of Send button [\#696](https://github.com/liyasthomas/postwoman/issues/696)
+- Report Portal integration [\#691](https://github.com/liyasthomas/postwoman/issues/691)
+- Docs request: how to prevent secrets from leaving local storage wrt. sync. [\#686](https://github.com/liyasthomas/postwoman/issues/686)
+- \[bug\] - Can't make a request to HTTP [\#676](https://github.com/liyasthomas/postwoman/issues/676)
+- Looking forward to    that  the postwoman Compatible 'swagger ' at next version   [\#675](https://github.com/liyasthomas/postwoman/issues/675)
+- Error: Network Error. Check console for details. [\#673](https://github.com/liyasthomas/postwoman/issues/673)
+- \[Bug\] - Can't login to Github and Google [\#661](https://github.com/liyasthomas/postwoman/issues/661)
+- A question that has been raised but not resolved [\#658](https://github.com/liyasthomas/postwoman/issues/658)
+- An unknown error occurred whilst the proxy was processing your request. [\#656](https://github.com/liyasthomas/postwoman/issues/656)
+- Running app from downloaded zip fails to compile [\#651](https://github.com/liyasthomas/postwoman/issues/651)
+- Environment variable in path won't update [\#641](https://github.com/liyasthomas/postwoman/issues/641)
+- Info: The current domain is not authorized for OAuth operations Error [\#637](https://github.com/liyasthomas/postwoman/issues/637)
+- A suggestion for UI  [\#635](https://github.com/liyasthomas/postwoman/issues/635)
+- How to use postwoman for local development and testing [\#634](https://github.com/liyasthomas/postwoman/issues/634)
+- How to debug localhost \(cors\) [\#630](https://github.com/liyasthomas/postwoman/issues/630)
+- 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)
+
+**Merged pull requests:**
+
+- Add application/vnd.api+json [\#695](https://github.com/liyasthomas/postwoman/pull/695) ([allthesignals](https://github.com/allthesignals))
+- Fix raw input \(JSON\) [\#693](https://github.com/liyasthomas/postwoman/pull/693) ([leomp12](https://github.com/leomp12))
+- chore\(deps\): bump firebase from 7.11.0 to 7.12.0 [\#689](https://github.com/liyasthomas/postwoman/pull/689) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump vuefire from 2.2.1 to 2.2.2 [\#688](https://github.com/liyasthomas/postwoman/pull/688) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump cypress from 4.1.0 to 4.2.0 [\#685](https://github.com/liyasthomas/postwoman/pull/685) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump start-server-and-test from 1.10.10 to 1.10.11 [\#684](https://github.com/liyasthomas/postwoman/pull/684) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt-i18n from 6.6.0 to 6.6.1 [\#683](https://github.com/liyasthomas/postwoman/pull/683) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump nuxt from 2.11.0 to 2.12.0 [\#682](https://github.com/liyasthomas/postwoman/pull/682) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Fix setting default raw params [\#681](https://github.com/liyasthomas/postwoman/pull/681) ([leomp12](https://github.com/leomp12))
+- Fix handling content type and raw input [\#678](https://github.com/liyasthomas/postwoman/pull/678) ([leomp12](https://github.com/leomp12))
+- \[Snyk\] Security upgrade yargs-parser from 18.1.0 to 18.1.1 [\#674](https://github.com/liyasthomas/postwoman/pull/674) ([snyk-bot](https://github.com/snyk-bot))
+- chore\(deps-dev\): bump start-server-and-test from 1.10.9 to 1.10.10 [\#672](https://github.com/liyasthomas/postwoman/pull/672) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.10.0 to 7.11.0 [\#671](https://github.com/liyasthomas/postwoman/pull/671) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ✅ Updating tests [\#669](https://github.com/liyasthomas/postwoman/pull/669) ([liyasthomas](https://github.com/liyasthomas))
+- Updating tests [\#668](https://github.com/liyasthomas/postwoman/pull/668) ([liyasthomas](https://github.com/liyasthomas))
+- APIs [\#667](https://github.com/liyasthomas/postwoman/pull/667) ([liyasthomas](https://github.com/liyasthomas))
+- Insecure Websocket connection issue while connecting to MQTT broker. [\#666](https://github.com/liyasthomas/postwoman/pull/666) ([rahulnpadalkar](https://github.com/rahulnpadalkar))
+- Improving performance [\#664](https://github.com/liyasthomas/postwoman/pull/664) ([liyasthomas](https://github.com/liyasthomas))
+- Feature/mqtt [\#663](https://github.com/liyasthomas/postwoman/pull/663) ([liyasthomas](https://github.com/liyasthomas))
+- Added Support for MQTT [\#662](https://github.com/liyasthomas/postwoman/pull/662) ([rahulnpadalkar](https://github.com/rahulnpadalkar))
+- chore\(deps\): bump yargs-parser from 18.0.0 to 18.1.0 [\#660](https://github.com/liyasthomas/postwoman/pull/660) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump start-server-and-test from 1.10.8 to 1.10.9 [\#659](https://github.com/liyasthomas/postwoman/pull/659) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Added icon slot to tabs [\#657](https://github.com/liyasthomas/postwoman/pull/657) ([liyasthomas](https://github.com/liyasthomas))
+- Refactor/ui [\#655](https://github.com/liyasthomas/postwoman/pull/655) ([liyasthomas](https://github.com/liyasthomas))
+- even [\#654](https://github.com/liyasthomas/postwoman/pull/654) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump yargs-parser from 17.0.0 to 18.0.0 [\#653](https://github.com/liyasthomas/postwoman/pull/653) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.9.3 to 7.10.0 [\#652](https://github.com/liyasthomas/postwoman/pull/652) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Add http/https support to socketio url valid [\#648](https://github.com/liyasthomas/postwoman/pull/648) ([moonrailgun](https://github.com/moonrailgun))
+- Refactor/ui [\#647](https://github.com/liyasthomas/postwoman/pull/647) ([liyasthomas](https://github.com/liyasthomas))
+- Even [\#646](https://github.com/liyasthomas/postwoman/pull/646) ([liyasthomas](https://github.com/liyasthomas))
+- Run tests even after failed request [\#645](https://github.com/liyasthomas/postwoman/pull/645) ([liyasthomas](https://github.com/liyasthomas))
+- Feature: add socket io support [\#640](https://github.com/liyasthomas/postwoman/pull/640) ([moonrailgun](https://github.com/moonrailgun))
+- Removed linting for the collection docs import editor [\#639](https://github.com/liyasthomas/postwoman/pull/639) ([AndrewBastin](https://github.com/AndrewBastin))
+- Moving or renaming files [\#638](https://github.com/liyasthomas/postwoman/pull/638) ([liyasthomas](https://github.com/liyasthomas))
+- Refactor/ui [\#636](https://github.com/liyasthomas/postwoman/pull/636) ([liyasthomas](https://github.com/liyasthomas))
+- Minor GraphQL page improvements [\#631](https://github.com/liyasthomas/postwoman/pull/631) ([dmitryyankowski](https://github.com/dmitryyankowski))
+- 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))
+- docs: add dmitryyankowski as a contributor [\#619](https://github.com/liyasthomas/postwoman/pull/619) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- Link multiple auth providers [\#618](https://github.com/liyasthomas/postwoman/pull/618) ([liyasthomas](https://github.com/liyasthomas))
+- Add --staged parameter to pretty-quick pre-commit [\#617](https://github.com/liyasthomas/postwoman/pull/617) ([dmitryyankowski](https://github.com/dmitryyankowski))
+- :bug: FIxed URI not updating on Clear content, minor formData improve… [\#612](https://github.com/liyasthomas/postwoman/pull/612) ([liyasthomas](https://github.com/liyasthomas))
+- Update proxy information. [\#610](https://github.com/liyasthomas/postwoman/pull/610) ([NBTX](https://github.com/NBTX))
+- Fixed install extension toast appearing even when extension is installed [\#609](https://github.com/liyasthomas/postwoman/pull/609) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps-dev\): bump lint-staged from 10.0.7 to 10.0.8 [\#606](https://github.com/liyasthomas/postwoman/pull/606) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Added regex to handle url parts [\#603](https://github.com/liyasthomas/postwoman/pull/603) ([JacobAnavisca](https://github.com/JacobAnavisca))
+- 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))
+
 ## [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)
@@ -9,11 +263,8 @@
 - Disable SSL cert for websockets [\#557](https://github.com/liyasthomas/postwoman/issues/557)
 - Feature request: Keyboard shortcuts for folder creation [\#539](https://github.com/liyasthomas/postwoman/issues/539)
 - Friendly minded  GraphQL [\#468](https://github.com/liyasthomas/postwoman/issues/468)
-- multipart/form-data support [\#434](https://github.com/liyasthomas/postwoman/issues/434)
-- Implement pre-request and post-request scripts \(and request chaining\) [\#218](https://github.com/liyasthomas/postwoman/issues/218)
 - Environment management and configuration [\#147](https://github.com/liyasthomas/postwoman/issues/147)
 - POST request body editor reacts to the content type [\#594](https://github.com/liyasthomas/postwoman/pull/594) ([AndrewBastin](https://github.com/AndrewBastin))
-- Environment Mangement [\#591](https://github.com/liyasthomas/postwoman/pull/591) ([JacobAnavisca](https://github.com/JacobAnavisca))
 - GraphQL Query Autocompletion [\#590](https://github.com/liyasthomas/postwoman/pull/590) ([AndrewBastin](https://github.com/AndrewBastin))
 - Postman collection parsing [\#574](https://github.com/liyasthomas/postwoman/pull/574) ([JacobAnavisca](https://github.com/JacobAnavisca))
 - Added toggle to decide whether extensions should be used [\#551](https://github.com/liyasthomas/postwoman/pull/551) ([AndrewBastin](https://github.com/AndrewBastin))
@@ -25,6 +276,7 @@
 - Auto Theme Selection is kinda difficult to see [\#563](https://github.com/liyasthomas/postwoman/issues/563)
 - Can't send request to localhost via Chrome extention [\#560](https://github.com/liyasthomas/postwoman/issues/560)
 - Validation for duplicate collection ignores letter case [\#547](https://github.com/liyasthomas/postwoman/issues/547)
+- Multiple collections with the same name shouldn't exist [\#509](https://github.com/liyasthomas/postwoman/issues/509)
 - Build failed [\#327](https://github.com/liyasthomas/postwoman/issues/327)
 - Fixed typo in translation file for Auto theme [\#556](https://github.com/liyasthomas/postwoman/pull/556) ([AndrewBastin](https://github.com/AndrewBastin))
 
@@ -41,6 +293,7 @@
 
 **Merged pull requests:**
 
+- Feature: Add prettier/pretty-quick formatting w/ Husky pre-commit [\#596](https://github.com/liyasthomas/postwoman/pull/596) ([dmitryyankowski](https://github.com/dmitryyankowski))
 - Fix variablesJSONString store default for GraphQL page [\#593](https://github.com/liyasthomas/postwoman/pull/593) ([dmitryyankowski](https://github.com/dmitryyankowski))
 - 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))
@@ -71,14 +324,13 @@
 - 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))
-- Refactor [\#543](https://github.com/liyasthomas/postwoman/pull/543) ([liyasthomas](https://github.com/liyasthomas))
 - chore\(deps\): bump firebase from 7.7.0 to 7.8.0 [\#542](https://github.com/liyasthomas/postwoman/pull/542) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps\): bump graphql from 14.5.8 to 14.6.0 [\#541](https://github.com/liyasthomas/postwoman/pull/541) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - 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))
 - Updating spanish translation [\#529](https://github.com/liyasthomas/postwoman/pull/529) ([liyasthomas](https://github.com/liyasthomas))
-- chore\(deps\): bump nuxt-i18n from 6.4.1 to 6.5.0 [\#522](https://github.com/liyasthomas/postwoman/pull/522) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- even merge [\#528](https://github.com/liyasthomas/postwoman/pull/528) ([liyasthomas](https://github.com/liyasthomas))
 
 ## [v1.8.0](https://github.com/liyasthomas/postwoman/tree/v1.8.0) (2020-01-28)
 
@@ -95,7 +347,6 @@
 - Feature Request: Consumer Driven Contract Testing [\#420](https://github.com/liyasthomas/postwoman/issues/420)
 - Feature Request: Support OAuth2/OIDC [\#337](https://github.com/liyasthomas/postwoman/issues/337)
 - Add DB cache [\#26](https://github.com/liyasthomas/postwoman/issues/26)
-- Update asset/\*. js to  asset/\*. ts. [\#517](https://github.com/liyasthomas/postwoman/pull/517) ([Sn005](https://github.com/Sn005))
 - Auth [\#513](https://github.com/liyasthomas/postwoman/pull/513) ([liyasthomas](https://github.com/liyasthomas))
 - Support for Google Chrome Extension [\#512](https://github.com/liyasthomas/postwoman/pull/512) ([AndrewBastin](https://github.com/AndrewBastin))
 - GraphQL query validation based on schema [\#508](https://github.com/liyasthomas/postwoman/pull/508) ([AndrewBastin](https://github.com/AndrewBastin))
@@ -109,9 +360,9 @@
 **Fixed bugs:**
 
 - Warn the user if name field was left blank while creating a new collection [\#515](https://github.com/liyasthomas/postwoman/issues/515)
-- Multiple collections with the same name shouldn't exist [\#509](https://github.com/liyasthomas/postwoman/issues/509)
 - GraphQL String variables are null [\#497](https://github.com/liyasthomas/postwoman/issues/497)
 - Post request body is empty [\#473](https://github.com/liyasthomas/postwoman/issues/473)
+- WebSocket page freezes when pasting long URL [\#471](https://github.com/liyasthomas/postwoman/issues/471)
 
 **Closed issues:**
 
@@ -127,10 +378,11 @@
 
 **Merged pull requests:**
 
+- Refactor [\#543](https://github.com/liyasthomas/postwoman/pull/543) ([liyasthomas](https://github.com/liyasthomas))
 - Enhancements [\#531](https://github.com/liyasthomas/postwoman/pull/531) ([jamesgeorge007](https://github.com/jamesgeorge007))
 - Merge pull request \#530 from liyasthomas/feature/post-request-tests [\#530](https://github.com/liyasthomas/postwoman/pull/530) ([liyasthomas](https://github.com/liyasthomas))
-- even merge [\#528](https://github.com/liyasthomas/postwoman/pull/528) ([liyasthomas](https://github.com/liyasthomas))
 - Refactor [\#523](https://github.com/liyasthomas/postwoman/pull/523) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump nuxt-i18n from 6.4.1 to 6.5.0 [\#522](https://github.com/liyasthomas/postwoman/pull/522) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps\): bump v-tooltip from 2.0.2 to 2.0.3 [\#521](https://github.com/liyasthomas/postwoman/pull/521) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - chore\(deps-dev\): bump cypress from 3.8.2 to 3.8.3 [\#520](https://github.com/liyasthomas/postwoman/pull/520) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - Feature/post request tests [\#518](https://github.com/liyasthomas/postwoman/pull/518) ([nickpalenchar](https://github.com/nickpalenchar))
@@ -148,7 +400,6 @@
 - Replaced hard-coded strings with localizable strings [\#490](https://github.com/liyasthomas/postwoman/pull/490) ([liyasthomas](https://github.com/liyasthomas))
 - 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))
 - OAuth 2.0/OIDC Access Token Retrieval Support [\#476](https://github.com/liyasthomas/postwoman/pull/476) ([reefqi037](https://github.com/reefqi037))
@@ -161,11 +412,13 @@
 
 - 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)
+- multipart/form-data support [\#434](https://github.com/liyasthomas/postwoman/issues/434)
 - 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)
+- Ability to connect to a MQTT broker [\#342](https://github.com/liyasthomas/postwoman/issues/342)
 - 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)
@@ -193,11 +446,10 @@
 - Two Way Data Binding \(v-model\) to Ace Editor component [\#379](https://github.com/liyasthomas/postwoman/pull/379) ([AndrewBastin](https://github.com/AndrewBastin))
 - Basic i18n support [\#351](https://github.com/liyasthomas/postwoman/pull/351) ([liyasthomas](https://github.com/liyasthomas))
 - Undo header/param/body param deletion [\#350](https://github.com/liyasthomas/postwoman/pull/350) ([AndrewBastin](https://github.com/AndrewBastin))
-- refactor: minor improvements [\#343](https://github.com/liyasthomas/postwoman/pull/343) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- 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)
 - API Documentation won't be generated [\#456](https://github.com/liyasthomas/postwoman/issues/456)
 - Sharing Requests via link is not working [\#435](https://github.com/liyasthomas/postwoman/issues/435)
 - URL input text is so stutters [\#412](https://github.com/liyasthomas/postwoman/issues/412)
@@ -251,6 +503,7 @@
 
 **Merged pull requests:**
 
+- ⬆️ 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 @nuxtjs/axios from 5.9.0 to 5.9.2 [\#472](https://github.com/liyasthomas/postwoman/pull/472) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
 - Added variables to graphql page. [\#464](https://github.com/liyasthomas/postwoman/pull/464) ([pushrbx](https://github.com/pushrbx))
 - i18n [\#463](https://github.com/liyasthomas/postwoman/pull/463) ([liyasthomas](https://github.com/liyasthomas))
@@ -299,6 +552,7 @@
 - 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))
 - 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))
 
 ## [v1.0.0](https://github.com/liyasthomas/postwoman/tree/v1.0.0) (2019-11-04)
 
@@ -306,6 +560,7 @@
 
 **Implemented enhancements:**
 
+- Implement pre-request and post-request scripts \(and request chaining\) [\#218](https://github.com/liyasthomas/postwoman/issues/218)
 - 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)

README.md

@@ -92,6 +92,10 @@ _Customized themes are synced with local session storage_
 
 📡 **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.
+
+🦟 **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
@@ -161,7 +165,7 @@ _Collections are synced with local session storage_
  - Access APIs served in non-HTTPS (`http://`)
  - Use custom Proxy URL
 
-_Official Postwoman Proxy is hosted by ApolloTV - **[Privacy policy](https://apollotv.xyz/legal)**_
+_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.
 
@@ -219,6 +223,8 @@ _Add-ons are developed and maintained under **[Official Postwoman Organization](
 **Sync:**
  - History
  - Collections
+ - Environments
+ - Notes
 
 ✅ **Post-Request Tests β**: Write tests associated with a request that are executed after the request response.
 
@@ -227,6 +233,17 @@ _Add-ons are developed and maintained under **[Official Postwoman Organization](
  - Filter response headers
  - Parse the response data
 
+📝 **Notes** : Instantly jot down notes, tasks or whatever you feel like as they come to your mind.
+
+_Notes are only available for signed-in users_
+
+🌱 **Environments** : Environment variables allow you to store and reuse values in your requests and scripts.
+
+**Use-cases:**
+ - By storing a value in a variable, you can reference it throughout your request section
+ - If you need to update the value, you only have to change it in one place
+ - Using variables increases your ability to work efficiently and minimizes the likelihood of error
+
 **To find out more, please check out [Postwoman Wiki](https://github.com/liyasthomas/postwoman/wiki).**
 
 ## Demo 🚀 [![Website](https://img.shields.io/website?url=https%3A%2F%2Fpostwoman.io&logo=Postwoman)](https://postwoman.io)
@@ -257,6 +274,10 @@ You're done!
 
 ## Developing 👷
 
+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)._
+
 #### Use a browser based development environment:
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/liyasthomas/postwoman)
@@ -325,29 +346,35 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
 * ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
 
 ### Collaborators <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-14-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://liyasthomas.web.app"><img src="https://avatars1.githubusercontent.com/u/10395817?v=4" width="100px;" alt="Liyas Thomas"/><br /><sub><b>Liyas Thomas</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=liyasthomas" title="Code">💻</a> <a href="#design-liyasthomas" title="Design">🎨</a></td>
-    <td align="center"><a href="https://github.com/NBTX"><img src="https://avatars3.githubusercontent.com/u/43181178?v=4" width="100px;" alt="John Harker"/><br /><sub><b>John Harker</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=NBTX" title="Code">💻</a> <a href="#design-NBTX" title="Design">🎨</a></td>
-    <td align="center"><a href="https://nicholaslaroux.com"><img src="https://avatars0.githubusercontent.com/u/1557529?v=4" width="100px;" alt="Nicholas La Roux"/><br /><sub><b>Nicholas La Roux</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=larouxn" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/yubathom"><img src="https://avatars3.githubusercontent.com/u/4117768?v=4" width="100px;" alt="Thomas Yuba"/><br /><sub><b>Thomas Yuba</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=yubathom" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.linkedin.com/in/nickpalenchar"><img src="https://avatars1.githubusercontent.com/u/7539781?v=4" width="100px;" alt="Nick Palenchar"/><br /><sub><b>Nick Palenchar</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nickpalenchar" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/AndrewBastin"><img src="https://avatars2.githubusercontent.com/u/9131943?v=4" width="100px;" alt="Andrew Bastin"/><br /><sub><b>Andrew Bastin</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=AndrewBastin" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/vlad0337187"><img src="https://avatars1.githubusercontent.com/u/12682937?v=4" width="100px;" alt="Vladislav"/><br /><sub><b>Vladislav</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=vlad0337187" title="Code">💻</a></td>
+    <td align="center"><a href="https://liyasthomas.web.app"><img src="https://avatars1.githubusercontent.com/u/10395817?v=4" width="100px;" alt=""/><br /><sub><b>Liyas Thomas</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=liyasthomas" title="Code">💻</a> <a href="#design-liyasthomas" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/NBTX"><img src="https://avatars3.githubusercontent.com/u/43181178?v=4" width="100px;" alt=""/><br /><sub><b>John Harker</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=NBTX" title="Code">💻</a> <a href="#design-NBTX" title="Design">🎨</a></td>
+    <td align="center"><a href="https://nicholaslaroux.com"><img src="https://avatars0.githubusercontent.com/u/1557529?v=4" width="100px;" alt=""/><br /><sub><b>Nicholas La Roux</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=larouxn" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/yubathom"><img src="https://avatars3.githubusercontent.com/u/4117768?v=4" width="100px;" alt=""/><br /><sub><b>Thomas Yuba</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=yubathom" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.linkedin.com/in/nickpalenchar"><img src="https://avatars1.githubusercontent.com/u/7539781?v=4" width="100px;" alt=""/><br /><sub><b>Nick Palenchar</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nickpalenchar" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/AndrewBastin"><img src="https://avatars2.githubusercontent.com/u/9131943?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Bastin</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=AndrewBastin" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/vlad0337187"><img src="https://avatars1.githubusercontent.com/u/12682937?v=4" width="100px;" alt=""/><br /><sub><b>Vladislav</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=vlad0337187" title="Code">💻</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/izerozlu"><img src="https://avatars3.githubusercontent.com/u/17386157?v=4" width="100px;" alt="izerozlu"/><br /><sub><b>izerozlu</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=izerozlu" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/JacobAnavisca"><img src="https://avatars2.githubusercontent.com/u/21232366?v=4" width="100px;" alt="Jacob Anavisca"/><br /><sub><b>Jacob Anavisca</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=JacobAnavisca" title="Code">💻</a></td>
-    <td align="center"><a href="http://nityanandagohain.github.io"><img src="https://avatars3.githubusercontent.com/u/26831659?v=4" width="100px;" alt="Nityananda Gohain"/><br /><sub><b>Nityananda Gohain</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nityanandagohain" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/hosseinnedaee"><img src="https://avatars2.githubusercontent.com/u/42691357?v=4" width="100px;" alt="Hossein Nedaee"/><br /><sub><b>Hossein Nedaee</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=hosseinnedaee" title="Code">💻</a></td>
-    <td align="center"><a href="https://ghuser.io/jamesgeorge007"><img src="https://avatars2.githubusercontent.com/u/25279263?v=4" width="100px;" alt="James George"/><br /><sub><b>James George</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=jamesgeorge007" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/izerozlu"><img src="https://avatars3.githubusercontent.com/u/17386157?v=4" width="100px;" alt=""/><br /><sub><b>izerozlu</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=izerozlu" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/JacobAnavisca"><img src="https://avatars2.githubusercontent.com/u/21232366?v=4" width="100px;" alt=""/><br /><sub><b>Jacob Anavisca</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=JacobAnavisca" title="Code">💻</a></td>
+    <td align="center"><a href="http://nityanandagohain.github.io"><img src="https://avatars3.githubusercontent.com/u/26831659?v=4" width="100px;" alt=""/><br /><sub><b>Nityananda Gohain</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=nityanandagohain" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/hosseinnedaee"><img src="https://avatars2.githubusercontent.com/u/42691357?v=4" width="100px;" alt=""/><br /><sub><b>Hossein Nedaee</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=hosseinnedaee" title="Code">💻</a></td>
+    <td align="center"><a href="https://ghuser.io/jamesgeorge007"><img src="https://avatars2.githubusercontent.com/u/25279263?v=4" width="100px;" alt=""/><br /><sub><b>James George</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=jamesgeorge007" title="Code">💻</a></td>
+    <td align="center"><a href="https://dmitryyankowski.com"><img src="https://avatars0.githubusercontent.com/u/20114263?v=4" width="100px;" alt=""/><br /><sub><b>Dmitry Yankowski</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=dmitryyankowski" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.sboulema.nl"><img src="https://avatars2.githubusercontent.com/u/1820661?v=4" width="100px;" alt=""/><br /><sub><b>Samir Boulema</b></sub></a><br /><a href="https://github.com/liyasthomas/postwoman/commits?author=sboulema" title="Code">💻</a></td>
   </tr>
 </table>
 
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 See the list of [contributors](https://github.com/liyasthomas/postwoman/graphs/contributors) who participated in this project.
@@ -356,20 +383,10 @@ See the list of [contributors](https://github.com/liyasthomas/postwoman/graphs/c
 
 * [dev.to 👩‍💻👨‍💻](https://dev.to)
 
-### Code Contributors
-
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-
-<a href="https://github.com/liyasthomas/postwoman/graphs/contributors"><img src="https://opencollective.com/postwoman/contributors.svg?width=890&button=false" /></a>
-
 ### Financial Contributors
 
 Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/postwoman/contribute)]
 
-#### Individuals
-
-<a href="https://opencollective.com/postwoman"><img src="https://opencollective.com/postwoman/individuals.svg"></a>
-
 #### 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)]
@@ -385,6 +402,16 @@ Support this project with your organization. Your logo will show up here with a
 <a href="https://opencollective.com/postwoman/organization/8/website"><img src="https://opencollective.com/postwoman/organization/8/avatar.svg"></a>
 <a href="https://opencollective.com/postwoman/organization/9/website"><img src="https://opencollective.com/postwoman/organization/9/avatar.svg"></a>
 
+#### Individuals
+
+<a href="https://opencollective.com/postwoman"><img src="https://opencollective.com/postwoman/individuals.svg"></a>
+
+### Code Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+
+<a href="https://github.com/liyasthomas/postwoman/graphs/contributors"><img src="https://opencollective.com/postwoman/contributors.svg?width=890&button=false" /></a>
+
 ## License 📄
 
 This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.

assets/css/fonts.scss

@@ -6,7 +6,9 @@
   font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  // 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");
 }
 

assets/css/styles.scss

@@ -1,17 +1,3 @@
-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
-  transition: opacity 0.2s;
-}
-
-.page-enter,
-.page-leave-active,
-.layout-enter,
-.layout-leave-active {
-  opacity: 0;
-}
-
 $responsiveWidth: 768px;
 
 ::selection {
@@ -22,10 +8,12 @@ $responsiveWidth: 768px;
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
+  border-radius: 4px;
   background-color: var(--bg-dark-color);
 }
 
 ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
   background-color: var(--fg-light-color);
 
   &:hover {
@@ -91,6 +79,20 @@ footer {
   }
 }
 
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity 0.2s;
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+  opacity: 0;
+}
+
 .wrapper {
   min-height: 100vh;
   display: flex;
@@ -109,31 +111,6 @@ footer {
   flex: 1;
 }
 
-.slide-in {
-  position: relative;
-  animation: slideIn 0.2s forwards ease-in-out;
-}
-
-@keyframes slideIn {
-  0% {
-    opacity: 0;
-    left: -16px;
-  }
-
-  100% {
-    opacity: 1;
-    left: 0px;
-  }
-}
-
-.logo {
-  font-size: 22px;
-
-  &:hover {
-    color: var(--ac-color);
-  }
-}
-
 .nav-first,
 .sticky-inner {
   display: flex;
@@ -159,7 +136,6 @@ footer {
   order: 2;
   position: relative;
   padding: 0 16px;
-  height: 100%;
 }
 
 .nav-second {
@@ -190,6 +166,7 @@ nav.primary-nav {
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
     margin: 8px 0;
+    height: 52px;
 
     &:hover {
       color: var(--fg-color);
@@ -248,10 +225,6 @@ nav.secondary-nav {
   }
 }
 
-.footer {
-  flex-flow: column nowrap;
-}
-
 h1,
 h2,
 h3,
@@ -264,6 +237,7 @@ h4 {
 
 hr {
   border-bottom: 1px dashed var(--brd-color);
+  margin: 16px 0;
 }
 
 p {
@@ -394,7 +368,7 @@ h3.title {
   margin: 4px;
 }
 
-.info {
+.info:not(.toasted) {
   margin-left: 4px;
   color: var(--fg-light-color);
 }
@@ -480,6 +454,60 @@ fieldset {
   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,
@@ -493,63 +521,8 @@ section:target {
   }
 }
 
-legend {
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-  color: var(--fg-color);
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  * {
-    vertical-align: middle;
-  }
-
-  i {
-    margin-left: 8px;
-  }
-}
-
-fieldset.blue legend {
-  color: #57b5f9;
-}
-
-fieldset.gray legend {
-  color: #bcc2cd;
-}
-
-fieldset.green legend {
-  color: #50fa7b;
-}
-
-fieldset.cyan legend {
-  color: #8be9fd;
-}
-
-fieldset.purple legend {
-  color: #bd93f9;
-}
-
-fieldset.orange legend {
-  color: #ffb86c;
-}
-
-fieldset.pink legend {
-  color: #ff79c6;
-}
-
-fieldset.red legend {
-  color: #ff5555;
-}
-
-fieldset.yellow legend {
-  color: #f1fa8c;
-}
-
 input[type="file"],
 input[type="radio"],
-.tab,
 .hide-on-large-screen,
 #installPWA,
 .hidden {
@@ -617,6 +590,7 @@ pre {
 
   input {
     text-transform: uppercase;
+    min-width: 128px;
   }
 
   .trigger {
@@ -707,6 +681,11 @@ ol {
   padding: 0;
   list-style-type: none;
 
+  &.response-headers {
+    display: inline-flex;
+    width: 50%;
+  }
+
   ul,
   ol {
     margin: 0;
@@ -717,8 +696,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 {
@@ -741,7 +724,7 @@ ol li {
 }
 
 .show-on-large-screen {
-  display: inline-flex;
+  display: flex;
   flex: 1;
 }
 
@@ -813,9 +796,12 @@ ol li {
   &.show {
     display: flex;
     position: fixed;
-    top: 12px;
-    right: 12px;
-    z-index: 2;
+    bottom: 86px;
+    left: 50%;
+    z-index: 10001;
+    transform: translateX(-50%);
+    box-shadow: 0 4px 24px rgba(black, 0.2);
+    transition: all 0.2s ease-in-out;
   }
 }
 
@@ -825,33 +811,6 @@ section {
   border-radius: 16px;
 }
 
-.tab {
-  width: 100%;
-  order: 1;
-}
-
-input[type="radio"] + label {
-  padding: 8px 16px;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  &:hover,
-  &:active,
-  &:focus {
-    border-color: var(--brd-color);
-  }
-}
-
-input[type="radio"]:checked + label {
-  border-color: var(--fg-color);
-  color: var(--fg-color);
-}
-
-input[type="radio"]:checked + label + .tab {
-  display: block;
-}
-
 .toasted-container .toasted {
   justify-content: flex-start !important;
 }

assets/css/themes.scss

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

assets/js/curlparser.js

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

assets/js/oauth.js

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

assets/js/pwa.js

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

build.js

@@ -1,27 +1,26 @@
-const axios = require("axios");
-const fs = require("fs");
-const { spawnSync } = require("child_process");
+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, "");
+    .replace(/\n/g, "")
 
-const FAIL_ON_ERROR = false;
-const PW_BUILD_DATA_DIR = "./.postwoman";
-const IS_DEV_MODE = process.argv.includes("--dev");
+const FAIL_ON_ERROR = false
+const PW_BUILD_DATA_DIR = "./.postwoman"
+const IS_DEV_MODE = process.argv.includes("--dev")
 
 try {
-  (async () => {
+  ;(async () => {
     // Create the build data directory if it does not exist.
     if (!fs.existsSync(PW_BUILD_DATA_DIR)) {
-      fs.mkdirSync(PW_BUILD_DATA_DIR);
+      fs.mkdirSync(PW_BUILD_DATA_DIR)
     }
 
-    let version = {};
+    let version = {}
     // Get the current version name as the tag from Git.
     version.name =
-      process.env.TRAVIS_TAG ||
-      runCommand("git", ["tag --sort=committerdate | tail -1"]);
+      process.env.TRAVIS_TAG || runCommand("git", ["tag --sort=committerdate | tail -1"])
 
     // FALLBACK: If version.name was unset, let's grab it from GitHub.
     if (!version.name) {
@@ -32,32 +31,29 @@ try {
           .catch(ex => ({
             data: [
               {
-                tag_name: require("./package.json").version
-              }
-            ]
+                tag_name: require("./package.json").version,
+              },
+            ],
           }))
-      ).data[0]["tag_name"];
+      ).data[0]["tag_name"]
     }
 
     // Get the current version hash as the short hash from Git.
-    version.hash = runCommand("git", ["rev-parse", "--short", "HEAD"]);
+    version.hash = runCommand("git", ["rev-parse", "--short", "HEAD"])
     // Get the 'variant' name as the branch, if it's not master.
     version.variant =
       process.env.TRAVIS_BRANCH ||
       runCommand("git", ["branch"])
         .split("* ")[1]
-        .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
+        .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "")
     if (["", "master"].includes(version.variant)) {
-      delete version.variant;
+      delete version.variant
     }
 
     // Write version data into a file
-    fs.writeFileSync(
-      `${PW_BUILD_DATA_DIR}/version.json`,
-      JSON.stringify(version)
-    );
-  })();
+    fs.writeFileSync(`${PW_BUILD_DATA_DIR}/version.json`, JSON.stringify(version))
+  })()
 } catch (ex) {
-  console.error(ex);
-  process.exit(FAIL_ON_ERROR ? 1 : 0);
+  console.error(ex)
+  process.exit(FAIL_ON_ERROR ? 1 : 0)
 }

components/ace-editor.vue

@@ -1,91 +0,0 @@
-<template>
-  <pre ref="editor"></pre>
-</template>
-
-<script>
-const DEFAULT_THEME = "twilight";
-
-import ace from "ace-builds";
-import "ace-builds/webpack-resolver";
-
-export default {
-  props: {
-    value: {
-      type: String,
-      default: ""
-    },
-    theme: {
-      type: String,
-      required: false
-    },
-    lang: {
-      type: String,
-      default: "json"
-    },
-    options: {
-      type: Object,
-      default: {}
-    }
-  },
-
-  data() {
-    return {
-      editor: null,
-      cacheValue: ""
-    };
-  },
-
-  watch: {
-    value(value) {
-      if (value !== this.cacheValue) {
-        this.editor.session.setValue(value, 1);
-        this.cacheValue = value;
-      }
-    },
-    theme() {
-      this.editor.setTheme("ace/theme/" + this.defineTheme());
-    },
-    lang(value) {
-      this.editor.getSession().setMode("ace/mode/" + value);
-    },
-    options(value) {
-      this.editor.setOptions(value);
-    }
-  },
-
-  mounted() {
-    const editor = ace.edit(this.$refs.editor, {
-      theme: `ace/theme/${this.defineTheme()}`,
-      mode: `ace/mode/${this.lang}`,
-      ...this.options
-    });
-
-    if (this.value) editor.setValue(this.value, 1);
-
-    this.editor = editor;
-    this.cacheValue = this.value;
-
-    editor.on("change", () => {
-      const content = editor.getValue();
-      this.$emit("input", content);
-      this.cacheValue = content;
-    });
-  },
-
-  methods: {
-    defineTheme() {
-      if (this.theme) {
-        return this.theme;
-      }
-      return (
-        this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
-      );
-    }
-  },
-
-  beforeDestroy() {
-    this.editor.destroy();
-    this.editor.container.remove();
-  }
-};
-</script>

components/collections/addCollection.vue

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

components/collections/addFolder.vue

@@ -47,27 +47,27 @@ export default {
   props: {
     show: Boolean,
     collection: Object,
-    collectionIndex: Number
+    collectionIndex: Number,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("../../components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   methods: {
     addNewFolder() {
       this.$store.commit("postwoman/addNewFolder", {
         folder: { name: this.$data.name },
-        collectionIndex: this.$props.collectionIndex
-      });
-      this.hideModal();
+        collectionIndex: this.$props.collectionIndex,
+      })
+      this.hideModal()
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+    },
+  },
+}
 </script>

components/collections/collection.vue

@@ -21,11 +21,7 @@
             </button>
           </div>
           <div>
-            <button
-              class="icon"
-              @click="$emit('edit-collection')"
-              v-close-popover
-            >
+            <button class="icon" @click="$emit('edit-collection')" v-close-popover>
               <i class="material-icons">create</i>
               <span>{{ $t("edit") }}</span>
             </button>
@@ -51,11 +47,7 @@
             @edit-request="$emit('edit-request', $event)"
           />
         </li>
-        <li
-          v-if="
-            collection.folders.length === 0 && collection.requests.length === 0
-          "
-        >
+        <li v-if="collection.folders.length === 0 && collection.requests.length === 0">
           <label>{{ $t("collection_empty") }}</label>
         </li>
       </ul>
@@ -71,7 +63,7 @@
                 request,
                 collectionIndex,
                 folderIndex: undefined,
-                requestIndex: index
+                requestIndex: index,
               })
             "
           />
@@ -98,31 +90,31 @@ ul li {
 export default {
   components: {
     folder: () => import("./folder"),
-    request: () => import("./request")
+    request: () => import("./request"),
   },
   props: {
     collectionIndex: Number,
-    collection: Object
+    collection: Object,
   },
   data() {
     return {
       showChildren: false,
-      selectedFolder: {}
-    };
+      selectedFolder: {},
+    }
   },
   methods: {
     toggleShowChildren() {
-      this.showChildren = !this.showChildren;
+      this.showChildren = !this.showChildren
     },
     removeCollection() {
-      if (!confirm("Are you sure you want to remove this Collection?")) return;
+      if (!confirm("Are you sure you want to remove this Collection?")) return
       this.$store.commit("postwoman/removeCollection", {
-        collectionIndex: this.collectionIndex
-      });
+        collectionIndex: this.collectionIndex,
+      })
     },
     editFolder(collectionIndex, folder, folderIndex) {
-      this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
-    }
-  }
-};
+      this.$emit("edit-folder", { collectionIndex, folder, folderIndex })
+    },
+  },
+}
 </script>

components/collections/editCollection.vue

@@ -47,35 +47,35 @@ export default {
   props: {
     show: Boolean,
     editingCollection: Object,
-    editingCollectionIndex: Number
+    editingCollectionIndex: Number,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("../../components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   methods: {
     saveCollection() {
       if (!this.$data.name) {
-        this.$toast.info($t("invalid_collection_name"));
-        return;
+        this.$toast.info(this.$t("invalid_collection_name"))
+        return
       }
       const collectionUpdated = {
         ...this.$props.editingCollection,
-        name: this.$data.name
-      };
+        name: this.$data.name,
+      }
       this.$store.commit("postwoman/editCollection", {
         collection: collectionUpdated,
-        collectionIndex: this.$props.editingCollectionIndex
-      });
-      this.$emit("hide-modal");
+        collectionIndex: this.$props.editingCollectionIndex,
+      })
+      this.$emit("hide-modal")
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+    },
+  },
+}
 </script>

components/collections/editFolder.vue

@@ -17,12 +17,7 @@
     <div slot="body">
       <ul>
         <li>
-          <input
-            type="text"
-            v-model="name"
-            :placeholder="folder.name"
-            @keyup.enter="editFolder"
-          />
+          <input type="text" v-model="name" :placeholder="folder.name" @keyup.enter="editFolder" />
         </li>
       </ul>
     </div>
@@ -49,28 +44,28 @@ export default {
     collection: Object,
     collectionIndex: Number,
     folder: Object,
-    folderIndex: Number
+    folderIndex: Number,
   },
   components: {
-    modal: () => import("../../components/modal")
+    modal: () => import("../../components/ui/modal"),
   },
   data() {
     return {
-      name: undefined
-    };
+      name: undefined,
+    }
   },
   methods: {
     editFolder() {
       this.$store.commit("postwoman/editFolder", {
         collectionIndex: this.$props.collectionIndex,
         folder: { ...this.$props.folder, name: this.$data.name },
-        folderIndex: this.$props.folderIndex
-      });
-      this.hideModal();
+        folderIndex: this.$props.folderIndex,
+      })
+      this.hideModal()
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+    },
+  },
+}
 </script>

components/collections/editRequest.vue

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

components/collections/folder.vue

@@ -43,7 +43,7 @@
                 request,
                 collectionIndex,
                 folderIndex,
-                requestIndex: index
+                requestIndex: index,
               })
             "
           />
@@ -74,33 +74,33 @@ export default {
   props: {
     folder: Object,
     collectionIndex: Number,
-    folderIndex: Number
+    folderIndex: Number,
   },
   components: {
-    request: () => import("./request")
+    request: () => import("./request"),
   },
   data() {
     return {
-      showChildren: false
-    };
+      showChildren: false,
+    }
   },
   methods: {
     toggleShowChildren() {
-      this.showChildren = !this.showChildren;
+      this.showChildren = !this.showChildren
     },
     selectRequest(request) {
-      this.$store.commit("postwoman/selectRequest", { request });
+      this.$store.commit("postwoman/selectRequest", { request })
     },
     removeFolder() {
-      if (!confirm("Are you sure you want to remove this folder?")) return;
+      if (!confirm("Are you sure you want to remove this folder?")) return
       this.$store.commit("postwoman/removeFolder", {
         collectionIndex: this.collectionIndex,
-        folderIndex: this.folderIndex
-      });
+        folderIndex: this.folderIndex,
+      })
     },
     editFolder() {
-      this.$emit("edit-folder");
-    }
-  }
-};
+      this.$emit("edit-folder")
+    },
+  },
+}
 </script>

components/collections/importExportCollections.vue

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

components/collections/index.vue

@@ -97,7 +97,7 @@ TODO:
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 276px);
+  max-height: calc(100vh - 286px);
 }
 
 ul {
@@ -107,20 +107,20 @@ ul {
 </style>
 
 <script>
-import collection from "./collection";
-import { fb } from "../../functions/fb";
+import collection from "./collection"
+import { fb } from "../../functions/fb"
 
 export default {
   components: {
     collection,
-    "pw-section": () => import("../section"),
+    "pw-section": () => import("../layout/section"),
     addCollection: () => import("./addCollection"),
     addFolder: () => import("./addFolder"),
     editCollection: () => import("./editCollection"),
     editFolder: () => import("./editFolder"),
     editRequest: () => import("./editRequest"),
     importExportCollections: () => import("./importExportCollections"),
-    VirtualList: () => import("vue-virtual-scroll-list")
+    VirtualList: () => import("vue-virtual-scroll-list"),
   },
   data() {
     return {
@@ -135,100 +135,98 @@ export default {
       editingFolder: undefined,
       editingFolderIndex: undefined,
       editingRequest: undefined,
-      editingRequestIndex: undefined
-    };
+      editingRequestIndex: undefined,
+    }
   },
   computed: {
     collections() {
-      return this.$store.state.postwoman.collections;
-    }
+      return this.$store.state.postwoman.collections
+    },
   },
   async mounted() {
     this._keyListener = function(e) {
       if (e.key === "Escape") {
-        e.preventDefault();
-        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false;
+        e.preventDefault()
+        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false
       }
-    };
-    document.addEventListener("keydown", this._keyListener.bind(this));
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
   },
   methods: {
     displayModalAdd(shouldDisplay) {
-      this.showModalAdd = shouldDisplay;
+      this.showModalAdd = shouldDisplay
     },
     displayModalEdit(shouldDisplay) {
-      this.showModalEdit = shouldDisplay;
+      this.showModalEdit = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     displayModalImportExport(shouldDisplay) {
-      this.showModalImportExport = shouldDisplay;
+      this.showModalImportExport = shouldDisplay
     },
     displayModalAddFolder(shouldDisplay) {
-      this.showModalAddFolder = shouldDisplay;
+      this.showModalAddFolder = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     displayModalEditFolder(shouldDisplay) {
-      this.showModalEditFolder = shouldDisplay;
+      this.showModalEditFolder = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     displayModalEditRequest(shouldDisplay) {
-      this.showModalEditRequest = shouldDisplay;
+      this.showModalEditRequest = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     editCollection(collection, collectionIndex) {
-      this.$data.editingCollection = collection;
-      this.$data.editingCollectionIndex = collectionIndex;
-      this.displayModalEdit(true);
-      this.syncCollections();
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.displayModalEdit(true)
+      this.syncCollections()
     },
     addFolder(collection, collectionIndex) {
-      this.$data.editingCollection = collection;
-      this.$data.editingCollectionIndex = collectionIndex;
-      this.displayModalAddFolder(true);
-      this.syncCollections();
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.displayModalAddFolder(true)
+      this.syncCollections()
     },
     editFolder(payload) {
-      const { collectionIndex, folder, folderIndex } = payload;
-      this.$data.editingCollection = collection;
-      this.$data.editingCollectionIndex = collectionIndex;
-      this.$data.editingFolder = folder;
-      this.$data.editingFolderIndex = folderIndex;
-      this.displayModalEditFolder(true);
-      this.syncCollections();
+      const { collectionIndex, folder, folderIndex } = payload
+      this.$data.editingCollection = collection
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolder = folder
+      this.$data.editingFolderIndex = folderIndex
+      this.displayModalEditFolder(true)
+      this.syncCollections()
     },
     editRequest(payload) {
-      const { request, collectionIndex, folderIndex, requestIndex } = payload;
-      this.$data.editingCollectionIndex = collectionIndex;
-      this.$data.editingFolderIndex = folderIndex;
-      this.$data.editingRequest = request;
-      this.$data.editingRequestIndex = requestIndex;
-      this.displayModalEditRequest(true);
-      this.syncCollections();
+      const { request, collectionIndex, folderIndex, requestIndex } = payload
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingFolderIndex = folderIndex
+      this.$data.editingRequest = request
+      this.$data.editingRequestIndex = requestIndex
+      this.displayModalEditRequest(true)
+      this.syncCollections()
     },
     resetSelectedData() {
-      this.$data.editingCollection = undefined;
-      this.$data.editingCollectionIndex = undefined;
-      this.$data.editingFolder = undefined;
-      this.$data.editingFolderIndex = undefined;
-      this.$data.editingRequest = undefined;
-      this.$data.editingRequestIndex = undefined;
+      this.$data.editingCollection = undefined
+      this.$data.editingCollectionIndex = undefined
+      this.$data.editingFolder = undefined
+      this.$data.editingFolderIndex = undefined
+      this.$data.editingRequest = undefined
+      this.$data.editingRequestIndex = undefined
     },
     syncCollections() {
       if (fb.currentUser !== null) {
         if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections))
-          );
+          fb.writeCollections(JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)))
         }
       }
-    }
+    },
   },
   beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener);
-  }
-};
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
 </script>

components/collections/request.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="flex-wrap">
     <div>
-      <button
-        class="icon"
-        @click="selectRequest()"
-        v-tooltip="$t('use_request')"
-      >
+      <button class="icon" @click="selectRequest()" v-tooltip="$t('use_request')">
         <i class="material-icons">insert_drive_file</i>
         <span>{{ request.name }}</span>
       </button>
@@ -51,20 +47,20 @@ export default {
     request: Object,
     collectionIndex: Number,
     folderIndex: Number,
-    requestIndex: Number
+    requestIndex: Number,
   },
   methods: {
     selectRequest() {
-      this.$store.commit("postwoman/selectRequest", { request: this.request });
+      this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     removeRequest() {
-      if (!confirm("Are you sure you want to remove this request?")) return;
+      if (!confirm("Are you sure you want to remove this request?")) return
       this.$store.commit("postwoman/removeRequest", {
         collectionIndex: this.collectionIndex,
         folderIndex: this.folderIndex,
-        requestIndex: this.requestIndex
-      });
-    }
-  }
-};
+        requestIndex: this.requestIndex,
+      })
+    },
+  },
+}
 </script>

components/collections/saveRequestAs.vue

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

components/environments/addEnvironment.vue

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

components/environments/editEnvironment.vue

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

components/environments/environment.vue

@@ -1,11 +1,7 @@
 <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="$t('use_environment')">
         <i class="material-icons">insert_drive_file</i>
         <span>{{ environment.name }}</span>
       </button>
@@ -16,11 +12,7 @@
       </button>
       <template slot="popover">
         <div>
-          <button
-            class="icon"
-            @click="$emit('edit-environment')"
-            v-close-popover
-          >
+          <button class="icon" @click="$emit('edit-environment')" v-close-popover>
             <i class="material-icons">create</i>
             <span>{{ $t("edit") }}</span>
           </button>
@@ -53,13 +45,13 @@ ul li {
 export default {
   props: {
     environment: Object,
-    environmentIndex: Number
+    environmentIndex: Number,
   },
   methods: {
     removeEnvironment() {
-      if (!confirm("Are you sure you want to remove this environment?")) return;
-      this.$store.commit("postwoman/removeEnvironment", this.environmentIndex);
-    }
-  }
-};
+      if (!confirm("Are you sure you want to remove this environment?")) return
+      this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
+    },
+  },
+}
 </script>

components/environments/importExportEnvironment.vue

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

components/environments/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <pw-section
-    class="green"
-    icon="history"
-    :label="$t('environment')"
-    ref="environment"
-  >
+  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
     <addEnvironment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <editEnvironment
       :show="showModalEdit"
@@ -39,10 +34,7 @@
       :remain="Math.min(5, environments.length)"
     >
       <ul>
-        <li
-          v-for="(environment, index) in environments"
-          :key="environment.name"
-        >
+        <li v-for="(environment, index) in environments" :key="environment.name">
           <environment
             :environmentIndex="index"
             :environment="environment"
@@ -60,7 +52,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 276px);
+  max-height: calc(100vh - 241px);
 }
 
 ul {
@@ -70,20 +62,20 @@ ul {
 </style>
 
 <script>
-import environment from "./environment";
-import { fb } from "../../functions/fb";
+import environment from "./environment"
+import { fb } from "../../functions/fb"
 
 const updateOnLocalStorage = (propertyName, property) =>
-  window.localStorage.setItem(propertyName, JSON.stringify(property));
+  window.localStorage.setItem(propertyName, JSON.stringify(property))
 
 export default {
   components: {
     environment,
-    "pw-section": () => import("../section"),
+    "pw-section": () => import("../layout/section"),
     addEnvironment: () => import("./addEnvironment"),
     editEnvironment: () => import("./editEnvironment"),
     importExportEnvironment: () => import("./importExportEnvironment"),
-    VirtualList: () => import("vue-virtual-scroll-list")
+    VirtualList: () => import("vue-virtual-scroll-list"),
   },
   data() {
     return {
@@ -91,57 +83,55 @@ export default {
       showModalAdd: false,
       showModalEdit: false,
       editingEnvironment: undefined,
-      editingEnvironmentIndex: undefined
-    };
+      editingEnvironmentIndex: undefined,
+    }
   },
   computed: {
     environments() {
-      return this.$store.state.postwoman.environments;
-    }
+      return this.$store.state.postwoman.environments
+    },
   },
   async mounted() {
     this._keyListener = function(e) {
       if (e.key === "Escape") {
-        e.preventDefault();
-        this.showModalImportExport = false;
+        e.preventDefault()
+        this.showModalImportExport = false
       }
-    };
-    document.addEventListener("keydown", this._keyListener.bind(this));
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
   },
   methods: {
     displayModalAdd(shouldDisplay) {
-      this.showModalAdd = shouldDisplay;
+      this.showModalAdd = shouldDisplay
     },
     displayModalEdit(shouldDisplay) {
-      this.showModalEdit = shouldDisplay;
+      this.showModalEdit = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData();
+      if (!shouldDisplay) this.resetSelectedData()
     },
     displayModalImportExport(shouldDisplay) {
-      this.showModalImportExport = shouldDisplay;
+      this.showModalImportExport = shouldDisplay
     },
     editEnvironment(environment, environmentIndex) {
-      this.$data.editingEnvironment = environment;
-      this.$data.editingEnvironmentIndex = environmentIndex;
-      this.displayModalEdit(true);
-      this.syncEnvironments;
+      this.$data.editingEnvironment = environment
+      this.$data.editingEnvironmentIndex = environmentIndex
+      this.displayModalEdit(true)
+      this.syncEnvironments
     },
     resetSelectedData() {
-      this.$data.editingEnvironment = undefined;
-      this.$data.editingEnvironmentIndex = undefined;
+      this.$data.editingEnvironment = undefined
+      this.$data.editingEnvironmentIndex = undefined
     },
     syncEnvironments() {
       if (fb.currentUser !== null) {
         if (fb.currentSettings[1].value) {
-          fb.writeEnvironments(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
-          );
+          fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
         }
       }
-    }
+    },
   },
   beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener);
-  }
-};
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
 </script>

components/firebase/feeds.vue

@@ -3,8 +3,8 @@
     v-if="fb.currentFeeds.length !== 0"
     class="virtual-list"
     :class="{ filled: fb.currentFeeds.length }"
-    :size="90"
-    :remain="Math.min(5, fb.currentFeeds.length)"
+    :size="180"
+    :remain="Math.min(6, fb.currentFeeds.length)"
   >
     <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
       <div class="show-on-large-screen">
@@ -33,7 +33,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 288px);
+  max-height: calc(100vh - 294px);
 }
 
 ul,
@@ -55,24 +55,24 @@ ol {
 </style>
 
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "../../functions/fb"
 
 export default {
   components: {
-    VirtualList: () => import("vue-virtual-scroll-list")
+    VirtualList: () => import("vue-virtual-scroll-list"),
   },
   data() {
     return {
-      fb
-    };
+      fb,
+    }
   },
   methods: {
     deleteFeed(feed) {
-      fb.deleteFeed(feed.id);
+      fb.deleteFeed(feed.id)
       this.$toast.error(this.$t("deleted"), {
-        icon: "delete"
-      });
-    }
-  }
-};
+        icon: "delete",
+      })
+    },
+  },
+}
 </script>

components/firebase/inputform.vue

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

components/firebase/login.vue

@@ -1,115 +1,262 @@
 <template>
-  <v-popover>
-    <button class="icon" v-tooltip="$t('login_with')">
-      <i class="material-icons">vpn_key</i>
-    </button>
-    <template slot="popover">
-      <div>
-        <button class="icon" @click="signInWithGoogle" v-close-popover>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            class="material-icons"
-          >
-            <path
-              d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
-            />
-          </svg>
-          <span>Google</span>
-        </button>
-      </div>
-      <div>
-        <button class="icon" @click="signInWithGithub" v-close-popover>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            class="material-icons"
-          >
-            <path
-              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-            />
-          </svg>
-          <span>GitHub</span>
-        </button>
-      </div>
-    </template>
-  </v-popover>
+  <div>
+    <div>
+      <button class="icon" @click="signInWithGoogle" v-close-popover>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="material-icons"
+        >
+          <path
+            d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
+          />
+        </svg>
+        <span>Google</span>
+      </button>
+    </div>
+    <div>
+      <button class="icon" @click="signInWithGithub" v-close-popover>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          class="material-icons"
+        >
+          <path
+            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+          />
+        </svg>
+        <span>GitHub</span>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
-import firebase from "firebase/app";
-import { fb } from "../../functions/fb";
+import firebase from "firebase/app"
+import { fb } from "../../functions/fb"
 
 export default {
   data() {
     return {
-      fb
-    };
+      fb,
+    }
   },
-
   methods: {
+    showLoginSuccess() {
+      this.$toast.info(this.$t("login_success"), {
+        icon: "vpn_key",
+      })
+    },
     signInWithGoogle() {
-      const provider = new firebase.auth.GoogleAuthProvider();
+      const provider = new firebase.auth.GoogleAuthProvider()
+      const self = this
       firebase
         .auth()
         .signInWithPopup(provider)
         .then(({ additionalUserInfo }) => {
           if (additionalUserInfo.isNewUser) {
-            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+            self.$toast.info(`${self.$t("turn_on")} ${self.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,
               action: {
-                text: this.$t("yes"),
+                text: self.$t("yes"),
                 onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", false);
-                  fb.writeSettings("syncCollections", true);
-                  this.$router.push({ path: "/settings" });
-                  toastObject.remove();
-                }
-              }
-            });
+                  fb.writeSettings("syncHistory", true)
+                  fb.writeSettings("syncCollections", true)
+                  fb.writeSettings("syncEnvironments", true)
+                  self.$router.push({ path: "/settings" })
+                  toastObject.remove()
+                },
+              },
+            })
           }
+          self.showLoginSuccess()
         })
         .catch(err => {
-          this.$toast.show(err.message || err, {
-            icon: "error"
-          });
-        });
+          // 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
+            // The provider account's email address.
+            var email = err.email
+            // Get sign-in methods for this email.
+            firebase
+              .auth()
+              .fetchSignInMethodsForEmail(email)
+              .then(function(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.
+                  auth
+                    .signInWithEmailAndPassword(email, password)
+                    .then(function(user) {
+                      // Step 4a.
+                      return user.linkWithCredential(pendingCred)
+                    })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
+                }
+
+                self.$toast.info(`${self.$t("login_with")}`, {
+                  icon: "vpn_key",
+                  duration: null,
+                  closeOnSwipe: false,
+                  action: {
+                    text: self.$t("yes"),
+                    onClick: (e, toastObject) => {
+                      // All the other cases are external providers.
+                      // Construct provider object for that provider.
+                      // TODO: implement getProviderForProviderId.
+                      var provider = new firebase.auth.GithubAuthProvider()
+                      // At this point, you should let the user know that they already has an account
+                      // but with a different provider, and let them validate the fact they want to
+                      // sign in with this provider.
+                      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
+                      // so in real scenario you should ask the user to click on a "continue" button
+                      // that will trigger the signInWithPopup.
+                      firebase
+                        .auth()
+                        .signInWithPopup(provider)
+                        .then(function(result) {
+                          // 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()
+                            })
+                        })
+
+                      toastObject.remove()
+                    },
+                  },
+                })
+              })
+          }
+        })
     },
     signInWithGithub() {
-      const provider = new firebase.auth.GithubAuthProvider();
+      const provider = new firebase.auth.GithubAuthProvider()
+      const self = this
       firebase
         .auth()
         .signInWithPopup(provider)
         .then(({ additionalUserInfo }) => {
           if (additionalUserInfo.isNewUser) {
-            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+            self.$toast.info(`${self.$t("turn_on")} ${self.$t("sync")}`, {
               icon: "sync",
               duration: null,
               closeOnSwipe: false,
               action: {
-                text: this.$t("yes"),
+                text: self.$t("yes"),
                 onClick: (e, toastObject) => {
-                  fb.writeSettings("syncHistory", false);
-                  fb.writeSettings("syncCollections", true);
-                  this.$router.push({ path: "/settings" });
-                  toastObject.remove();
-                }
-              }
-            });
+                  fb.writeSettings("syncHistory", true)
+                  fb.writeSettings("syncCollections", true)
+                  fb.writeSettings("syncEnvironments", true)
+                  self.$router.push({ path: "/settings" })
+                  toastObject.remove()
+                },
+              },
+            })
           }
+          self.showLoginSuccess()
         })
         .catch(err => {
-          this.$toast.show(err.message || err, {
-            icon: "error"
-          });
-        });
-    }
-  }
-};
+          // 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
+            // The provider account's email address.
+            var email = err.email
+            // Get sign-in methods for this email.
+            firebase
+              .auth()
+              .fetchSignInMethodsForEmail(email)
+              .then(function(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.
+                  firebase
+                    .auth()
+                    .signInWithEmailAndPassword(email, password)
+                    .then(function(user) {
+                      // Step 4a.
+                      return user.linkWithCredential(pendingCred)
+                    })
+                    .then(function() {
+                      // Google account successfully linked to the existing Firebase user.
+                      self.showLoginSuccess()
+                    })
+                  return
+                }
+
+                self.$toast.info(`${self.$t("login_with")}`, {
+                  icon: "vpn_key",
+                  duration: null,
+                  closeOnSwipe: false,
+                  action: {
+                    text: self.$t("yes"),
+                    onClick: (e, toastObject) => {
+                      // All the other cases are external providers.
+                      // Construct provider object for that provider.
+                      // TODO: implement getProviderForProviderId.
+                      var provider = new firebase.auth.GoogleAuthProvider()
+                      // At this point, you should let the user know that they already has an account
+                      // but with a different provider, and let them validate the fact they want to
+                      // sign in with this provider.
+                      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
+                      // so in real scenario you should ask the user to click on a "continue" button
+                      // that will trigger the signInWithPopup.
+                      firebase
+                        .auth()
+                        .signInWithPopup(provider)
+                        .then(function(result) {
+                          // 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()
+                            })
+                        })
+
+                      toastObject.remove()
+                    },
+                  },
+                })
+              })
+          }
+        })
+    },
+  },
+}
 </script>

components/firebase/logout.vue

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

components/graphql/argument.vue

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

components/graphql/field.vue

@@ -6,10 +6,7 @@
         (
         <span v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
-          <typelink
-            :gqlType="field.type"
-            :jumpTypeCallback="jumpTypeCallback"
-          />
+          <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
           <span v-if="index !== fieldArgs.length - 1">
             ,
           </span>
@@ -53,16 +50,16 @@
 </style>
 
 <script>
-import typelink from "./typelink";
+import typelink from "./typelink"
 
 export default {
   components: {
-    typelink: typelink
+    typelink: typelink,
   },
 
   props: {
     gqlField: Object,
-    jumpTypeCallback: Function
+    jumpTypeCallback: Function,
   },
 
   computed: {
@@ -73,21 +70,19 @@ export default {
           `${arg.name}: ${arg.type.toString()}${
             index !== this.gqlField.args.length - 1 ? ", " : ""
           }`
-        );
-      }, "");
-      const argsString = args.length > 0 ? `(${args})` : "";
-      return `${
-        this.gqlField.name
-      }${argsString}: ${this.gqlField.type.toString()}`;
+        )
+      }, "")
+      const argsString = args.length > 0 ? `(${args})` : ""
+      return `${this.gqlField.name}${argsString}: ${this.gqlField.type.toString()}`
     },
 
     fieldName() {
-      return this.gqlField.name;
+      return this.gqlField.name
     },
 
     fieldArgs() {
-      return this.gqlField.args || [];
-    }
-  }
-};
+      return this.gqlField.args || []
+    },
+  },
+}
 </script>

components/graphql/queryeditor.vue

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

components/graphql/type.vue

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

components/graphql/typelink.vue

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

components/layout/contributors.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <p class="info">
+      {{ $t("donate_info1") }}
+    </p>
+    <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
+          href="https://github.com/sponsors/postwoman-io"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('recurring')"
+        >
+          <button class="icon">
+            <i class="material-icons">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                class="material-icons"
+              >
+                <path
+                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                />
+              </svg>
+            </i>
+            <span>GitHub</span>
+          </button>
+        </a>
+        🎉 NEW
+      </span>
+    </div>
+    <hr />
+    <h3 class="title">Financial Contributors</h3>
+    <p class="info">
+      Become a financial contributor and help us sustain our community.
+      <a class="link" href="https://opencollective.com/postwoman/contribute">Contribute</a>.
+    </p>
+    <h3 class="title">Organizations</h3>
+    <p class="info">
+      Support this project with your organization. Your logo will show up here with a link to your
+      website.
+      <a class="link" href="https://opencollective.com/postwoman/contribute">Contribute</a>.
+    </p>
+    <div class="contributors">
+      <a href="https://opencollective.com/postwoman/organization/0/website">
+        <img src="https://opencollective.com/postwoman/organization/0/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/1/website">
+        <img src="https://opencollective.com/postwoman/organization/1/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/2/website">
+        <img src="https://opencollective.com/postwoman/organization/2/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/3/website">
+        <img src="https://opencollective.com/postwoman/organization/3/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/4/website">
+        <img src="https://opencollective.com/postwoman/organization/4/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/5/website">
+        <img src="https://opencollective.com/postwoman/organization/5/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/6/website">
+        <img src="https://opencollective.com/postwoman/organization/6/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/7/website">
+        <img src="https://opencollective.com/postwoman/organization/7/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/8/website">
+        <img src="https://opencollective.com/postwoman/organization/8/avatar.svg" />
+      </a>
+      <a href="https://opencollective.com/postwoman/organization/9/website">
+        <img src="https://opencollective.com/postwoman/organization/9/avatar.svg" />
+      </a>
+    </div>
+    <h3 class="title">Individuals</h3>
+    <p class="info">
+      Support this project with your organization. Your logo will show up here with a link to your
+      website.
+      <a class="link" href="https://opencollective.com/postwoman/contribute">Contribute</a>.
+    </p>
+    <div class="contributors">
+      <a href="https://opencollective.com/postwoman">
+        <img src="https://opencollective.com/postwoman/individuals.svg" />
+      </a>
+    </div>
+    <h3 class="title">Code Contributors</h3>
+    <p class="info">
+      This project exists thanks to all the people who contribute.
+    </p>
+    <div class="contributors">
+      <a href="https://github.com/liyasthomas/postwoman/graphs/contributors">
+        <img src="https://opencollective.com/postwoman/contributors.svg" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.contributors {
+  display: flex;
+  flex-flow: row nowrap;
+  overflow: auto;
+  padding: 8px 0;
+  margin: 8px 0;
+  max-width: calc(100vw - 72px);
+}
+</style>
+
+<script>
+export default {}
+</script>

components/layout/footer.vue

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

components/layout/header.vue

@@ -0,0 +1,416 @@
+<template>
+  <header class="header">
+    <div class="flex-wrap">
+      <span class="slide-in">
+        <nuxt-link :to="localePath('index')">
+          <h1 class="logo">Postwoman</h1>
+        </nuxt-link>
+      </span>
+      <span>
+        <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"
+          @click.prevent="showInstallPrompt()"
+          v-tooltip="$t('install_pwa')"
+        >
+          <i class="material-icons">offline_bolt</i>
+        </button>
+        <v-popover v-if="fb.currentUser === null">
+          <button class="icon" v-tooltip="$t('login_with')">
+            <i class="material-icons">vpn_key</i>
+          </button>
+          <template slot="popover">
+            <login />
+          </template>
+        </v-popover>
+        <v-popover v-else>
+          <button
+            class="icon"
+            v-tooltip="
+              (fb.currentUser.displayName || '<label><i>Name not found</i></label>') +
+              '<br>' +
+              (fb.currentUser.email || '<label><i>Email not found</i></label>')
+            "
+            aria-label="Account"
+          >
+            <img
+              v-if="fb.currentUser.photoURL"
+              :src="fb.currentUser.photoURL"
+              class="material-icons"
+              alt="Profile image"
+            />
+            <i v-else class="material-icons">account_circle</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <nuxt-link :to="localePath('settings')" v-close-popover>
+                <button class="icon">
+                  <i class="material-icons">settings</i>
+                  <span>
+                    {{ $t("settings") }}
+                  </span>
+                </button>
+              </nuxt-link>
+            </div>
+            <div>
+              <logout />
+            </div>
+          </template>
+        </v-popover>
+        <v-popover>
+          <button class="icon" v-tooltip="$t('more')">
+            <i class="material-icons">more_vert</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>
+          </template>
+        </v-popover>
+      </span>
+    </div>
+    <modal v-if="showExtensions" @close="showExtensions = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">{{ $t("extensions") }}</h3>
+              <div>
+                <button class="icon" @click="showExtensions = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <p class="info">
+          {{ $t("extensions_info1") }}
+        </p>
+        <div>
+          <a
+            href="https://addons.mozilla.org/en-US/firefox/addon/postwoman"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <svg
+                class="material-icons"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 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"
+                />
+              </svg>
+              <span>Firefox</span>
+              <span class="icon" v-if="hasFirefoxExtInstalled" v-tooltip="$t('installed')">
+                <i class="material-icons">done</i>
+              </span>
+            </button>
+          </a>
+        </div>
+        <div>
+          <a
+            href="https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <svg
+                class="material-icons"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M2.897 4.181c2.43-2.828 5.763-4.181 9.072-4.181 4.288 0 8.535 2.273 10.717 6.554-2.722.001-6.984 0-9.293 0-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644l-3.793-6.596zm5.11 7.819c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991-3.988 1.791-3.988 3.991zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225-1.33 2.04-1.945 4.294-1.945 6.507 0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214c1.864 1.734 2.271 4.542 1.007 6.719-.951 1.641-3.988 6.766-5.46 9.248 7.189.443 12.752-5.36 12.752-11.972 0-1.313-.22-2.66-.69-3.995h-7.609z"
+                />
+              </svg>
+              <span>Chrome</span>
+              <span class="icon" v-if="hasChromeExtInstalled" v-tooltip="$t('installed')">
+                <i class="material-icons">done</i>
+              </span>
+            </button>
+          </a>
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </modal>
+    <modal v-if="showShortcuts" @close="showShortcuts = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">{{ $t("shortcuts") }}</h3>
+              <div>
+                <button class="icon" @click="showShortcuts = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <div>
+          <label>{{ $t("send_request") }}</label>
+          <kbd>{{ getSpecialKey() }} G</kbd>
+        </div>
+        <div>
+          <label>{{ $t("save_to_collections") }}</label>
+          <kbd>{{ getSpecialKey() }} S</kbd>
+        </div>
+        <div>
+          <label>{{ $t("copy_request_link") }}</label>
+          <kbd>{{ getSpecialKey() }} K</kbd>
+        </div>
+        <div>
+          <label>{{ $t("reset_request") }}</label>
+          <kbd>{{ getSpecialKey() }} L</kbd>
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </modal>
+    <modal v-if="showSupport" @close="showSupport = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">{{ $t("support_us") }}</h3>
+              <div>
+                <button class="icon" @click="showSupport = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <contributors />
+      </div>
+      <div slot="footer"></div>
+    </modal>
+  </header>
+</template>
+
+<style scoped lang="scss">
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    left: -16px;
+  }
+
+  100% {
+    opacity: 1;
+    left: 0px;
+  }
+}
+
+.slide-in {
+  position: relative;
+  animation: slideIn 0.2s forwards ease-in-out;
+}
+
+.logo {
+  font-size: 22px;
+
+  &:hover {
+    color: var(--ac-color);
+  }
+}
+</style>
+
+<script>
+import intializePwa from "../../assets/js/pwa"
+import {
+  hasExtensionInstalled,
+  hasChromeExtensionInstalled,
+  hasFirefoxExtensionInstalled,
+} from "../../functions/strategies/ExtensionStrategy"
+import { getPlatformSpecialKey } from "../../functions/platformutils"
+import firebase from "firebase/app"
+import { fb } from "../../functions/fb"
+
+export default {
+  components: {
+    modal: () => import("../ui/modal"),
+    login: () => import("../firebase/login"),
+    logout: () => import("../firebase/logout"),
+    contributors: () => import("./contributors"),
+  },
+
+  data() {
+    return {
+      // Once the PWA code is initialized, this holds a method
+      // that can be called to show the user the installation
+      // prompt.
+      showInstallPrompt: null,
+      showExtensions: false,
+      hasChromeExtInstalled: hasChromeExtensionInstalled(),
+      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
+      showShortcuts: false,
+      showSupport: false,
+      fb,
+      navigatorShare: navigator.share,
+    }
+  },
+
+  mounted() {
+    // Initializes the PWA code - checks if the app is installed,
+    // etc.
+    ;(async () => {
+      this.showInstallPrompt = await intializePwa()
+      let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
+      if (!cookiesAllowed) {
+        this.$toast.show(this.$t("we_use_cookies"), {
+          icon: "info",
+          duration: 5000,
+          theme: "toasted-primary",
+          action: [
+            {
+              text: this.$t("dismiss"),
+              onClick: (e, toastObject) => {
+                localStorage.setItem("cookiesAllowed", "yes")
+                toastObject.goAway(0)
+              },
+            },
+          ],
+        })
+      }
+
+      let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
+
+      // Just return if showExtensionsToast is "no"
+      if (!showExtensionsToast) return
+
+      setTimeout(() => {
+        if (!hasExtensionInstalled()) {
+          this.$toast.show(this.$t("extensions_info2"), {
+            icon: "extension",
+            duration: 5000,
+            theme: "toasted-primary",
+            action: [
+              {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  this.showExtensions = true
+                  localStorage.setItem("showExtensionsToast", "yes")
+                  toastObject.goAway(0)
+                },
+              },
+              {
+                text: this.$t("no"),
+                onClick: (e, toastObject) => {
+                  this.$store.commit("setMiscState", {
+                    value: false,
+                    attribute: "showExtensionsToast",
+                  })
+                  localStorage.setItem("showExtensionsToast", "no")
+                  toastObject.goAway(0)
+                },
+              },
+            ],
+          })
+        }
+      }, 15000)
+
+      this._keyListener = function (e) {
+        if (e.key === "Escape") {
+          e.preventDefault()
+          this.showExtensions = this.showShortcuts = this.showSupport = false
+        }
+      }
+      document.addEventListener("keydown", this._keyListener.bind(this))
+    })()
+  },
+
+  methods: {
+    getSpecialKey: getPlatformSpecialKey,
+    nativeShare() {
+      if (navigator.share) {
+        navigator
+          .share({
+            title: "Postwoman",
+            text:
+              "Postwoman • A free, fast and beautiful API request builder - Web alternative to Postman - Helps you create requests faster, saving precious time on development.",
+            url: "https://postwoman.io/",
+          })
+          .then(() => {})
+          .catch(console.error)
+      } else {
+        // fallback
+      }
+    },
+  },
+
+  computed: {
+    availableLocales() {
+      return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale)
+    },
+  },
+}
+</script>

components/layout/history.vue

@@ -1,20 +1,11 @@
 <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>
+    <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>
     <virtual-list
       class="virtual-list"
       :class="{ filled: filteredHistory.length }"
@@ -28,7 +19,7 @@
             :class="{ stared: entry.star }"
             @click="toggleStar(entry)"
             v-tooltip="{
-              content: !entry.star ? $t('add_star') : $t('remove_star')
+              content: !entry.star ? $t('add_star') : $t('remove_star'),
             }"
           >
             <i class="material-icons">
@@ -162,9 +153,7 @@
         </transition>
       </ul>
     </virtual-list>
-    <ul
-      :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
-    >
+    <ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
       <li>
         <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
       </li>
@@ -201,11 +190,7 @@
               </button>
             </div>
             <div>
-              <button
-                class="icon"
-                @click="sort_by_status_code()"
-                v-close-popover
-              >
+              <button class="icon" @click="sort_by_status_code()" v-close-popover>
                 <i class="material-icons">assistant</i>
                 <span>{{ $t("status") }}</span>
               </button>
@@ -268,7 +253,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 284px);
+  max-height: calc(100vh - 294px);
 
   [readonly] {
     cursor: default;
@@ -326,16 +311,16 @@ ol {
 </style>
 
 <script>
-import { findStatusGroup } from "../pages/index";
-import { fb } from "../functions/fb";
+import { findStatusGroup } from "../../pages/index"
+import { fb } from "../../functions/fb"
 
 const updateOnLocalStorage = (propertyName, property) =>
-  window.localStorage.setItem(propertyName, JSON.stringify(property));
+  window.localStorage.setItem(propertyName, JSON.stringify(property))
 
 export default {
   components: {
-    "pw-section": () => import("./section"),
-    VirtualList: () => import("vue-virtual-scroll-list")
+    "pw-section": () => import("../layout/section"),
+    VirtualList: () => import("vue-virtual-scroll-list"),
   },
   data() {
     return {
@@ -351,166 +336,144 @@ export default {
       reverse_sort_status_code: false,
       reverse_sort_url: false,
       reverse_sort_path: false,
-      showMore: false
-    };
+      showMore: false,
+    }
   },
   computed: {
     filteredHistory() {
       this.history =
         fb.currentUser !== null
           ? fb.currentHistory
-          : JSON.parse(window.localStorage.getItem("history")) || [];
-      return this.history.filter(entry => {
-        const filterText = this.filterText.toLowerCase();
-        return Object.keys(entry).some(key => {
-          let value = entry[key];
-          value = typeof value !== "string" ? value.toString() : value;
-          return value.toLowerCase().includes(filterText);
-        });
-      });
-    }
+          : JSON.parse(window.localStorage.getItem("history")) || []
+      return this.history.filter((entry) => {
+        const filterText = this.filterText.toLowerCase()
+        return Object.keys(entry).some((key) => {
+          let value = entry[key]
+          value = typeof value !== "string" ? value.toString() : value
+          return value.toLowerCase().includes(filterText)
+        })
+      })
+    },
   },
   methods: {
     clearHistory() {
       if (fb.currentUser !== null) {
-        fb.clearHistory();
+        fb.clearHistory()
       }
-      this.history = [];
-      this.filterText = "";
-      this.disableHistoryClearing();
-      updateOnLocalStorage("history", this.history);
+      this.history = []
+      this.filterText = ""
+      this.disableHistoryClearing()
+      updateOnLocalStorage("history", this.history)
       this.$toast.error(this.$t("history_deleted"), {
-        icon: "delete"
-      });
+        icon: "delete",
+      })
     },
     useHistory(entry) {
-      this.$emit("useHistory", entry);
+      this.$emit("useHistory", entry)
     },
     findEntryStatus(entry) {
-      const foundStatusGroup = findStatusGroup(entry.status);
+      const foundStatusGroup = findStatusGroup(entry.status)
       return (
         foundStatusGroup || {
-          className: ""
+          className: "",
         }
-      );
+      )
     },
     deleteHistory(entry) {
       if (fb.currentUser !== null) {
-        fb.deleteHistory(entry);
+        fb.deleteHistory(entry)
       }
-      this.history.splice(this.history.indexOf(entry), 1);
+      this.history.splice(this.history.indexOf(entry), 1)
       if (this.history.length === 0) {
-        this.filterText = "";
+        this.filterText = ""
       }
-      updateOnLocalStorage("history", this.history);
+      updateOnLocalStorage("history", this.history)
       this.$toast.error(this.$t("deleted"), {
-        icon: "delete"
-      });
+        icon: "delete",
+      })
     },
     addEntry(entry) {
-      this.history.push(entry);
-      updateOnLocalStorage("history", this.history);
+      this.history.push(entry)
+      updateOnLocalStorage("history", this.history)
     },
     enableHistoryClearing() {
-      if (!this.history || !this.history.length) return;
-      this.isClearingHistory = true;
+      if (!this.history || !this.history.length) return
+      this.isClearingHistory = true
     },
     disableHistoryClearing() {
-      this.isClearingHistory = false;
+      this.isClearingHistory = false
     },
     sort_by_time() {
-      let byDate = this.history.slice(0);
+      let byDate = this.history.slice(0)
       byDate.sort((a, b) => {
-        let date_a = a.date.split("/");
-        let date_b = b.date.split("/");
-        let time_a = a.time.split(":");
-        let time_b = b.time.split(":");
-        let final_a = new Date(
-          date_a[2],
-          date_a[1],
-          date_a[0],
-          time_a[0],
-          time_a[1],
-          time_a[2]
-        );
-        let final_b = new Date(
-          date_b[2],
-          date_b[1],
-          date_b[0],
-          time_b[0],
-          time_b[1],
-          time_b[2]
-        );
-        if (this.reverse_sort_time) return final_b - final_a;
-        else return final_a - final_b;
-      });
-      this.history = byDate;
-      this.reverse_sort_time = !this.reverse_sort_time;
+        let date_a = a.date.split("/")
+        let date_b = b.date.split("/")
+        let time_a = a.time.split(":")
+        let time_b = b.time.split(":")
+        let final_a = new Date(date_a[2], date_a[1], date_a[0], time_a[0], time_a[1], time_a[2])
+        let final_b = new Date(date_b[2], date_b[1], date_b[0], time_b[0], time_b[1], time_b[2])
+        if (this.reverse_sort_time) return final_b - final_a
+        else return final_a - final_b
+      })
+      this.history = byDate
+      this.reverse_sort_time = !this.reverse_sort_time
     },
     sort_by_status_code() {
-      let byCode = this.history.slice(0);
+      let byCode = this.history.slice(0)
       byCode.sort((a, b) => {
-        if (this.reverse_sort_status_code) return b.status - a.status;
-        else return a.status - b.status;
-      });
-      this.history = byCode;
-      this.reverse_sort_status_code = !this.reverse_sort_status_code;
+        if (this.reverse_sort_status_code) return b.status - a.status
+        else return a.status - b.status
+      })
+      this.history = byCode
+      this.reverse_sort_status_code = !this.reverse_sort_status_code
     },
     sort_by_url() {
-      let byUrl = this.history.slice(0);
+      let byUrl = this.history.slice(0)
       byUrl.sort((a, b) => {
-        if (this.reverse_sort_url)
-          return a.url === b.url ? 0 : +(a.url < b.url) || -1;
-        else return a.url === b.url ? 0 : +(a.url > b.url) || -1;
-      });
-      this.history = byUrl;
-      this.reverse_sort_url = !this.reverse_sort_url;
+        if (this.reverse_sort_url) return a.url === b.url ? 0 : +(a.url < b.url) || -1
+        else return a.url === b.url ? 0 : +(a.url > b.url) || -1
+      })
+      this.history = byUrl
+      this.reverse_sort_url = !this.reverse_sort_url
     },
     sort_by_label() {
-      let byLabel = this.history.slice(0);
+      let byLabel = this.history.slice(0)
       byLabel.sort((a, b) => {
-        if (this.reverse_sort_label)
-          return a.label === b.label ? 0 : +(a.label < b.label) || -1;
-        else return a.label === b.label ? 0 : +(a.label > b.label) || -1;
-      });
-      this.history = byLabel;
-      this.reverse_sort_label = !this.reverse_sort_label;
+        if (this.reverse_sort_label) return a.label === b.label ? 0 : +(a.label < b.label) || -1
+        else return a.label === b.label ? 0 : +(a.label > b.label) || -1
+      })
+      this.history = byLabel
+      this.reverse_sort_label = !this.reverse_sort_label
     },
     sort_by_path() {
-      let byPath = this.history.slice(0);
+      let byPath = this.history.slice(0)
       byPath.sort((a, b) => {
-        if (this.reverse_sort_path)
-          return a.path === b.path ? 0 : +(a.path < b.path) || -1;
-        else return a.path === b.path ? 0 : +(a.path > b.path) || -1;
-      });
-      this.history = byPath;
-      this.reverse_sort_path = !this.reverse_sort_path;
+        if (this.reverse_sort_path) return a.path === b.path ? 0 : +(a.path < b.path) || -1
+        else return a.path === b.path ? 0 : +(a.path > b.path) || -1
+      })
+      this.history = byPath
+      this.reverse_sort_path = !this.reverse_sort_path
     },
     sort_by_duration() {
-      let byDuration = this.history.slice(0);
+      let byDuration = this.history.slice(0)
       byDuration.sort((a, b) => {
         if (this.reverse_sort_duration)
-          return a.duration === b.duration
-            ? 0
-            : +(a.duration < b.duration) || -1;
-        else
-          return a.duration === b.duration
-            ? 0
-            : +(a.duration > b.duration) || -1;
-      });
-      this.history = byDuration;
-      this.reverse_sort_duration = !this.reverse_sort_duration;
+          return a.duration === b.duration ? 0 : +(a.duration < b.duration) || -1
+        else return a.duration === b.duration ? 0 : +(a.duration > b.duration) || -1
+      })
+      this.history = byDuration
+      this.reverse_sort_duration = !this.reverse_sort_duration
     },
     toggleCollapse() {
-      this.showMore = !this.showMore;
+      this.showMore = !this.showMore
     },
     toggleStar(entry) {
       if (fb.currentUser !== null) {
-        fb.toggleStar(entry, !entry.star);
+        fb.toggleStar(entry, !entry.star)
       }
-      entry.star = !entry.star;
-      updateOnLocalStorage("history", this.history);
-    }
-  }
-};
+      entry.star = !entry.star
+      updateOnLocalStorage("history", this.history)
+    },
+  },
+}
 </script>

components/layout/logo.vue

@@ -49,8 +49,8 @@
 export default {
   props: {
     color: {
-      type: String
-    }
-  }
-};
+      type: String,
+    },
+  },
+}
 </script>

components/layout/section.vue

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

components/layout/sidenav.vue

@@ -0,0 +1,304 @@
+<template>
+  <aside class="nav-first">
+    <nav class="primary-nav">
+      <!--
+        We're using manual checks for linkActive because the query string
+        seems to mess up the nuxt-link active class.
+      -->
+      <nuxt-link
+        :to="localePath('index')"
+        :class="linkActive('/')"
+        v-tooltip.right="$t('home')"
+        :aria-label="$t('home')"
+      >
+        <logo alt class="material-icons" style="height: 24px;"></logo>
+      </nuxt-link>
+      <nuxt-link
+        :to="localePath('realtime')"
+        :class="linkActive('/realtime')"
+        v-tooltip.right="$t('realtime')"
+      >
+        <i class="material-icons">settings_input_hdmi</i>
+      </nuxt-link>
+      <nuxt-link
+        :to="localePath('graphql')"
+        :class="linkActive('/graphql')"
+        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>
+      </nuxt-link>
+      <nuxt-link
+        :to="localePath('doc')"
+        :class="linkActive('/doc')"
+        v-tooltip.right="$t('documentation')"
+        :aria-label="$t('documentation')"
+      >
+        <i class="material-icons">books</i>
+      </nuxt-link>
+      <nuxt-link
+        :to="localePath('settings')"
+        :class="linkActive('/settings')"
+        v-tooltip.right="$t('settings')"
+        :aria-label="$t('settings')"
+      >
+        <i class="material-icons">settings</i>
+      </nuxt-link>
+    </nav>
+    <div v-if="$route.path === '/'">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#request" v-tooltip.right="$t('request')">
+              <i class="material-icons">cloud_upload</i>
+            </a>
+          </li>
+          <li>
+            <a href="#options" v-tooltip.right="$t('options')">
+              <i class="material-icons">toc</i>
+            </a>
+          </li>
+          <li>
+            <a href="#response" v-tooltip.right="$t('response')">
+              <i class="material-icons">cloud_download</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div v-else-if="$route.path === '/realtime'">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#request" v-tooltip.right="$t('request')">
+              <i class="material-icons">cloud_upload</i>
+            </a>
+          </li>
+          <li>
+            <a href="#response" v-tooltip.right="$t('communication')">
+              <i class="material-icons">cloud_download</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div v-else-if="$route.path === '/graphql'">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#endpoint" v-tooltip.right="$t('endpoint')">
+              <i class="material-icons">cloud</i>
+            </a>
+          </li>
+          <li>
+            <a href="#schema" v-tooltip.right="$t('schema')">
+              <i class="material-icons">assignment_returned</i>
+            </a>
+          </li>
+          <li>
+            <a href="#query" v-tooltip.right="$t('query')">
+              <i class="material-icons">cloud_upload</i>
+            </a>
+          </li>
+          <li>
+            <a href="#response" v-tooltip.right="$t('response')">
+              <i class="material-icons">cloud_download</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div v-else-if="$route.path === '/doc'">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#collections" v-tooltip.right="$t('collections')">
+              <i class="material-icons">folder</i>
+            </a>
+          </li>
+          <li>
+            <a href="#documentation" v-tooltip.right="'Documentation'">
+              <i class="material-icons">insert_drive_file</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div v-else-if="$route.path === '/settings'">
+      <nav class="secondary-nav">
+        <ul>
+          <li>
+            <a href="#account" v-tooltip.right="$t('account')">
+              <i class="material-icons">person</i>
+            </a>
+          </li>
+          <li>
+            <a href="#theme" v-tooltip.right="$t('theme')">
+              <i class="material-icons">brush</i>
+            </a>
+          </li>
+          <li>
+            <a href="#extensions" v-tooltip.right="$t('extensions')">
+              <i class="material-icons">extensions</i>
+            </a>
+          </li>
+          <li>
+            <a href="#proxy" v-tooltip.right="$t('proxy')">
+              <i class="material-icons">public</i>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </aside>
+</template>
+
+<script>
+export default {
+  components: {
+    logo: () => import("./logo"),
+  },
+
+  methods: {
+    linkActive(path) {
+      return {
+        "nuxt-link-exact-active": this.$route.path === path,
+        "nuxt-link-active": this.$route.path === path,
+      }
+    },
+  },
+
+  mounted() {
+    window.addEventListener("scroll", event => {
+      let mainNavLinks = document.querySelectorAll("nav ul li a")
+      let fromTop = window.scrollY
+      mainNavLinks.forEach(link => {
+        let section = document.querySelector(link.hash)
+
+        if (
+          section &&
+          section.offsetTop <= fromTop &&
+          section.offsetTop + section.offsetHeight > fromTop
+        ) {
+          link.classList.add("current")
+        } else {
+          link.classList.remove("current")
+        }
+      })
+    })
+  },
+
+  watch: {
+    $route() {
+      // this.$toast.clear();
+    },
+  },
+}
+</script>

components/realtime/log.vue

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

components/realtime/mqtt.vue

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

components/realtime/socketio.vue

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

components/realtime/sse.vue

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

components/realtime/websocket.vue

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

components/section.vue

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

components/settings/swatch.vue

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

components/ui/ace-editor.vue

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

components/ui/autocomplete.vue

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

components/ui/modal.vue

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

components/ui/tab.vue

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

components/ui/tabs.vue

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

components/ui/toggle.vue

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

directives/textareaAutoHeight.js

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

firebase.json

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

firestore.indexes.json

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

functions/api.js

@@ -0,0 +1,21 @@
+// Docs on event and context https://www.netlify.com/docs/functions/#the-handler-method
+exports.handler = async (event, context) => {
+  switch (event.httpMethod) {
+    case "GET":
+      try {
+        const name = event.queryStringParameters.name || "World"
+        return {
+          statusCode: 200,
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ message: `Hello ${name}` }),
+        }
+      } catch (err) {
+        return { statusCode: 500, body: err.toString() }
+      }
+
+    default:
+      return { statusCode: 405, body: "Method Not Allowed" }
+  }
+}

functions/editorutils.js

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

functions/fb.js

@@ -1,27 +1,27 @@
-import firebase from "firebase/app";
-import "firebase/firestore";
-import "firebase/auth";
+import firebase from "firebase/app"
+import "firebase/firestore"
+import "firebase/auth"
 
 // Initialize Firebase, copied from cloud console
 const firebaseConfig = {
-  apiKey: "AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM",
-  authDomain: "postwoman-api.firebaseapp.com",
-  databaseURL: "https://postwoman-api.firebaseio.com",
-  projectId: "postwoman-api",
-  storageBucket: "postwoman-api.appspot.com",
-  messagingSenderId: "421993993223",
-  appId: "1:421993993223:web:ec0baa8ee8c02ffa1fc6a2",
-  measurementId: "G-ERJ6025CEB"
-};
-firebase.initializeApp(firebaseConfig);
+  apiKey: process.env.API_KEY || "AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM",
+  authDomain: process.env.AUTH_DOMAIN || "postwoman-api.firebaseapp.com",
+  databaseURL: process.env.DATABASE_URL || "https://postwoman-api.firebaseio.com",
+  projectId: process.env.PROJECT_ID || "postwoman-api",
+  storageBucket: process.env.STORAGE_BUCKET || "postwoman-api.appspot.com",
+  messagingSenderId: process.env.MESSAGING_SENDER_ID || "421993993223",
+  appId: process.env.APP_ID || "1:421993993223:web:ec0baa8ee8c02ffa1fc6a2",
+  measurementId: process.env.MEASUREMENT_ID || "G-ERJ6025CEB",
+}
+firebase.initializeApp(firebaseConfig)
 
 // a reference to the users collection
-const usersCollection = firebase.firestore().collection("users");
+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: [],
@@ -34,21 +34,21 @@ export const fb = {
       author_name: fb.currentUser.displayName,
       author_image: fb.currentUser.photoURL,
       message,
-      label
-    };
+      label,
+    }
     usersCollection
       .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 = {
@@ -57,30 +57,30 @@ export const fb = {
       author_name: fb.currentUser.displayName,
       author_image: fb.currentUser.photoURL,
       name: setting,
-      value
-    };
+      value,
+    }
     usersCollection
       .doc(fb.currentUser.uid)
       .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 => {
-    const hs = 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,8 +88,8 @@ export const fb = {
       .collection("history")
       .get()
       .then(({ docs }) => {
-        docs.forEach(e => fb.deleteHistory(e));
-      });
+        docs.forEach((e) => fb.deleteHistory(e))
+      })
   },
   toggleStar: (entry, value) => {
     usersCollection
@@ -97,125 +97,125 @@ 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: 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: 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 = user
+    fb.currentUser.providerData.forEach((profile) => {
       let us = {
         updatedOn: new Date(),
         provider: profile.providerId,
         name: profile.displayName,
         email: profile.email,
         photoUrl: profile.photoURL,
-        uid: profile.uid
-      };
+        uid: profile.uid,
+      }
       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 => {
-        const feeds = [];
-        feedsRef.forEach(doc => {
-          const feed = doc.data();
-          feed.id = doc.id;
-          feeds.push(feed);
-        });
-        fb.currentFeeds = feeds;
-      });
+      .onSnapshot((feedsRef) => {
+        const feeds = []
+        feedsRef.forEach((doc) => {
+          const feed = doc.data()
+          feed.id = doc.id
+          feeds.push(feed)
+        })
+        fb.currentFeeds = feeds
+      })
 
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("settings")
-      .onSnapshot(settingsRef => {
-        const settings = [];
-        settingsRef.forEach(doc => {
-          const setting = doc.data();
-          setting.id = doc.id;
-          settings.push(setting);
-        });
-        fb.currentSettings = settings;
-      });
+      .onSnapshot((settingsRef) => {
+        const settings = []
+        settingsRef.forEach((doc) => {
+          const setting = doc.data()
+          setting.id = doc.id
+          settings.push(setting)
+        })
+        fb.currentSettings = settings
+      })
 
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("history")
-      .onSnapshot(historyRef => {
-        const history = [];
-        historyRef.forEach(doc => {
-          const entry = doc.data();
-          entry.id = doc.id;
-          history.push(entry);
-        });
-        fb.currentHistory = history;
-      });
+      .onSnapshot((historyRef) => {
+        const history = []
+        historyRef.forEach((doc) => {
+          const entry = doc.data()
+          entry.id = doc.id
+          history.push(entry)
+        })
+        fb.currentHistory = history
+      })
 
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("collections")
-      .onSnapshot(collectionsRef => {
-        const collections = [];
-        collectionsRef.forEach(doc => {
-          const collection = doc.data();
-          collection.id = doc.id;
-          collections.push(collection);
-        });
-        fb.currentCollections = collections[0].collection;
-      });
+      .onSnapshot((collectionsRef) => {
+        const collections = []
+        collectionsRef.forEach((doc) => {
+          const collection = doc.data()
+          collection.id = doc.id
+          collections.push(collection)
+        })
+        fb.currentCollections = collections[0].collection
+      })
 
     usersCollection
       .doc(fb.currentUser.uid)
       .collection("environments")
-      .onSnapshot(environmentsRef => {
-        const environments = [];
-        environmentsRef.forEach(doc => {
-          const environment = doc.data();
-          environment.id = doc.id;
-          environments.push(environment);
-        });
-        fb.currentEnvironments = environments[0].environment;
-      });
+      .onSnapshot((environmentsRef) => {
+        const environments = []
+        environmentsRef.forEach((doc) => {
+          const environment = doc.data()
+          environment.id = doc.id
+          environments.push(environment)
+        })
+        fb.currentEnvironments = environments[0].environment
+      })
   } else {
-    fb.currentUser = null;
+    fb.currentUser = null
   }
-});
+})

functions/headers.js

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

functions/jsonParse.js

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

functions/network.js

@@ -1,42 +1,19 @@
-import AxiosStrategy from "./strategies/AxiosStrategy";
-import ExtensionStrategy, {
-  hasExtensionInstalled
-} from "./strategies/ExtensionStrategy";
-import FirefoxStrategy from "./strategies/FirefoxStrategy";
-import ChromeStrategy, {
-  hasChromeExtensionInstalled
-} from "./strategies/ChromeStrategy";
+import AxiosStrategy from "./strategies/AxiosStrategy"
+import ExtensionStrategy, { hasExtensionInstalled } from "./strategies/ExtensionStrategy"
 
 const isExtensionsAllowed = ({ state }) =>
   typeof state.postwoman.settings.EXTENSIONS_ENABLED === "undefined" ||
-  state.postwoman.settings.EXTENSIONS_ENABLED;
+  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);
-    }
+  if (isExtensionsAllowed(store) && hasExtensionInstalled()) {
+    return ExtensionStrategy(req, store)
   }
 
-  return AxiosStrategy(req, store);
-};
+  return AxiosStrategy(req, store)
+}
 
 const sendNetworkRequest = (req, store) =>
-  runAppropriateStrategy(req, store).finally(() =>
-    window.$nuxt.$loading.finish()
-  );
+  runAppropriateStrategy(req, store).finally(() => window.$nuxt.$loading.finish())
 
-export { sendNetworkRequest };
+export { sendNetworkRequest }

functions/platformutils.js

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

functions/postwomanTesting.js

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

functions/preRequest.js

@@ -1,20 +1,20 @@
 export default function getEnvironmentVariablesFromScript(script) {
-  let _variables = {};
+  let _variables = {}
 
   // the pw object is the proxy by which pre-request scripts can pass variables to the request.
   // for security and control purposes, this is the only way a pre-request script should modify variables.
   let pw = {
     environment: {
-      set: (key, value) => (_variables[key] = value)
+      set: (key, value) => (_variables[key] = value),
     },
     env: {
-      set: (key, value) => (_variables[key] = value)
-    }
+      set: (key, value) => (_variables[key] = value),
+    },
     // globals that the script is allowed to have access to.
-  };
+  }
 
   // run pre-request script within this function so that it has access to the pw object.
-  new Function("pw", script)(pw);
+  new Function("pw", script)(pw)
 
-  return _variables;
+  return _variables
 }

functions/requestParams.js

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

functions/strategies/AxiosStrategy.js

@@ -1,23 +1,23 @@
-import axios from "axios";
+import axios from "axios"
 
 const axiosWithProxy = async (req, { state }) => {
   const { data } = await axios.post(
-    state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
+    state.postwoman.settings.PROXY_URL || "https://postwoman.apollosoftware.xyz/",
     req
-  );
-  return data;
-};
+  )
+  return data
+}
 
 const axiosWithoutProxy = async (req, _store) => {
-  const res = await axios(req);
-  return res;
-};
+  const res = await axios(req)
+  return res
+}
 
 const axiosStrategy = (req, store) => {
   if (store.state.postwoman.settings.PROXY_ENABLED) {
-    return axiosWithProxy(req, store);
+    return axiosWithProxy(req, store)
   }
-  return axiosWithoutProxy(req, store);
-};
+  return axiosWithoutProxy(req, store)
+}
 
-export default axiosStrategy;
+export default axiosStrategy

functions/strategies/ChromeStrategy.js

@@ -1,63 +0,0 @@
-const EXTENSION_ID = "amknoiejhlmhancpahfcfcfhllgkpbld";
-
-// Check if the Chrome Extension is present
-// The Chrome extension injects an empty span to help detection.
-// Also check for the presence of window.chrome object to confirm smooth operations
-export const hasChromeExtensionInstalled = () =>
-  document.getElementById("chromePWExtensionDetect") !== null;
-
-const chromeWithoutProxy = (req, _store) =>
-  new Promise((resolve, reject) => {
-    chrome.runtime.sendMessage(
-      EXTENSION_ID,
-      {
-        messageType: "send-req",
-        data: {
-          config: req
-        }
-      },
-      ({ data }) => {
-        if (data.error) {
-          reject(data.error);
-        } else {
-          resolve(data.response);
-        }
-      }
-    );
-  });
-
-const chromeWithProxy = (req, { state }) =>
-  new Promise((resolve, reject) => {
-    chrome.runtime.sendMessage(
-      EXTENSION_ID,
-      {
-        messageType: "send-req",
-        data: {
-          config: {
-            method: "post",
-            url:
-              state.postwoman.settings.PROXY_URL ||
-              "https://postwoman.apollotv.xyz/",
-            data: req
-          }
-        }
-      },
-      ({ data }) => {
-        if (data.error) {
-          reject(error);
-        } else {
-          resolve(data.response.data);
-        }
-      }
-    );
-  });
-
-const chromeStrategy = (req, store) => {
-  if (store.state.postwoman.settings.PROXY_ENABLED) {
-    return chromeWithProxy(req, store);
-  } else {
-    return chromeWithoutProxy(req, store);
-  }
-};
-
-export default chromeStrategy;

functions/strategies/ExtensionStrategy.js

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

functions/strategies/FirefoxStrategy.js

@@ -1,50 +0,0 @@
-const firefoxWithProxy = (req, { state }) =>
-  new Promise((resolve, reject) => {
-    const eventListener = event => {
-      window.removeEventListener("firefoxExtSendRequestComplete", event);
-
-      if (event.detail.error) {
-        reject(JSON.parse(event.detail.error));
-      } else {
-        resolve(JSON.parse(event.detail.response).data);
-      }
-    };
-
-    window.addEventListener("firefoxExtSendRequestComplete", eventListener);
-
-    window.firefoxExtSendRequest({
-      method: "post",
-      url:
-        state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
-      data: req
-    });
-  });
-
-const firefoxWithoutProxy = (req, _store) =>
-  new Promise((resolve, reject) => {
-    const eventListener = ({ detail }) => {
-      window.removeEventListener(
-        "firefoxExtSendRequestComplete",
-        eventListener
-      );
-
-      if (detail.error) {
-        reject(JSON.parse(detail.error));
-      } else {
-        resolve(JSON.parse(detail.response));
-      }
-    };
-
-    window.addEventListener("firefoxExtSendRequestComplete", eventListener);
-
-    window.firefoxExtSendRequest(req);
-  });
-
-const firefoxStrategy = (req, store) => {
-  if (store.state.postwoman.settings.PROXY_ENABLED) {
-    return firefoxWithProxy(req, store);
-  }
-  return firefoxWithoutProxy(req, store);
-};
-
-export default firefoxStrategy;

functions/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 () {
+        var keywords =
+          "type|interface|union|enum|schema|input|implements|extends|scalar|fragment|query|mutation|subscription"
+
+        var dataTypes = "Int|Float|String|ID|Boolean"
+
+        var literalValues = "true|false|null"
+
+        var escapeRe = /\\(?:u[\da-fA-f]{4}|.)/
+
+        var 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
+    }
+  )
+}

functions/templating.js

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

functions/utils/debounce.js

@@ -3,13 +3,13 @@
 // functions which might be called frequently
 // NOTE : Don't use lambda functions as this doesn't get bound properly in them, use the 'function (args) {}' format
 const debounce = (func, delay) => {
-  let inDebounce;
+  let inDebounce
   return function() {
-    const context = this;
-    const args = arguments;
-    clearTimeout(inDebounce);
-    inDebounce = setTimeout(() => func.apply(context, args), delay);
-  };
-};
+    const context = this
+    const args = arguments
+    clearTimeout(inDebounce)
+    inDebounce = setTimeout(() => func.apply(context, args), delay)
+  }
+}
 
-export default debounce;
+export default debounce

functions/utils/string.js

@@ -0,0 +1,12 @@
+export function getSourcePrefix(source) {
+  const sourceEmojis = {
+    // Source used for info messages.
+    info: "\tℹ️ [INFO]:\t",
+    // Source used for client to server messages.
+    client: "\t👽 [SENT]:\t",
+    // Source used for server to client messages.
+    server: "\t📥 [RECEIVED]:\t",
+  }
+  if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
+  return ""
+}

functions/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;
+}

functions/utils/valid.js

@@ -0,0 +1,40 @@
+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)
+}

lang/de-DE.js

@@ -1,90 +0,0 @@
-export default {
-  home: "Startseite",
-  realtime: "Echtzeit",
-  graphql: "GraphQL",
-  settings: "Einstellungen",
-  request: "Anfrage",
-  install_pwa: "PWA installieren",
-  support_us: "Unterstütze uns",
-  tweet: "Twittern",
-  options: "Optionen",
-  communication: "Kommunikation",
-  endpoint: "Endpunkt",
-  schema: "Schema",
-  theme: "Design",
-  subscribe: "Abonnieren",
-  choose_language: "Sprache auswählen",
-  shortcuts: "Tastenkombinationen",
-  send_request: "Anfrage senden",
-  save_to_collections: "In Sammlungen speichern",
-  copy_request_link: "Anfragelink kopieren",
-  reset_request: "Anfrage zurücksetzen",
-  support_us_on: "Unterstütze uns auf",
-  open_collective: "Open Collective",
-  paypal: "PayPal",
-  patreon: "Patreon",
-  javascript_code: "JavaScript-Code",
-  method: "Methode",
-  path: "Pfad",
-  label: "Beschriftung",
-  again: "Wiederholen",
-  content_type: "Content-Typ",
-  raw_input: "Rohdaten-Eingabe",
-  parameter_list: "Parameterliste",
-  raw_request_body: "Rohdaten der Anfrage",
-  show_code: "Code zeigen",
-  hide_code: "Code ausblenden",
-  show_prerequest_script: "Preanfrageskript anzeigen",
-  hide_prerequest_script: "Preanfrageskript ausblenden",
-  authentication: "Authentifizierung",
-  authentication_type: "Authentifizierungs-Typ",
-  include_in_url: "In URL einfügen",
-  parameters: "Parameter",
-  expand_response: "Antwort ausklappen",
-  collapse_response: "Antwort einklappen",
-  hide_preview: "Vorschau verstecken",
-  preview_html: "HTML-Vorschau",
-  history: "Verlauf",
-  collections: "Kollektionen",
-  import_curl: "cURL importieren",
-  import: "Importieren",
-  generate_code: "Code generieren",
-  request_type: "Anfrage-Typ",
-  generated_code: "Generierter Code",
-  status: "Status",
-  headers: "Headers",
-  websocket: "WebSocket",
-  waiting_for_connection: "(warte auf Verbindung)",
-  message: "Nachricht",
-  sse: "SSE",
-  server: "Server",
-  events: "Ereignisse",
-  url: "URL",
-  get_schema: "Schema abrufen",
-  header_list: "Headerliste",
-  add_new: "Neu hinzufügen",
-  response: "Antwort",
-  query: "Abfrage",
-  queries: "Abfragen",
-  query_variables: "Variablen",
-  mutations: "Mutationen",
-  subscriptions: "Abonnements",
-  types: "Typen",
-  send: "Senden",
-  background: "Hintergrund",
-  color: "Farbe",
-  labels: "Bezeichner",
-  multi_color: "Mehrfarbig",
-  enabled: "Aktiviert",
-  disabled: "Deaktiviert",
-  proxy: "Proxy",
-  postwoman_official_proxy_hosting:
-    "Postwomans offizieller Proxy wird durch ApolloTV bereitgestellt.",
-  read_the: "Lies die",
-  apollotv_privacy_policy: "ApolloTV Datenschutzerklärung",
-  contact_us: "Kontaktiere uns",
-  connect: "Verbinden",
-  disconnect: "Trennen",
-  start: "Start",
-  stop: "Stopp"
-};

lang/de-DE.json

@@ -0,0 +1,92 @@
+{
+  "home": "Startseite",
+  "realtime": "Echtzeit",
+  "graphql": "GraphQL",
+  "settings": "Einstellungen",
+  "request": "Anfrage",
+  "install_pwa": "PWA installieren",
+  "support_us": "Unterstütze uns",
+  "tweet": "Twittern",
+  "options": "Optionen",
+  "communication": "Kommunikation",
+  "endpoint": "Endpunkt",
+  "schema": "Schema",
+  "theme": "Design",
+  "subscribe": "Abonnieren",
+  "choose_language": "Sprache auswählen",
+  "shortcuts": "Tastenkombinationen",
+  "send_request": "Anfrage senden",
+  "save_to_collections": "In Sammlungen speichern",
+  "copy_request_link": "Anfragelink kopieren",
+  "reset_request": "Anfrage zurücksetzen",
+  "support_us_on": "Unterstütze uns auf",
+  "open_collective": "Open Collective",
+  "paypal": "PayPal",
+  "patreon": "Patreon",
+  "javascript_code": "JavaScript-Code",
+  "method": "Methode",
+  "path": "Pfad",
+  "label": "Beschriftung",
+  "again": "Wiederholen",
+  "content_type": "Content-Typ",
+  "raw_input": "Rohdaten-Eingabe",
+  "parameter_list": "Parameterliste",
+  "raw_request_body": "Rohdaten der Anfrage",
+  "show_code": "Code zeigen",
+  "hide_code": "Code ausblenden",
+  "show_prerequest_script": "Preanfrageskript anzeigen",
+  "hide_prerequest_script": "Preanfrageskript ausblenden",
+  "authentication": "Authentifizierung",
+  "authentication_type": "Authentifizierungs-Typ",
+  "include_in_url": "In URL einfügen",
+  "parameters": "Parameter",
+  "expand_response": "Antwort ausklappen",
+  "collapse_response": "Antwort einklappen",
+  "hide_preview": "Vorschau verstecken",
+  "preview_html": "HTML-Vorschau",
+  "history": "Verlauf",
+  "collections": "Kollektionen",
+  "import_curl": "cURL importieren",
+  "import": "Importieren",
+  "generate_code": "Code generieren",
+  "request_type": "Anfrage-Typ",
+  "generated_code": "Generierter Code",
+  "status": "Status",
+  "headers": "Headers",
+  "websocket": "WebSocket",
+  "waiting_for_connection": "(warte auf Verbindung)",
+  "message": "Nachricht",
+  "sse": "SSE",
+  "server": "Server",
+  "events": "Ereignisse",
+  "url": "URL",
+  "get_schema": "Schema abrufen",
+  "header_list": "Headerliste",
+  "add_new": "Neu hinzufügen",
+  "response": "Antwort",
+  "query": "Abfrage",
+  "queries": "Abfragen",
+  "query_variables": "Variablen",
+  "mutations": "Mutationen",
+  "subscriptions": "Abonnements",
+  "types": "Typen",
+  "send": "Senden",
+  "background": "Hintergrund",
+  "color": "Farbe",
+  "labels": "Bezeichner",
+  "multi_color": "Mehrfarbig",
+  "enabled": "Aktiviert",
+  "disabled": "Deaktiviert",
+  "proxy": "Proxy",
+  "postwoman_official_proxy_hosting": "Postwomans offizieller Proxy wird durch Apollo Software bereitgestellt.",
+  "read_the": "Lies die",
+  "apollosw_privacy_policy": "Apollo Software Datenschutzerklärung",
+  "contact_us": "Kontaktiere uns",
+  "connect": "Verbinden",
+  "disconnect": "Trennen",
+  "start": "Start",
+  "stop": "Stopp",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments"
+}

lang/en-US.js

@@ -1,277 +0,0 @@
-export default {
-  home: "Home",
-  realtime: "Realtime",
-  graphql: "GraphQL",
-  settings: "Settings",
-  request: "Request",
-  install_pwa: "Install PWA",
-  support_us: "Support us",
-  tweet: "Tweet",
-  options: "Options",
-  communication: "Communication",
-  endpoint: "Endpoint",
-  schema: "Schema",
-  theme: "Theme",
-  subscribe: "Subscribe",
-  choose_language: "Choose Language",
-  shortcuts: "Shortcuts",
-  send_request: "Send Request",
-  save_to_collections: "Save to Collections",
-  copy_request_link: "Copy Request Link",
-  reset_request: "Reset Request",
-  support_us_on: "Support us on",
-  open_collective: "Open Collective",
-  paypal: "PayPal",
-  patreon: "Patreon",
-  javascript_code: "JavaScript Code",
-  method: "Method",
-  path: "Path",
-  label: "Label",
-  content_type: "Content Type",
-  raw_input: "Raw input",
-  parameter_list: "Parameter List",
-  raw_request_body: "Raw Request Body",
-  show_code: "Show Code",
-  hide_code: "Hide Code",
-  show_prerequest_script: "Show Pre-Request Script",
-  hide_prerequest_script: "Hide Pre-Request Script",
-  authentication: "Authentication",
-  authentication_type: "Authentication type",
-  include_in_url: "Include in URL",
-  parameters: "Parameters",
-  expand_response: "Expand response",
-  collapse_response: "Collapse response",
-  hide_preview: "Hide Preview",
-  preview_html: "Preview HTML",
-  history: "History",
-  collections: "Collections",
-  environment: "Environment",
-  new_environment: "New Environment",
-  my_new_environment: "My New Environment",
-  edit_environment: "Edit Environment",
-  env_variable_list: "Variable List",
-  invalid_environment_name: "Please provide a valid name for the environment",
-  use_environment: "Use Environment",
-  add_one_variable: "(add at least one variable)",
-  import_curl: "Import cURL",
-  import: "Import",
-  generate_code: "Generate code",
-  request_type: "Request type",
-  generated_code: "Generated code",
-  status: "Status",
-  headers: "Headers",
-  websocket: "WebSocket",
-  waiting_for_connection: "(waiting for connection)",
-  message: "Message",
-  sse: "SSE",
-  server: "Server",
-  events: "Events",
-  url: "URL",
-  get_schema: "Get schema",
-  header_list: "Header list",
-  add_new: "Add new",
-  response: "Response",
-  query: "Query",
-  queries: "Queries",
-  query_variables: "Variables",
-  mutations: "Mutations",
-  subscriptions: "Subscriptions",
-  types: "Types",
-  send: "Send",
-  background: "Background",
-  color: "Color",
-  labels: "Labels",
-  multi_color: "Multi-color",
-  enabled: "Enabled",
-  disabled: "Disabled",
-  proxy: "Proxy",
-  postwoman_official_proxy_hosting:
-    "Postwoman's Official Proxy is hosted by ApolloTV.",
-  read_the: "Read the",
-  apollotv_privacy_policy: "ApolloTV privacy policy",
-  contact_us: "Contact us",
-  connect: "Connect",
-  disconnect: "Disconnect",
-  start: "Start",
-  stop: "Stop",
-  access_token: "Access Token",
-  token_list: "Token List",
-  get_token: "Get New Token",
-  manage_token: "Manage Access Token",
-  save_token: "Save Access Token",
-  use_token: "Use Saved Token",
-  request_token: "Request Token",
-  save_token_req: "Save Token Request",
-  manage_token_req: "Manage Token Request",
-  use_token_req: "Use Token Request",
-  token_req_name: "Request Name",
-  token_req_details: "Request Details",
-  token_name: "Token Name",
-  oidc_discovery_url: "OIDC Discovery URL",
-  auth_url: "Auth URL",
-  access_token_url: "Access Token URL",
-  client_id: "Client ID",
-  scope: "Scope",
-  state: "State",
-  token_req_list: "Token Request List",
-  no_path: "No path",
-  no_label: "No label",
-  prerequest_script: "Pre-Request Script",
-  no_prerequest_script: "No pre-request script",
-  search: "Search",
-  history_empty: "History is empty",
-  history_deleted: "History Deleted",
-  clear: "Clear",
-  clear_all: "Clear All",
-  cleared: "Cleared",
-  close: "Close",
-  sort: "Sort",
-  time: "Time",
-  duration: "Duration",
-  no_duration: "No duration",
-  show_more: "Show more",
-  hide_more: "Hide more",
-  collection: "Collection",
-  current_collection: "Current Collection",
-  select_collection: "Select a Collection",
-  create_collection: "Create a Collection",
-  new: "New",
-  import_export: "Import / Export",
-  more: "More",
-  folder: "Folder",
-  new_folder: "New Folder",
-  my_new_folder: "My New Folder",
-  folder_empty: "Folder is empty",
-  edit_folder: "Edit Folder",
-  edit: "Edit",
-  delete: "Delete",
-  deleted: "Deleted",
-  undo: "Undo",
-  collection_empty: "Collection is empty",
-  invalid_collection_name: "Please provide a valid name for the collection",
-  new_collection: "New Collection",
-  my_new_collection: "My New Collection",
-  edit_collection: "Edit Collection",
-  edit_request: "Edit Request",
-  save_request_as: "Save Request As",
-  export: "Export",
-  connecting_to: "Connecting to {name}...",
-  connected: "Connected",
-  connected_to: "Connected to {name}",
-  disconnected: "Disconnected",
-  disconnected_from: "Disconnected from {name}",
-  something_went_wrong: "Something went wrong!",
-  error_occurred: "An error has occurred.",
-  browser_support_sse:
-    "This browser doesn't seems to have Server Sent Events support.",
-  log: "Log",
-  no_url: "No URL",
-  run_query: "Run Query",
-  copy_query: "Copy Query",
-  kinda_dark: "Kinda Dark",
-  clearly_white: "Clearly White",
-  just_black: "Just Black",
-  auto_system: "Auto (system)",
-  green: "Green",
-  yellow: "Yellow",
-  pink: "Pink",
-  red: "Red",
-  purple: "Purple",
-  orange: "Orange",
-  cyan: "Cyan",
-  blue: "Blue",
-  loading: "Loading...",
-  fetching: "Fetching...",
-  waiting_send_req: "(waiting to send request)",
-  cancel: "Cancel",
-  save: "Save",
-  dismiss: "Dismiss",
-  are_you_sure: "Are you sure?",
-  yes: "Yes",
-  no: "No",
-  restore: "Restore",
-  add_star: "Add star",
-  remove_star: "Remove star",
-  nothing_found: "Nothing found",
-  replace_current: "Replace current",
-  replace_json: "Replace with JSON",
-  preserve_current: "Preserve current",
-  import_json: "Import from JSON",
-  download_file: "Download file",
-  upload_file: "Upload file",
-  copy_response: "Copy response",
-  copy_code: "Copy code",
-  copy_schema: "Copy Schema",
-  use_request: "Use request",
-  documentation: "Documentation",
-  docs: "Docs",
-  reset_default: "Reset to default",
-  fields: "FIELDS",
-  deprecated: "DEPRECATED",
-  add_one_header: "(add at least one header)",
-  add_one_parameter: "(add at least one parameter)",
-  header_count: "header {count}",
-  parameter_count: "parameter {count}",
-  variable_count: "variable {count}",
-  value_count: "value {count}",
-  send_request_first: "Send a request first",
-  generate_docs: "Generate Documentation",
-  generate_docs_message:
-    "Import any Postwoman Collection to Generate Documentation on-the-go.",
-  generate_docs_first: "Generate documentation first",
-  docs_generated: "Documentation generated",
-  import_collections: "Import collections",
-  optional: "(optional)",
-  json: "JSON",
-  none: "None",
-  username: "Username",
-  password: "Password",
-  token: "Token",
-  payload: "Payload",
-  choose_file: "Choose a file",
-  file_imported: "File imported",
-  import_failed: "Import failed",
-  f12_details: "(F12 for details)",
-  we_use_cookies: "We use cookies",
-  copied_to_clipboard: "Copied to clipboard",
-  finished_in: "Finished in {duration}ms",
-  check_console_details: "Check console for details.",
-  download_started: "Download started",
-  url_invalid_format: "URL is not formatted properly",
-  curl_invalid_format: "cURL is not formatted properly",
-  enable_proxy: "Try enabling Proxy",
-  complete_config_urls: "Please complete configuration urls.",
-  token_request_saved: "Token request saved",
-  donate_info1:
-    "If you have enjoyed the productivity of using Postwoman, consider donating as a sign of appreciation.",
-  donate_info2:
-    "You can support Postwoman development via the following methods:",
-  one_time_recurring: "One-time or recurring",
-  one_time: "One-time",
-  recurring: "Recurring",
-  wiki: "Wiki",
-  error: "Error",
-  go_home: "Go Home",
-  reload: "Reload",
-  enter_curl: "Enter cURL",
-  empty: "Empty",
-  extensions: "Extensions",
-  extensions_use_toggle:
-    "Use the browser extension to send requests (if present)",
-  extensions_info1: "Browser extension that simplifies access to Postwoman",
-  extensions_info2: "Get Postwoman browser extension!",
-  installed: "Installed",
-  login_with: "Login with",
-  logged_out: "Logged out",
-  logout: "Logout",
-  account: "Account",
-  sync: "Sync",
-  syncHistory: "History",
-  syncCollections: "Collections",
-  syncEnvironments: "Environments",
-  turn_on: "Turn on",
-  login_first: "Login first",
-  paste_a_note: "Paste a note",
-  import_from_sync: "Import from Sync",
-  notes: "Notes"
-};

lang/en-US.json

@@ -0,0 +1,288 @@
+{
+  "home": "Home",
+  "realtime": "Realtime",
+  "graphql": "GraphQL",
+  "settings": "Settings",
+  "request": "Request",
+  "install_pwa": "Install PWA",
+  "support_us": "Support us",
+  "tweet": "Tweet",
+  "options": "Options",
+  "communication": "Communication",
+  "endpoint": "Endpoint",
+  "schema": "Schema",
+  "theme": "Theme",
+  "subscribe": "Subscribe",
+  "choose_language": "Choose Language",
+  "shortcuts": "Shortcuts",
+  "send_request": "Send Request",
+  "save_to_collections": "Save to Collections",
+  "copy_request_link": "Copy Request Link",
+  "reset_request": "Reset Request",
+  "open_collective": "Open Collective",
+  "paypal": "PayPal",
+  "patreon": "Patreon",
+  "javascript_code": "JavaScript Code",
+  "method": "Method",
+  "path": "Path",
+  "label": "Label",
+  "content_type": "Content Type",
+  "raw_input": "Raw input",
+  "parameter_list": "Parameter List",
+  "raw_request_body": "Raw Request Body",
+  "show_code": "Show Code",
+  "hide_code": "Hide Code",
+  "show_prerequest_script": "Show Pre-Request Script",
+  "hide_prerequest_script": "Hide Pre-Request Script",
+  "authentication": "Authentication",
+  "authentication_type": "Authentication type",
+  "include_in_url": "Include in URL",
+  "parameters": "Parameters",
+  "expand_response": "Expand response",
+  "collapse_response": "Collapse response",
+  "hide_preview": "Hide Preview",
+  "preview_html": "Preview HTML",
+  "history": "History",
+  "collections": "Collections",
+  "environments": "Environments",
+  "new_environment": "New Environment",
+  "my_new_environment": "My New Environment",
+  "edit_environment": "Edit Environment",
+  "env_variable_list": "Variable List",
+  "invalid_environment_name": "Please provide a valid name for the environment",
+  "use_environment": "Use Environment",
+  "add_one_variable": "(add at least one variable)",
+  "import_curl": "Import cURL",
+  "import": "Import",
+  "generate_code": "Generate code",
+  "request_type": "Request type",
+  "generated_code": "Generated code",
+  "status": "Status",
+  "headers": "Headers",
+  "websocket": "WebSocket",
+  "waiting_for_connection": "(waiting for connection)",
+  "message": "Message",
+  "sse": "SSE",
+  "server": "Server",
+  "events": "Events",
+  "url": "URL",
+  "get_schema": "Get schema",
+  "header_list": "Header list",
+  "add_new": "Add new",
+  "response": "Response",
+  "query": "Query",
+  "queries": "Queries",
+  "query_variables": "Variables",
+  "mutations": "Mutations",
+  "subscriptions": "Subscriptions",
+  "types": "Types",
+  "send": "Send",
+  "background": "Background",
+  "color": "Color",
+  "labels": "Labels",
+  "multi_color": "Multi-color",
+  "enabled": "Enabled",
+  "disabled": "Disabled",
+  "proxy": "Proxy",
+  "postwoman_official_proxy_hosting": "Postwoman's Official Proxy is hosted by Apollo Software.",
+  "read_the": "Read the",
+  "apollosw_privacy_policy": "Apollo Software privacy policy",
+  "contact_us": "Contact us",
+  "connect": "Connect",
+  "disconnect": "Disconnect",
+  "start": "Start",
+  "stop": "Stop",
+  "access_token": "Access Token",
+  "token_list": "Token List",
+  "get_token": "Get New Token",
+  "manage_token": "Manage Access Token",
+  "save_token": "Save Access Token",
+  "use_token": "Use Saved Token",
+  "request_token": "Request Token",
+  "save_token_req": "Save Token Request",
+  "manage_token_req": "Manage Token Request",
+  "use_token_req": "Use Token Request",
+  "token_req_name": "Request Name",
+  "token_req_details": "Request Details",
+  "token_name": "Token Name",
+  "oidc_discovery_url": "OIDC Discovery URL",
+  "auth_url": "Auth URL",
+  "access_token_url": "Access Token URL",
+  "client_id": "Client ID",
+  "scope": "Scope",
+  "state": "State",
+  "token_req_list": "Token Request List",
+  "no_path": "No path",
+  "no_label": "No label",
+  "prerequest_script": "Pre-Request Script",
+  "no_prerequest_script": "No pre-request script",
+  "search": "Search",
+  "history_empty": "History is empty",
+  "history_deleted": "History Deleted",
+  "clear": "Clear",
+  "clear_all": "Clear All",
+  "cleared": "Cleared",
+  "close": "Close",
+  "sort": "Sort",
+  "time": "Time",
+  "duration": "Duration",
+  "no_duration": "No duration",
+  "show_more": "Show more",
+  "hide_more": "Hide more",
+  "collection": "Collection",
+  "current_collection": "Current Collection",
+  "select_collection": "Select a Collection",
+  "create_collection": "Create a Collection",
+  "new": "New",
+  "import_export": "Import / Export",
+  "more": "More",
+  "folder": "Folder",
+  "new_folder": "New Folder",
+  "my_new_folder": "My New Folder",
+  "folder_empty": "Folder is empty",
+  "edit_folder": "Edit Folder",
+  "edit": "Edit",
+  "delete": "Delete",
+  "deleted": "Deleted",
+  "undo": "Undo",
+  "collection_empty": "Collection is empty",
+  "invalid_collection_name": "Please provide a valid name for the collection",
+  "new_collection": "New Collection",
+  "my_new_collection": "My New Collection",
+  "edit_collection": "Edit Collection",
+  "edit_request": "Edit Request",
+  "save_request_as": "Save Request As",
+  "export": "Export",
+  "connecting_to": "Connecting to {name}...",
+  "connected": "Connected",
+  "connected_to": "Connected to {name}",
+  "disconnected": "Disconnected",
+  "disconnected_from": "Disconnected from {name}",
+  "something_went_wrong": "Something went wrong!",
+  "error_occurred": "An error has occurred.",
+  "browser_support_sse": "This browser doesn't seems to have Server Sent Events support.",
+  "log": "Log",
+  "no_url": "No URL",
+  "run_query": "Run Query",
+  "copy_query": "Copy Query",
+  "kinda_dark": "Kinda Dark",
+  "clearly_white": "Clearly White",
+  "just_black": "Just Black",
+  "auto_system": "Auto (system)",
+  "green": "Green",
+  "yellow": "Yellow",
+  "pink": "Pink",
+  "red": "Red",
+  "purple": "Purple",
+  "orange": "Orange",
+  "cyan": "Cyan",
+  "blue": "Blue",
+  "loading": "Loading...",
+  "fetching": "Fetching...",
+  "waiting_send_req": "(waiting to send request)",
+  "waiting_receive_response": "(waiting to receive response)",
+  "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",
+  "save": "Save",
+  "dismiss": "Dismiss",
+  "are_you_sure": "Are you sure?",
+  "yes": "Yes",
+  "no": "No",
+  "restore": "Restore",
+  "add_star": "Add star",
+  "remove_star": "Remove star",
+  "nothing_found": "Nothing found",
+  "replace_current": "Replace current",
+  "replace_json": "Replace with JSON",
+  "preserve_current": "Preserve current",
+  "import_json": "Import from JSON",
+  "download_file": "Download file",
+  "upload_file": "Upload file",
+  "copy_response": "Copy response",
+  "copy_code": "Copy code",
+  "copy_schema": "Copy Schema",
+  "use_request": "Use request",
+  "documentation": "Documentation",
+  "docs": "Docs",
+  "reset_default": "Reset to default",
+  "fields": "FIELDS",
+  "deprecated": "DEPRECATED",
+  "add_one_header": "(add at least one header)",
+  "add_one_parameter": "(add at least one parameter)",
+  "header_count": "header {count}",
+  "parameter_count": "parameter {count}",
+  "variable_count": "variable {count}",
+  "value_count": "value {count}",
+  "send_request_first": "Send a request first",
+  "generate_docs": "Generate Documentation",
+  "generate_docs_message": "Import any Postwoman Collection to Generate Documentation on-the-go.",
+  "generate_docs_first": "Generate documentation first",
+  "docs_generated": "Documentation generated",
+  "import_collections": "Import collections",
+  "optional": "(optional)",
+  "json": "JSON",
+  "none": "None",
+  "username": "Username",
+  "password": "Password",
+  "token": "Token",
+  "payload": "Payload",
+  "choose_file": "Choose a file",
+  "file_imported": "File imported",
+  "import_failed": "Import failed",
+  "f12_details": "(F12 for details)",
+  "we_use_cookies": "We use cookies",
+  "copied_to_clipboard": "Copied to clipboard",
+  "finished_in": "Finished in {duration}ms",
+  "check_console_details": "Check console for details.",
+  "check_graphql_valid": "Check the URL to see if it is a valid GraphQL endpoint",
+  "graphql_introspect_failed": "Failed fetching schema details.",
+  "download_started": "Download started",
+  "url_invalid_format": "URL is not formatted properly",
+  "curl_invalid_format": "cURL is not formatted properly",
+  "enable_proxy": "Try enabling Proxy",
+  "complete_config_urls": "Please complete configuration urls.",
+  "token_request_saved": "Token request saved",
+  "donate_info1": "If you have enjoyed the productivity of using Postwoman, consider donating as a sign of appreciation.",
+  "donate_info2": "You can support Postwoman development via the following methods:",
+  "one_time_recurring": "One-time or recurring",
+  "one_time": "One-time",
+  "recurring": "Recurring",
+  "wiki": "Wiki",
+  "error": "Error",
+  "go_home": "Go Home",
+  "reload": "Reload",
+  "enter_curl": "Enter cURL",
+  "empty": "Empty",
+  "extensions": "Extensions",
+  "extensions_use_toggle": "Use the browser extension to send requests (if present)",
+  "extensions_info1": "Browser extension that simplifies access to Postwoman",
+  "extensions_info2": "Get Postwoman browser extension!",
+  "installed": "Installed",
+  "login_with": "Login with",
+  "logged_out": "Logged out",
+  "login_success": "Successfully logged in",
+  "logout": "Logout",
+  "account": "Account",
+  "scrollInto_use_toggle": "Auto scroll",
+  "sync": "Sync",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments",
+  "turn_on": "Turn on",
+  "login_first": "Login first",
+  "paste_a_note": "Paste a note",
+  "import_from_sync": "Import from Sync",
+  "notes": "Notes",
+  "socketio": "Socket.IO",
+  "event_name": "Event Name",
+  "mqtt": "MQTT",
+  "mqtt_topic": "Topic",
+  "mqtt_topic_title": "Publish / Subscribe topic",
+  "mqtt_publish": "Publish",
+  "mqtt_subscribe": "Subscribe",
+  "mqtt_unsubscribe": "Unsubscribe"
+}

lang/es-ES.js

@@ -1,264 +0,0 @@
-export default {
-  home: "Inicio",
-  realtime: "Tiempo real",
-  graphql: "GraphQL",
-  settings: "Ajustes",
-  request: "Petición",
-  install_pwa: "Instalar PWA",
-  support_us: "Ayúdanos",
-  tweet: "Tweet",
-  options: "Opciones",
-  communication: "Comunicación",
-  endpoint: "Endpoint",
-  schema: "Esquema",
-  theme: "Tema",
-  subscribe: "Subscribirse",
-  choose_language: "Seleccione un idioma",
-  shortcuts: "Atajos",
-  send_request: "Enviar petición",
-  save_to_collections: "Guardar en las Colecciones",
-  copy_request_link: "Copiar enlace de la petición",
-  reset_request: "Reiniciar Petición",
-  support_us_on: "Ayúdanos en",
-  open_collective: "Open Collective",
-  paypal: "PayPal",
-  patreon: "Patreon",
-  javascript_code: "Código JavaScript",
-  method: "Método",
-  path: "Ruta",
-  label: "Etiqueta",
-  again: "De nuevo",
-  content_type: "Tipo de Contenido",
-  raw_input: "Datos sin Procesar",
-  parameter_list: "Lista de Parámetros",
-  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",
-  hide_prerequest_script: "Ocultar Script pre solicitud",
-  authentication: "Autenticación",
-  authentication_type: "Tipo de autenticación",
-  include_in_url: "Incluir en el URL",
-  parameters: "Parámetros",
-  expand_response: "Ampliar Respuesta",
-  collapse_response: "Contraer Respuesta",
-  hide_preview: "Ocultar la vista previa",
-  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",
-  status: "Estado",
-  headers: "Cabeceras",
-  websocket: "WebSocket",
-  waiting_for_connection: "(esperando por conexión)",
-  message: "Mensaje",
-  sse: "SSE",
-  server: "Servidor",
-  events: "Eventos",
-  url: "URL",
-  get_schema: "Obtener esquema",
-  header_list: "Lista de Cabeceras",
-  add_new: "Agregar nuevo",
-  response: "Respuesta",
-  query: "Consulta",
-  queries: "Consultas",
-  query_variables: "Variables",
-  mutations: "Mutaciones",
-  subscriptions: "Subscripciones",
-  types: "Tipos",
-  send: "Enviar",
-  background: "Fondo",
-  color: "Color",
-  labels: "Etiquetas",
-  multi_color: "Multicolor",
-  enabled: "Habilitado",
-  disabled: "Deshabilitado",
-  proxy: "Proxy",
-  postwoman_official_proxy_hosting:
-    "Proxy Oficial de Postwoman está hospedado en ApolloTV.",
-  read_the: "Leer la",
-  apollotv_privacy_policy: "Política de Privacidad de ApolloTV",
-  contact_us: "Contáctenos",
-  connect: "Conectar",
-  disconnect: "Desconectar",
-  start: "Comienzo",
-  stop: "Detener",
-  access_token: "Token de acceso",
-  token_list: "Lista de token",
-  get_token: "Obtener un nuevo token",
-  manage_token: "Gestionar el token de acceso",
-  save_token: "Guardar el token de acceso",
-  use_token: "Usar token guardado",
-  request_token: "Petición del token",
-  save_token_req: "Guardar la petición del token",
-  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_name: "Nombre del token",
-  oidc_discovery_url: "URL de descubrimiento de OIDC",
-  auth_url: "URL de autenticación",
-  access_token_url: "URL de token de acceso",
-  client_id: "ID del cliente",
-  scope: "Alcance",
-  state: "Estado",
-  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",
-  history_empty: "Historial vacío",
-  history_deleted: "Historial borrado",
-  clear: "Limpiar",
-  clear_all: "Limpiar todo",
-  cleared: "Limpiado",
-  close: "Cerrar",
-  sort: "Ordenar",
-  time: "Tiempo",
-  duration: "Duración",
-  no_duration: "Sin duración",
-  show_more: "Mostrar más",
-  hide_more: "Ocultar más",
-  collection: "Colección",
-  current_collection: "Actual colección",
-  select_collection: "Seleccionar una colección",
-  create_collection: "Crear una colección",
-  new: "Nuevo",
-  import_export: "Importar / Exportar",
-  more: "Más",
-  folder: "Directorio",
-  new_folder: "Nuevo directorio",
-  my_new_folder: "Mi nuevo directorio",
-  folder_empty: "Directorio vacío",
-  edit_folder: "Editar directorio",
-  edit: "Editar",
-  delete: "Borrar",
-  deleted: "Borrado",
-  undo: "Deshacer",
-  collection_empty: "Colección vacía",
-  new_collection: "Nueva colección",
-  my_new_collection: "Mi nueva colección",
-  edit_collection: "Editar colección",
-  edit_request: "Editar petición",
-  save_request_as: "Guardar petición como",
-  export: "Exportar",
-  connecting_to: "Conectando a {name}...",
-  connected: "Conectado",
-  connected_to: "Conectado a {name}",
-  disconnected: "Desconectado",
-  disconnected_from: "Desconectado desde {name}",
-  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",
-  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",
-  auto_system: "Autenticación (sistema)",
-  green: "Verde",
-  yellow: "Amarillo",
-  pink: "Rosado",
-  red: "Rojo",
-  purple: "Púrpura",
-  orange: "Anaranjado",
-  cyan: "Cian",
-  blue: "Azul",
-  loading: "Cargando...",
-  fetching: "Recuperando...",
-  waiting_send_req: "(esperando para enviar la petición)",
-  cancel: "Cancelar",
-  save: "Guardar",
-  dismiss: "Descartar",
-  are_you_sure: "Está seguro?",
-  yes: "Sí",
-  no: "No",
-  restore: "Restaurar",
-  add_star: "Agregar estrella",
-  remove_star: "Eliminar estrella",
-  nothing_found: "No se encontró nada",
-  replace_current: "Reemplaza el actual",
-  replace_json: "Reemplazar con JSON",
-  preserve_current: "Preservar 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",
-  use_request: "Usar la petición",
-  documentation: "Documentación",
-  docs: "Documentos",
-  reset_default: "Reiniciar valores por defecto",
-  fields: "CAMPOS",
-  deprecated: "OBSOLETO",
-  add_one_header: "(agregar al menos una cabecera)",
-  add_one_parameter: "(agregar al menos un parámetro)",
-  header_count: "cabecera {count}",
-  parameter_count: "parámetro {count}",
-  variable_count: "variable {count}",
-  value_count: "valor {count}",
-  send_request_first: "Enviar primero la petición",
-  generate_docs: "Generar la Documentación",
-  generate_docs_message:
-    "Importar cualquier Colección de Postwoman para Generar la Documentación sobre la marcha.",
-  generate_docs_first: "Generar primero la documentación",
-  docs_generated: "Documentación generada",
-  import_collections: "Importar colecciones",
-  optional: "(opcional)",
-  json: "JSON",
-  none: "Nada",
-  username: "Nombre de usuario",
-  password: "Contrasaeña",
-  token: "Token",
-  payload: "Carga",
-  choose_file: "Seleccione un archivo",
-  file_imported: "Archivo imporado",
-  f12_details: "(F12 para ver detalles)",
-  we_use_cookies: "Usamos las 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",
-  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",
-  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",
-  one_time: "Una vez",
-  recurring: "Recurrente",
-  wiki: "Wiki",
-  error: "Error",
-  go_home: "Ir al inicio",
-  reload: "Recargar",
-  enter_curl: "Intruduzca 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!",
-  installed: "Instalado",
-  login_with: "Iniciar sesión con",
-  logged_out: "Sesión cerreda",
-  logout: "Cerrar sesión",
-  account: "Cuenta",
-  sync: "Sync",
-  syncHistory: "Historial",
-  syncCollections: "Colecciones",
-  turn_on: "Encender",
-  login_first: "Inicie sesión primero",
-  paste_a_collection: "Pegar una Colección",
-  import_from_sync: "Importar desde Sync"
-};

lang/es-ES.json

@@ -0,0 +1,260 @@
+{
+  "home": "Inicio",
+  "realtime": "Tiempo real",
+  "graphql": "GraphQL",
+  "settings": "Ajustes",
+  "request": "Petición",
+  "install_pwa": "Instalar PWA",
+  "support_us": "Ayúdanos",
+  "tweet": "Tweet",
+  "options": "Opciones",
+  "communication": "Comunicación",
+  "endpoint": "Endpoint",
+  "schema": "Esquema",
+  "theme": "Tema",
+  "subscribe": "Subscribirse",
+  "choose_language": "Seleccione un idioma",
+  "shortcuts": "Atajos",
+  "send_request": "Enviar petición",
+  "save_to_collections": "Guardar en las Colecciones",
+  "copy_request_link": "Copiar enlace de la petición",
+  "reset_request": "Reiniciar Petición",
+  "support_us_on": "Ayúdanos en",
+  "open_collective": "Open Collective",
+  "paypal": "PayPal",
+  "patreon": "Patreon",
+  "javascript_code": "Código JavaScript",
+  "method": "Método",
+  "path": "Ruta",
+  "label": "Etiqueta",
+  "again": "De nuevo",
+  "content_type": "Tipo de Contenido",
+  "raw_input": "Datos sin Procesar",
+  "parameter_list": "Lista de Parámetros",
+  "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",
+  "hide_prerequest_script": "Ocultar Script pre solicitud",
+  "authentication": "Autenticación",
+  "authentication_type": "Tipo de autenticación",
+  "include_in_url": "Incluir en el URL",
+  "parameters": "Parámetros",
+  "expand_response": "Ampliar Respuesta",
+  "collapse_response": "Contraer Respuesta",
+  "hide_preview": "Ocultar la vista previa",
+  "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",
+  "status": "Estado",
+  "headers": "Cabeceras",
+  "websocket": "WebSocket",
+  "waiting_for_connection": "(esperando por conexión)",
+  "message": "Mensaje",
+  "sse": "SSE",
+  "server": "Servidor",
+  "events": "Eventos",
+  "url": "URL",
+  "get_schema": "Obtener esquema",
+  "header_list": "Lista de Cabeceras",
+  "add_new": "Agregar nuevo",
+  "response": "Respuesta",
+  "query": "Consulta",
+  "queries": "Consultas",
+  "query_variables": "Variables",
+  "mutations": "Mutaciones",
+  "subscriptions": "Subscripciones",
+  "types": "Tipos",
+  "send": "Enviar",
+  "background": "Fondo",
+  "color": "Color",
+  "labels": "Etiquetas",
+  "multi_color": "Multicolor",
+  "enabled": "Habilitado",
+  "disabled": "Deshabilitado",
+  "proxy": "Proxy",
+  "postwoman_official_proxy_hosting": "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",
+  "connect": "Conectar",
+  "disconnect": "Desconectar",
+  "start": "Comienzo",
+  "stop": "Detener",
+  "access_token": "Token de acceso",
+  "token_list": "Lista de token",
+  "get_token": "Obtener un nuevo token",
+  "manage_token": "Gestionar el token de acceso",
+  "save_token": "Guardar el token de acceso",
+  "use_token": "Usar token guardado",
+  "request_token": "Petición del token",
+  "save_token_req": "Guardar la petición del token",
+  "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_name": "Nombre del token",
+  "oidc_discovery_url": "URL de descubrimiento de OIDC",
+  "auth_url": "URL de autenticación",
+  "access_token_url": "URL de token de acceso",
+  "client_id": "ID del cliente",
+  "scope": "Alcance",
+  "state": "Estado",
+  "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",
+  "history_empty": "Historial vacío",
+  "history_deleted": "Historial borrado",
+  "clear": "Limpiar",
+  "clear_all": "Limpiar todo",
+  "cleared": "Limpiado",
+  "close": "Cerrar",
+  "sort": "Ordenar",
+  "time": "Tiempo",
+  "duration": "Duración",
+  "no_duration": "Sin duración",
+  "show_more": "Mostrar más",
+  "hide_more": "Ocultar más",
+  "collection": "Colección",
+  "current_collection": "Actual colección",
+  "select_collection": "Seleccionar una colección",
+  "create_collection": "Crear una colección",
+  "new": "Nuevo",
+  "import_export": "Importar / Exportar",
+  "more": "Más",
+  "folder": "Directorio",
+  "new_folder": "Nuevo directorio",
+  "my_new_folder": "Mi nuevo directorio",
+  "folder_empty": "Directorio vacío",
+  "edit_folder": "Editar directorio",
+  "edit": "Editar",
+  "delete": "Borrar",
+  "deleted": "Borrado",
+  "undo": "Deshacer",
+  "collection_empty": "Colección vacía",
+  "new_collection": "Nueva colección",
+  "my_new_collection": "Mi nueva colección",
+  "edit_collection": "Editar colección",
+  "edit_request": "Editar petición",
+  "save_request_as": "Guardar petición como",
+  "export": "Exportar",
+  "connecting_to": "Conectando a {name}...",
+  "connected": "Conectado",
+  "connected_to": "Conectado a {name}",
+  "disconnected": "Desconectado",
+  "disconnected_from": "Desconectado desde {name}",
+  "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",
+  "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",
+  "auto_system": "Autenticación (sistema)",
+  "green": "Verde",
+  "yellow": "Amarillo",
+  "pink": "Rosado",
+  "red": "Rojo",
+  "purple": "Púrpura",
+  "orange": "Anaranjado",
+  "cyan": "Cian",
+  "blue": "Azul",
+  "loading": "Cargando...",
+  "fetching": "Recuperando...",
+  "waiting_send_req": "(esperando para enviar la petición)",
+  "cancel": "Cancelar",
+  "save": "Guardar",
+  "dismiss": "Descartar",
+  "are_you_sure": "Está seguro?",
+  "yes": "Sí",
+  "no": "No",
+  "restore": "Restaurar",
+  "add_star": "Agregar estrella",
+  "remove_star": "Eliminar estrella",
+  "nothing_found": "No se encontró nada",
+  "replace_current": "Reemplaza el actual",
+  "replace_json": "Reemplazar con JSON",
+  "preserve_current": "Preservar 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",
+  "use_request": "Usar la petición",
+  "documentation": "Documentación",
+  "docs": "Documentos",
+  "reset_default": "Reiniciar valores por defecto",
+  "fields": "CAMPOS",
+  "deprecated": "OBSOLETO",
+  "add_one_header": "(agregar al menos una cabecera)",
+  "add_one_parameter": "(agregar al menos un parámetro)",
+  "header_count": "cabecera {count}",
+  "parameter_count": "parámetro {count}",
+  "variable_count": "variable {count}",
+  "value_count": "valor {count}",
+  "send_request_first": "Enviar primero la petición",
+  "generate_docs": "Generar la Documentación",
+  "generate_docs_message": "Importar cualquier Colección de Postwoman para Generar la Documentación sobre la marcha.",
+  "generate_docs_first": "Generar primero la documentación",
+  "docs_generated": "Documentación generada",
+  "import_collections": "Importar colecciones",
+  "optional": "(opcional)",
+  "json": "JSON",
+  "none": "Nada",
+  "username": "Nombre de usuario",
+  "password": "Contrasaeña",
+  "token": "Token",
+  "payload": "Carga",
+  "choose_file": "Seleccione un archivo",
+  "file_imported": "Archivo imporado",
+  "f12_details": "(F12 para ver detalles)",
+  "we_use_cookies": "Usamos las 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",
+  "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",
+  "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",
+  "one_time": "Una vez",
+  "recurring": "Recurrente",
+  "wiki": "Wiki",
+  "error": "Error",
+  "go_home": "Ir al inicio",
+  "reload": "Recargar",
+  "enter_curl": "Intruduzca 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!",
+  "installed": "Instalado",
+  "login_with": "Iniciar sesión con",
+  "logged_out": "Sesión cerreda",
+  "logout": "Cerrar sesión",
+  "account": "Cuenta",
+  "sync": "Sync",
+  "syncHistory": "Historial",
+  "syncCollections": "Colecciones",
+  "syncEnvironments": "Environments",
+  "turn_on": "Encender",
+  "login_first": "Inicie sesión primero",
+  "paste_a_collection": "Pegar una Colección",
+  "import_from_sync": "Importar desde Sync"
+}

lang/fa-IR.js

@@ -1,90 +0,0 @@
-export default {
-  home: "خانه",
-  realtime: "بلادرنگ",
-  graphql: "GraphQL",
-  settings: "تنظیمات",
-  request: "درخواست",
-  install_pwa: "نصب PWA",
-  support_us: "از ما حمایت کنید",
-  tweet: "Tweet",
-  options: "گزینه‌ها",
-  communication: "ارتباط",
-  endpoint: "Endpoint",
-  schema: "Schema",
-  theme: "پوسته",
-  subscribe: "اشتراک",
-  choose_language: "تغییر زبان",
-  shortcuts: "میانبرها",
-  send_request: "ارسال درخواست",
-  save_to_collections: "ذخیره در کلکسیون",
-  copy_request_link: "کپی لینک درخواست",
-  reset_request: "بازنشانی درخواست",
-  support_us_on: "حمایت از ما از طریق",
-  open_collective: "Open Collective",
-  paypal: "PayPal",
-  patreon: "Patreon",
-  javascript_code: "کد JavaScript",
-  method: "متد",
-  path: "مسیر",
-  label: "برچسب",
-  again: "دوباره",
-  content_type: "Content Type",
-  raw_input: "ورودی raw",
-  parameter_list: "لیست پارامترها",
-  raw_request_body: "Raw Request Body",
-  show_code: "نمایش کد",
-  hide_code: "عدم نمایش کد",
-  show_prerequest_script: "Show Pre-Request Script",
-  hide_prerequest_script: "Hide Pre-Request Script",
-  authentication: "Authentication",
-  authentication_type: "Authentication type",
-  include_in_url: "در URL گنجانده شود",
-  parameters: "پارامترها",
-  expand_response: "نمایش کامل پاسخ",
-  collapse_response: "نمایش مختصر پاسخ",
-  hide_preview: "مخفی کردن نمایش",
-  preview_html: "نمایش HTML",
-  history: "تاریخچه",
-  collections: "کلکسیون",
-  import_curl: "وارد کردن cURL",
-  import: "وارد کردن",
-  generate_code: "تولید کد",
-  request_type: "Request type",
-  generated_code: "کد تولید شده",
-  status: "Status",
-  headers: "Headers",
-  websocket: "WebSocket",
-  waiting_for_connection: "(منتظر برقراری اتصال)",
-  message: "پیام",
-  sse: "SSE",
-  server: "سرور",
-  events: "رویداد",
-  url: "URL",
-  get_schema: "دریافت Schema",
-  header_list: "لیست Header",
-  add_new: "افزودن",
-  response: "Response",
-  query: "Query",
-  queries: "Queries",
-  query_variables: "Variables",
-  mutations: "Mutations",
-  subscriptions: "Subscriptions",
-  types: "Types",
-  send: "ارسال",
-  background: "پس زمینه",
-  color: "رنگ",
-  labels: "برچسب‌ها",
-  multi_color: "چند رنگی",
-  enabled: "فعال",
-  disabled: "غیر فعال",
-  proxy: "پراکسی",
-  postwoman_official_proxy_hosting:
-    "پراکسی Postwoman  برروی هاست ApolloTV قرار دارد.",
-  read_the: "بخوانید",
-  apollotv_privacy_policy: "خط مشی رازداری ApolloTV",
-  contact_us: "Contact us",
-  connect: "Connect",
-  disconnect: "Disconnect",
-  start: "Start",
-  stop: "Stop"
-};

lang/fa-IR.json

@@ -0,0 +1,92 @@
+{
+  "home": "خانه",
+  "realtime": "بلادرنگ",
+  "graphql": "GraphQL",
+  "settings": "تنظیمات",
+  "request": "درخواست",
+  "install_pwa": "نصب PWA",
+  "support_us": "از ما حمایت کنید",
+  "tweet": "Tweet",
+  "options": "گزینه‌ها",
+  "communication": "ارتباط",
+  "endpoint": "Endpoint",
+  "schema": "Schema",
+  "theme": "پوسته",
+  "subscribe": "اشتراک",
+  "choose_language": "تغییر زبان",
+  "shortcuts": "میانبرها",
+  "send_request": "ارسال درخواست",
+  "save_to_collections": "ذخیره در کلکسیون",
+  "copy_request_link": "کپی لینک درخواست",
+  "reset_request": "بازنشانی درخواست",
+  "support_us_on": "حمایت از ما از طریق",
+  "open_collective": "Open Collective",
+  "paypal": "PayPal",
+  "patreon": "Patreon",
+  "javascript_code": "کد JavaScript",
+  "method": "متد",
+  "path": "مسیر",
+  "label": "برچسب",
+  "again": "دوباره",
+  "content_type": "Content Type",
+  "raw_input": "ورودی raw",
+  "parameter_list": "لیست پارامترها",
+  "raw_request_body": "Raw Request Body",
+  "show_code": "نمایش کد",
+  "hide_code": "عدم نمایش کد",
+  "show_prerequest_script": "Show Pre-Request Script",
+  "hide_prerequest_script": "Hide Pre-Request Script",
+  "authentication": "Authentication",
+  "authentication_type": "Authentication type",
+  "include_in_url": "در URL گنجانده شود",
+  "parameters": "پارامترها",
+  "expand_response": "نمایش کامل پاسخ",
+  "collapse_response": "نمایش مختصر پاسخ",
+  "hide_preview": "مخفی کردن نمایش",
+  "preview_html": "نمایش HTML",
+  "history": "تاریخچه",
+  "collections": "کلکسیون",
+  "import_curl": "وارد کردن cURL",
+  "import": "وارد کردن",
+  "generate_code": "تولید کد",
+  "request_type": "Request type",
+  "generated_code": "کد تولید شده",
+  "status": "Status",
+  "headers": "Headers",
+  "websocket": "WebSocket",
+  "waiting_for_connection": "(منتظر برقراری اتصال)",
+  "message": "پیام",
+  "sse": "SSE",
+  "server": "سرور",
+  "events": "رویداد",
+  "url": "URL",
+  "get_schema": "دریافت Schema",
+  "header_list": "لیست Header",
+  "add_new": "افزودن",
+  "response": "Response",
+  "query": "Query",
+  "queries": "Queries",
+  "query_variables": "Variables",
+  "mutations": "Mutations",
+  "subscriptions": "Subscriptions",
+  "types": "Types",
+  "send": "ارسال",
+  "background": "پس زمینه",
+  "color": "رنگ",
+  "labels": "برچسب‌ها",
+  "multi_color": "چند رنگی",
+  "enabled": "فعال",
+  "disabled": "غیر فعال",
+  "proxy": "پراکسی",
+  "postwoman_official_proxy_hosting": "پراکسی Postwoman  برروی هاست Apollo Software قرار دارد.",
+  "read_the": "بخوانید",
+  "apollosw_privacy_policy": "خط مشی رازداری Apollo Software",
+  "contact_us": "Contact us",
+  "connect": "Connect",
+  "disconnect": "Disconnect",
+  "start": "Start",
+  "stop": "Stop",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments"
+}

lang/fr-FR.js

@@ -1,264 +0,0 @@
-export default {
-  home: "Accueil",
-  realtime: "Temps réel",
-  graphql: "GraphQL",
-  settings: "Paramètres",
-  request: "Request",
-  install_pwa: "Installer la PWA",
-  support_us: "Nous supporter",
-  tweet: "Tweeter",
-  options: "Options",
-  communication: "Communication",
-  endpoint: "Endpoint",
-  schema: "Schéma",
-  theme: "Thème",
-  subscribe: "S'inscrire",
-  choose_language: "Sélectionner une langue",
-  shortcuts: "Raccourcis",
-  send_request: "Envoyer la requête",
-  save_to_collections: "Sauvegarder dans les collections",
-  copy_request_link: "Copier le lien de la requête",
-  reset_request: "Réinitialiser la requête",
-  support_us_on: "Supportez-nous sur",
-  open_collective: "Ouvrir Collective",
-  paypal: "PayPal",
-  patreon: "Patreon",
-  javascript_code: "Code JavaScript",
-  method: "Méthode",
-  path: "Chemin d'accès",
-  label: "Libellé",
-  again: "Réessayer",
-  content_type: "Type de contenu",
-  raw_input: "Texte brut",
-  parameter_list: "Liste des paramètres",
-  raw_request_body: "Corps de la requête en texte brut",
-  show_code: "Afficher le code",
-  hide_code: "Masquer le code",
-  show_prerequest_script: "Afficher le script de pré-requête",
-  hide_prerequest_script: "Masquer le script de pré-requête",
-  authentication: "Authentification",
-  authentication_type: "Type d'authentification",
-  include_in_url: "Inclure dans l'URL",
-  parameters: "Paramètres",
-  expand_response: "Agrandir la réponse",
-  collapse_response: "Réduire la réponse",
-  hide_preview: "Masquer la prévisualisation",
-  preview_html: "Prévisualiser le HTML",
-  history: "Historique",
-  collections: "Collections",
-  import_curl: "Importer en cURL",
-  importer: "Importer",
-  generate_code: "Générer le code",
-  request_type: "Type de requête",
-  generated_code: "Code généré",
-  status: "Statut",
-  headers: "En-têtes",
-  websocket: "WebSocket",
-  waiting_for_connection: "(en attente de connexion)",
-  message: "Message",
-  sse: "SSE",
-  server: "Serveur",
-  events: "Évènements",
-  url: "URL",
-  get_schema: "Récuperer le schéma",
-  header_list: "Liste d'en-têtes",
-  add_new: "Ajouter",
-  response: "Réponse",
-  query: "Requête",
-  queries: "Requêtes",
-  query_variables: "Variables",
-  mutations: "Mutations",
-  subscriptions: "Abonnements",
-  types: "Types",
-  send: "Envoyer",
-  background: "Arrière-plan",
-  color: "Couleur",
-  labels: "Libellés",
-  multi_color: "Multi-couleurs",
-  enabled: "Activé",
-  disabled: "Désactivé",
-  proxy: "Proxy",
-  postwoman_official_proxy_hosting:
-    "Le proxy officiel de Postwoman est hébergé par ApolloTV.",
-  read_the: "Lire la",
-  apollotv_privacy_policy: "politique de confidentialité ApolloTV",
-  contact_us: "Contactez nous",
-  connect: "Relier",
-  disconnect: "Déconnecter",
-  start: "Début",
-  stop: "Arrêtez",
-  access_token: "Token d'accès",
-  token_list: "Liste des Tokens",
-  get_token: "Obtenir un nouveau Token",
-  manage_token: "Gérer le Token",
-  save_token: "Sauvegarder le Token",
-  use_token: "Utiliser un Token",
-  request_token: "Demander un Token",
-  save_token_req: "Sauvegarder la requête ",
-  manage_token_req: "Gérer la requête avec Token",
-  use_token_req: "Utiliser la requête avec Token",
-  token_req_name: "Nom de la requête",
-  token_req_details: "Détails de la requête",
-  token_name: "Nom du Token",
-  oidc_discovery_url: "OIDC Discovery URL",
-  auth_url: "Auth URL",
-  access_token_url: "URL du Token d'accès",
-  client_id: "Client ID",
-  scope: "Scope",
-  state: "État",
-  token_req_list: "Liste des requêtes avec Token",
-  no_path: "Aucun chemin",
-  no_label: "Aucun label",
-  prerequest_script: "Pre-Request Script",
-  no_prerequest_script: "No pre-request script",
-  search: "Historique de la recherche",
-  history_empty: "L'historique est vide",
-  history_deleted: "Historique supprimé",
-  clear: "Nettoyer",
-  clear_all: "Tout nettoyer",
-  cleared: "Nettoyé",
-  close: "Fermer",
-  sort: "Trier",
-  time: "Temps",
-  duration: "Durée",
-  no_duration: "Aucune durée",
-  show_more: "Plus d'informations",
-  hide_more: "Moins d'informations",
-  collection: "Collection",
-  current_collection: "Collection Actuelle",
-  select_collection: "Selectionner une Collection",
-  create_collection: "Créer une Collection",
-  new: "Nouveau",
-  import_export: "Importer / Exporter",
-  more: "Plus",
-  folder: "Dossier",
-  new_folder: "Nouveau Dossier",
-  my_new_folder: "Mon Nouveau Dossier",
-  folder_empty: "Ce Dossier est vide",
-  edit_folder: "Éditer le Dossier",
-  edit: "Éditer",
-  delete: "Supprimer",
-  deleted: "Supprimé",
-  undo: "Annuler",
-  collection_empty: "Cette Collection est vide",
-  new_collection: "Nouvelle Collection",
-  my_new_collection: "Ma Nouvelle Collection",
-  edit_collection: "Éditer la Collection",
-  edit_request: "Éditer ma requête",
-  save_request_as: "Sauvegarder ma requête sous",
-  export: "Exporter",
-  connecting_to: "Connexion à {name}...",
-  connected: "Connecté",
-  connected_to: "Connecté à {name}",
-  disconnected: "Déconnecté",
-  disconnected_from: "Déconnecté sur {name}",
-  something_went_wrong: "Quelque chose n'a pas marché!",
-  error_occurred: "Une erreur s'est produite.",
-  browser_support_sse:
-    "Ce navigateur ne semble pas prendre en charge les événements envoyés par le serveur.",
-  log: "Log",
-  no_url: "Aucune URL",
-  run_query: "Lancer une recherche",
-  copy_query: "Copier la recherche",
-  kinda_dark: "Plutôt Sombre",
-  clearly_white: "Clairement Blanc",
-  just_black: "Seulement Noir",
-  auto_system: "Auth (système)",
-  green: "Vert",
-  yellow: "Jaune",
-  pink: "Rose",
-  red: "Rouge",
-  purple: "Violet",
-  orange: "Orange",
-  cyan: "Cyan",
-  blue: "Bleue",
-  loading: "Chargement...",
-  fetching: "Récupération...",
-  waiting_send_req: "(en attente de l'envoi de la demande)",
-  cancel: "Annuler",
-  save: "Sauvarder",
-  dismiss: "Dismiss",
-  are_you_sure: "Êtes-vous sûr?",
-  yes: "Oui",
-  no: "Non",
-  restore: "Restaurer",
-  add_star: "Ajouter une étoile",
-  remove_star: "Supprimer une étoile",
-  nothing_found: "Rien n'a été trouvé",
-  replace_current: "Remplacer l'actuel",
-  replace_json: "Replacer avec du JSON",
-  preserve_current: "Conserver l'actuel",
-  import_json: "Importer depuis un JSON",
-  download_file: "Télécharger un fichier",
-  upload_file: "Charger un fichier",
-  copy_response: "Copier la réponse",
-  copy_code: "Copier le code",
-  copy_schema: "Copier le  Schéma",
-  use_request: "Utiliser cette  requête",
-  documentation: "Documentation",
-  docs: "Docs",
-  reset_default: "Rétablir la valeur par défaut",
-  fields: "CHAMPS",
-  deprecated: "DÉPRÉCIÉ",
-  add_one_header: "(ajouter au moins un en-tête)",
-  add_one_parameter: "(ajouter au moins un paramètre)",
-  header_count: "{count} en-tête",
-  parameter_count: "{count} paramètre",
-  variable_count: "{count} variable",
-  value_count: "{count} valeur",
-  send_request_first: "Envoyez d'abord une requête",
-  generate_docs: "Genérer  une Documentation",
-  generate_docs_message:
-    "Importer n'importe quelle collection de Postwoman pour générer de la documentation en déplacement.",
-  generate_docs_first: "Générer la documentation d'abord",
-  docs_generated: "Documentation générée",
-  import_collections: "Importer les collections",
-  optional: "(optionnel)",
-  json: "JSON",
-  none: "Aucun",
-  username: "Username",
-  password: "Password",
-  token: "Token",
-  payload: "Payload",
-  choose_file: "Choisir un fichier",
-  file_imported: "Fichier importé",
-  f12_details: "(F12 pour voir les détails)",
-  we_use_cookies: "Nous utilisons des cookies",
-  copied_to_clipboard: "Copié dans le presse-papier",
-  finished_in: "Fini en {duration}ms",
-  check_console_details: "Consultez la console pour plus de détails.",
-  download_started: "Téléchargement démarré",
-  url_invalid_format: "L'URL n'est pas formatée correctement",
-  curl_invalid_format: "cURL n'est pas formaté correctement",
-  enable_proxy: "Essayez en activant le Proxy",
-  complete_config_urls: "Veuillez compléter les urls de configuration.",
-  token_request_saved: "Requête de Token sauvegardé",
-  donate_info1:
-    "Si vous avez apprécié la productivité de l'utilisation de Postwoman, considérez le don comme un signe d'appréciation.",
-  donate_info2:
-    "Vous pouvez soutenir le développement de Postwoman par les méthodes suivantes :",
-  one_time_recurring: "Ponctuel ou récurrent",
-  one_time: "Une fois",
-  recurring: "Récurrent",
-  wiki: "Wiki",
-  error: "Erreur",
-  go_home: "Aller à l'accueil",
-  reload: "Recharger",
-  enter_curl: "Entrer cURL",
-  empty: "Vide",
-  extensions: "Extensions",
-  extensions_info1: "Extension pour navigateur qui simplifie l'accès à Postwoman",
-  extensions_info2: "Obtenez l'extension Postwoman pour navigateur !",
-  installed: "Installé",
-  login_with: "Se connecter avec",
-  logged_out: "Se déconnecter",
-  logout: "Déconnexion",
-  account: "Compte",
-  sync: "Synchroniser",
-  syncHistory: "Historique",
-  syncCollections: "Collections",
-  turn_on: "Activer",
-  login_first: "Se connecter d'abord",
-  paste_a_collection: "Coller une collection",
-  import_from_sync: "Importer depuis la synchronisation"
-};

lang/fr-FR.json

@@ -0,0 +1,260 @@
+{
+  "home": "Accueil",
+  "realtime": "Temps réel",
+  "graphql": "GraphQL",
+  "settings": "Paramètres",
+  "request": "Request",
+  "install_pwa": "Installer la PWA",
+  "support_us": "Nous supporter",
+  "tweet": "Tweeter",
+  "options": "Options",
+  "communication": "Communication",
+  "endpoint": "Endpoint",
+  "schema": "Schéma",
+  "theme": "Thème",
+  "subscribe": "S'inscrire",
+  "choose_language": "Sélectionner une langue",
+  "shortcuts": "Raccourcis",
+  "send_request": "Envoyer la requête",
+  "save_to_collections": "Sauvegarder dans les collections",
+  "copy_request_link": "Copier le lien de la requête",
+  "reset_request": "Réinitialiser la requête",
+  "support_us_on": "Supportez-nous sur",
+  "open_collective": "Ouvrir Collective",
+  "paypal": "PayPal",
+  "patreon": "Patreon",
+  "javascript_code": "Code JavaScript",
+  "method": "Méthode",
+  "path": "Chemin d'accès",
+  "label": "Libellé",
+  "again": "Réessayer",
+  "content_type": "Type de contenu",
+  "raw_input": "Texte brut",
+  "parameter_list": "Liste des paramètres",
+  "raw_request_body": "Corps de la requête en texte brut",
+  "show_code": "Afficher le code",
+  "hide_code": "Masquer le code",
+  "show_prerequest_script": "Afficher le script de pré-requête",
+  "hide_prerequest_script": "Masquer le script de pré-requête",
+  "authentication": "Authentification",
+  "authentication_type": "Type d'authentification",
+  "include_in_url": "Inclure dans l'URL",
+  "parameters": "Paramètres",
+  "expand_response": "Agrandir la réponse",
+  "collapse_response": "Réduire la réponse",
+  "hide_preview": "Masquer la prévisualisation",
+  "preview_html": "Prévisualiser le HTML",
+  "history": "Historique",
+  "collections": "Collections",
+  "import_curl": "Importer en cURL",
+  "importer": "Importer",
+  "generate_code": "Générer le code",
+  "request_type": "Type de requête",
+  "generated_code": "Code généré",
+  "status": "Statut",
+  "headers": "En-têtes",
+  "websocket": "WebSocket",
+  "waiting_for_connection": "(en attente de connexion)",
+  "message": "Message",
+  "sse": "SSE",
+  "server": "Serveur",
+  "events": "Évènements",
+  "url": "URL",
+  "get_schema": "Récuperer le schéma",
+  "header_list": "Liste d'en-têtes",
+  "add_new": "Ajouter",
+  "response": "Réponse",
+  "query": "Requête",
+  "queries": "Requêtes",
+  "query_variables": "Variables",
+  "mutations": "Mutations",
+  "subscriptions": "Abonnements",
+  "types": "Types",
+  "send": "Envoyer",
+  "background": "Arrière-plan",
+  "color": "Couleur",
+  "labels": "Libellés",
+  "multi_color": "Multi-couleurs",
+  "enabled": "Activé",
+  "disabled": "Désactivé",
+  "proxy": "Proxy",
+  "postwoman_official_proxy_hosting": "Le proxy officiel de Postwoman est hébergé par Apollo Software.",
+  "read_the": "Lire la",
+  "apollosw_privacy_policy": "politique de confidentialité Apollo Software",
+  "contact_us": "Contactez nous",
+  "connect": "Relier",
+  "disconnect": "Déconnecter",
+  "start": "Début",
+  "stop": "Arrêtez",
+  "access_token": "Token d'accès",
+  "token_list": "Liste des Tokens",
+  "get_token": "Obtenir un nouveau Token",
+  "manage_token": "Gérer le Token",
+  "save_token": "Sauvegarder le Token",
+  "use_token": "Utiliser un Token",
+  "request_token": "Demander un Token",
+  "save_token_req": "Sauvegarder la requête ",
+  "manage_token_req": "Gérer la requête avec Token",
+  "use_token_req": "Utiliser la requête avec Token",
+  "token_req_name": "Nom de la requête",
+  "token_req_details": "Détails de la requête",
+  "token_name": "Nom du Token",
+  "oidc_discovery_url": "OIDC Discovery URL",
+  "auth_url": "Auth URL",
+  "access_token_url": "URL du Token d'accès",
+  "client_id": "Client ID",
+  "scope": "Scope",
+  "state": "État",
+  "token_req_list": "Liste des requêtes avec Token",
+  "no_path": "Aucun chemin",
+  "no_label": "Aucun label",
+  "prerequest_script": "Pre-Request Script",
+  "no_prerequest_script": "No pre-request script",
+  "search": "Historique de la recherche",
+  "history_empty": "L'historique est vide",
+  "history_deleted": "Historique supprimé",
+  "clear": "Nettoyer",
+  "clear_all": "Tout nettoyer",
+  "cleared": "Nettoyé",
+  "close": "Fermer",
+  "sort": "Trier",
+  "time": "Temps",
+  "duration": "Durée",
+  "no_duration": "Aucune durée",
+  "show_more": "Plus d'informations",
+  "hide_more": "Moins d'informations",
+  "collection": "Collection",
+  "current_collection": "Collection Actuelle",
+  "select_collection": "Selectionner une Collection",
+  "create_collection": "Créer une Collection",
+  "new": "Nouveau",
+  "import_export": "Importer / Exporter",
+  "more": "Plus",
+  "folder": "Dossier",
+  "new_folder": "Nouveau Dossier",
+  "my_new_folder": "Mon Nouveau Dossier",
+  "folder_empty": "Ce Dossier est vide",
+  "edit_folder": "Éditer le Dossier",
+  "edit": "Éditer",
+  "delete": "Supprimer",
+  "deleted": "Supprimé",
+  "undo": "Annuler",
+  "collection_empty": "Cette Collection est vide",
+  "new_collection": "Nouvelle Collection",
+  "my_new_collection": "Ma Nouvelle Collection",
+  "edit_collection": "Éditer la Collection",
+  "edit_request": "Éditer ma requête",
+  "save_request_as": "Sauvegarder ma requête sous",
+  "export": "Exporter",
+  "connecting_to": "Connexion à {name}...",
+  "connected": "Connecté",
+  "connected_to": "Connecté à {name}",
+  "disconnected": "Déconnecté",
+  "disconnected_from": "Déconnecté sur {name}",
+  "something_went_wrong": "Quelque chose n'a pas marché!",
+  "error_occurred": "Une erreur s'est produite.",
+  "browser_support_sse": "Ce navigateur ne semble pas prendre en charge les événements envoyés par le serveur.",
+  "log": "Log",
+  "no_url": "Aucune URL",
+  "run_query": "Lancer une recherche",
+  "copy_query": "Copier la recherche",
+  "kinda_dark": "Plutôt Sombre",
+  "clearly_white": "Clairement Blanc",
+  "just_black": "Seulement Noir",
+  "auto_system": "Auth (système)",
+  "green": "Vert",
+  "yellow": "Jaune",
+  "pink": "Rose",
+  "red": "Rouge",
+  "purple": "Violet",
+  "orange": "Orange",
+  "cyan": "Cyan",
+  "blue": "Bleue",
+  "loading": "Chargement...",
+  "fetching": "Récupération...",
+  "waiting_send_req": "(en attente de l'envoi de la demande)",
+  "cancel": "Annuler",
+  "save": "Sauvarder",
+  "dismiss": "Dismiss",
+  "are_you_sure": "Êtes-vous sûr?",
+  "yes": "Oui",
+  "no": "Non",
+  "restore": "Restaurer",
+  "add_star": "Ajouter une étoile",
+  "remove_star": "Supprimer une étoile",
+  "nothing_found": "Rien n'a été trouvé",
+  "replace_current": "Remplacer l'actuel",
+  "replace_json": "Replacer avec du JSON",
+  "preserve_current": "Conserver l'actuel",
+  "import_json": "Importer depuis un JSON",
+  "download_file": "Télécharger un fichier",
+  "upload_file": "Charger un fichier",
+  "copy_response": "Copier la réponse",
+  "copy_code": "Copier le code",
+  "copy_schema": "Copier le  Schéma",
+  "use_request": "Utiliser cette  requête",
+  "documentation": "Documentation",
+  "docs": "Docs",
+  "reset_default": "Rétablir la valeur par défaut",
+  "fields": "CHAMPS",
+  "deprecated": "DÉPRÉCIÉ",
+  "add_one_header": "(ajouter au moins un en-tête)",
+  "add_one_parameter": "(ajouter au moins un paramètre)",
+  "header_count": "{count} en-tête",
+  "parameter_count": "{count} paramètre",
+  "variable_count": "{count} variable",
+  "value_count": "{count} valeur",
+  "send_request_first": "Envoyez d'abord une requête",
+  "generate_docs": "Genérer  une Documentation",
+  "generate_docs_message": "Importer n'importe quelle collection de Postwoman pour générer de la documentation en déplacement.",
+  "generate_docs_first": "Générer la documentation d'abord",
+  "docs_generated": "Documentation générée",
+  "import_collections": "Importer les collections",
+  "optional": "(optionnel)",
+  "json": "JSON",
+  "none": "Aucun",
+  "username": "Username",
+  "password": "Password",
+  "token": "Token",
+  "payload": "Payload",
+  "choose_file": "Choisir un fichier",
+  "file_imported": "Fichier importé",
+  "f12_details": "(F12 pour voir les détails)",
+  "we_use_cookies": "Nous utilisons des cookies",
+  "copied_to_clipboard": "Copié dans le presse-papier",
+  "finished_in": "Fini en {duration}ms",
+  "check_console_details": "Consultez la console pour plus de détails.",
+  "download_started": "Téléchargement démarré",
+  "url_invalid_format": "L'URL n'est pas formatée correctement",
+  "curl_invalid_format": "cURL n'est pas formaté correctement",
+  "enable_proxy": "Essayez en activant le Proxy",
+  "complete_config_urls": "Veuillez compléter les urls de configuration.",
+  "token_request_saved": "Requête de Token sauvegardé",
+  "donate_info1": "Si vous avez apprécié la productivité de l'utilisation de Postwoman, considérez le don comme un signe d'appréciation.",
+  "donate_info2": "Vous pouvez soutenir le développement de Postwoman par les méthodes suivantes :",
+  "one_time_recurring": "Ponctuel ou récurrent",
+  "one_time": "Une fois",
+  "recurring": "Récurrent",
+  "wiki": "Wiki",
+  "error": "Erreur",
+  "go_home": "Aller à l'accueil",
+  "reload": "Recharger",
+  "enter_curl": "Entrer cURL",
+  "empty": "Vide",
+  "extensions": "Extensions",
+  "extensions_info1": "Extension pour navigateur qui simplifie l'accès à Postwoman",
+  "extensions_info2": "Obtenez l'extension Postwoman pour navigateur !",
+  "installed": "Installé",
+  "login_with": "Se connecter avec",
+  "logged_out": "Se déconnecter",
+  "logout": "Déconnexion",
+  "account": "Compte",
+  "sync": "Synchroniser",
+  "syncHistory": "Historique",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments",
+  "turn_on": "Activer",
+  "login_first": "Se connecter d'abord",
+  "paste_a_collection": "Coller une collection",
+  "import_from_sync": "Importer depuis la synchronisation"
+}

lang/id-ID.js

@@ -1,90 +0,0 @@
-export default {
-  home: "Beranda",
-  realtime: "Waktu Nyata",
-  graphql: "GraphQL",
-  settings: "Pengaturan",
-  request: "Permintaan",
-  install_pwa: "Pasang PWA",
-  support_us: "Dukung kami",
-  tweet: "Cuitkan",
-  options: "Opsi",
-  communication: "Komunikasi",
-  endpoint: "Titik Akhir",
-  schema: "Skema",
-  theme: "Tema",
-  subscribe: "Berlangganan",
-  choose_language: "Pilih Bahasa",
-  shortcuts: "Pintasan",
-  send_request: "Kirim Permintaan",
-  save_to_collections: "Simpan ke Koleksi",
-  copy_request_link: "Salin Tautan Permintaan",
-  reset_request: "Atur Ulang Permintaan",
-  support_us_on: "Dukung kami di",
-  open_collective: "Open Collective",
-  paypal: "Paypal",
-  patreon: "Patreon",
-  javascript_code: "Kode Javascript",
-  method: "Metode",
-  path: "Lintasan",
-  label: "Label",
-  again: "Lagi",
-  content_type: "Jenis Konten",
-  raw_input: "Masukan mentah",
-  parameter_list: "Daftar parameter",
-  raw_request_body: "Badan Permintaan Mentah",
-  show_code: "Tampilkan Kode",
-  hide_code: "Sembunyikan Kode",
-  show_prerequest_script: "Tampilkan Skrip Pra-Permintaan",
-  hide_prerequest_script: "Sembunyikan Skrip Pra-Permintaan",
-  authentication: "Autentikasi",
-  authentication_type: "Jenis Autentikasi",
-  include_in_url: "Sertakan di URL",
-  parameters: "Parameter",
-  expand_response: "Bentangkan Balasan",
-  collapse_response: "Ciutkan Balasan",
-  hide_preview: "Sembunyikan Pratinjau",
-  preview_html: "Pratinjau HTML",
-  history: "Riwayat",
-  collections: "Koleksi",
-  import_curl: "Impor cURL",
-  import: "Impor",
-  generate_code: "Hasilkan kode",
-  request_type: "Jenis permintaan",
-  generated_code: "Kode yang dihasilkan",
-  status: "Status",
-  headers: "Header",
-  websocket: "WebSocket",
-  waiting_for_connection: "(Menunggu sambungan)",
-  message: "Pesan",
-  sse: "SSE",
-  server: "Peladen",
-  events: "Kejadian",
-  url: "URL",
-  get_schema: "Ambil skema",
-  header_list: "Daftar header",
-  add_new: "Tambah baru",
-  response: "Balasan",
-  query: "Kueri",
-  queries: "Kueri",
-  query_variables: "Variables",
-  mutations: "Mutasi",
-  subscriptions: "Langganan",
-  types: "Jenis",
-  send: "Kirim",
-  background: "Latar belakang",
-  color: "Warna",
-  labels: "Label",
-  multi_color: "Warna beragam",
-  enabled: "diaktifkan",
-  disabled: "dinonaktifkan",
-  proxy: "Proksi",
-  postwoman_official_proxy_hosting:
-    "Proksi Resmi Postwoman dalam penginangan ApolloTV.",
-  read_the: "Bacalah",
-  apollotv_privacy_policy: "kebijakan privasi ApolloTV",
-  contact_us: "Hubungi kami",
-  connect: "Menghubungkan",
-  disconnect: "Memutuskan",
-  start: "Mulai",
-  stop: "Berhenti"
-};

lang/id-ID.json

@@ -0,0 +1,92 @@
+{
+  "home": "Beranda",
+  "realtime": "Waktu Nyata",
+  "graphql": "GraphQL",
+  "settings": "Pengaturan",
+  "request": "Permintaan",
+  "install_pwa": "Pasang PWA",
+  "support_us": "Dukung kami",
+  "tweet": "Cuitkan",
+  "options": "Opsi",
+  "communication": "Komunikasi",
+  "endpoint": "Titik Akhir",
+  "schema": "Skema",
+  "theme": "Tema",
+  "subscribe": "Berlangganan",
+  "choose_language": "Pilih Bahasa",
+  "shortcuts": "Pintasan",
+  "send_request": "Kirim Permintaan",
+  "save_to_collections": "Simpan ke Koleksi",
+  "copy_request_link": "Salin Tautan Permintaan",
+  "reset_request": "Atur Ulang Permintaan",
+  "support_us_on": "Dukung kami di",
+  "open_collective": "Open Collective",
+  "paypal": "Paypal",
+  "patreon": "Patreon",
+  "javascript_code": "Kode Javascript",
+  "method": "Metode",
+  "path": "Lintasan",
+  "label": "Label",
+  "again": "Lagi",
+  "content_type": "Jenis Konten",
+  "raw_input": "Masukan mentah",
+  "parameter_list": "Daftar parameter",
+  "raw_request_body": "Badan Permintaan Mentah",
+  "show_code": "Tampilkan Kode",
+  "hide_code": "Sembunyikan Kode",
+  "show_prerequest_script": "Tampilkan Skrip Pra-Permintaan",
+  "hide_prerequest_script": "Sembunyikan Skrip Pra-Permintaan",
+  "authentication": "Autentikasi",
+  "authentication_type": "Jenis Autentikasi",
+  "include_in_url": "Sertakan di URL",
+  "parameters": "Parameter",
+  "expand_response": "Bentangkan Balasan",
+  "collapse_response": "Ciutkan Balasan",
+  "hide_preview": "Sembunyikan Pratinjau",
+  "preview_html": "Pratinjau HTML",
+  "history": "Riwayat",
+  "collections": "Koleksi",
+  "import_curl": "Impor cURL",
+  "import": "Impor",
+  "generate_code": "Hasilkan kode",
+  "request_type": "Jenis permintaan",
+  "generated_code": "Kode yang dihasilkan",
+  "status": "Status",
+  "headers": "Header",
+  "websocket": "WebSocket",
+  "waiting_for_connection": "(Menunggu sambungan)",
+  "message": "Pesan",
+  "sse": "SSE",
+  "server": "Peladen",
+  "events": "Kejadian",
+  "url": "URL",
+  "get_schema": "Ambil skema",
+  "header_list": "Daftar header",
+  "add_new": "Tambah baru",
+  "response": "Balasan",
+  "query": "Kueri",
+  "queries": "Kueri",
+  "query_variables": "Variables",
+  "mutations": "Mutasi",
+  "subscriptions": "Langganan",
+  "types": "Jenis",
+  "send": "Kirim",
+  "background": "Latar belakang",
+  "color": "Warna",
+  "labels": "Label",
+  "multi_color": "Warna beragam",
+  "enabled": "diaktifkan",
+  "disabled": "dinonaktifkan",
+  "proxy": "Proksi",
+  "postwoman_official_proxy_hosting": "Proksi Resmi Postwoman dalam penginangan Apollo Software.",
+  "read_the": "Bacalah",
+  "apollosw_privacy_policy": "kebijakan privasi Apollo Software",
+  "contact_us": "Hubungi kami",
+  "connect": "Menghubungkan",
+  "disconnect": "Memutuskan",
+  "start": "Mulai",
+  "stop": "Berhenti",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments"
+}

lang/ja-JP.js

@@ -1,245 +0,0 @@
-export default {
-  home: "ホーム",
-  realtime: "リアルタイム",
-  graphql: "GraphQL",
-  settings: "設定",
-  request: "リクエスト",
-  install_pwa: "PWAをインストール",
-  support_us: "寄付",
-  tweet: "ツイート",
-  options: "オプション",
-  communication: "通信",
-  endpoint: "エンドポイント",
-  schema: "スキーマ",
-  theme: "テーマ",
-  subscribe: "登録",
-  choose_language: "言語の選択",
-  shortcuts: "ショートカット",
-  send_request: "リクエストを送信",
-  save_to_collections: "コレクションに保存",
-  copy_request_link: "リクエストURLをコピー",
-  reset_request: "リクエストをリセット",
-  support_us_on: "以下より寄付",
-  open_collective: "Open Collective",
-  paypal: "PayPal",
-  patreon: "Patreon",
-  javascript_code: "JavaScriptコード",
-  method: "メソッド",
-  path: "パス",
-  label: "ラベル",
-  again: "",
-  content_type: "Content Type",
-  raw_input: "Raw入力",
-  parameter_list: "パラメータリスト",
-  raw_request_body: "Rawリクエストボディー",
-  show_code: "コードを表示",
-  hide_code: "コードを非表示",
-  show_prerequest_script: "プレリクエストスクリプトを表示",
-  hide_prerequest_script: "プレリクエストスクリプトを非表示",
-  authentication: "認証",
-  authentication_type: "認証タイプ",
-  include_in_url: "URLに含む",
-  parameters: "パラメータ",
-  expand_response: "レスポンスを広げる",
-  collapse_response: "レスポンスを狭める",
-  hide_preview: "プレビューしない",
-  preview_html: "HTMLプレビュー表示",
-  history: "履歴",
-  collections: "コレクション",
-  import_curl: "cURLをインポート",
-  import: "インポート",
-  generate_code: "コード生成",
-  request_type: "リクエストタイプ",
-  generated_code: "生成されたコード",
-  status: "ステータス",
-  headers: "ヘッダー",
-  websocket: "ウェブソケット",
-  waiting_for_connection: "(接続待ち)",
-  message: "メッセージ",
-  sse: "SSE",
-  server: "サーバ",
-  events: "イベント",
-  url: "URL",
-  get_schema: "スキーマを取得",
-  header_list: "ヘッダーリスト",
-  add_new: "追加",
-  response: "レスポンス",
-  query: "クエリ",
-  queries: "クエリ",
-  query_variables: "変数",
-  mutations: "ミューテーション",
-  subscriptions: "サブスクリプション",
-  types: "タイプ",
-  send: "送信",
-  background: "背景",
-  color: "色",
-  labels: "ラベル",
-  multi_color: "マルチカラー",
-  enabled: "有効",
-  disabled: "無効",
-  proxy: "プロキシ",
-  postwoman_official_proxy_hosting:
-    "Postwomanの公式プロキシは、Apollo TVがホストしています。",
-  read_the: "プライバシーポリシー",
-  apollotv_privacy_policy: "を読む",
-  contact_us: "お問い合わせ",
-  connect: "接続",
-  disconnect: "切断",
-  start: "開始",
-  stop: "停止",
-  access_token: "アクセストークン",
-  token_list: "トークンリスト",
-  get_token: "新しいトークンを取得",
-  manage_token: "アクセストークンを管理",
-  save_token: "アクセストークンを保存",
-  use_token: "アクセストークンを使用",
-  request_token: "トークンをリクエスト",
-  save_token_req: "トークンリクエストを保存",
-  manage_token_req: "トークンリクエストを管理",
-  use_token_req: "トークンリクエストを使用",
-  token_req_name: "リクエスト名",
-  token_req_details: "リクエスト詳細",
-  token_name: "トークン名",
-  oidc_discovery_url: "OIDC Discovery URL",
-  auth_url: "認証URL",
-  access_token_url: "アクセストークンURL",
-  client_id: "クライアントID",
-  scope: "スコープ",
-  state: "ステート",
-  token_req_list: "トークンリクエストリスト",
-  no_path: "パス無し",
-  no_label: "ラベル無し",
-  prerequest_script: "プレリクエストスクリプト",
-  no_prerequest_script: "プレリクエストスクリプト無し",
-  search: "検索履歴",
-  history_empty: "履歴が空です",
-  history_deleted: "履歴が削除された",
-  clear: "クリア",
-  clear_all: "全てクリア",
-  cleared: "クリアされた",
-  close: "閉じる",
-  sort: "ソート",
-  time: "時間",
-  duration: "期間",
-  no_duration: "期間なし",
-  show_more: "もっと表示する",
-  hide_more: "隠す",
-  collection: "コレクション",
-  current_collection: "現在のコレクション",
-  select_collection: "コレクションを選択",
-  create_collection: "コレクションを作成",
-  new: "新規",
-  import_export: "インポート・エクスポート",
-  more: "More",
-  folder: "フォルダ",
-  new_folder: "新しいフォルダー",
-  my_new_folder: "私の新しいフォルダー",
-  folder_empty: "フォルダーが空です",
-  edit_folder: "フォルダーを編集",
-  edit: "編集",
-  delete: "削除",
-  deleted: "削除された",
-  undo: "元に戻す",
-  collection_empty: "コレクションが空です",
-  new_collection: "新しいコレクション",
-  my_new_collection: "私の新しいコレクション",
-  edit_collection: "コレクションを編集",
-  edit_request: "リクエストを編集",
-  save_request_as: "名前を付けてリクエストを保存",
-  export: "エクスポート",
-  connecting_to: "{name}に接続中...",
-  connected: "接続した",
-  connected_to: "{name}に接続した",
-  disconnected: "切断された",
-  disconnected_from: "{name}から切断された",
-  something_went_wrong: "何かの問題が起きた",
-  error_occurred: "エラーが発生した",
-  browser_support_sse: "このブラウザはサーバー送信イベントのサポートがないようです。",
-  log: "ログ",
-  no_url: "URL無し",
-  run_query: "クエリを実行",
-  copy_query: "クエリをコピー",
-  kinda_dark: "ちょっと暗い",
-  clearly_white: "明らかに白",
-  just_black: "ただの黒",
-  auto_system: "オート（システム）",
-  green: "緑",
-  yellow: "黄",
-  pink: "ピンク",
-  red: "赤",
-  purple: "紫",
-  orange: "オレンジ",
-  cyan: "シヤン",
-  blue: "青",
-  loading: "ロード中...",
-  fetching: "フェッチ中...",
-  waiting_send_req: "（リクエスト送信待ち）",
-  cancel: "キャンセル",
-  save: "保存",
-  dismiss: "Dismiss",
-  are_you_sure: "よろしいですか？",
-  yes: "はい",
-  no: "いいえ",
-  restore: "リストア",
-  add_star: "星を付ける",
-  remove_star: "星を外す",
-  nothing_found: "何も見つからない",
-  replace_current: "置換",
-  replace_json: "JSONに置換",
-  preserve_current: "保持",
-  import_json: "JSONをインポート",
-  download_file: "ファイルをダウンロード",
-  upload_file: "ファイルをアップロード",
-  copy_response: "レスポンスをコピー",
-  copy_code: "コードをコピー",
-  copy_schema: "スキーマをコピー",
-  use_request: "リクエストを使用",
-  documentation: "ドキュメンテーション",
-  docs: "ドキュメント",
-  reset_default: "デフォルトにリセット",
-  fields: "FIELDS",
-  deprecated: "DEPRECATED",
-  add_one_header: "（ヘッダーを少なくとも1つ追加してください）",
-  add_one_parameter: "（パラメータを少なくとも1つ追加してください）",
-  header_count: "ヘッダー {count}",
-  parameter_count: "パラメータ {count}",
-  variable_count: "変数 {count}",
-  value_count: "値 {count}",
-  send_request_first: "リクエストを先に送信してください",
-  generate_docs: "ドキュメンテーションを生成",
-  generate_docs_message: "Postwomanのコレクションをインポートし、直ちにドキュメンテーションを生成",
-  generate_docs_first: "ドキュメントを先に生成してください",
-  docs_generated: "ドキュメンテーションを生成した",
-  import_collections: "コレクションをインポート",
-  optional: "（オプション）",
-  json: "JSON",
-  none: "なし",
-  username: "ユーザー名",
-  password: "パスワード",
-  token: "トークン",
-  payload: "ペイロード",
-  choose_file: "ファイルを選択",
-  file_imported: "ファイルをインポートした",
-  f12_details: "（F12を押して詳細を確認してください）",
-  we_use_cookies: "クッキーを使用します。",
-  copied_to_clipboard: "クリップボードにコピーした",
-  finished_in: "{duration}msで終了した",
-  check_console_details: "コンソールより詳細を確認してください",
-  download_started: "ダウンロードを開始した",
-  url_invalid_format: "URLが正しくフォーマットされていない",
-  curl_invalid_format: "cURLが正しくフォーマットされていない",
-  enable_proxy: "プロキシを有効にしてみてください",
-  complete_config_urls: "設定URLsを入力してください",
-  token_request_saved: "トークンリクエストを保存した",
-  donate_info1: "Postwomanを非常に役に立つと思われる場合、感謝の印として寄付のご検討をお願いします。",
-  donate_info2: "以下の方法でPostwomanの開発をサポートできます：",
-  one_time_recurring: "一度又は定期的",
-  one_time: "一度",
-  recurring: "定期的",
-  wiki: "Wiki",
-  error: "エラー",
-  go_home: "ホームに戻る",
-  reload: "リロード",
-  enter_curl: "cURLを入力",
-  empty: "空"  
-};

lang/ja-JP.json

@@ -0,0 +1,247 @@
+{
+  "home": "ホーム",
+  "realtime": "リアルタイム",
+  "graphql": "GraphQL",
+  "settings": "設定",
+  "request": "リクエスト",
+  "install_pwa": "PWAをインストール",
+  "support_us": "寄付",
+  "tweet": "ツイート",
+  "options": "オプション",
+  "communication": "通信",
+  "endpoint": "エンドポイント",
+  "schema": "スキーマ",
+  "theme": "テーマ",
+  "subscribe": "登録",
+  "choose_language": "言語の選択",
+  "shortcuts": "ショートカット",
+  "send_request": "リクエストを送信",
+  "save_to_collections": "コレクションに保存",
+  "copy_request_link": "リクエストURLをコピー",
+  "reset_request": "リクエストをリセット",
+  "support_us_on": "以下より寄付",
+  "open_collective": "Open Collective",
+  "paypal": "PayPal",
+  "patreon": "Patreon",
+  "javascript_code": "JavaScriptコード",
+  "method": "メソッド",
+  "path": "パス",
+  "label": "ラベル",
+  "again": "",
+  "content_type": "Content Type",
+  "raw_input": "Raw入力",
+  "parameter_list": "パラメータリスト",
+  "raw_request_body": "Rawリクエストボディー",
+  "show_code": "コードを表示",
+  "hide_code": "コードを非表示",
+  "show_prerequest_script": "プレリクエストスクリプトを表示",
+  "hide_prerequest_script": "プレリクエストスクリプトを非表示",
+  "authentication": "認証",
+  "authentication_type": "認証タイプ",
+  "include_in_url": "URLに含む",
+  "parameters": "パラメータ",
+  "expand_response": "レスポンスを広げる",
+  "collapse_response": "レスポンスを狭める",
+  "hide_preview": "プレビューしない",
+  "preview_html": "HTMLプレビュー表示",
+  "history": "履歴",
+  "collections": "コレクション",
+  "import_curl": "cURLをインポート",
+  "import": "インポート",
+  "generate_code": "コード生成",
+  "request_type": "リクエストタイプ",
+  "generated_code": "生成されたコード",
+  "status": "ステータス",
+  "headers": "ヘッダー",
+  "websocket": "ウェブソケット",
+  "waiting_for_connection": "(接続待ち)",
+  "message": "メッセージ",
+  "sse": "SSE",
+  "server": "サーバ",
+  "events": "イベント",
+  "url": "URL",
+  "get_schema": "スキーマを取得",
+  "header_list": "ヘッダーリスト",
+  "add_new": "追加",
+  "response": "レスポンス",
+  "query": "クエリ",
+  "queries": "クエリ",
+  "query_variables": "変数",
+  "mutations": "ミューテーション",
+  "subscriptions": "サブスクリプション",
+  "types": "タイプ",
+  "send": "送信",
+  "background": "背景",
+  "color": "色",
+  "labels": "ラベル",
+  "multi_color": "マルチカラー",
+  "enabled": "有効",
+  "disabled": "無効",
+  "proxy": "プロキシ",
+  "postwoman_official_proxy_hosting": "Postwomanの公式プロキシは、Apollo Softwareがホストしています。",
+  "read_the": "プライバシーポリシー",
+  "apollosw_privacy_policy": "を読む",
+  "contact_us": "お問い合わせ",
+  "connect": "接続",
+  "disconnect": "切断",
+  "start": "開始",
+  "stop": "停止",
+  "access_token": "アクセストークン",
+  "token_list": "トークンリスト",
+  "get_token": "新しいトークンを取得",
+  "manage_token": "アクセストークンを管理",
+  "save_token": "アクセストークンを保存",
+  "use_token": "アクセストークンを使用",
+  "request_token": "トークンをリクエスト",
+  "save_token_req": "トークンリクエストを保存",
+  "manage_token_req": "トークンリクエストを管理",
+  "use_token_req": "トークンリクエストを使用",
+  "token_req_name": "リクエスト名",
+  "token_req_details": "リクエスト詳細",
+  "token_name": "トークン名",
+  "oidc_discovery_url": "OIDC Discovery URL",
+  "auth_url": "認証URL",
+  "access_token_url": "アクセストークンURL",
+  "client_id": "クライアントID",
+  "scope": "スコープ",
+  "state": "ステート",
+  "token_req_list": "トークンリクエストリスト",
+  "no_path": "パス無し",
+  "no_label": "ラベル無し",
+  "prerequest_script": "プレリクエストスクリプト",
+  "no_prerequest_script": "プレリクエストスクリプト無し",
+  "search": "検索履歴",
+  "history_empty": "履歴が空です",
+  "history_deleted": "履歴が削除された",
+  "clear": "クリア",
+  "clear_all": "全てクリア",
+  "cleared": "クリアされた",
+  "close": "閉じる",
+  "sort": "ソート",
+  "time": "時間",
+  "duration": "期間",
+  "no_duration": "期間なし",
+  "show_more": "もっと表示する",
+  "hide_more": "隠す",
+  "collection": "コレクション",
+  "current_collection": "現在のコレクション",
+  "select_collection": "コレクションを選択",
+  "create_collection": "コレクションを作成",
+  "new": "新規",
+  "import_export": "インポート・エクスポート",
+  "more": "More",
+  "folder": "フォルダ",
+  "new_folder": "新しいフォルダー",
+  "my_new_folder": "私の新しいフォルダー",
+  "folder_empty": "フォルダーが空です",
+  "edit_folder": "フォルダーを編集",
+  "edit": "編集",
+  "delete": "削除",
+  "deleted": "削除された",
+  "undo": "元に戻す",
+  "collection_empty": "コレクションが空です",
+  "new_collection": "新しいコレクション",
+  "my_new_collection": "私の新しいコレクション",
+  "edit_collection": "コレクションを編集",
+  "edit_request": "リクエストを編集",
+  "save_request_as": "名前を付けてリクエストを保存",
+  "export": "エクスポート",
+  "connecting_to": "{name}に接続中...",
+  "connected": "接続した",
+  "connected_to": "{name}に接続した",
+  "disconnected": "切断された",
+  "disconnected_from": "{name}から切断された",
+  "something_went_wrong": "何かの問題が起きた",
+  "error_occurred": "エラーが発生した",
+  "browser_support_sse": "このブラウザはサーバー送信イベントのサポートがないようです。",
+  "log": "ログ",
+  "no_url": "URL無し",
+  "run_query": "クエリを実行",
+  "copy_query": "クエリをコピー",
+  "kinda_dark": "ちょっと暗い",
+  "clearly_white": "明らかに白",
+  "just_black": "ただの黒",
+  "auto_system": "オート（システム）",
+  "green": "緑",
+  "yellow": "黄",
+  "pink": "ピンク",
+  "red": "赤",
+  "purple": "紫",
+  "orange": "オレンジ",
+  "cyan": "シヤン",
+  "blue": "青",
+  "loading": "ロード中...",
+  "fetching": "フェッチ中...",
+  "waiting_send_req": "（リクエスト送信待ち）",
+  "cancel": "キャンセル",
+  "save": "保存",
+  "dismiss": "Dismiss",
+  "are_you_sure": "よろしいですか？",
+  "yes": "はい",
+  "no": "いいえ",
+  "restore": "リストア",
+  "add_star": "星を付ける",
+  "remove_star": "星を外す",
+  "nothing_found": "何も見つからない",
+  "replace_current": "置換",
+  "replace_json": "JSONに置換",
+  "preserve_current": "保持",
+  "import_json": "JSONをインポート",
+  "download_file": "ファイルをダウンロード",
+  "upload_file": "ファイルをアップロード",
+  "copy_response": "レスポンスをコピー",
+  "copy_code": "コードをコピー",
+  "copy_schema": "スキーマをコピー",
+  "use_request": "リクエストを使用",
+  "documentation": "ドキュメンテーション",
+  "docs": "ドキュメント",
+  "reset_default": "デフォルトにリセット",
+  "fields": "FIELDS",
+  "deprecated": "DEPRECATED",
+  "add_one_header": "（ヘッダーを少なくとも1つ追加してください）",
+  "add_one_parameter": "（パラメータを少なくとも1つ追加してください）",
+  "header_count": "ヘッダー {count}",
+  "parameter_count": "パラメータ {count}",
+  "variable_count": "変数 {count}",
+  "value_count": "値 {count}",
+  "send_request_first": "リクエストを先に送信してください",
+  "generate_docs": "ドキュメンテーションを生成",
+  "generate_docs_message": "Postwomanのコレクションをインポートし、直ちにドキュメンテーションを生成",
+  "generate_docs_first": "ドキュメントを先に生成してください",
+  "docs_generated": "ドキュメンテーションを生成した",
+  "import_collections": "コレクションをインポート",
+  "optional": "（オプション）",
+  "json": "JSON",
+  "none": "なし",
+  "username": "ユーザー名",
+  "password": "パスワード",
+  "token": "トークン",
+  "payload": "ペイロード",
+  "choose_file": "ファイルを選択",
+  "file_imported": "ファイルをインポートした",
+  "f12_details": "（F12を押して詳細を確認してください）",
+  "we_use_cookies": "クッキーを使用します。",
+  "copied_to_clipboard": "クリップボードにコピーした",
+  "finished_in": "{duration}msで終了した",
+  "check_console_details": "コンソールより詳細を確認してください",
+  "download_started": "ダウンロードを開始した",
+  "url_invalid_format": "URLが正しくフォーマットされていない",
+  "curl_invalid_format": "cURLが正しくフォーマットされていない",
+  "enable_proxy": "プロキシを有効にしてみてください",
+  "complete_config_urls": "設定URLsを入力してください",
+  "token_request_saved": "トークンリクエストを保存した",
+  "donate_info1": "Postwomanを非常に役に立つと思われる場合、感謝の印として寄付のご検討をお願いします。",
+  "donate_info2": "以下の方法でPostwomanの開発をサポートできます：",
+  "one_time_recurring": "一度又は定期的",
+  "one_time": "一度",
+  "recurring": "定期的",
+  "wiki": "Wiki",
+  "error": "エラー",
+  "go_home": "ホームに戻る",
+  "reload": "リロード",
+  "enter_curl": "cURLを入力",
+  "empty": "空",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments"
+}

lang/ko-KR.json

@@ -0,0 +1,260 @@
+{
+  "home": "홈",
+  "realtime": "실시간",
+  "graphql": "GraphQL",
+  "settings": "설정",
+  "request": "Request",
+  "install_pwa": "PWA 설치",
+  "support_us": "도와주기",
+  "tweet": "트윗",
+  "options": "옵션",
+  "communication": "통신",
+  "endpoint": "Endpoint",
+  "schema": "Schema",
+  "theme": "테마",
+  "subscribe": "구독",
+  "choose_language": "언어 선택",
+  "shortcuts": "단축키",
+  "send_request": "Send Request",
+  "save_to_collections": "Save to Collections",
+  "copy_request_link": "Copy Request Link",
+  "reset_request": "Reset Request",
+  "support_us_on": "Support us on",
+  "open_collective": "Open Collective",
+  "paypal": "PayPal",
+  "patreon": "Patreon",
+  "javascript_code": "JavaScript 코드",
+  "method": "Method",
+  "path": "Path",
+  "label": "Label",
+  "again": "Again",
+  "content_type": "Content Type",
+  "raw_input": "Raw input",
+  "parameter_list": "Parameter List",
+  "raw_request_body": "Raw Request Body",
+  "show_code": "Show Code",
+  "hide_code": "Hide Code",
+  "show_prerequest_script": "Show Pre-Request Script",
+  "hide_prerequest_script": "Hide Pre-Request Script",
+  "authentication": "Authentication",
+  "authentication_type": "Authentication type",
+  "include_in_url": "Include in URL",
+  "parameters": "Parameters",
+  "expand_response": "Expand response",
+  "collapse_response": "Collapse response",
+  "hide_preview": "Hide Preview",
+  "preview_html": "Preview HTML",
+  "history": "히스토리",
+  "collections": "Collections",
+  "import_curl": "Import cURL",
+  "import": "가져오기",
+  "generate_code": "Generate code",
+  "request_type": "Request type",
+  "generated_code": "Generated code",
+  "status": "상태",
+  "headers": "Headers",
+  "websocket": "WebSocket",
+  "waiting_for_connection": "(waiting for connection)",
+  "message": "Message",
+  "sse": "SSE",
+  "server": "Server",
+  "events": "Events",
+  "url": "URL",
+  "get_schema": "Get schema",
+  "header_list": "Header list",
+  "add_new": "추가",
+  "response": "Response",
+  "query": "Query",
+  "queries": "Queries",
+  "query_variables": "Variables",
+  "mutations": "Mutations",
+  "subscriptions": "Subscriptions",
+  "types": "Types",
+  "send": "Send",
+  "background": "배경",
+  "color": "색상",
+  "labels": "Labels",
+  "multi_color": "Multi-color",
+  "enabled": "허용",
+  "disabled": "허용안함",
+  "proxy": "Proxy",
+  "postwoman_official_proxy_hosting": "Postwoman의 공식적인 Proxy는 ApolloTV가 호스트 합니다.",
+  "read_the": "Read the",
+  "apollotv_privacy_policy": "ApolloTV 개인정보 처리방침",
+  "contact_us": "문의 하기",
+  "connect": "연결",
+  "disconnect": "연결 중지",
+  "start": "시작",
+  "stop": "중지",
+  "access_token": "Access Token",
+  "token_list": "Token List",
+  "get_token": "Get New Token",
+  "manage_token": "Manage Access Token",
+  "save_token": "Save Access Token",
+  "use_token": "Use Saved Token",
+  "request_token": "Request Token",
+  "save_token_req": "Save Token Request",
+  "manage_token_req": "Manage Token Request",
+  "use_token_req": "Use Token Request",
+  "token_req_name": "Request Name",
+  "token_req_details": "Request Details",
+  "token_name": "Token Name",
+  "oidc_discovery_url": "OIDC Discovery URL",
+  "auth_url": "Auth URL",
+  "access_token_url": "Access Token URL",
+  "client_id": "Client ID",
+  "scope": "Scope",
+  "state": "State",
+  "token_req_list": "Token Request List",
+  "no_path": "No path",
+  "no_label": "No label",
+  "prerequest_script": "Pre-Request Script",
+  "no_prerequest_script": "No pre-request script",
+  "search_history": "히스토리 검색",
+  "history_empty": "히스토리가 비었습니다",
+  "history_deleted": "History Deleted",
+  "clear": "비우기",
+  "clear_all": "모두 비우기",
+  "cleared": "Cleared",
+  "close": "Close",
+  "sort": "정렬",
+  "time": "Time",
+  "duration": "Duration",
+  "no_duration": "No duration",
+  "show_more": "Show more",
+  "hide_more": "Hide more",
+  "collection": "Collection",
+  "current_collection": "Current Collection",
+  "select_collection": "Select a Collection",
+  "create_collection": "Create a Collection",
+  "new": "New",
+  "import_export": "Import / Export",
+  "more": "더보기",
+  "folder": "Folder",
+  "new_folder": "New Folder",
+  "my_new_folder": "My New Folder",
+  "folder_empty": "Folder is empty",
+  "edit_folder": "Edit Folder",
+  "edit": "Edit",
+  "delete": "Delete",
+  "deleted": "Deleted",
+  "undo": "되돌리기",
+  "collection_empty": "Collection is empty",
+  "new_collection": "New Collection",
+  "my_new_collection": "My New Collection",
+  "edit_collection": "Edit Collection",
+  "edit_request": "Edit Request",
+  "save_request_as": "Save Request As",
+  "export": "내보내기",
+  "connecting_to": "Connecting to {name}...",
+  "connected": "연결됨",
+  "connected_to": "{name} (으)로 연결됨",
+  "disconnected": "연결 해제",
+  "disconnected_from": "Disconnected from {name}",
+  "something_went_wrong": "Something went wrong!",
+  "error_occurred": "An error has occurred.",
+  "browser_support_sse": "This browser doesn't seems to have Server Sent Events support.",
+  "log": "Log",
+  "no_url": "No URL",
+  "run_query": "Run Query",
+  "copy_query": "Copy Query",
+  "kinda_dark": "Kinda Dark",
+  "clearly_white": "Clearly White",
+  "just_black": "Just Black",
+  "auto_system": "Auth (system)",
+  "green": "Green",
+  "yellow": "노랑",
+  "pink": "핑크",
+  "red": "빨강",
+  "purple": "보라",
+  "orange": "오렌지",
+  "cyan": "청록",
+  "blue": "파랑",
+  "loading": "로딩...",
+  "fetching": "Fetching...",
+  "waiting_send_req": "(waiting to send request)",
+  "cancel": "취소",
+  "save": "저장",
+  "dismiss": "무시",
+  "are_you_sure": "Are you sure?",
+  "yes": "예",
+  "no": "아니오",
+  "restore": "복구",
+  "add_star": "Add star",
+  "remove_star": "Remove star",
+  "nothing_found": "Nothing found",
+  "replace_current": "Replace current",
+  "replace_json": "Replace with JSON",
+  "preserve_current": "Preserve current",
+  "import_json": "Import from JSON",
+  "download_file": "파일 다운로드",
+  "upload_file": "파일 업로드",
+  "copy_response": "Copy response",
+  "copy_code": "Copy code",
+  "copy_schema": "Copy Schema",
+  "use_request": "Use request",
+  "documentation": "문서화",
+  "docs": "Docs",
+  "reset_default": "기본값으로 재설정",
+  "fields": "FIELDS",
+  "deprecated": "DEPRECATED",
+  "add_one_header": "(add at least one header)",
+  "add_one_parameter": "(add at least one parameter)",
+  "header_count": "header {count}",
+  "parameter_count": "parameter {count}",
+  "variable_count": "variable {count}",
+  "value_count": "value {count}",
+  "send_request_first": "Send a request first",
+  "generate_docs": "Generate Documentation",
+  "generate_docs_message": "Import any Postwoman Collection to Generate Documentation on-the-go.",
+  "generate_docs_first": "Generate documentation first",
+  "docs_generated": "Documentation generated",
+  "import_collections": "Import collections",
+  "optional": "(optional)",
+  "json": "JSON",
+  "none": "None",
+  "username": "사용자명",
+  "password": "암호",
+  "token": "Token",
+  "payload": "Payload",
+  "choose_file": "파일 선택",
+  "file_imported": "File imported",
+  "f12_details": "(F12 for details)",
+  "we_use_cookies": "우리는 쿠키를 사용합니다",
+  "copied_to_clipboard": "Copied to clipboard",
+  "finished_in": "Finished in {duration}ms",
+  "check_console_details": "Check console for details.",
+  "download_started": "Download started",
+  "url_invalid_format": "URL is not formatted properly",
+  "curl_invalid_format": "cURL is not formatted properly",
+  "enable_proxy": "Try enabling Proxy",
+  "complete_config_urls": "Please complete configuration urls.",
+  "token_request_saved": "Token request saved",
+  "donate_info1": "If you have enjoyed the productivity of using Postwoman, consider donating as a sign of appreciation.",
+  "donate_info2": "You can support Postwoman development via the following methods:",
+  "one_time_recurring": "One-time or recurring",
+  "one_time": "One-time",
+  "recurring": "Recurring",
+  "wiki": "위키",
+  "error": "오류",
+  "go_home": "Go Home",
+  "reload": "새로고침",
+  "enter_curl": "Enter cURL",
+  "empty": "Empty",
+  "extensions": "확장 프로그램",
+  "extensions_info1": "Postwoman의 액세스를 단순화 하는 브라우저 확장 프로그램",
+  "extensions_info2": "Postwoman 확장 프로그램을 설치해보세요!",
+  "installed": "설치함",
+  "login_with": "Login with",
+  "logged_out": "Logged out",
+  "logout": "로그아웃",
+  "account": "계정",
+  "sync": "동기화",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments",
+  "turn_on": "Turn on",
+  "login_first": "Login first",
+  "paste_a_collection": "Paste a Collection",
+  "import_from_sync": "Import from Sync"
+}