🔖 v1.9.5

Fix raw input (JSON)

.all-contributorsrc

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

.github/FUNDING.yml

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

.gitignore

@@ -98,3 +98,9 @@ sw.*
 
 # File explorer
 .directory
+
+# Tests screenshots
+tests/*/screenshots
+
+# Tests videos
+tests/*/videos

.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,34 +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 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

CHANGELOG.md

@@ -1,11 +1,265 @@
 # Changelog
 
+## [v1.9.5](https://github.com/liyasthomas/postwoman/tree/v1.9.5) (2020-03-22)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.9.0...v1.9.5)
+
+**Implemented enhancements:**
+
+- Support preview of JSON:API's "application/vnd.api+json" Content-Type [\#694](https://github.com/liyasthomas/postwoman/issues/694)
+- Support SocketIO connections on Realtime page [\#611](https://github.com/liyasthomas/postwoman/issues/611)
+- Parameter list not showing JSON object fields \(force raw?\) [\#597](https://github.com/liyasthomas/postwoman/issues/597)
+- Add setting to disable scroll animations [\#592](https://github.com/liyasthomas/postwoman/issues/592)
+- Bigger URL and/or Path input field [\#581](https://github.com/liyasthomas/postwoman/issues/581)
+- Ability to connect to a MQTT broker [\#342](https://github.com/liyasthomas/postwoman/issues/342)
+- \[request\] Offline cross-platform native build [\#267](https://github.com/liyasthomas/postwoman/issues/267)
+- On Save Update existing API [\#204](https://github.com/liyasthomas/postwoman/issues/204)
+- Import and export environments from JSON [\#190](https://github.com/liyasthomas/postwoman/issues/190)
+- Fast URL entry [\#62](https://github.com/liyasthomas/postwoman/issues/62)
+- Added the ability to prettify GraphQL queries [\#650](https://github.com/liyasthomas/postwoman/pull/650) ([AndrewBastin](https://github.com/AndrewBastin))
+- Updated messages for when GraphQL Get Schema fails [\#633](https://github.com/liyasthomas/postwoman/pull/633) ([AndrewBastin](https://github.com/AndrewBastin))
+- Ignore empty GQL Variable Strings [\#629](https://github.com/liyasthomas/postwoman/pull/629) ([AndrewBastin](https://github.com/AndrewBastin))
+- test: purge travis [\#623](https://github.com/liyasthomas/postwoman/pull/623) ([yubathom](https://github.com/yubathom))
+- Added shortcut to quickly run the GraphQL query [\#620](https://github.com/liyasthomas/postwoman/pull/620) ([AndrewBastin](https://github.com/AndrewBastin))
+- JSON linting in the code editor [\#605](https://github.com/liyasthomas/postwoman/pull/605) ([AndrewBastin](https://github.com/AndrewBastin))
+- GraphQL page improvements, and more [\#602](https://github.com/liyasthomas/postwoman/pull/602) ([dmitryyankowski](https://github.com/dmitryyankowski))
+- Environment Mangement [\#591](https://github.com/liyasthomas/postwoman/pull/591) ([JacobAnavisca](https://github.com/JacobAnavisca))
+- GraphQL Query Autocompletion [\#590](https://github.com/liyasthomas/postwoman/pull/590) ([AndrewBastin](https://github.com/AndrewBastin))
+
+**Fixed bugs:**
+
+- Test script is not run after failing request [\#644](https://github.com/liyasthomas/postwoman/issues/644)
+- \[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))
+- 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))
+- Feature: Add prettier/pretty-quick formatting w/ Husky pre-commit [\#596](https://github.com/liyasthomas/postwoman/pull/596) ([dmitryyankowski](https://github.com/dmitryyankowski))
+- Added settings toggle for enabling/disabling auto scrolling \(scrollInto functionality\) [\#595](https://github.com/liyasthomas/postwoman/pull/595) ([dmitryyankowski](https://github.com/dmitryyankowski))
+
+## [v1.9.0](https://github.com/liyasthomas/postwoman/tree/v1.9.0) (2020-02-24)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.8.0...v1.9.0)
+
+**Implemented enhancements:**
+
+- Disable SSL cert for websockets [\#557](https://github.com/liyasthomas/postwoman/issues/557)
+- Feature request: Keyboard shortcuts for folder creation [\#539](https://github.com/liyasthomas/postwoman/issues/539)
+- Friendly minded  GraphQL [\#468](https://github.com/liyasthomas/postwoman/issues/468)
+- multipart/form-data support [\#434](https://github.com/liyasthomas/postwoman/issues/434)
+- Implement pre-request and post-request scripts \(and request chaining\) [\#218](https://github.com/liyasthomas/postwoman/issues/218)
+- Environment management and configuration [\#147](https://github.com/liyasthomas/postwoman/issues/147)
+- POST request body editor reacts to the content type [\#594](https://github.com/liyasthomas/postwoman/pull/594) ([AndrewBastin](https://github.com/AndrewBastin))
+- Postman collection parsing [\#574](https://github.com/liyasthomas/postwoman/pull/574) ([JacobAnavisca](https://github.com/JacobAnavisca))
+- Added toggle to decide whether extensions should be used [\#551](https://github.com/liyasthomas/postwoman/pull/551) ([AndrewBastin](https://github.com/AndrewBastin))
+- Show Ctrl instead of Command for shortcuts non-Apple platforms [\#549](https://github.com/liyasthomas/postwoman/pull/549) ([AndrewBastin](https://github.com/AndrewBastin))
+- Updated GraphQL Query Variable Editor [\#534](https://github.com/liyasthomas/postwoman/pull/534) ([AndrewBastin](https://github.com/AndrewBastin))
+
+**Fixed bugs:**
+
+- Auto Theme Selection is kinda difficult to see [\#563](https://github.com/liyasthomas/postwoman/issues/563)
+- 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)
+- 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))
+
+**Closed issues:**
+
+- don't run [\#577](https://github.com/liyasthomas/postwoman/issues/577)
+- Get correct response data but occurs with error "Cannot read property 'value' of undefined" [\#575](https://github.com/liyasthomas/postwoman/issues/575)
+- firebase\_app\_\_WEBPACK\_IMPORTED\_MODULE\_2\_\_\_default.a.firestore is not  a function  [\#558](https://github.com/liyasthomas/postwoman/issues/558)
+- relative module not found during start [\#552](https://github.com/liyasthomas/postwoman/issues/552)
+- Feature Request: Subfolders [\#540](https://github.com/liyasthomas/postwoman/issues/540)
+- Add max-height and overflow: auto to "parameter list" textarea [\#532](https://github.com/liyasthomas/postwoman/issues/532)
+- IE Support [\#386](https://github.com/liyasthomas/postwoman/issues/386)
+
+**Merged pull requests:**
+
+- 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))
+- chore\(deps\): bump firebase from 7.9.0 to 7.9.1 [\#587](https://github.com/liyasthomas/postwoman/pull/587) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Even [\#586](https://github.com/liyasthomas/postwoman/pull/586) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump firebase from 7.8.2 to 7.9.0 [\#585](https://github.com/liyasthomas/postwoman/pull/585) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump vue-virtual-scroll-list from 1.4.5 to 1.4.6 [\#584](https://github.com/liyasthomas/postwoman/pull/584) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Adapt extension check to new extensions [\#583](https://github.com/liyasthomas/postwoman/pull/583) ([levrik](https://github.com/levrik))
+- Update link to extension repo in README [\#582](https://github.com/liyasthomas/postwoman/pull/582) ([levrik](https://github.com/levrik))
+- Even [\#579](https://github.com/liyasthomas/postwoman/pull/579) ([liyasthomas](https://github.com/liyasthomas))
+- Refactor/lint [\#578](https://github.com/liyasthomas/postwoman/pull/578) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump vue-virtual-scroll-list from 1.4.4 to 1.4.5 [\#576](https://github.com/liyasthomas/postwoman/pull/576) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Unify Chrome and Firefox extensions [\#573](https://github.com/liyasthomas/postwoman/pull/573) ([levrik](https://github.com/levrik))
+- fix: drop the toast which doesn't show up [\#572](https://github.com/liyasthomas/postwoman/pull/572) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- :sparkles: Native share + updated meta description [\#571](https://github.com/liyasthomas/postwoman/pull/571) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump firebase from 7.8.1 to 7.8.2 [\#570](https://github.com/liyasthomas/postwoman/pull/570) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump cypress from 4.0.1 to 4.0.2 [\#569](https://github.com/liyasthomas/postwoman/pull/569) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Added create collection and save request syncs [\#568](https://github.com/liyasthomas/postwoman/pull/568) ([JacobAnavisca](https://github.com/JacobAnavisca))
+- Moved common headers to a separate file [\#566](https://github.com/liyasthomas/postwoman/pull/566) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(deps-dev\): bump cypress from 4.0.0 to 4.0.1 [\#565](https://github.com/liyasthomas/postwoman/pull/565) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump yargs-parser from 16.1.0 to 17.0.0 [\#564](https://github.com/liyasthomas/postwoman/pull/564) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump cypress from 3.8.3 to 4.0.0 [\#562](https://github.com/liyasthomas/postwoman/pull/562) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump firebase from 7.8.0 to 7.8.1 [\#561](https://github.com/liyasthomas/postwoman/pull/561) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore: use typeof as an operator and make use of localizable strings [\#559](https://github.com/liyasthomas/postwoman/pull/559) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- Support for Formdata [\#555](https://github.com/liyasthomas/postwoman/pull/555) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump @nuxtjs/pwa from 3.0.0-beta.19 to 3.0.0-beta.20 [\#554](https://github.com/liyasthomas/postwoman/pull/554) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/axios from 5.9.4 to 5.9.5 [\#553](https://github.com/liyasthomas/postwoman/pull/553) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- 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))
+- even merge [\#528](https://github.com/liyasthomas/postwoman/pull/528) ([liyasthomas](https://github.com/liyasthomas))
+
+## [v1.8.0](https://github.com/liyasthomas/postwoman/tree/v1.8.0) (2020-01-28)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.5.0...v1.8.0)
+
+**Implemented enhancements:**
+
+- Sync collection with a cloud storage \(e.g: Google drive\) [\#507](https://github.com/liyasthomas/postwoman/issues/507)
+- Application contains many hard-coded strings that aren't translatable [\#488](https://github.com/liyasthomas/postwoman/issues/488)
+- ULR parsing and var auto creation [\#469](https://github.com/liyasthomas/postwoman/issues/469)
+- \[suggestion\] - Tests tab [\#465](https://github.com/liyasthomas/postwoman/issues/465)
+- cookie not found support [\#443](https://github.com/liyasthomas/postwoman/issues/443)
+- Feature Request: Consumer Driven Contract Testing [\#420](https://github.com/liyasthomas/postwoman/issues/420)
+- Feature Request: Support OAuth2/OIDC [\#337](https://github.com/liyasthomas/postwoman/issues/337)
+- Add DB cache [\#26](https://github.com/liyasthomas/postwoman/issues/26)
+- Auth [\#513](https://github.com/liyasthomas/postwoman/pull/513) ([liyasthomas](https://github.com/liyasthomas))
+- Support for Google Chrome Extension [\#512](https://github.com/liyasthomas/postwoman/pull/512) ([AndrewBastin](https://github.com/AndrewBastin))
+- GraphQL query validation based on schema [\#508](https://github.com/liyasthomas/postwoman/pull/508) ([AndrewBastin](https://github.com/AndrewBastin))
+- Syntax Error marking in GraphQL query editor [\#505](https://github.com/liyasthomas/postwoman/pull/505) ([AndrewBastin](https://github.com/AndrewBastin))
+- Refactoring proxy handling to be done in strategies [\#500](https://github.com/liyasthomas/postwoman/pull/500) ([AndrewBastin](https://github.com/AndrewBastin))
+- Firefox Extension compatibility [\#494](https://github.com/liyasthomas/postwoman/pull/494) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(oauth\): Added method signatures as per JSDoc conventions [\#486](https://github.com/liyasthomas/postwoman/pull/486) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- GraphQL Type Highlight and Links [\#479](https://github.com/liyasthomas/postwoman/pull/479) ([AndrewBastin](https://github.com/AndrewBastin))
+
+**Fixed bugs:**
+
+- Warn the user if name field was left blank while creating a new collection [\#515](https://github.com/liyasthomas/postwoman/issues/515)
+- 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)
+
+**Closed issues:**
+
+- Allow importing Postman collections [\#524](https://github.com/liyasthomas/postwoman/issues/524)
+- Request descriptions [\#511](https://github.com/liyasthomas/postwoman/issues/511)
+- Ability to run all requests of a folder/collection [\#498](https://github.com/liyasthomas/postwoman/issues/498)
+- Change import/export collection on requests page icon [\#495](https://github.com/liyasthomas/postwoman/issues/495)
+- import cURL error [\#477](https://github.com/liyasthomas/postwoman/issues/477)
+- move to postwoman org [\#475](https://github.com/liyasthomas/postwoman/issues/475)
+- Create standalone vue components of the request builder. [\#474](https://github.com/liyasthomas/postwoman/issues/474)
+- Enable running proxy as a backend for Request Capture [\#325](https://github.com/liyasthomas/postwoman/issues/325)
+- Label doesn't change when switching between collection requests [\#291](https://github.com/liyasthomas/postwoman/issues/291)
+
+**Merged pull requests:**
+
+- Enhancements [\#531](https://github.com/liyasthomas/postwoman/pull/531) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- Merge pull request \#530 from liyasthomas/feature/post-request-tests [\#530](https://github.com/liyasthomas/postwoman/pull/530) ([liyasthomas](https://github.com/liyasthomas))
+- 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))
+- Validate duplicate collections [\#510](https://github.com/liyasthomas/postwoman/pull/510) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- Lint and refactor [\#506](https://github.com/liyasthomas/postwoman/pull/506) ([liyasthomas](https://github.com/liyasthomas))
+- Merge pull request \#504 from liyasthomas/dependabot/npm\_and\_yarn/node-sass-4.13.1 [\#504](https://github.com/liyasthomas/postwoman/pull/504) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump @nuxtjs/axios from 5.9.2 to 5.9.3 [\#503](https://github.com/liyasthomas/postwoman/pull/503) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump sass-loader from 8.0.1 to 8.0.2 [\#502](https://github.com/liyasthomas/postwoman/pull/502) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps\): bump ace-builds from 1.4.7 to 1.4.8 [\#501](https://github.com/liyasthomas/postwoman/pull/501) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- 💚 Fixed \#497 [\#499](https://github.com/liyasthomas/postwoman/pull/499) ([pushrbx](https://github.com/pushrbx))
+- Feat/firefox strategy [\#496](https://github.com/liyasthomas/postwoman/pull/496) ([liyasthomas](https://github.com/liyasthomas))
+- i18n Japanese: Added new translations [\#492](https://github.com/liyasthomas/postwoman/pull/492) ([reefqi037](https://github.com/reefqi037))
+- Merge pull request \#491 from liyasthomas/i18n [\#491](https://github.com/liyasthomas/postwoman/pull/491) ([liyasthomas](https://github.com/liyasthomas))
+- Replaced hard-coded strings with localizable strings [\#490](https://github.com/liyasthomas/postwoman/pull/490) ([liyasthomas](https://github.com/liyasthomas))
+- 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))
+
 ## [v1.5.0](https://github.com/liyasthomas/postwoman/tree/v1.5.0) (2020-01-04)
 
 [Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.0.0...v1.5.0)
 
 **Implemented enhancements:**
 
+- What about additional loaders: + Pug, TypeScript, SASS, material-vue ? [\#467](https://github.com/liyasthomas/postwoman/issues/467)
 - Can WSDL be implemented, similar to SoapUI? [\#461](https://github.com/liyasthomas/postwoman/issues/461)
 - Raw Request Body should be supported  to format the JSON string [\#446](https://github.com/liyasthomas/postwoman/issues/446)
 - Ability to send Binary data using Postwoman [\#415](https://github.com/liyasthomas/postwoman/issues/415)
@@ -29,6 +283,7 @@
 - Missing Focus on Inputs [\#279](https://github.com/liyasthomas/postwoman/issues/279)
 - Download the request result into a file. [\#278](https://github.com/liyasthomas/postwoman/issues/278)
 - Improve UI Contrast [\#277](https://github.com/liyasthomas/postwoman/issues/277)
+- \[UI\] \[UX\] Allow app to take width of browser [\#236](https://github.com/liyasthomas/postwoman/issues/236)
 - Extend syntax highlighting with ACE for pre-request script textarea [\#235](https://github.com/liyasthomas/postwoman/issues/235)
 - Store pre-request scripts in history [\#233](https://github.com/liyasthomas/postwoman/issues/233)
 - Store the time spent on fetching a response [\#225](https://github.com/liyasthomas/postwoman/issues/225)
@@ -37,10 +292,8 @@
 - Header key autocompletion [\#421](https://github.com/liyasthomas/postwoman/pull/421) ([AndrewBastin](https://github.com/AndrewBastin))
 - Custom methods support [\#400](https://github.com/liyasthomas/postwoman/pull/400) ([liyasthomas](https://github.com/liyasthomas))
 - Two Way Data Binding \(v-model\) to Ace Editor component [\#379](https://github.com/liyasthomas/postwoman/pull/379) ([AndrewBastin](https://github.com/AndrewBastin))
-- Basic i18n support [\#351](https://github.com/liyasthomas/postwoman/pull/351) ([liyasthomas](https://github.com/liyasthomas))
 - Undo header/param/body param deletion [\#350](https://github.com/liyasthomas/postwoman/pull/350) ([AndrewBastin](https://github.com/AndrewBastin))
 - Added ability to run GraphQL queries [\#346](https://github.com/liyasthomas/postwoman/pull/346) ([AndrewBastin](https://github.com/AndrewBastin))
-- refactor: minor improvements [\#343](https://github.com/liyasthomas/postwoman/pull/343) ([jamesgeorge007](https://github.com/jamesgeorge007))
 
 **Fixed bugs:**
 
@@ -147,6 +400,159 @@
 - 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)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v0.1.0...v1.0.0)
+
+**Implemented enhancements:**
+
+- Chain requests. Execute a bunch of requests one by one and produce results [\#196](https://github.com/liyasthomas/postwoman/issues/196)
+- Allow User to Choose Whether to Include Authentication in Permalink [\#178](https://github.com/liyasthomas/postwoman/issues/178)
+- Allow HTTP \(not HTTPS\) on postwoman.io [\#175](https://github.com/liyasthomas/postwoman/issues/175)
+- Docker-compose in development [\#168](https://github.com/liyasthomas/postwoman/issues/168)
+- Add Docker [\#164](https://github.com/liyasthomas/postwoman/issues/164)
+- Clear Input [\#155](https://github.com/liyasthomas/postwoman/issues/155)
+-  introduce some script language to parse the response and pass environment variable as request parameter  [\#139](https://github.com/liyasthomas/postwoman/issues/139)
+- Add links to the footer version and commit sha [\#134](https://github.com/liyasthomas/postwoman/issues/134)
+- Please add a label for each request. It will be helpful. [\#133](https://github.com/liyasthomas/postwoman/issues/133)
+- Use 'icon buttons' instead of 'text buttons' [\#130](https://github.com/liyasthomas/postwoman/issues/130)
+- Change .editorconfig [\#115](https://github.com/liyasthomas/postwoman/issues/115)
+- \[UX\] Provide Focus State for Buttons, etc. [\#112](https://github.com/liyasthomas/postwoman/issues/112)
+- Add linter semistandard [\#98](https://github.com/liyasthomas/postwoman/issues/98)
+- Show "Send" button all over the page or enable hotkeys [\#94](https://github.com/liyasthomas/postwoman/issues/94)
+- Import request from cURL [\#93](https://github.com/liyasthomas/postwoman/issues/93)
+- Search on History [\#92](https://github.com/liyasthomas/postwoman/issues/92)
+- Add support for "application/hal+json" Content-Type [\#88](https://github.com/liyasthomas/postwoman/issues/88)
+- The query string is built incorrectly when the path contains a parameter [\#87](https://github.com/liyasthomas/postwoman/issues/87)
+- Option to Copy request as Fetch or XHR Or CURL  [\#76](https://github.com/liyasthomas/postwoman/issues/76)
+- Add Tests [\#65](https://github.com/liyasthomas/postwoman/issues/65)
+- Request Headers [\#57](https://github.com/liyasthomas/postwoman/issues/57)
+- Colored response codes based on status code [\#46](https://github.com/liyasthomas/postwoman/issues/46)
+- Improve SEO [\#45](https://github.com/liyasthomas/postwoman/issues/45)
+- Add html preview to response section [\#41](https://github.com/liyasthomas/postwoman/issues/41)
+- websocket support [\#40](https://github.com/liyasthomas/postwoman/issues/40)
+- Raw request body for POST requests and Authorization key/value in Header [\#36](https://github.com/liyasthomas/postwoman/issues/36)
+- Code highlight on response body [\#33](https://github.com/liyasthomas/postwoman/issues/33)
+- Template selector [\#32](https://github.com/liyasthomas/postwoman/issues/32)
+- Vue template [\#31](https://github.com/liyasthomas/postwoman/issues/31)
+- Add copy response to clipboard button [\#30](https://github.com/liyasthomas/postwoman/issues/30)
+- Ability to store/share/create collections [\#29](https://github.com/liyasthomas/postwoman/issues/29)
+- Send request on Enter Key press [\#17](https://github.com/liyasthomas/postwoman/issues/17)
+- Readable [\#5](https://github.com/liyasthomas/postwoman/issues/5)
+- Serialize a request into JSON? [\#4](https://github.com/liyasthomas/postwoman/issues/4)
+- Add brand new logo to the project [\#244](https://github.com/liyasthomas/postwoman/pull/244) ([caneco](https://github.com/caneco))
+- Feature/pre request script [\#231](https://github.com/liyasthomas/postwoman/pull/231) ([nickpalenchar](https://github.com/nickpalenchar))
+- Add the ApolloTV proxy server [\#217](https://github.com/liyasthomas/postwoman/pull/217) ([NBTX](https://github.com/NBTX))
+- bug: keeping information on page change [\#211](https://github.com/liyasthomas/postwoman/pull/211) ([breno-pereira](https://github.com/breno-pereira))
+- Work in Progress: feature/allow-collections-importing [\#209](https://github.com/liyasthomas/postwoman/pull/209) ([vlad0337187](https://github.com/vlad0337187))
+- Feature/log errors [\#207](https://github.com/liyasthomas/postwoman/pull/207) ([nickpalenchar](https://github.com/nickpalenchar))
+- Use returned value from toggle component on change event [\#205](https://github.com/liyasthomas/postwoman/pull/205) ([hosseinnedaee](https://github.com/hosseinnedaee))
+- Fix CORS and mixed content issue [\#199](https://github.com/liyasthomas/postwoman/pull/199) ([hosseinnedaee](https://github.com/hosseinnedaee))
+- Added Tooltips [\#197](https://github.com/liyasthomas/postwoman/pull/197) ([AndrewBastin](https://github.com/AndrewBastin))
+- Added auto theme [\#185](https://github.com/liyasthomas/postwoman/pull/185) ([AndrewBastin](https://github.com/AndrewBastin))
+- Add Request name label for every requests [\#184](https://github.com/liyasthomas/postwoman/pull/184) ([sharath2106](https://github.com/sharath2106))
+- Collections [\#176](https://github.com/liyasthomas/postwoman/pull/176) ([TheHollidayInn](https://github.com/TheHollidayInn))
+
+**Fixed bugs:**
+
+- Bearer Token value still left even after being cleared [\#212](https://github.com/liyasthomas/postwoman/issues/212)
+- All changes in input fields lost when you switch to another page [\#203](https://github.com/liyasthomas/postwoman/issues/203)
+- POST request json bodies aren't sent [\#180](https://github.com/liyasthomas/postwoman/issues/180)
+- Headers turn into 0 : \[Object object\] [\#166](https://github.com/liyasthomas/postwoman/issues/166)
+- Send Again Button Constantly Flickering [\#157](https://github.com/liyasthomas/postwoman/issues/157)
+- There are cross-domain problems [\#128](https://github.com/liyasthomas/postwoman/issues/128)
+- Raw requests are not being sent [\#124](https://github.com/liyasthomas/postwoman/issues/124)
+- Request Body Is Not Sent [\#113](https://github.com/liyasthomas/postwoman/issues/113)
+- default menu option - 'Http' is not highlighted when launched from installed pwa app \(UI bug\) [\#100](https://github.com/liyasthomas/postwoman/issues/100)
+- App is broken with old history in localStorage [\#74](https://github.com/liyasthomas/postwoman/issues/74)
+- Last added history entry is removed automatically after refresh [\#66](https://github.com/liyasthomas/postwoman/issues/66)
+- Cannot use localhost as base url [\#56](https://github.com/liyasthomas/postwoman/issues/56)
+- \[CORS\] No 'Access-Control-Allow-Origin' header is present on the requested resource [\#2](https://github.com/liyasthomas/postwoman/issues/2)
+
+**Closed issues:**
+
+- Section labels don't display properly in Firefox [\#237](https://github.com/liyasthomas/postwoman/issues/237)
+- Unsupported URLs \[BUG\]? [\#229](https://github.com/liyasthomas/postwoman/issues/229)
+- Credentials are still being included in Permalink even when "Include in URL" is turned off [\#227](https://github.com/liyasthomas/postwoman/issues/227)
+- Display sendRequest runtime errors in the console [\#206](https://github.com/liyasthomas/postwoman/issues/206)
+- Missing "Landing/start page" [\#162](https://github.com/liyasthomas/postwoman/issues/162)
+- Response with content-type "application/hal+json" shows as \[Object object\] [\#158](https://github.com/liyasthomas/postwoman/issues/158)
+- A place to discuss [\#149](https://github.com/liyasthomas/postwoman/issues/149)
+- Inconsistent version name [\#141](https://github.com/liyasthomas/postwoman/issues/141)
+- Autoresize the textarea [\#102](https://github.com/liyasthomas/postwoman/issues/102)
+- Content-Type revamping [\#99](https://github.com/liyasthomas/postwoman/issues/99)
+- Add version number in footer [\#97](https://github.com/liyasthomas/postwoman/issues/97)
+- The history doesn't show a date with the timestamp. [\#81](https://github.com/liyasthomas/postwoman/issues/81)
+- Not working on Brave Browser anymore [\#71](https://github.com/liyasthomas/postwoman/issues/71)
+- Why da fuq is your name plastered all over the README? [\#70](https://github.com/liyasthomas/postwoman/issues/70)
+- Comparison with Postman is missing [\#69](https://github.com/liyasthomas/postwoman/issues/69)
+- HTTP request with different library [\#61](https://github.com/liyasthomas/postwoman/issues/61)
+- Editorconfig file [\#60](https://github.com/liyasthomas/postwoman/issues/60)
+- 500 this.isValidURL is not a function [\#58](https://github.com/liyasthomas/postwoman/issues/58)
+- Styling with Tailwindcss [\#38](https://github.com/liyasthomas/postwoman/issues/38)
+- Not Working in IE 11 [\#37](https://github.com/liyasthomas/postwoman/issues/37)
+- PWA not installable [\#19](https://github.com/liyasthomas/postwoman/issues/19)
+- Simple Misspelling  [\#8](https://github.com/liyasthomas/postwoman/issues/8)
+
+**Merged pull requests:**
+
+- docs: add liyasthomas as a contributor [\#264](https://github.com/liyasthomas/postwoman/pull/264) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add jamesgeorge007 as a contributor [\#263](https://github.com/liyasthomas/postwoman/pull/263) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add NBTX as a contributor [\#262](https://github.com/liyasthomas/postwoman/pull/262) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- Fix .all-contributorsrc badge template. [\#260](https://github.com/liyasthomas/postwoman/pull/260) ([NBTX](https://github.com/NBTX))
+- docs: add hosseinnedaee as a contributor [\#259](https://github.com/liyasthomas/postwoman/pull/259) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add nityanandagohain as a contributor [\#257](https://github.com/liyasthomas/postwoman/pull/257) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add JacobAnavisca as a contributor [\#256](https://github.com/liyasthomas/postwoman/pull/256) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add izerozlu as a contributor [\#255](https://github.com/liyasthomas/postwoman/pull/255) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add vlad0337187 as a contributor [\#254](https://github.com/liyasthomas/postwoman/pull/254) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add AndrewBastin as a contributor [\#253](https://github.com/liyasthomas/postwoman/pull/253) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add terranblake as a contributor [\#252](https://github.com/liyasthomas/postwoman/pull/252) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add nickpalenchar as a contributor [\#251](https://github.com/liyasthomas/postwoman/pull/251) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add yubathom as a contributor [\#250](https://github.com/liyasthomas/postwoman/pull/250) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add larouxn as a contributor [\#249](https://github.com/liyasthomas/postwoman/pull/249) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add NBTX as a contributor [\#248](https://github.com/liyasthomas/postwoman/pull/248) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- docs: add liyasthomas as a contributor [\#247](https://github.com/liyasthomas/postwoman/pull/247) ([allcontributors[bot]](https://github.com/apps/allcontributors))
+- Make page changes more fluid [\#246](https://github.com/liyasthomas/postwoman/pull/246) ([NBTX](https://github.com/NBTX))
+- Minor tweaks [\#245](https://github.com/liyasthomas/postwoman/pull/245) ([liyasthomas](https://github.com/liyasthomas))
+- ⬆️ Bump @nuxtjs/google-tag-manager from 2.3.0 to 2.3.1 [\#243](https://github.com/liyasthomas/postwoman/pull/243) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump yargs-parser from 15.0.0 to 16.1.0 [\#242](https://github.com/liyasthomas/postwoman/pull/242) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump @nuxtjs/toast from 3.2.1 to 3.3.0 [\#241](https://github.com/liyasthomas/postwoman/pull/241) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump highlight.js from 9.15.10 to 9.16.2 [\#240](https://github.com/liyasthomas/postwoman/pull/240) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump cypress from 3.5.0 to 3.6.0 [\#239](https://github.com/liyasthomas/postwoman/pull/239) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Fix legend labels in Firefox, fix colored labels slider [\#238](https://github.com/liyasthomas/postwoman/pull/238) ([NBTX](https://github.com/NBTX))
+- Documentation Cleanup [\#230](https://github.com/liyasthomas/postwoman/pull/230) ([amitdash291](https://github.com/amitdash291))
+- Fix \#227 Exclude credentials from permalink [\#228](https://github.com/liyasthomas/postwoman/pull/228) ([reefqi037](https://github.com/reefqi037))
+- ⬆️ Bump cypress from 3.4.1 to 3.5.0 [\#224](https://github.com/liyasthomas/postwoman/pull/224) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump @nuxtjs/axios from 5.6.0 to 5.8.0 [\#223](https://github.com/liyasthomas/postwoman/pull/223) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump node-sass from 4.12.0 to 4.13.0 [\#222](https://github.com/liyasthomas/postwoman/pull/222) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump nuxt from 2.10.1 to 2.10.2 [\#221](https://github.com/liyasthomas/postwoman/pull/221) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump @nuxtjs/google-analytics from 2.2.0 to 2.2.1 [\#220](https://github.com/liyasthomas/postwoman/pull/220) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump vuex-persist from 2.1.0 to 2.1.1 [\#219](https://github.com/liyasthomas/postwoman/pull/219) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Fixed frame colors toggle [\#216](https://github.com/liyasthomas/postwoman/pull/216) ([mateusppereira](https://github.com/mateusppereira))
+- Re-order sections and add toggle for including authentication in URL [\#215](https://github.com/liyasthomas/postwoman/pull/215) ([NBTX](https://github.com/NBTX))
+- chore: minor code refactor [\#214](https://github.com/liyasthomas/postwoman/pull/214) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- Fix \#212 Clear bearer token value [\#213](https://github.com/liyasthomas/postwoman/pull/213) ([reefqi037](https://github.com/reefqi037))
+- fix: don't display 'Collection is empty' label if collection has any … [\#208](https://github.com/liyasthomas/postwoman/pull/208) ([vlad0337187](https://github.com/vlad0337187))
+- Fix proxy URL [\#201](https://github.com/liyasthomas/postwoman/pull/201) ([NBTX](https://github.com/NBTX))
+- Fix CORS and Mixed-Content issue & Bug Fixes [\#200](https://github.com/liyasthomas/postwoman/pull/200) ([NBTX](https://github.com/NBTX))
+- ⬆️ Bump start-server-and-test from 1.10.5 to 1.10.6 [\#198](https://github.com/liyasthomas/postwoman/pull/198) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump start-server-and-test from 1.10.3 to 1.10.5 [\#194](https://github.com/liyasthomas/postwoman/pull/194) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump @nuxtjs/google-tag-manager from 2.2.1 to 2.3.0 [\#193](https://github.com/liyasthomas/postwoman/pull/193) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump nuxt from 2.10.0 to 2.10.1 [\#192](https://github.com/liyasthomas/postwoman/pull/192) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- ⬆️ Bump yargs-parser from 14.0.0 to 15.0.0 [\#191](https://github.com/liyasthomas/postwoman/pull/191) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Add quotation marks for generated code [\#187](https://github.com/liyasthomas/postwoman/pull/187) ([johnhenry](https://github.com/johnhenry))
+- updated threshold and rootMargin for IntersectionObserver [\#182](https://github.com/liyasthomas/postwoman/pull/182) ([edisonaugusthy](https://github.com/edisonaugusthy))
+- Add basic e2e tests [\#181](https://github.com/liyasthomas/postwoman/pull/181) ([yubathom](https://github.com/yubathom))
+- ⬆️ Bump nuxt from 2.9.2 to 2.10.0 [\#179](https://github.com/liyasthomas/postwoman/pull/179) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- 🐛 Fixed sitemap configuration [\#177](https://github.com/liyasthomas/postwoman/pull/177) ([NicoPennec](https://github.com/NicoPennec))
+- Code Refactoring [\#173](https://github.com/liyasthomas/postwoman/pull/173) ([edisonaugusthy](https://github.com/edisonaugusthy))
+- Added Black Theme [\#172](https://github.com/liyasthomas/postwoman/pull/172) ([AndrewBastin](https://github.com/AndrewBastin))
+
+## [v0.1.0](https://github.com/liyasthomas/postwoman/tree/v0.1.0) (2019-08-22)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/91c08a5e6305cc95a0df46a33fdd0013bf7339b4...v0.1.0)
 
 
 

README.md

@@ -3,7 +3,7 @@
   <br>
   <br>
   <p>
-    <b>A free, fast & beautiful API request builder</b>
+    <b>A free, fast and beautiful API request builder</b>
   </p>
   <p>
      <i>Web alternative to Postman - Helps you create requests faster, saving precious time on development - <a href="https://postwoman.launchaco.com">Subscribe</a></i>
@@ -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.
 
@@ -204,7 +208,7 @@ _**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/li
  - **[CLI β](https://github.com/postwoman-io/postwoman-cli)** - A CLI solution for Postwoman
  - **Browser Extensions** - Browser extensions that simplifies access to Postwoman
 
-   [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_16x16.png) **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/postwoman) ([GitHub](https://github.com/AndrewBastin/postwoman-firefox)) &nbsp;|&nbsp; [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_16x16.png) **Chrome**](https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld) ([GitHub](https://github.com/AndrewBastin/postwoman-chrome))
+   [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_16x16.png) **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/postwoman) &nbsp;|&nbsp; [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_16x16.png) **Chrome**](https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld) ([GitHub](https://github.com/AndrewBastin/postwoman-extension))
 
    >**Extensions fixes `CORS` issues.**
 
@@ -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)
@@ -315,36 +332,44 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
 ### Lead Developers
 
 * **[Liyas Thomas](https://github.com/liyasthomas)** - *Author*
-* **[Caneco](https://twitter.com/caneco)** - *Designer*
+* **[John Harker](https://github.com/NBTX)** - *Lead developer*
+* **[Andrew Bastin](https://github.com/andrewbastin)** - *Lead developer*
+* **[James George](https://github.com/jamesgeorge007)** - *Lead maintainer*
+* **[Caneco](https://twitter.com/caneco)** - *Logo and banner designer*
 
 ### Testing and Debugging
 
 * ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
 
 ### Collaborators <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-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>
   </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.
@@ -353,20 +378,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)]
@@ -382,6 +397,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 {
@@ -23,12 +9,12 @@ $responsiveWidth: 768px;
   width: 4px;
   height: 4px;
   border-radius: 4px;
-  background-color: var(--bg-light-color);
+  background-color: var(--bg-dark-color);
 }
 
 ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
   background-color: var(--fg-light-color);
-  border-radius: 8px;
 
   &:hover {
     background-color: var(--fg-color);
@@ -60,9 +46,9 @@ body {
   padding: 0;
   margin: 0;
   scroll-behavior: smooth;
+  transition: all 0.2s ease-in-out;
 }
 
-// Make theme transition smoother.
 body.afterLoad {
   transition: background-color 0.2s ease-in-out;
 }
@@ -76,6 +62,10 @@ a {
   color: inherit;
   text-decoration: none;
   transition: all 0.2s ease-in-out;
+
+  &.link {
+    color: var(--ac-color);
+  }
 }
 
 header,
@@ -89,10 +79,24 @@ 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;
-  flex-direction: column;
+  flex-flow: column nowrap;
 }
 
 .wrapper .page {
@@ -107,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;
@@ -146,7 +125,8 @@ footer {
   z-index: 1;
   height: 100vh;
   padding: 0 8px;
-  background-color: var(--bg-light-color);
+  background-color: var(--bg-dark-color);
+  transition: all 0.2s ease-in-out;
 }
 
 .main {
@@ -156,7 +136,6 @@ footer {
   order: 2;
   position: relative;
   padding: 0 16px;
-  height: 100%;
 }
 
 .nav-second {
@@ -173,6 +152,7 @@ nav.primary-nav {
 
   svg {
     fill: var(--fg-light-color);
+    transition: all 0.2s ease-in-out;
   }
 
   a {
@@ -186,7 +166,7 @@ nav.primary-nav {
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
     margin: 8px 0;
-    transition: all 0.2s ease-in-out;
+    height: 52px;
 
     &:hover {
       color: var(--fg-color);
@@ -245,10 +225,6 @@ nav.secondary-nav {
   }
 }
 
-.footer {
-  flex-direction: column;
-}
-
 h1,
 h2,
 h3,
@@ -261,6 +237,11 @@ h4 {
 
 hr {
   border-bottom: 1px dashed var(--brd-color);
+  margin: 16px 0;
+}
+
+p {
+  transition: all 0.2s ease-in-out;
 }
 
 .tooltip {
@@ -268,6 +249,7 @@ hr {
   $fgcolor: var(--fg-color);
   display: block !important;
   z-index: 10000;
+  transition: all 0.2s ease-in-out;
 
   .tooltip-inner {
     background: $bgcolor;
@@ -422,7 +404,6 @@ button {
     color: var(--act-color);
     fill: var(--act-color);
     box-shadow: inset 0 0 0 2px var(--fg-color);
-    transition: all 0.2s ease-in-out;
   }
 
   &.icon {
@@ -437,7 +418,6 @@ button {
       color: var(--fg-color);
       fill: var(--fg-color);
       box-shadow: none;
-      transition: all 0.2s ease-in-out;
     }
   }
 
@@ -472,72 +452,84 @@ button {
 fieldset {
   margin: 16px 0;
   border-radius: 16px;
-  transition: all 0.2s ease-in-out;
   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;
+  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;
+    * {
+      vertical-align: middle;
+    }
+
+    i {
+      margin-left: 8px;
+    }
   }
 
-  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.blue legend {
-  color: #57b5f9;
+fieldset:target,
+section:target {
+  animation: highlight 2s ease;
 }
 
-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;
+@keyframes highlight {
+  50% {
+    box-shadow: 0 0 0 2px var(--ac-color);
+  }
 }
 
 input[type="file"],
 input[type="radio"],
-.tab,
 .hide-on-large-screen,
 #installPWA,
 .hidden {
   display: none;
 }
 
+.method,
 kbd,
 select,
 input,
@@ -564,7 +556,16 @@ code {
   &:not([readonly]):not(.ace_editor):active,
   &:not([readonly]):not(.ace_editor):focus {
     box-shadow: inset 0 0 0 2px var(--fg-light-color);
-    transition: all 0.2s ease-in-out;
+  }
+}
+
+.method {
+  cursor: pointer;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: inset 0 0 0 2px var(--fg-light-color);
   }
 }
 
@@ -587,6 +588,14 @@ pre {
 .select-wrapper {
   position: relative;
 
+  input {
+    text-transform: uppercase;
+  }
+
+  .trigger {
+    width: 100%;
+  }
+
   &:after {
     display: inline-block;
     position: absolute;
@@ -661,6 +670,7 @@ input[type="checkbox"] {
 label {
   padding: 4px;
   color: var(--fg-light-color);
+  transition: all 0.2s ease-in-out;
 }
 
 ul,
@@ -679,7 +689,7 @@ ol {
 ul li,
 ol li {
   display: inline-flex;
-  flex-direction: column;
+  flex-flow: column nowrap;
   flex-grow: 1;
   justify-content: center;
 }
@@ -693,7 +703,7 @@ ol li {
 
   * {
     display: inline-flex;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     align-items: center;
     justify-content: center;
   }
@@ -773,54 +783,22 @@ ol li {
 }
 
 #send {
-  // #hidden-message {
-  //   display: none;
-  // }
-
   &.show {
     display: flex;
     position: fixed;
-    top: 12px;
-    right: 12px;
-    z-index: 2;
-
-    // #hidden-message {
-    //   display: block;
-    //   margin-left: 4px;
-    // }
+    bottom: 86px;
+    left: 50%;
+    z-index: 10001;
+    transform: translateX(-50%);
+    box-shadow: 0 4px 24px rgba(black, 0.2);
+    transition: all .2s ease-in-out;
   }
 }
 
 section {
   display: flex;
   flex-wrap: wrap;
-}
-
-.tab {
-  width: 100%;
-  order: 1;
-}
-
-input[type="radio"] + label {
-  padding: 8px 16px;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  &:hover,
-  &:active,
-  &:focus {
-    border-color: var(--brd-color);
-  }
-}
-
-input[type="radio"]:checked + label {
-  border-color: var(--fg-color);
-  color: var(--fg-color);
-}
-
-input[type="radio"]:checked + label + .tab {
-  display: block;
+  border-radius: 16px;
 }
 
 .toasted-container .toasted {
@@ -873,18 +851,19 @@ input[type="radio"]:checked + label + .tab {
     padding: 0;
     width: 100%;
     background-color: var(--bg-color);
-    transition: all 0.2s ease-in-out;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
   }
 
   nav.primary-nav {
     flex-flow: row nowrap;
     overflow: auto;
-    justify-content: space-around;
+    justify-content: space-between;
+    background-color: var(--bg-dark-color);
 
     a {
       background-color: transparent;
       margin: 8px;
+      flex: 1;
 
       &.nuxt-link-exact-active {
         background-color: transparent;
@@ -908,7 +887,7 @@ input[type="radio"]:checked + label + .tab {
 
   ul,
   ol {
-    flex-direction: column;
+    flex-flow: column nowrap;
   }
 
   ul li,

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,92 +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;
-      } else {
-        return (
-          this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
-        );
-      }
-    }
-  },
-
-  beforeDestroy() {
-    this.editor.destroy();
-    this.editor.container.remove();
-  }
-};
-</script>

components/collections/addCollection.vue

@@ -21,6 +21,7 @@
             type="text"
             v-model="name"
             :placeholder="$t('my_new_collection')"
+            @keyup.enter="addNewCollection"
           />
         </li>
       </ul>
@@ -42,32 +43,42 @@
 </template>
 
 <script>
+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)))
+        }
+      }
+    },
     addNewCollection() {
       if (!this.$data.name) {
-        this.$toast.info("Please provide a valid name for the collection");
-        return;
+        this.$toast.info(this.$t("invalid_collection_name"))
+        return
       }
       this.$store.commit("postwoman/addNewCollection", {
-        name: this.$data.name
-      });
-      this.$emit("hide-modal");
+        name: this.$data.name,
+      })
+      this.$emit("hide-modal")
+      this.syncCollections()
     },
     hideModal() {
-      this.$emit("hide-modal");
-    }
-  }
-};
+      this.$emit("hide-modal")
+    },
+  },
+}
 </script>

components/collections/addFolder.vue

@@ -21,6 +21,7 @@
             type="text"
             v-model="name"
             :placeholder="$t('my_new_folder')"
+            @keyup.enter="addNewFolder"
           />
         </li>
       </ul>
@@ -46,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("Please provide a valid name for the collection");
-        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,82 +76,211 @@
 </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);
-        this.$store.commit("postwoman/replaceCollections", collections);
-      };
-      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
-      this.fileImported();
+        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") {
+            // Do nothing
+          }
+        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+          collections = this.parsePostmanCollection(collections)
+        } else {
+          return this.failedImport()
+        }
+        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);
-        this.$store.commit("postwoman/importCollections", collections);
-      };
-      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
-      this.fileImported();
+        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") {
+            // Do nothing
+          }
+        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+          collections = this.parsePostmanCollection(collections)
+        } else {
+          return this.failedImport()
+        }
+        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",
+      })
+    },
+    parsePostmanCollection(collection, folders = true) {
+      let postwomanCollection = folders
+        ? [
+            {
+              name: "",
+              folders: [],
+              requests: [],
+            },
+          ]
+        : {
+            name: "",
+            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))
+          } else {
+            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))
+          }
+        }
+      }
+      return postwomanCollection
+    },
+    parsePostmanRequest(requestObject) {
+      let pwRequest = {
+        url: "",
+        path: "",
+        method: "",
+        auth: "",
+        httpUser: "",
+        httpPassword: "",
+        passwordFieldType: "password",
+        bearerToken: "",
+        headers: [],
+        params: [],
+        bodyParams: [],
+        rawParams: "",
+        rawInput: false,
+        contentType: "",
+        requestType: "",
+        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 (authType === "basic") {
+        pwRequest.auth = "Basic Auth"
+        pwRequest.httpUser =
+          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
+      } else if (authType === "oauth2") {
+        pwRequest.auth = "OAuth 2.0"
+        pwRequest.bearerToken =
+          itemAuth.oauth2[0].key === "accessToken"
+            ? itemAuth.oauth2[0].value
+            : itemAuth.oauth2[1].value
+      } else if (authType === "bearer") {
+        pwRequest.auth = "Bearer Token"
+        pwRequest.bearerToken = itemAuth.bearer[0].value
+      }
+      let requestObjectHeaders = requestObject.request.header
+      if (requestObjectHeaders) {
+        pwRequest.headers = requestObjectHeaders
+        for (let header of pwRequest.headers) {
+          delete header.name
+          delete header.type
+        }
+      }
+      let requestObjectParams = requestObject.request.url.query
+      if (requestObjectParams) {
+        pwRequest.params = requestObjectParams
+        for (let param of pwRequest.params) {
+          delete param.disabled
+        }
+      }
+      if (requestObject.request.body) {
+        if (requestObject.request.body.mode === "urlencoded") {
+          let params = requestObject.request.body.urlencoded
+          pwRequest.bodyParams = params ? params : []
+          for (let param of pwRequest.bodyParams) {
+            delete param.type
+          }
+        } else if (requestObject.request.body.mode === "raw") {
+          pwRequest.rawInput = true
+          pwRequest.rawParams = requestObject.request.body.raw
+        }
+      }
+      return pwRequest
+    },
+  },
+}
 </script>

components/collections/index.vue

@@ -4,7 +4,7 @@ TODO:
 -->
 
 <template>
-  <div class="collections-wrapper">
+  <pw-section class="yellow" :label="$t('collections')" ref="collections">
     <addCollection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <editCollection
       :show="showModalEdit"
@@ -92,12 +92,12 @@ TODO:
         <span>{{ $t("generate_docs") }}</span>
       </button>
     </nuxt-link>
-  </div>
+  </pw-section>
 </template>
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 276px);
+  max-height: calc(100vh - 286px);
 }
 
 ul {
@@ -107,19 +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("../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 {
@@ -134,88 +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
+      }
     }
+    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)
+  },
+}
 </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,13 +78,15 @@
 </template>
 
 <script>
+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 {
@@ -119,96 +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)))
+        }
+      }
+    },
     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.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

@@ -0,0 +1,92 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <h3 class="title">{{ $t("new_environment") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="$t('my_new_environment')"
+            @keyup.enter="addNewEnvironment"
+          />
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="addNewEnvironment">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+import { fb } from "../../functions/fb"
+
+export default {
+  props: {
+    show: Boolean,
+  },
+  components: {
+    modal: () => import("../../components/ui/modal"),
+  },
+  data() {
+    return {
+      name: undefined,
+    }
+  },
+  methods: {
+    syncEnvironments() {
+      if (fb.currentUser !== null) {
+        if (fb.currentSettings[1].value) {
+          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
+      }
+      let newEnvironment = [
+        {
+          name: this.$data.name,
+          variables: [],
+        },
+      ]
+      this.$store.commit("postwoman/importAddEnvironments", {
+        environments: newEnvironment,
+        confirmation: "Environment added",
+      })
+      this.$emit("hide-modal")
+      this.syncEnvironments()
+    },
+    hideModal() {
+      this.$data.name = undefined
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>

components/environments/editEnvironment.vue

@@ -0,0 +1,207 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <h3 class="title">{{ $t("edit_environment") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <ul>
+        <li>
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="editingEnvironment.name"
+            @keyup.enter="saveEnvironment"
+          />
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <label for="variableList">{{ $t("env_variable_list") }}</label>
+            <div>
+              <button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
+                <i class="material-icons">clear_all</i>
+              </button>
+            </div>
+          </div>
+          <textarea
+            id="variableList"
+            readonly
+            v-textarea-auto-height="variableString"
+            v-model="variableString"
+            :placeholder="$t('add_one_variable')"
+            rows="1"
+          ></textarea>
+        </li>
+      </ul>
+      <ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
+        <li>
+          <input
+            :placeholder="$t('parameter_count', { count: index + 1 })"
+            :name="'param' + index"
+            :value="variable.key"
+            @change="
+              $store.commit('postwoman/setVariableKey', {
+                index,
+                value: $event.target.value,
+              })
+            "
+            autofocus
+          />
+        </li>
+        <li>
+          <input
+            :placeholder="$t('value_count', { count: index + 1 })"
+            :name="'value' + index"
+            :value="
+              typeof variable.value === 'string' ? variable.value : JSON.stringify(variable.value)
+            "
+            @change="
+              $store.commit('postwoman/setVariableValue', {
+                index,
+                value: $event.target.value,
+              })
+            "
+          />
+        </li>
+        <div>
+          <li>
+            <button
+              class="icon"
+              @click="removeEnvironmentVariable(index)"
+              v-tooltip.bottom="$t('delete')"
+              id="variable"
+            >
+              <i class="material-icons">delete</i>
+            </button>
+          </li>
+        </div>
+      </ul>
+      <ul>
+        <li>
+          <button class="icon" @click="addEnvironmentVariable">
+            <i class="material-icons">add</i>
+            <span>{{ $t("add_new") }}</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div slot="footer">
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="saveEnvironment">
+            {{ $t("save") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+import textareaAutoHeight from "../../directives/textareaAutoHeight"
+
+export default {
+  directives: {
+    textareaAutoHeight,
+  },
+  props: {
+    show: Boolean,
+    editingEnvironment: Object,
+    editingEnvironmentIndex: Number,
+  },
+  components: {
+    modal: () => import("../../components/ui/modal"),
+  },
+  data() {
+    return {
+      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)
+    },
+  },
+  computed: {
+    editingEnvCopy() {
+      return this.$store.state.postwoman.editingEnvironment
+    },
+    variableString() {
+      const result = this.editingEnvCopy.variables
+      return result === "" ? "" : JSON.stringify(result)
+    },
+  },
+  methods: {
+    clearContent(e) {
+      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)
+    },
+    addEnvironmentVariable() {
+      let value = { key: "", value: "" }
+      this.$store.commit("postwoman/addVariable", value)
+    },
+    removeEnvironmentVariable(index) {
+      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.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+        action: {
+          text: this.$t("undo"),
+          onClick: (e, toastObject) => {
+            this.$store.commit("postwoman/removeVariable", oldVariables)
+            toastObject.remove()
+          },
+        },
+      })
+    },
+    saveEnvironment() {
+      if (!this.$data.name) {
+        this.$toast.info(this.$t("invalid_environment_name"))
+        return
+      }
+      const environmentUpdated = {
+        ...this.editingEnvCopy,
+        name: this.$data.name,
+      }
+      this.$store.commit("postwoman/saveEnvironment", {
+        environment: environmentUpdated,
+        environmentIndex: this.$props.editingEnvironmentIndex,
+      })
+      this.$emit("hide-modal")
+    },
+    hideModal() {
+      this.$data.name = undefined
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>

components/environments/environment.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex-wrap">
+    <div>
+      <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>
+    </div>
+    <v-popover>
+      <button class="tooltip-target icon" v-tooltip="$t('more')">
+        <i class="material-icons">more_vert</i>
+      </button>
+      <template slot="popover">
+        <div>
+          <button class="icon" @click="$emit('edit-environment')" v-close-popover>
+            <i class="material-icons">create</i>
+            <span>{{ $t("edit") }}</span>
+          </button>
+        </div>
+        <div>
+          <button class="icon" @click="removeEnvironment" v-close-popover>
+            <i class="material-icons">delete</i>
+            <span>{{ $t("delete") }}</span>
+          </button>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style scoped lang="scss">
+ul {
+  display: flex;
+  flex-direction: column;
+}
+
+ul li {
+  display: flex;
+  padding-left: 16px;
+  border-left: 1px solid var(--brd-color);
+}
+</style>
+
+<script>
+export default {
+  props: {
+    environment: Object,
+    environmentIndex: Number,
+  },
+  methods: {
+    removeEnvironment() {
+      if (!confirm("Are you sure you want to remove this environment?")) return
+      this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
+    },
+  },
+}
+</script>

components/environments/importExportEnvironment.vue

@@ -0,0 +1,160 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
+            <div>
+              <button class="icon" @click="hideModal">
+                <i class="material-icons">close</i>
+              </button>
+            </div>
+          </div>
+          <div class="flex-wrap">
+            <span
+              v-tooltip="{
+                content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
+              }"
+            >
+              <button :disabled="!fb.currentUser" class="icon" @click="syncEnvironments">
+                <i class="material-icons">folder_shared</i>
+                <span>{{ $t("import_from_sync") }}</span>
+              </button>
+            </span>
+            <button
+              class="icon"
+              @click="openDialogChooseFileToReplaceWith"
+              v-tooltip="$t('replace_current')"
+            >
+              <i class="material-icons">create_new_folder</i>
+              <span>{{ $t("replace_json") }}</span>
+              <input
+                type="file"
+                @change="replaceWithJSON"
+                style="display: none;"
+                ref="inputChooseFileToReplaceWith"
+                accept="application/json"
+              />
+            </button>
+            <button
+              class="icon"
+              @click="openDialogChooseFileToImportFrom"
+              v-tooltip="$t('preserve_current')"
+            >
+              <i class="material-icons">folder_special</i>
+              <span>{{ $t("import_json") }}</span>
+              <input
+                type="file"
+                @change="importFromJSON"
+                style="display: none;"
+                ref="inputChooseFileToImportFrom"
+                accept="application/json"
+              />
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div slot="body">
+      <textarea v-model="environmentJson" rows="8"></textarea>
+    </div>
+    <div slot="footer">
+      <div class="flex-wrap">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ $t("cancel") }}
+          </button>
+          <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
+            {{ $t("export") }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+import { fb } from "../../functions/fb"
+
+export default {
+  data() {
+    return {
+      fb,
+    }
+  },
+  props: {
+    show: Boolean,
+  },
+  components: {
+    modal: () => import("../../components/ui/modal"),
+  },
+  computed: {
+    environmentJson() {
+      return JSON.stringify(this.$store.state.postwoman.environments, null, 2)
+    },
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    openDialogChooseFileToReplaceWith() {
+      this.$refs.inputChooseFileToReplaceWith.click()
+    },
+    openDialogChooseFileToImportFrom() {
+      this.$refs.inputChooseFileToImportFrom.click()
+    },
+    replaceWithJSON() {
+      let reader = new FileReader()
+      reader.onload = event => {
+        let content = event.target.result
+        let environments = JSON.parse(content)
+        this.$store.commit("postwoman/replaceEnvironments", environments)
+      }
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
+      this.fileImported()
+    },
+    importFromJSON() {
+      let reader = new FileReader()
+      reader.onload = event => {
+        let content = event.target.result
+        let environments = JSON.parse(content)
+        let confirmation = this.$t("file_imported")
+        this.$store.commit("postwoman/importAddEnvironments", {
+          environments,
+          confirmation,
+        })
+      }
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
+    },
+    exportJSON() {
+      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)
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+    },
+    syncEnvironments() {
+      this.$store.commit("postwoman/replaceEnvironments", fb.currentEnvironments)
+      this.fileImported()
+    },
+    fileImported() {
+      this.$toast.info(this.$t("file_imported"), {
+        icon: "folder_shared",
+      })
+    },
+  },
+}
+</script>

components/environments/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
+    <addEnvironment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <editEnvironment
+      :show="showModalEdit"
+      :editingEnvironment="editingEnvironment"
+      :editingEnvironmentIndex="editingEnvironmentIndex"
+      @hide-modal="displayModalEdit(false)"
+    />
+    <importExportEnvironment
+      :show="showModalImportExport"
+      @hide-modal="displayModalImportExport(false)"
+    />
+    <div class="flex-wrap">
+      <div>
+        <button class="icon" @click="displayModalAdd(true)">
+          <i class="material-icons">add</i>
+          <span>{{ $t("new") }}</span>
+        </button>
+      </div>
+      <div>
+        <button class="icon" @click="displayModalImportExport(true)">
+          {{ $t("import_export") }}
+        </button>
+      </div>
+    </div>
+    <p v-if="environments.length === 0" class="info">
+      Create new environment
+    </p>
+    <virtual-list
+      class="virtual-list"
+      :class="{ filled: environments.length }"
+      :size="152"
+      :remain="Math.min(5, environments.length)"
+    >
+      <ul>
+        <li v-for="(environment, index) in environments" :key="environment.name">
+          <environment
+            :environmentIndex="index"
+            :environment="environment"
+            @edit-environment="editEnvironment(environment, index)"
+            @select-environment="$emit('use-environment', environment)"
+          />
+        </li>
+        <li v-if="environments.length === 0">
+          <label>Environments are empty</label>
+        </li>
+      </ul>
+    </virtual-list>
+  </pw-section>
+</template>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 241px);
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+}
+</style>
+
+<script>
+import environment from "./environment"
+import { fb } from "../../functions/fb"
+
+const updateOnLocalStorage = (propertyName, property) =>
+  window.localStorage.setItem(propertyName, JSON.stringify(property))
+
+export default {
+  components: {
+    environment,
+    "pw-section": () => import("../layout/section"),
+    addEnvironment: () => import("./addEnvironment"),
+    editEnvironment: () => import("./editEnvironment"),
+    importExportEnvironment: () => import("./importExportEnvironment"),
+    VirtualList: () => import("vue-virtual-scroll-list"),
+  },
+  data() {
+    return {
+      showModalImportExport: false,
+      showModalAdd: false,
+      showModalEdit: false,
+      editingEnvironment: undefined,
+      editingEnvironmentIndex: undefined,
+    }
+  },
+  computed: {
+    environments() {
+      return this.$store.state.postwoman.environments
+    },
+  },
+  async mounted() {
+    this._keyListener = function(e) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        this.showModalImportExport = false
+      }
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
+  },
+  methods: {
+    displayModalAdd(shouldDisplay) {
+      this.showModalAdd = shouldDisplay
+    },
+    displayModalEdit(shouldDisplay) {
+      this.showModalEdit = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
+    displayModalImportExport(shouldDisplay) {
+      this.showModalImportExport = shouldDisplay
+    },
+    editEnvironment(environment, environmentIndex) {
+      this.$data.editingEnvironment = environment
+      this.$data.editingEnvironmentIndex = environmentIndex
+      this.displayModalEdit(true)
+      this.syncEnvironments
+    },
+    resetSelectedData() {
+      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)))
+        }
+      }
+    },
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
+</script>

components/firebase/feeds.vue

@@ -3,28 +3,25 @@
     v-if="fb.currentFeeds.length !== 0"
     class="virtual-list"
     :class="{ filled: fb.currentFeeds.length }"
-    :size="56"
-    :remain="Math.min(8, fb.currentFeeds.length)"
+    :size="180"
+    :remain="Math.min(6, fb.currentFeeds.length)"
   >
-    <ul v-for="feed in fb.currentFeeds" :key="feed.id">
+    <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
       <div class="show-on-large-screen">
-        <li>
-          <input
-            :aria-label="$t('label')"
-            type="text"
-            readonly
-            :value="feed.label"
-            :placeholder="$t('no_label')"
-            class="bg-color"
-          />
+        <li class="info">
+          <label>
+            {{ feed.label || $t("no_label") }}
+          </label>
         </li>
-        <button class="icon" @click="saveFeed(feed)">
-          <i class="material-icons">get_app</i>
-        </button>
         <button class="icon" @click="deleteFeed(feed)">
           <i class="material-icons">delete</i>
         </button>
       </div>
+      <div class="show-on-large-screen">
+        <li class="info clamb-3">
+          <label>{{ feed.message || $t("empty") }}</label>
+        </li>
+      </div>
     </ul>
   </virtual-list>
   <ul v-else>
@@ -36,46 +33,46 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 288px);
+  max-height: calc(100vh - 294px);
+}
+
+ul,
+ol {
+  flex-direction: column;
+}
+
+.entry {
+  border-bottom: 1px dashed var(--brd-color);
+  padding: 0 0 8px;
+}
+
+.clamb-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 </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",
+      })
     },
-    saveFeed(feed) {
-      const dataToWrite = JSON.stringify(feed.message, null, 2);
-      const file = new Blob([dataToWrite], { type: "application/json" });
-      const a = document.createElement("a"),
-        url = URL.createObjectURL(file);
-      a.href = url;
-      a.download = (feed.label + " on " + Date()).replace(/\./g, "[dot]");
-      document.body.appendChild(a);
-      a.click();
-      this.$toast.success(this.$t("download_started"), {
-        icon: "done"
-      });
-      setTimeout(() => {
-        document.body.removeChild(a);
-        window.URL.revokeObjectURL(url);
-      }, 1000);
-    }
-  }
-};
+  },
+}
 </script>

components/firebase/inputform.vue

@@ -1,55 +1,69 @@
 <template>
   <div>
     <ul>
-      <li>
-        <input
-          :aria-label="$t('label')"
-          type="text"
-          autofocus
-          v-model="message"
-          :placeholder="$t('paste_a_collection')"
-        />
-      </li>
-    </ul>
-    <ul>
-      <li>
-        <input
-          :aria-label="$t('label')"
-          type="text"
-          autofocus
-          v-model="label"
-          :placeholder="$t('label')"
-        />
-      </li>
-      <button
-        class="icon"
-        :disabled="!(this.message && this.label)"
-        value="Save"
-        @click="formPost"
-      >
-        <i class="material-icons">add</i>
-        <span>Add</span>
-      </button>
+      <div class="show-on-large-screen">
+        <li>
+          <input
+            :aria-label="$t('label')"
+            type="text"
+            autofocus
+            v-model="message"
+            :placeholder="$t('paste_a_note')"
+            @keyup.enter="formPost"
+          />
+        </li>
+      </div>
+      <div class="show-on-large-screen">
+        <li>
+          <input
+            :aria-label="$t('label')"
+            type="text"
+            autofocus
+            v-model="label"
+            :placeholder="$t('label')"
+            @keyup.enter="formPost"
+          />
+        </li>
+        <button
+          class="icon"
+          :disabled="!(this.message || this.label)"
+          value="Save"
+          @click="formPost"
+        >
+          <i class="material-icons">add</i>
+          <span>Add</span>
+        </button>
+      </div>
     </ul>
   </div>
 </template>
 
+<style scoped lang="scss">
+ul,
+ol {
+  flex-direction: column;
+}
+</style>
+
 <script>
-import { fb } from "../../functions/fb";
+import { fb } from "../../functions/fb"
 
 export default {
   data() {
     return {
       message: null,
-      label: null
-    };
+      label: null,
+    }
   },
   methods: {
     formPost() {
-      fb.writeFeeds(this.message, this.label);
-      this.message = null;
-      this.label = null;
-    }
-  }
-};
+      if (!(this.message || this.label)) {
+        return
+      }
+      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(res => {
-          if (res.additionalUserInfo.isNewUser) {
-            this.$toast.info(this.$t("turn_on") + " " + this.$t("sync"), {
+        .then(({ additionalUserInfo }) => {
+          if (additionalUserInfo.isNewUser) {
+            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(res => {
-          if (res.additionalUserInfo.isNewUser) {
-            this.$toast.info(this.$t("turn_on") + " " + this.$t("sync"), {
+        .then(({ additionalUserInfo }) => {
+          if (additionalUserInfo.isNewUser) {
+            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

@@ -8,31 +8,31 @@
   </span>
 </template>
 
-<style></style>
+<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>
@@ -28,7 +25,7 @@
   </div>
 </template>
 
-<style>
+<style scoped lang="scss">
 .field-box {
   padding: 16px;
   margin: 4px;
@@ -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,115 +1,209 @@
 <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 "ace-builds/webpack-resolver";
-import debounce from "../../functions/utils/debounce";
+  &.initialized {
+    opacity: 1;
+  }
+
+  & > * {
+    transition: none;
+  }
+}
+</style>
+
+<script>
+const DEFAULT_THEME = "twilight"
+
+import ace from "ace-builds"
+import * as gql from "graphql"
+import { getAutocompleteSuggestions } from "graphql-language-service-interface"
+import "ace-builds/webpack-resolver"
+import "ace-builds/src-noconflict/ext-language_tools"
+import debounce from "../../functions/utils/debounce"
 
 export default {
   props: {
     value: {
       type: String,
-      default: ""
+      default: "",
     },
     theme: {
       type: String,
-      required: false
+      required: false,
     },
     lang: {
       type: String,
-      default: "json"
+      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());
+      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);
+      this.editor.getSession().setMode(`ace/mode/${value}`)
     },
     options(value) {
-      this.editor.setOptions(value);
-    }
+      this.editor.setOptions(value)
+    },
   },
 
   mounted() {
+    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,
-      ...this.options
-    });
+      mode: `ace/mode/${this.lang}`,
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      ...this.options,
+    })
 
-    if (this.value) editor.setValue(this.value, 1);
+    // 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
+      })
+    })
 
-    this.editor = editor;
-    this.cacheValue = this.value;
+    // 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) => {
+        if (this.validationSchema) {
+          const completions = getAutocompleteSuggestions(this.validationSchema, editor.getValue(), {
+            line: row,
+            character: column,
+          })
+
+          callback(
+            null,
+            completions.map(({ label, detail }) => ({
+              name: label,
+              value: label,
+              score: 1.0,
+              meta: detail,
+            }))
+          )
+        } else {
+          callback(null, [])
+        }
+      },
+    }
+
+    langTools.setCompleters([completer])
+
+    if (this.value) editor.setValue(this.value, 1)
+
+    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) {
       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(err => {
-                return {
-                  row: err.locations[0].line - 1,
-                  column: err.locations[0].column - 1,
-                  text: err.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([
@@ -117,19 +211,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

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<style>
+<style scoped lang="scss">
 .type-box {
   padding: 16px;
   margin: 4px 0;
@@ -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

@@ -2,7 +2,7 @@
   <span class="typelink" @click="jumpToType">{{ typeString }}</span>
 </template>
 
-<style>
+<style scoped lang="scss">
 .typelink {
   color: var(--ac-color);
   font-family: "Roboto Mono", monospace;
@@ -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,411 @@
+<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="firefoxExtInstalled" 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="chromeExtInstalled" 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 } from "../../functions/strategies/ExtensionStrategy"
+import { hasChromeExtensionInstalled } from "../../functions/strategies/ChromeStrategy"
+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,
+      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() || hasChromeExtensionInstalled())) {
+          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,14 +1,19 @@
 <template>
   <pw-section class="green" icon="history" :label="$t('history')" ref="history">
     <ul>
-      <li id="filter-history">
-        <input
-          aria-label="Search"
-          type="text"
-          :placeholder="$t('search_history')"
-          v-model="filterText"
-        />
-      </li>
+      <div class="show-on-large-screen">
+        <li id="filter-history">
+          <input
+            aria-label="Search"
+            type="search"
+            :placeholder="$t('search')"
+            v-model="filterText"
+          />
+        </li>
+        <button class="icon">
+          <i class="material-icons">search</i>
+        </button>
+      </div>
     </ul>
     <virtual-list
       class="virtual-list"
@@ -23,7 +28,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">
@@ -157,9 +162,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>
@@ -196,11 +199,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>
@@ -263,7 +262,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 284px);
+  max-height: calc(100vh - 294px);
 
   [readonly] {
     cursor: default;
@@ -289,11 +288,6 @@ ol {
   flex-direction: column;
 }
 
-ul li,
-ol li {
-  display: flex;
-}
-
 .method-list-item {
   position: relative;
 
@@ -326,16 +320,16 @@ ol li {
 </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 +345,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")) || [];
+          : JSON.parse(window.localStorage.getItem("history")) || []
       return this.history.filter(entry => {
-        const filterText = this.filterText.toLowerCase();
+        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);
-        });
-      });
-    }
+          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,217 @@
+<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"
+
+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)
+        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("message", data => {
+          this.communication.log.push({
+            payload: data,
+            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
+      const 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}] ${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,182 @@
+<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"
+          />
+        </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: "",
+      },
+    }
+  },
+  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 = ""
+    },
+  },
+}
+</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>
-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

@@ -4,10 +4,9 @@
     :data-color="color"
     :class="{ active: active }"
     v-tooltip="{ content: name || color }"
+    :style="{ backgroundColor: color }"
   >
-    <span :style="{ backgroundColor: color }" class="preview">
-      <i v-if="active" class="material-icons activeTick">done</i>
-    </span>
+    <i v-if="active" class="material-icons activeTick">done</i>
   </div>
 </template>
 
@@ -17,9 +16,11 @@
   align-items: center;
   justify-content: center;
   margin: 8px;
+  padding: 16px;
   border-radius: 100%;
   border: 3px solid var(--bg-dark-color);
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
 
   &.fg {
     color: var(--act-color);
@@ -33,19 +34,8 @@
     border: 3px solid var(--fg-color);
   }
 
-  .preview {
-    vertical-align: middle;
-    display: inline-block;
-    border-radius: 100%;
-    padding: 16px;
-    position: relative;
-
-    .activeTick {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
+  .activeTick {
+    position: absolute;
   }
 }
 </style>
@@ -55,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>
@@ -25,7 +27,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.32);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -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,95 @@
+<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;
+
+  .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

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

functions/fb.js

@@ -1,6 +1,6 @@
-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 = {
@@ -11,12 +11,12 @@ const firebaseConfig = {
   storageBucket: "postwoman-api.appspot.com",
   messagingSenderId: "421993993223",
   appId: "1:421993993223:web:ec0baa8ee8c02ffa1fc6a2",
-  measurementId: "G-ERJ6025CEB"
-};
-firebase.initializeApp(firebaseConfig);
+  measurementId: "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
@@ -26,6 +26,7 @@ export const fb = {
   currentSettings: [],
   currentHistory: [],
   currentCollections: [],
+  currentEnvironments: [],
   writeFeeds: async (message, label) => {
     const dt = {
       createdOn: new Date(),
@@ -33,13 +34,13 @@ 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 => {
     usersCollection
@@ -47,7 +48,7 @@ export const fb = {
       .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 = {
@@ -56,22 +57,22 @@ 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;
+    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 => {
     usersCollection
@@ -79,7 +80,7 @@ export const fb = {
       .collection("history")
       .doc(entry.id)
       .delete()
-      .catch(e => console.error("error deleting", entry, e));
+      .catch(e => console.error("error deleting", entry, e))
   },
   clearHistory: () => {
     usersCollection
@@ -87,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
@@ -96,7 +97,7 @@ 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 => {
     const cl = {
@@ -104,21 +105,36 @@ export const fb = {
       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 => {
+    const ev = {
+      updatedOn: new Date(),
+      author: fb.currentUser.uid,
+      author_name: fb.currentUser.displayName,
+      author_image: fb.currentUser.photoURL,
+      environment: environment,
+    }
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("environments")
+      .doc("sync")
+      .set(ev)
+      .catch(e => console.error("error updating", ev, e))
+  },
+}
 
 // When a user logs in or out, save that in the store
 firebase.auth().onAuthStateChanged(user => {
   if (user) {
-    fb.currentUser = user;
+    fb.currentUser = user
     fb.currentUser.providerData.forEach(profile => {
       let us = {
         updatedOn: new Date(),
@@ -126,67 +142,80 @@ firebase.auth().onAuthStateChanged(user => {
         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 = [];
+        const feeds = []
         feedsRef.forEach(doc => {
-          const feed = doc.data();
-          feed.id = doc.id;
-          feeds.push(feed);
-        });
-        fb.currentFeeds = feeds;
-      });
+          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 = [];
+        const settings = []
         settingsRef.forEach(doc => {
-          const setting = doc.data();
-          setting.id = doc.id;
-          settings.push(setting);
-        });
-        fb.currentSettings = settings;
-      });
+          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 = [];
+        const history = []
         historyRef.forEach(doc => {
-          const entry = doc.data();
-          entry.id = doc.id;
-          history.push(entry);
-        });
-        fb.currentHistory = history;
-      });
+          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 = [];
+        const collections = []
         collectionsRef.forEach(doc => {
-          const collection = doc.data();
-          collection.id = doc.id;
-          collections.push(collection);
-        });
-        fb.currentCollections = collections[0].collection;
-      });
+          const collection = doc.data()
+          collection.id = doc.id
+          collections.push(collection)
+        })
+        fb.currentCollections = collections[0].collection
+      })
+
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("environments")
+      .onSnapshot(environmentsRef => {
+        const environments = []
+        environmentsRef.forEach(doc => {
+          const environment = doc.data()
+          environment.id = doc.id
+          environments.push(environment)
+        })
+        fb.currentEnvironments = environments[0].environment
+      })
   } else {
-    fb.currentUser = null;
+    fb.currentUser = null
   }
-});
+})

functions/headers.js

@@ -0,0 +1,124 @@
+export const commonHeaders = [
+  "WWW-Authenticate",
+  "Authorization",
+  "Proxy-Authenticate",
+  "Proxy-Authorization",
+  "Age",
+  "Cache-Control",
+  "Clear-Site-Data",
+  "Expires",
+  "Pragma",
+  "Warning",
+  "Accept-CH",
+  "Accept-CH-Lifetime",
+  "Early-Data",
+  "Content-DPR",
+  "DPR",
+  "Device-Memory",
+  "Save-Data",
+  "Viewport-Width",
+  "Width",
+  "Last-Modified",
+  "ETag",
+  "If-Match",
+  "If-None-Match",
+  "If-Modified-Since",
+  "If-Unmodified-Since",
+  "Vary",
+  "Connection",
+  "Keep-Alive",
+  "Accept",
+  "Accept-Charset",
+  "Accept-Encoding",
+  "Accept-Language",
+  "Expect",
+  "Max-Forwards",
+  "Cookie",
+  "Set-Cookie",
+  "Cookie2",
+  "Set-Cookie2",
+  "Access-Control-Allow-Origin",
+  "Access-Control-Allow-Credentials",
+  "Access-Control-Allow-Headers",
+  "Access-Control-Allow-Methods",
+  "Access-Control-Expose-Headers",
+  "Access-Control-Max-Age",
+  "Access-Control-Request-Headers",
+  "Access-Control-Request-Method",
+  "Origin",
+  "Service-Worker-Allowed",
+  "Timing-Allow-Origin",
+  "X-Permitted-Cross-Domain-Policies",
+  "DNT",
+  "Tk",
+  "Content-Disposition",
+  "Content-Length",
+  "Content-Type",
+  "Content-Encoding",
+  "Content-Language",
+  "Content-Location",
+  "Forwarded",
+  "X-Forwarded-For",
+  "X-Forwarded-Host",
+  "X-Forwarded-Proto",
+  "Via",
+  "Location",
+  "From",
+  "Host",
+  "Referer",
+  "Referrer-Policy",
+  "User-Agent",
+  "Allow",
+  "Server",
+  "Accept-Ranges",
+  "Range",
+  "If-Range",
+  "Content-Range",
+  "Cross-Origin-Opener-Policy",
+  "Cross-Origin-Resource-Policy",
+  "Content-Security-Policy",
+  "Content-Security-Policy-Report-Only",
+  "Expect-CT",
+  "Feature-Policy",
+  "Public-Key-Pins",
+  "Public-Key-Pins-Report-Only",
+  "Strict-Transport-Security",
+  "Upgrade-Insecure-Requests",
+  "X-Content-Type-Options",
+  "X-Download-Options",
+  "X-Frame-Options",
+  "X-Powered-By",
+  "X-XSS-Protection",
+  "Last-Event-ID",
+  "NEL",
+  "Ping-From",
+  "Ping-To",
+  "Report-To",
+  "Transfer-Encoding",
+  "TE",
+  "Trailer",
+  "Sec-WebSocket-Key",
+  "Sec-WebSocket-Extensions",
+  "Sec-WebSocket-Accept",
+  "Sec-WebSocket-Protocol",
+  "Sec-WebSocket-Version",
+  "Accept-Push-Policy",
+  "Accept-Signature",
+  "Alt-Svc",
+  "Date",
+  "Large-Allocation",
+  "Link",
+  "Push-Policy",
+  "Retry-After",
+  "Signature",
+  "Signed-Headers",
+  "Server-Timing",
+  "SourceMap",
+  "Upgrade",
+  "X-DNS-Prefetch-Control",
+  "X-Firefox-Spdy",
+  "X-Pingback",
+  "X-Requested-With",
+  "X-Robots-Tag",
+  "X-UA-Compatible",
+]

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,24 +1,36 @@
-import AxiosStrategy from "./strategies/AxiosStrategy";
-import FirefoxStrategy from "./strategies/FirefoxStrategy";
-import ChromeStrategy, { hasChromeExtensionInstalled } from "./strategies/ChromeStrategy";
+import AxiosStrategy from "./strategies/AxiosStrategy"
+import ExtensionStrategy, { hasExtensionInstalled } from "./strategies/ExtensionStrategy"
+import FirefoxStrategy from "./strategies/FirefoxStrategy"
+import ChromeStrategy, { hasChromeExtensionInstalled } from "./strategies/ChromeStrategy"
+
+const isExtensionsAllowed = ({ state }) =>
+  typeof state.postwoman.settings.EXTENSIONS_ENABLED === "undefined" ||
+  state.postwoman.settings.EXTENSIONS_ENABLED
 
 const runAppropriateStrategy = (req, store) => {
-  // 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)) {
+    if (hasExtensionInstalled()) {
+      return ExtensionStrategy(req, store)
+    }
+
+    // The following strategies are deprecated and kept to support older version of the extensions
+
+    // Chrome Provides a chrome object for scripts to access
+    // Check its availability to say whether you are in Google Chrome
+    if (window.chrome && hasChromeExtensionInstalled()) {
+      return ChromeStrategy(req, store)
+    }
+    // The firefox plugin injects a function to send requests through it
+    // If that is available, then we can use the FirefoxStrategy
+    if (window.firefoxExtSendRequest) {
+      return FirefoxStrategy(req, store)
+    }
   }
 
-  return AxiosStrategy(req, store);
+  return AxiosStrategy(req, store)
 }
 
-const sendNetworkRequest = (req, store) => 
-  runAppropriateStrategy(req, store)
-    .finally(() => window.$nuxt.$loading.finish());
+const sendNetworkRequest = (req, store) =>
+  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/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,56 +1,63 @@
-const EXTENSION_ID = "amknoiejhlmhancpahfcfcfhllgkpbld";
+const EXTENSION_ID = "amknoiejhlmhancpahfcfcfhllgkpbld"
 
 // Check if the Chrome Extension is present
 // The Chrome extension injects an empty span to help detection.
 // Also check for the presence of window.chrome object to confirm smooth operations
-export const hasChromeExtensionInstalled = () => {
-  return document.getElementById("chromePWExtensionDetect") !== null;
-}
+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
-      }
-    }, (message) => {
-      if (message.data.error) {
-        reject(message.data.error);
-      } else {
-        resolve(message.data.response);
-      }
-    }
-  );
-});
-
-const chromeWithProxy = (req, { state }) => new Promise((resolve, reject) => {
-  chrome.runtime.sendMessage(
-    EXTENSION_ID, {
-      messageType: "send-req",
-      data: {
-        config: {
-          method: "post",
-          url: state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
-          data: req
+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)
         }
       }
-    }, (message) => {
-      if (message.data.error) {
-        reject(error);
-      } else {
-        resolve(message.data.response.data);
+    )
+  })
+
+const chromeWithProxy = (req, { state }) =>
+  new Promise((resolve, reject) => {
+    chrome.runtime.sendMessage(
+      EXTENSION_ID,
+      {
+        messageType: "send-req",
+        data: {
+          config: {
+            method: "post",
+            url:
+              state.postwoman.settings.PROXY_URL ||
+              "https://postwoman.apollosoftware.xyz/",
+            data: req
+          }
+        }
+      },
+      ({ data }) => {
+        if (data.error) {
+          reject(error)
+        } else {
+          resolve(data.response.data)
+        }
       }
-    }
-  )
-});
+    )
+  })
 
 const chromeStrategy = (req, store) => {
   if (store.state.postwoman.settings.PROXY_ENABLED) {
-    return chromeWithProxy(req, store);
+    return chromeWithProxy(req, store)
   } else {
-    return chromeWithoutProxy(req, store);
+    return chromeWithoutProxy(req, store)
   }
 }
 
-export default chromeStrategy;
+export default chromeStrategy

functions/strategies/ExtensionStrategy.js

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

functions/strategies/FirefoxStrategy.js

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

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 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/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,264 +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",
-  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: "History",
-  collections: "Collections",
-  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_history: "search history",
-  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",
-  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: "Auth (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",
-  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_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",
-  turn_on: "Turn on",
-  login_first: "Login first",
-  paste_a_collection: "Paste a Collection",
-  import_from_sync: "Import from Sync"
-};

lang/en-US.json

@@ -0,0 +1,286 @@
+{
+  "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",
+  "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,90 +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"
-};

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,90 +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"
-};

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: "検索履歴",
-  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"
+}

lang/pt-BR.js

@@ -1,89 +0,0 @@
-export default {
-  home: "Home",
-  realtime: "Tempo real",
-  graphql: "GraphQL",
-  settings: "Configurações",
-  request: "Request",
-  install_pwa: "Instalar PWA",
-  support_us: "Nos ajude",
-  tweet: "Tweet",
-  options: "Opções",
-  communication: "Comunicação",
-  endpoint: "Endpoint",
-  schema: "Schema",
-  theme: "Tema",
-  subscribe: "Subscribe",
-  choose_language: "Escolher idioma",
-  shortcuts: "Atalhos",
-  send_request: "Enviar request",
-  save_to_collections: "Salvar nas coleções",
-  copy_request_link: "Copiar link da request",
-  reset_request: "Reiniciar request",
-  support_us_on: "Nos ajude no",
-  open_collective: "Abrir coletivamente",
-  paypal: "Paypal",
-  patreon: "Patreon",
-  javascript_code: "Codigo JavaScript",
-  method: "Método",
-  path: "Caminho",
-  label: "Label",
-  again: "Novamente",
-  content_type: "Content Type",
-  raw_input: "Raw input",
-  parameter_list: "Lista de parâmetros",
-  raw_request_body: "Raw request body",
-  show_code: "Mostrar código",
-  hide_code: "Esconder código",
-  show_prerequest_script: "Mostrar script de pré-request",
-  hide_prerequest_script: "Esconder script de pré-request",
-  authentication: "Autenticação",
-  authentication_type: "Tipo de autenticação",
-  include_in_url: "Incluir na url",
-  parameters: "Parâmetros",
-  expand_response: "Expandir response",
-  collapse_response: "Esconder response",
-  hide_preview: "Esconder preview",
-  preview_html: "Preview html",
-  history: "Histórico",
-  collections: "Coleções",
-  import_curl: "Importar curl",
-  import: "Importar",
-  generate_code: "Gerar código",
-  request_type: "Tipo de request",
-  generated_code: "Código gerado",
-  status: "Status",
-  headers: "Headers",
-  websocket: "Websocket",
-  waiting_for_connection: "(aguardando conexão)",
-  message: "Mensagem",
-  sse: "SSE",
-  server: "Servidor",
-  events: "Eventos",
-  url: "URL",
-  get_schema: "Get schema",
-  header_list: "Lista de headers",
-  add_new: "Adicionar novo",
-  response: "Response",
-  query: "Query",
-  queries: "Queries",
-  query_variables: "Variáveis",
-  mutations: "Mutações",
-  subscriptions: "Assinaturas",
-  types: "Tipos",
-  send: "Enviar",
-  background: "Fundo",
-  color: "Cor",
-  labels: "Labels",
-  multi_color: "Multi cor",
-  enabled: "Ativado",
-  disabled: "Desativado",
-  proxy: "Proxy",
-  postwoman_official_proxy_hosting: "Postwoman's alojamento proxy oficial",
-  read_the: "Leia o",
-  apollotv_privacy_policy: "ApolloTV Política de Privacidade",
-  contact_us: "Contate-Nos",
-  connect: "Conectar",
-  disconnect: "Desconectar",
-  start: "Começar",
-  stop: "Pare"
-};

lang/pt-BR.json

@@ -0,0 +1,92 @@
+{
+  "home": "Home",
+  "realtime": "Tempo real",
+  "graphql": "GraphQL",
+  "settings": "Configurações",
+  "request": "Request",
+  "install_pwa": "Instalar PWA",
+  "support_us": "Nos ajude",
+  "tweet": "Tweet",
+  "options": "Opções",
+  "communication": "Comunicação",
+  "endpoint": "Endpoint",
+  "schema": "Schema",
+  "theme": "Tema",
+  "subscribe": "Subscribe",
+  "choose_language": "Escolher idioma",
+  "shortcuts": "Atalhos",
+  "send_request": "Enviar request",
+  "save_to_collections": "Salvar nas coleções",
+  "copy_request_link": "Copiar link da request",
+  "reset_request": "Reiniciar request",
+  "support_us_on": "Nos ajude no",
+  "open_collective": "Abrir coletivamente",
+  "paypal": "Paypal",
+  "patreon": "Patreon",
+  "javascript_code": "Codigo JavaScript",
+  "method": "Método",
+  "path": "Caminho",
+  "label": "Label",
+  "again": "Novamente",
+  "content_type": "Content Type",
+  "raw_input": "Raw input",
+  "parameter_list": "Lista de parâmetros",
+  "raw_request_body": "Raw request body",
+  "show_code": "Mostrar código",
+  "hide_code": "Esconder código",
+  "show_prerequest_script": "Mostrar script de pré-request",
+  "hide_prerequest_script": "Esconder script de pré-request",
+  "authentication": "Autenticação",
+  "authentication_type": "Tipo de autenticação",
+  "include_in_url": "Incluir na url",
+  "parameters": "Parâmetros",
+  "expand_response": "Expandir response",
+  "collapse_response": "Esconder response",
+  "hide_preview": "Esconder preview",
+  "preview_html": "Preview html",
+  "history": "Histórico",
+  "collections": "Coleções",
+  "import_curl": "Importar curl",
+  "import": "Importar",
+  "generate_code": "Gerar código",
+  "request_type": "Tipo de request",
+  "generated_code": "Código gerado",
+  "status": "Status",
+  "headers": "Headers",
+  "websocket": "Websocket",
+  "waiting_for_connection": "(aguardando conexão)",
+  "message": "Mensagem",
+  "sse": "SSE",
+  "server": "Servidor",
+  "events": "Eventos",
+  "url": "URL",
+  "get_schema": "Get schema",
+  "header_list": "Lista de headers",
+  "add_new": "Adicionar novo",
+  "response": "Response",
+  "query": "Query",
+  "queries": "Queries",
+  "query_variables": "Variáveis",
+  "mutations": "Mutações",
+  "subscriptions": "Assinaturas",
+  "types": "Tipos",
+  "send": "Enviar",
+  "background": "Fundo",
+  "color": "Cor",
+  "labels": "Labels",
+  "multi_color": "Multi cor",
+  "enabled": "Ativado",
+  "disabled": "Desativado",
+  "proxy": "Proxy",
+  "postwoman_official_proxy_hosting": "Postwoman's alojamento proxy oficial",
+  "read_the": "Leia o",
+  "apollosw_privacy_policy": "Apollo Software Política de Privacidade",
+  "contact_us": "Contate-Nos",
+  "connect": "Conectar",
+  "disconnect": "Desconectar",
+  "start": "Começar",
+  "stop": "Pare",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments"
+}

lang/tr-TR.js

@@ -1,90 +0,0 @@
-export default {
-  home: "Ana Sayfa",
-  realtime: "Realtime",
-  graphql: "GraphQL",
-  settings: "Ayarlar",
-  request: "İstek",
-  install_pwa: "PWA yükle",
-  support_us: "Bize destek ol",
-  tweet: "Tweet",
-  options: "Options",
-  communication: "İletişim",
-  endpoint: "Endpoint",
-  schema: "Taslak",
-  theme: "Tema",
-  subscribe: "Abonelik",
-  choose_language: "Dil seç",
-  shortcuts: "Kısayollar",
-  send_request: "İstek gönder",
-  save_to_collections: "Koleksiyonları kaydet",
-  copy_request_link: "İstek adresini kopyala",
-  reset_request: "İstekleri resetle",
-  support_us_on: "Bizi destekle",
-  open_collective: "Open Collective",
-  paypal: "PayPal",
-  patreon: "Patreon",
-  javascript_code: "JavaScript code",
-  method: "Metot",
-  path: "Yol",
-  label: "Etiket",
-  again: "Yeniden",
-  content_type: "İçerik tipi",
-  raw_input: "Raw giriş",
-  parameter_list: "Parametre listesi",
-  raw_request_body: "Raw istek içeriği",
-  show_code: "Kodu göster",
-  hide_code: "Kodu gizle",
-  show_prerequest_script: "Pre-Request scriptini göster",
-  hide_prerequest_script: "Pre-Request scriptini gizle",
-  authentication: "Authentication",
-  authentication_type: "Authentication tipi",
-  include_in_url: "URL'den içeri aktar",
-  parameters: "Parametre",
-  expand_response: "Cevabı genişlet",
-  collapse_response: "Cevap daralt",
-  hide_preview: "Görüntülemeyi gizle",
-  preview_html: "HTML formatında görüntüle",
-  history: "Geçmiş",
-  collections: "Koleksiyonlar",
-  import_curl: "cURL içeri aktar",
-  import: "İçeri Aktar",
-  generate_code: "Kod Üret",
-  request_type: "Request tipi",
-  generated_code: "Üretilen Kod",
-  status: "Durum",
-  headers: "Headers",
-  websocket: "WebSocket",
-  waiting_for_connection: "(esperando por conexión)",
-  message: "Mesaj",
-  sse: "SSE",
-  server: "Server",
-  events: "Events",
-  url: "URL",
-  get_schema: "Taslak",
-  header_list: "Header listesi",
-  add_new: "Yeni Ekle",
-  response: "Cevap",
-  query: "Sorgu",
-  queries: "Sorgular",
-  query_variables: "Değişkenler",
-  mutations: "Değişimler",
-  subscriptions: "Aboneler",
-  types: "Tipler",
-  send: "Gönder",
-  background: "Arka Plan",
-  color: "Renk",
-  labels: "Etiketler",
-  multi_color: "Çoklu renk",
-  enabled: "Aktif",
-  disabled: "Aktif değil",
-  proxy: "Proxy",
-  postwoman_official_proxy_hosting:
-    "Proxy Oficial de Postwoman está hospedado en ApolloTV.",
-  read_the: "Leer la",
-  apollotv_privacy_policy: "ApolloTV gizlilik politikaları",
-  contact_us: "Bizimle iletişime geçin",
-  connect: "Bağlan",
-  disconnect: "Kesmek",
-  start: "Başla",
-  stop: "Durdurmak"
-};

lang/tr-TR.json

@@ -0,0 +1,92 @@
+{
+  "home": "Ana Sayfa",
+  "realtime": "Realtime",
+  "graphql": "GraphQL",
+  "settings": "Ayarlar",
+  "request": "İstek",
+  "install_pwa": "PWA yükle",
+  "support_us": "Bize destek ol",
+  "tweet": "Tweet",
+  "options": "Options",
+  "communication": "İletişim",
+  "endpoint": "Endpoint",
+  "schema": "Taslak",
+  "theme": "Tema",
+  "subscribe": "Abonelik",
+  "choose_language": "Dil seç",
+  "shortcuts": "Kısayollar",
+  "send_request": "İstek gönder",
+  "save_to_collections": "Koleksiyonları kaydet",
+  "copy_request_link": "İstek adresini kopyala",
+  "reset_request": "İstekleri resetle",
+  "support_us_on": "Bizi destekle",
+  "open_collective": "Open Collective",
+  "paypal": "PayPal",
+  "patreon": "Patreon",
+  "javascript_code": "JavaScript code",
+  "method": "Metot",
+  "path": "Yol",
+  "label": "Etiket",
+  "again": "Yeniden",
+  "content_type": "İçerik tipi",
+  "raw_input": "Raw giriş",
+  "parameter_list": "Parametre listesi",
+  "raw_request_body": "Raw istek içeriği",
+  "show_code": "Kodu göster",
+  "hide_code": "Kodu gizle",
+  "show_prerequest_script": "Pre-Request scriptini göster",
+  "hide_prerequest_script": "Pre-Request scriptini gizle",
+  "authentication": "Authentication",
+  "authentication_type": "Authentication tipi",
+  "include_in_url": "URL'den içeri aktar",
+  "parameters": "Parametre",
+  "expand_response": "Cevabı genişlet",
+  "collapse_response": "Cevap daralt",
+  "hide_preview": "Görüntülemeyi gizle",
+  "preview_html": "HTML formatında görüntüle",
+  "history": "Geçmiş",
+  "collections": "Koleksiyonlar",
+  "import_curl": "cURL içeri aktar",
+  "import": "İçeri Aktar",
+  "generate_code": "Kod Üret",
+  "request_type": "Request tipi",
+  "generated_code": "Üretilen Kod",
+  "status": "Durum",
+  "headers": "Headers",
+  "websocket": "WebSocket",
+  "waiting_for_connection": "(esperando por conexión)",
+  "message": "Mesaj",
+  "sse": "SSE",
+  "server": "Server",
+  "events": "Events",
+  "url": "URL",
+  "get_schema": "Taslak",
+  "header_list": "Header listesi",
+  "add_new": "Yeni Ekle",
+  "response": "Cevap",
+  "query": "Sorgu",
+  "queries": "Sorgular",
+  "query_variables": "Değişkenler",
+  "mutations": "Değişimler",
+  "subscriptions": "Aboneler",
+  "types": "Tipler",
+  "send": "Gönder",
+  "background": "Arka Plan",
+  "color": "Renk",
+  "labels": "Etiketler",
+  "multi_color": "Çoklu renk",
+  "enabled": "Aktif",
+  "disabled": "Aktif değil",
+  "proxy": "Proxy",
+  "postwoman_official_proxy_hosting": "Proxy Oficial de Postwoman está hospedado en Apollo Software.",
+  "read_the": "Leer la",
+  "apollosw_privacy_policy": "Apollo Software gizlilik politikaları",
+  "contact_us": "Bizimle iletişime geçin",
+  "connect": "Bağlan",
+  "disconnect": "Kesmek",
+  "start": "Başla",
+  "stop": "Durdurmak",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments"
+}

lang/zh-CN.js

@@ -1,89 +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: "复制请求链接",
-  reset_request: "重置请求",
-  support_us_on: "支持我们",
-  open_collective: "Open Collective",
-  paypal: "Paypal",
-  patreon: "Patreon",
-  javascript_code: "JavaScript代码",
-  method: "方法",
-  path: "路径",
-  label: "标签",
-  again: "重试",
-  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: "批量导入",
-  import: "导入",
-  generate_code: "生成代码",
-  request_type: "请求类型",
-  generated_code: "生成的代码",
-  status: "状态码",
-  headers: "请求头",
-  websocket: "Websocket",
-  waiting_for_connection: "（等待连接）",
-  message: "消息内容",
-  sse: "SSE",
-  server: "Server",
-  events: "事件",
-  url: "地址",
-  get_schema: "获取模式",
-  header_list: "请求头列表",
-  add_new: "添加",
-  response: "响应",
-  query: "查询",
-  queries: "查询",
-  query_variables: "变数",
-  mutations: "Mutations",
-  subscriptions: "订阅",
-  types: "种类",
-  send: "发送",
-  background: "背景",
-  color: "颜色",
-  labels: "标签",
-  multi_color: "彩色",
-  enabled: "已启用",
-  disabled: "已禁用",
-  proxy: "代理",
-  postwoman_official_proxy_hosting: "Postwoman的官方代理由ApolloTV托管",
-  read_the: "阅读",
-  apollotv_privacy_policy: "ApolloTV隐私政策",
-  contact_us: "联系我们",
-  connect: "连接",
-  disconnect: "断开",
-  start: "开始",
-  stop: "停止"
-};

lang/zh-CN.json

@@ -0,0 +1,92 @@
+{
+  "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": "复制请求链接",
+  "reset_request": "重置请求",
+  "support_us_on": "支持我们",
+  "open_collective": "Open Collective",
+  "paypal": "Paypal",
+  "patreon": "Patreon",
+  "javascript_code": "JavaScript代码",
+  "method": "方法",
+  "path": "路径",
+  "label": "标签",
+  "again": "重试",
+  "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": "批量导入",
+  "import": "导入",
+  "generate_code": "生成代码",
+  "request_type": "请求类型",
+  "generated_code": "生成的代码",
+  "status": "状态码",
+  "headers": "请求头",
+  "websocket": "Websocket",
+  "waiting_for_connection": "（等待连接）",
+  "message": "消息内容",
+  "sse": "SSE",
+  "server": "Server",
+  "events": "事件",
+  "url": "地址",
+  "get_schema": "获取模式",
+  "header_list": "请求头列表",
+  "add_new": "添加",
+  "response": "响应",
+  "query": "查询",
+  "queries": "查询",
+  "query_variables": "变数",
+  "mutations": "Mutations",
+  "subscriptions": "订阅",
+  "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": "联系我们",
+  "connect": "连接",
+  "disconnect": "断开",
+  "start": "开始",
+  "stop": "停止",
+  "syncHistory": "History",
+  "syncCollections": "Collections",
+  "syncEnvironments": "Environments"
+}