🔖 v1.9.0

Merge pull request #591 from liyasthomas/feature/env-manager
2020-02-24 18:43:14 +05:30 · 2020-02-24 18:36:14 +05:30 · 2020-02-24 14:14:18 +05:30 · 2020-02-24 13:52:30 +05:30 · 2020-02-24 12:21:00 +05:30 · 2020-02-24 00:44:16 -05:00
55 changed files with 3428 additions and 1440 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -98,3 +98,9 @@ sw.*

 # File explorer
 .directory
+
+# Tests screenshots
+tests/*/screenshots
+
+# Tests videos
+tests/*/videos
--- a/.travis.yml
+++ b/.travis.yml
@@ -40,6 +40,7 @@ install:
  - "npm install"

 before_script:
+  - "npm run build" # use nuxt build and start to run tests
  - "npm run test"

 script:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,158 @@
 # Changelog

+## [v1.9.0](https://github.com/liyasthomas/postwoman/tree/v1.9.0) (2020-02-24)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.8.0...v1.9.0)
+
+**Implemented enhancements:**
+
+- Disable SSL cert for websockets [\#557](https://github.com/liyasthomas/postwoman/issues/557)
+- Feature request: Keyboard shortcuts for folder creation [\#539](https://github.com/liyasthomas/postwoman/issues/539)
+- Friendly minded  GraphQL [\#468](https://github.com/liyasthomas/postwoman/issues/468)
+- multipart/form-data support [\#434](https://github.com/liyasthomas/postwoman/issues/434)
+- Implement pre-request and post-request scripts \(and request chaining\) [\#218](https://github.com/liyasthomas/postwoman/issues/218)
+- Environment management and configuration [\#147](https://github.com/liyasthomas/postwoman/issues/147)
+- POST request body editor reacts to the content type [\#594](https://github.com/liyasthomas/postwoman/pull/594) ([AndrewBastin](https://github.com/AndrewBastin))
+- Environment Mangement [\#591](https://github.com/liyasthomas/postwoman/pull/591) ([JacobAnavisca](https://github.com/JacobAnavisca))
+- GraphQL Query Autocompletion [\#590](https://github.com/liyasthomas/postwoman/pull/590) ([AndrewBastin](https://github.com/AndrewBastin))
+- Postman collection parsing [\#574](https://github.com/liyasthomas/postwoman/pull/574) ([JacobAnavisca](https://github.com/JacobAnavisca))
+- Added toggle to decide whether extensions should be used [\#551](https://github.com/liyasthomas/postwoman/pull/551) ([AndrewBastin](https://github.com/AndrewBastin))
+- Show Ctrl instead of Command for shortcuts non-Apple platforms [\#549](https://github.com/liyasthomas/postwoman/pull/549) ([AndrewBastin](https://github.com/AndrewBastin))
+- Updated GraphQL Query Variable Editor [\#534](https://github.com/liyasthomas/postwoman/pull/534) ([AndrewBastin](https://github.com/AndrewBastin))
+
+**Fixed bugs:**
+
+- Auto Theme Selection is kinda difficult to see [\#563](https://github.com/liyasthomas/postwoman/issues/563)
+- 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)
+- ⏬ Import a Postman's Collection [\#333](https://github.com/liyasthomas/postwoman/issues/333)
+
+**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))
+- 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))
+
+## [v1.8.0](https://github.com/liyasthomas/postwoman/tree/v1.8.0) (2020-01-28)
+
+[Full Changelog](https://github.com/liyasthomas/postwoman/compare/v1.5.0...v1.8.0)
+
+**Implemented enhancements:**
+
+- Sync collection with a cloud storage \(e.g: Google drive\) [\#507](https://github.com/liyasthomas/postwoman/issues/507)
+- Application contains many hard-coded strings that aren't translatable [\#488](https://github.com/liyasthomas/postwoman/issues/488)
+- ULR parsing and var auto creation [\#469](https://github.com/liyasthomas/postwoman/issues/469)
+- What about additional loaders: + Pug, TypeScript, SASS, material-vue ? [\#467](https://github.com/liyasthomas/postwoman/issues/467)
+- \[suggestion\] - Tests tab [\#465](https://github.com/liyasthomas/postwoman/issues/465)
+- cookie not found support [\#443](https://github.com/liyasthomas/postwoman/issues/443)
+- Feature Request: Consumer Driven Contract Testing [\#420](https://github.com/liyasthomas/postwoman/issues/420)
+- Feature Request: Support OAuth2/OIDC [\#337](https://github.com/liyasthomas/postwoman/issues/337)
+- Add DB cache [\#26](https://github.com/liyasthomas/postwoman/issues/26)
+- Update asset/\*. js to  asset/\*. ts. [\#517](https://github.com/liyasthomas/postwoman/pull/517) ([Sn005](https://github.com/Sn005))
+- Auth [\#513](https://github.com/liyasthomas/postwoman/pull/513) ([liyasthomas](https://github.com/liyasthomas))
+- Support for Google Chrome Extension [\#512](https://github.com/liyasthomas/postwoman/pull/512) ([AndrewBastin](https://github.com/AndrewBastin))
+- GraphQL query validation based on schema [\#508](https://github.com/liyasthomas/postwoman/pull/508) ([AndrewBastin](https://github.com/AndrewBastin))
+- Syntax Error marking in GraphQL query editor [\#505](https://github.com/liyasthomas/postwoman/pull/505) ([AndrewBastin](https://github.com/AndrewBastin))
+- Refactoring proxy handling to be done in strategies [\#500](https://github.com/liyasthomas/postwoman/pull/500) ([AndrewBastin](https://github.com/AndrewBastin))
+- Firefox Extension compatibility [\#494](https://github.com/liyasthomas/postwoman/pull/494) ([AndrewBastin](https://github.com/AndrewBastin))
+- Network Strategies [\#487](https://github.com/liyasthomas/postwoman/pull/487) ([AndrewBastin](https://github.com/AndrewBastin))
+- chore\(oauth\): Added method signatures as per JSDoc conventions [\#486](https://github.com/liyasthomas/postwoman/pull/486) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- GraphQL Type Highlight and Links [\#479](https://github.com/liyasthomas/postwoman/pull/479) ([AndrewBastin](https://github.com/AndrewBastin))
+
+**Fixed bugs:**
+
+- Warn the user if name field was left blank while creating a new collection [\#515](https://github.com/liyasthomas/postwoman/issues/515)
+- 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))
+- even merge [\#528](https://github.com/liyasthomas/postwoman/pull/528) ([liyasthomas](https://github.com/liyasthomas))
+- Refactor [\#523](https://github.com/liyasthomas/postwoman/pull/523) ([liyasthomas](https://github.com/liyasthomas))
+- chore\(deps\): bump v-tooltip from 2.0.2 to 2.0.3 [\#521](https://github.com/liyasthomas/postwoman/pull/521) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- chore\(deps-dev\): bump cypress from 3.8.2 to 3.8.3 [\#520](https://github.com/liyasthomas/postwoman/pull/520) ([dependabot-preview[bot]](https://github.com/apps/dependabot-preview))
+- Feature/post request tests [\#518](https://github.com/liyasthomas/postwoman/pull/518) ([nickpalenchar](https://github.com/nickpalenchar))
+- Validations for edit and create collections activity [\#516](https://github.com/liyasthomas/postwoman/pull/516) ([jamesgeorge007](https://github.com/jamesgeorge007))
+- 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)
@@ -29,6 +182,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)
@@ -39,7 +193,6 @@
 - 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:**
@@ -86,7 +239,6 @@
 - Intent to translate [\#367](https://github.com/liyasthomas/postwoman/issues/367)
 - Static builds on releases [\#352](https://github.com/liyasthomas/postwoman/issues/352)
 - fix:SSE onclose handle [\#349](https://github.com/liyasthomas/postwoman/issues/349)
- ⏬ Import a Postman's Collection [\#333](https://github.com/liyasthomas/postwoman/issues/333)
 - \[Request\] Use responses for next request? [\#324](https://github.com/liyasthomas/postwoman/issues/324)
 - Make response body area expandable [\#294](https://github.com/liyasthomas/postwoman/issues/294)
 - Mobile can't see console for request errors [\#283](https://github.com/liyasthomas/postwoman/issues/283)
@@ -148,6 +300,158 @@
 - 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))

+## [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)
+


 \* *This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)*
--- a/README.md
+++ b/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>
@@ -204,7 +204,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.**

@@ -315,7 +315,10 @@ 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

--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -22,13 +22,11 @@ $responsiveWidth: 768px;
 ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
-  border-radius: 4px;
-  background-color: var(--bg-light-color);
+  background-color: var(--bg-dark-color);
 }

 ::-webkit-scrollbar-thumb {
  background-color: var(--fg-light-color);
-  border-radius: 8px;

  &:hover {
    background-color: var(--fg-color);
@@ -60,9 +58,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 +74,10 @@ a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
+
+  &.link {
+    color: var(--ac-color);
+  }
 }

 header,
@@ -92,7 +94,7 @@ footer {
 .wrapper {
  min-height: 100vh;
  display: flex;
-  flex-direction: column;
+  flex-flow: column nowrap;
 }

 .wrapper .page {
@@ -146,7 +148,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 {
@@ -173,6 +176,7 @@ nav.primary-nav {

  svg {
    fill: var(--fg-light-color);
+    transition: all 0.2s ease-in-out;
  }

  a {
@@ -186,7 +190,6 @@ nav.primary-nav {
    color: var(--fg-light-color);
    fill: var(--fg-light-color);
    margin: 8px 0;
-    transition: all 0.2s ease-in-out;

    &:hover {
      color: var(--fg-color);
@@ -246,7 +249,7 @@ nav.secondary-nav {
 }

 .footer {
-  flex-direction: column;
+  flex-flow: column nowrap;
 }

 h1,
@@ -263,11 +266,16 @@ hr {
  border-bottom: 1px dashed var(--brd-color);
 }

+p {
+  transition: all 0.2s ease-in-out;
+}
+
 .tooltip {
  $bgcolor: var(--tt-color);
  $fgcolor: var(--fg-color);
  display: block !important;
  z-index: 10000;
+  transition: all 0.2s ease-in-out;

  .tooltip-inner {
    background: $bgcolor;
@@ -422,7 +430,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 +444,6 @@ button {
      color: var(--fg-color);
      fill: var(--fg-color);
      box-shadow: none;
-      transition: all 0.2s ease-in-out;
    }
  }

@@ -472,8 +478,19 @@ 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;
+}
+
+fieldset:target,
+section:target {
+  animation: highlight 2s ease;
+}
+
+@keyframes highlight {
+  50% {
+    box-shadow: 0 0 0 2px var(--ac-color);
+  }
 }

 legend {
@@ -483,6 +500,7 @@ legend {
  color: var(--fg-color);
  font-weight: 700;
  cursor: pointer;
+  transition: all 0.2s ease-in-out;

  * {
    vertical-align: middle;
@@ -538,6 +556,7 @@ input[type="radio"],
  display: none;
 }

+.method,
 kbd,
 select,
 input,
@@ -564,7 +583,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 +615,14 @@ pre {
 .select-wrapper {
  position: relative;

+  input {
+    text-transform: uppercase;
+  }
+
+  .trigger {
+    width: 100%;
+  }
+
  &:after {
    display: inline-block;
    position: absolute;
@@ -661,6 +697,7 @@ input[type="checkbox"] {
 label {
  padding: 4px;
  color: var(--fg-light-color);
+  transition: all 0.2s ease-in-out;
 }

 ul,
@@ -679,7 +716,7 @@ ol {
 ul li,
 ol li {
  display: inline-flex;
-  flex-direction: column;
+  flex-flow: column nowrap;
  flex-grow: 1;
  justify-content: center;
 }
@@ -693,7 +730,7 @@ ol li {

  * {
    display: inline-flex;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
@@ -773,27 +810,19 @@ 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;
-    // }
  }
 }

 section {
  display: flex;
  flex-wrap: wrap;
+  border-radius: 16px;
 }

 .tab {
@@ -873,18 +902,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 +938,7 @@ input[type="radio"]:checked + label + .tab {

  ul,
  ol {
-    flex-direction: column;
+    flex-flow: column nowrap;
  }

  ul li,
--- a/components/ace-editor.vue
+++ b/components/ace-editor.vue
@@ -55,8 +55,8 @@ export default {

  mounted() {
    const editor = ace.edit(this.$refs.editor, {
-      theme: "ace/theme/" + this.defineTheme(),
-      mode: "ace/mode/" + this.lang,
+      theme: `ace/theme/${this.defineTheme()}`,
+      mode: `ace/mode/${this.lang}`,
      ...this.options
    });

@@ -76,11 +76,10 @@ export default {
    defineTheme() {
      if (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
+      );
    }
  },

--- a/components/collections/addCollection.vue
+++ b/components/collections/addCollection.vue
@@ -21,6 +21,7 @@
            type="text"
            v-model="name"
            :placeholder="$t('my_new_collection')"
+            @keyup.enter="addNewCollection"
          />
        </li>
      </ul>
@@ -42,6 +43,8 @@
 </template>

 <script>
+import { fb } from "../../functions/fb";
+
 export default {
  props: {
    show: Boolean
@@ -55,15 +58,25 @@ export default {
    };
  },
  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");
+        this.$toast.info($t("invalid_collection_name"));
        return;
      }
      this.$store.commit("postwoman/addNewCollection", {
        name: this.$data.name
      });
      this.$emit("hide-modal");
+      this.syncCollections();
    },
    hideModal() {
      this.$emit("hide-modal");
--- a/components/collections/addFolder.vue
+++ b/components/collections/addFolder.vue
@@ -21,6 +21,7 @@
            type="text"
            v-model="name"
            :placeholder="$t('my_new_folder')"
+            @keyup.enter="addNewFolder"
          />
        </li>
      </ul>
--- a/components/collections/editCollection.vue
+++ b/components/collections/editCollection.vue
@@ -60,7 +60,7 @@ export default {
  methods: {
    saveCollection() {
      if (!this.$data.name) {
-        this.$toast.info("Please provide a valid name for the collection");
+        this.$toast.info($t("invalid_collection_name"));
        return;
      }
      const collectionUpdated = {
--- a/components/collections/importExportCollections.vue
+++ b/components/collections/importExportCollections.vue
@@ -120,20 +120,54 @@ export default {
      reader.onload = event => {
        let content = event.target.result;
        let collections = JSON.parse(content);
-        this.$store.commit("postwoman/replaceCollections", collections);
+        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]);
-      this.fileImported();
    },
    importFromJSON() {
      let reader = new FileReader();
      reader.onload = event => {
        let content = event.target.result;
        let collections = JSON.parse(content);
+        if (collections[0]) {
+          let [name, folders, requests] = Object.keys(collections[0]);
+          if (
+            name === "name" &&
+            folders === "folders" &&
+            requests === "requests"
+          ) {
+            // 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]);
-      this.fileImported();
    },
    exportJSON() {
      let text = this.collectionJson;
@@ -161,6 +195,129 @@ export default {
      this.$toast.info(this.$t("file_imported"), {
        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;
    }
  }
 };
--- a/components/collections/index.vue
+++ b/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,7 +92,7 @@ TODO:
        <span>{{ $t("generate_docs") }}</span>
      </button>
    </nuxt-link>
-  </div>
+  </pw-section>
 </template>

 <style scoped lang="scss">
@@ -113,6 +113,7 @@ import { fb } from "../../functions/fb";
 export default {
  components: {
    collection,
+    "pw-section": () => import("../section"),
    addCollection: () => import("./addCollection"),
    addFolder: () => import("./addFolder"),
    editCollection: () => import("./editCollection"),
@@ -142,6 +143,15 @@ export default {
      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;
@@ -216,6 +226,9 @@ export default {
        }
      }
    }
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener);
  }
 };
 </script>
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/saveRequestAs.vue
@@ -104,6 +104,8 @@
 </template>

 <script>
+import { fb } from "../../functions/fb";
+
 export default {
  props: {
    show: Boolean,
@@ -180,6 +182,15 @@ export default {
    }
  },
  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;
@@ -204,6 +215,7 @@ export default {
      });

      this.hideModal();
+      this.syncCollections();
    },
    hideModal() {
      this.$emit("hide-modal");
--- a/components/environments/addEnvironment.vue
+++ b/components/environments/addEnvironment.vue
@@ -0,0 +1,94 @@
+<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/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>
--- a/components/environments/editEnvironment.vue
+++ b/components/environments/editEnvironment.vue
@@ -0,0 +1,221 @@
+<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/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>
--- a/components/environments/environment.vue
+++ b/components/environments/environment.vue
@@ -0,0 +1,65 @@
+<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>
--- a/components/environments/importExportEnvironment.vue
+++ b/components/environments/importExportEnvironment.vue
@@ -0,0 +1,173 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <h3 class="title">Import / Export Environment</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/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>
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <pw-section
+    class="green"
+    icon="history"
+    :label="$t('environment')"
+    ref="environment"
+  >
+    <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 - 276px);
+}
+
+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("../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>
--- a/components/firebase/feeds.vue
+++ b/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="90"
+    :remain="Math.min(5, 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>
@@ -38,6 +35,23 @@
 .virtual-list {
  max-height: calc(100vh - 288px);
 }
+
+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>
@@ -58,23 +72,6 @@ export default {
      this.$toast.error(this.$t("deleted"), {
        icon: "delete"
      });
-    },
-    saveFeed(feed) {
-      const dataToWrite = JSON.stringify(feed.message, null, 2);
-      const file = new Blob([dataToWrite], { type: "application/json" });
-      const a = document.createElement("a"),
-        url = URL.createObjectURL(file);
-      a.href = url;
-      a.download = (feed.label + " on " + Date()).replace(/\./g, "[dot]");
-      document.body.appendChild(a);
-      a.click();
-      this.$toast.success(this.$t("download_started"), {
-        icon: "done"
-      });
-      setTimeout(() => {
-        document.body.removeChild(a);
-        window.URL.revokeObjectURL(url);
-      }, 1000);
    }
  }
 };
--- a/components/firebase/inputform.vue
+++ b/components/firebase/inputform.vue
@@ -1,39 +1,50 @@
 <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";

@@ -46,6 +57,9 @@ export default {
  },
  methods: {
    formPost() {
+      if (!(this.message || this.label)) {
+        return;
+      }
      fb.writeFeeds(this.message, this.label);
      this.message = null;
      this.label = null;
--- a/components/firebase/login.vue
+++ b/components/firebase/login.vue
@@ -57,9 +57,9 @@ export default {
      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) {
+            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
              icon: "sync",
              duration: null,
              closeOnSwipe: false,
@@ -86,9 +86,9 @@ export default {
      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) {
+            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
              icon: "sync",
              duration: null,
              closeOnSwipe: false,
--- a/components/graphql/argument.vue
+++ b/components/graphql/argument.vue
@@ -8,7 +8,7 @@
  </span>
 </template>

-<style></style>
+<style scoped lang="scss"></style>

 <script>
 import typelink from "./typelink";
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -28,7 +28,7 @@
  </div>
 </template>

-<style>
+<style scoped lang="scss">
 .field-box {
  padding: 16px;
  margin: 4px;
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -7,7 +7,9 @@ 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 {
@@ -46,10 +48,10 @@ export default {
      }
    },
    theme() {
-      this.editor.setTheme("ace/theme/" + this.defineTheme());
+      this.editor.setTheme(`ace/theme/${this.defineTheme()}`);
    },
    lang(value) {
-      this.editor.getSession().setMode("ace/mode/" + value);
+      this.editor.getSession().setMode(`ace/mode/${value}`);
    },
    options(value) {
      this.editor.setOptions(value);
@@ -57,12 +59,48 @@ export default {
  },

  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,
+      theme: `ace/theme/${this.defineTheme()}`,
+      mode: `ace/mode/${this.lang}`,
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
      ...this.options
    });

+    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;
@@ -101,14 +139,14 @@ export default {

          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,
+              gql
+                .validate(this.validationSchema, doc)
+                .map(({ locations, message }) => ({
+                  row: locations[0].line - 1,
+                  column: locations[0].column - 1,
+                  text: message,
                  type: "error"
-                };
-              })
+                }))
            );
          }
        } catch (e) {
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -14,7 +14,7 @@
  </div>
 </template>

-<style>
+<style scoped lang="scss">
 .type-box {
  padding: 16px;
  margin: 4px 0;
--- a/components/graphql/typelink.vue
+++ b/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;
--- a/components/history.vue
+++ b/components/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"
@@ -289,11 +294,6 @@ ol {
  flex-direction: column;
 }

-ul li,
-ol li {
-  display: flex;
-}
-
 .method-list-item {
  position: relative;

--- a/components/modal.vue
+++ b/components/modal.vue
@@ -25,7 +25,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;
--- a/components/section.vue
+++ b/components/section.vue
@@ -15,7 +15,7 @@
  </fieldset>
 </template>

-<style>
+<style scoped lang="scss">
 fieldset.no-colored-frames legend {
  color: var(--fg-color);
 }
--- a/components/settings/swatch.vue
+++ b/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>
--- a/functions/editorutils.js
+++ b/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";
+}
--- a/functions/fb.js
+++ b/functions/fb.js
@@ -26,6 +26,7 @@ export const fb = {
  currentSettings: [],
  currentHistory: [],
  currentCollections: [],
+  currentEnvironments: [],
  writeFeeds: async (message, label) => {
    const dt = {
      createdOn: new Date(),
@@ -112,6 +113,21 @@ export const fb = {
      .doc("sync")
      .set(cl)
      .catch(e => console.error("error updating", cl, e));
+  },
+  writeEnvironments: async environment => {
+    const ev = {
+      updatedOn: new Date(),
+      author: fb.currentUser.uid,
+      author_name: fb.currentUser.displayName,
+      author_image: fb.currentUser.photoURL,
+      environment: environment
+    };
+    usersCollection
+      .doc(fb.currentUser.uid)
+      .collection("environments")
+      .doc("sync")
+      .set(ev)
+      .catch(e => console.error("error updating", ev, e));
  }
 };

@@ -186,6 +202,19 @@ firebase.auth().onAuthStateChanged(user => {
        });
        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;
  }
--- a/functions/headers.js
+++ b/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"
+];
--- a/functions/network.js
+++ b/functions/network.js
@@ -1,24 +1,42 @@
 import AxiosStrategy from "./strategies/AxiosStrategy";
+import ExtensionStrategy, {
+  hasExtensionInstalled
+} from "./strategies/ExtensionStrategy";
 import FirefoxStrategy from "./strategies/FirefoxStrategy";
-import ChromeStrategy, { hasChromeExtensionInstalled } from "./strategies/ChromeStrategy";
+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()) {
+  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); 
+    }
+    // The firefox plugin injects a function to send requests through it
+    // If that is available, then we can use the FirefoxStrategy
+    if (window.firefoxExtSendRequest) {
+      return FirefoxStrategy(req, store);
+    }
  }

  return AxiosStrategy(req, store);
-}
+};

-const sendNetworkRequest = (req, store) => 
-  runAppropriateStrategy(req, store)
-    .finally(() => window.$nuxt.$loading.finish());
+const sendNetworkRequest = (req, store) =>
+  runAppropriateStrategy(req, store).finally(() =>
+    window.$nuxt.$loading.finish()
+  );

 export { sendNetworkRequest };
--- a/functions/strategies/ChromeStrategy.js
+++ b/functions/strategies/ChromeStrategy.js
@@ -3,47 +3,54 @@ 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.apollotv.xyz/",
+            data: req
+          }
+        }
+      },
+      ({ data }) => {
+        if (data.error) {
+          reject(error);
+        } else {
+          resolve(data.response.data);
+        }
      }
-    }
-  )
-});
+    );
+  });

 const chromeStrategy = (req, store) => {
  if (store.state.postwoman.settings.PROXY_ENABLED) {
@@ -51,6 +58,6 @@ const chromeStrategy = (req, store) => {
  } else {
    return chromeWithoutProxy(req, store);
  }
-}
+};

 export default chromeStrategy;
--- a/functions/strategies/ExtensionStrategy.js
+++ b/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.apollotv.xyz/",
+    data: req
+  });
+  return data;
+};
+
+const extensionWithoutProxy = async (req, _store) => {
+  const res = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest(req);
+  return res;
+};
+
+const extensionStrategy = (req, store) => {
+  if (store.state.postwoman.settings.PROXY_ENABLED) {
+    return extensionWithProxy(req, store);
+  }
+  return extensionWithoutProxy(req, store);
+};
+
+export default extensionStrategy;
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -27,7 +27,6 @@ export default {
  method: "Method",
  path: "Path",
  label: "Label",
-  again: "Again",
  content_type: "Content Type",
  raw_input: "Raw input",
  parameter_list: "Parameter List",
@@ -46,6 +45,14 @@ export default {
  preview_html: "Preview HTML",
  history: "History",
  collections: "Collections",
+  environment: "Environment",
+  new_environment: "New Environment",
+  my_new_environment: "My New Environment",
+  edit_environment: "Edit Environment",
+  env_variable_list: "Variable List",
+  invalid_environment_name: "Please provide a valid name for the environment",
+  use_environment: "Use Environment",
+  add_one_variable: "(add at least one variable)",
  import_curl: "Import cURL",
  import: "Import",
  generate_code: "Generate code",
@@ -111,7 +118,7 @@ export default {
  no_label: "No label",
  prerequest_script: "Pre-Request Script",
  no_prerequest_script: "No pre-request script",
-  search_history: "search history",
+  search: "Search",
  history_empty: "History is empty",
  history_deleted: "History Deleted",
  clear: "Clear",
@@ -141,6 +148,7 @@ export default {
  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",
@@ -163,7 +171,7 @@ export default {
  kinda_dark: "Kinda Dark",
  clearly_white: "Clearly White",
  just_black: "Just Black",
-  auto_system: "Auth (system)",
+  auto_system: "Auto (system)",
  green: "Green",
  yellow: "Yellow",
  pink: "Pink",
@@ -222,6 +230,7 @@ export default {
  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",
@@ -247,6 +256,8 @@ export default {
  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",
@@ -257,8 +268,10 @@ export default {
  sync: "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"
+  paste_a_note: "Paste a note",
+  import_from_sync: "Import from Sync",
+  notes: "Notes"
 };
--- a/lang/es-ES.js
+++ b/lang/es-ES.js
@@ -86,5 +86,179 @@ export default {
  connect: "Conectar",
  disconnect: "Desconectar",
  start: "Comienzo",
-  stop: "Detener"
+  stop: "Detener",
+  access_token: "Token de acceso",
+  token_list: "Lista de token",
+  get_token: "Obtener un nuevo token",
+  manage_token: "Gestionar el token de acceso",
+  save_token: "Guardar el token de acceso",
+  use_token: "Usar token guardado",
+  request_token: "Petición del token",
+  save_token_req: "Guardar la petición del token",
+  manage_token_req: "Gestionar la petición del token",
+  use_token_req: "Usar el token de la petición",
+  token_req_name: "Nombre de la petición",
+  token_req_details: "Petición de detalles",
+  token_name: "Nombre del token",
+  oidc_discovery_url: "URL de descubrimiento de OIDC",
+  auth_url: "URL de autenticación",
+  access_token_url: "URL de token de acceso",
+  client_id: "ID del cliente",
+  scope: "Alcance",
+  state: "Estado",
+  token_req_list: "Lista de solicitud de token",
+  no_path: "Sin ruta",
+  no_label: "Sin etiqueta",
+  prerequest_script: "Pre-Request Script",
+  no_prerequest_script: "Script sin pre-requisito",
+  search: "buscar historial",
+  history_empty: "Historial vacío",
+  history_deleted: "Historial borrado",
+  clear: "Limpiar",
+  clear_all: "Limpiar todo",
+  cleared: "Limpiado",
+  close: "Cerrar",
+  sort: "Ordenar",
+  time: "Tiempo",
+  duration: "Duración",
+  no_duration: "Sin duración",
+  show_more: "Mostrar más",
+  hide_more: "Ocultar más",
+  collection: "Colección",
+  current_collection: "Actual colección",
+  select_collection: "Seleccionar una colección",
+  create_collection: "Crear una colección",
+  new: "Nuevo",
+  import_export: "Importar / Exportar",
+  more: "Más",
+  folder: "Directorio",
+  new_folder: "Nuevo directorio",
+  my_new_folder: "Mi nuevo directorio",
+  folder_empty: "Directorio vacío",
+  edit_folder: "Editar directorio",
+  edit: "Editar",
+  delete: "Borrar",
+  deleted: "Borrado",
+  undo: "Deshacer",
+  collection_empty: "Colección vacía",
+  new_collection: "Nueva colección",
+  my_new_collection: "Mi nueva colección",
+  edit_collection: "Editar colección",
+  edit_request: "Editar petición",
+  save_request_as: "Guardar petición como",
+  export: "Exportar",
+  connecting_to: "Conectando a {name}...",
+  connected: "Conectado",
+  connected_to: "Conectado a {name}",
+  disconnected: "Desconectado",
+  disconnected_from: "Desconectado desde {name}",
+  something_went_wrong: "Algo ha salido mal!",
+  error_occurred: "Ha ocurrido un error.",
+  browser_support_sse:
+    "Este navegador parace no tener soporte a los eventos enviados desde el servidor.",
+  log: "Bitácora",
+  no_url: "Sin URL",
+  run_query: "Ejecutar consulta",
+  copy_query: "Copiar consulta",
+  kinda_dark: "Un poco oscúro",
+  clearly_white: "Claramento blanco",
+  just_black: "Solo Negro",
+  auto_system: "Autenticación (sistema)",
+  green: "Verde",
+  yellow: "Amarillo",
+  pink: "Rosado",
+  red: "Rojo",
+  purple: "Púrpura",
+  orange: "Anaranjado",
+  cyan: "Cian",
+  blue: "Azul",
+  loading: "Cargando...",
+  fetching: "Recuperando...",
+  waiting_send_req: "(esperando para enviar la petición)",
+  cancel: "Cancelar",
+  save: "Guardar",
+  dismiss: "Descartar",
+  are_you_sure: "Está seguro?",
+  yes: "Sí",
+  no: "No",
+  restore: "Restaurar",
+  add_star: "Agregar estrella",
+  remove_star: "Eliminar estrella",
+  nothing_found: "No se encontró nada",
+  replace_current: "Reemplaza el actual",
+  replace_json: "Reemplazar con JSON",
+  preserve_current: "Preservar el actual",
+  import_json: "Importar desde JSON",
+  download_file: "Descargar archivo",
+  upload_file: "Cargar archivo",
+  copy_response: "Copiar respuesta",
+  copy_code: "Copiar codigo",
+  copy_schema: "Copiar Esquema",
+  use_request: "Usar la petición",
+  documentation: "Documentación",
+  docs: "Documentos",
+  reset_default: "Reiniciar valores por defecto",
+  fields: "CAMPOS",
+  deprecated: "OBSOLETO",
+  add_one_header: "(agregar al menos una cabecera)",
+  add_one_parameter: "(agregar al menos un parámetro)",
+  header_count: "cabecera {count}",
+  parameter_count: "parámetro {count}",
+  variable_count: "variable {count}",
+  value_count: "valor {count}",
+  send_request_first: "Enviar primero la petición",
+  generate_docs: "Generar la Documentación",
+  generate_docs_message:
+    "Importar cualquier Colección de Postwoman para Generar la Documentación sobre la marcha.",
+  generate_docs_first: "Generar primero la documentación",
+  docs_generated: "Documentación generada",
+  import_collections: "Importar colecciones",
+  optional: "(opcional)",
+  json: "JSON",
+  none: "Nada",
+  username: "Nombre de usuario",
+  password: "Contrasaeña",
+  token: "Token",
+  payload: "Carga",
+  choose_file: "Seleccione un archivo",
+  file_imported: "Archivo imporado",
+  f12_details: "(F12 para ver detalles)",
+  we_use_cookies: "Usamos las cookies",
+  copied_to_clipboard: "Copiado al portapapeles",
+  finished_in: "Terminado en {duration}ms",
+  check_console_details: "Verifique la consola para más detalles.",
+  download_started: "Inició la descarga",
+  url_invalid_format: "La URL no está formateado apropiadamente",
+  curl_invalid_format: "El cURL no está formateado apropiadamente",
+  enable_proxy: "Pruebe habilitando el Proxy",
+  complete_config_urls: "Por favor, termine la configuración de las urls.",
+  token_request_saved: "La petición de tToken ha sido guardada",
+  donate_info1:
+    "Si le ha gustado su productividad usando Postwoman, considere hacer una donación como un signo de su apreciación.",
+  donate_info2:
+    "Puede ayudar al desarrollo de Postwoman mediante los siguientes métodos:",
+  one_time_recurring: "Una vez o recurrente",
+  one_time: "Una vez",
+  recurring: "Recurrente",
+  wiki: "Wiki",
+  error: "Error",
+  go_home: "Ir al inicio",
+  reload: "Recargar",
+  enter_curl: "Intruduzca cURL",
+  empty: "Vacío",
+  extensions: "Extensiones",
+  extensions_info1: "Extensión del navegador que simplifica el acceso a Postwoman",
+  extensions_info2: "Obtener la extensión del navegador de Postwoman!",
+  installed: "Instalado",
+  login_with: "Iniciar sesión con",
+  logged_out: "Sesión cerreda",
+  logout: "Cerrar sesión",
+  account: "Cuenta",
+  sync: "Sync",
+  syncHistory: "Historial",
+  syncCollections: "Colecciones",
+  turn_on: "Encender",
+  login_first: "Inicie sesión primero",
+  paste_a_collection: "Pegar una Colección",
+  import_from_sync: "Importar desde Sync"
 };
--- a/lang/fr-FR.js
+++ b/lang/fr-FR.js
@@ -86,5 +86,179 @@ export default {
  connect: "Relier",
  disconnect: "Déconnecter",
  start: "Début",
-  stop: "Arrêtez"
+  stop: "Arrêtez",
+  access_token: "Token d'accès",
+  token_list: "Liste des Tokens",
+  get_token: "Obtenir un nouveau Token",
+  manage_token: "Gérer le Token",
+  save_token: "Sauvegarder le Token",
+  use_token: "Utiliser un Token",
+  request_token: "Demander un Token",
+  save_token_req: "Sauvegarder la requête ",
+  manage_token_req: "Gérer la requête avec Token",
+  use_token_req: "Utiliser la requête avec Token",
+  token_req_name: "Nom de la requête",
+  token_req_details: "Détails de la requête",
+  token_name: "Nom du Token",
+  oidc_discovery_url: "OIDC Discovery URL",
+  auth_url: "Auth URL",
+  access_token_url: "URL du Token d'accès",
+  client_id: "Client ID",
+  scope: "Scope",
+  state: "État",
+  token_req_list: "Liste des requêtes avec Token",
+  no_path: "Aucun chemin",
+  no_label: "Aucun label",
+  prerequest_script: "Pre-Request Script",
+  no_prerequest_script: "No pre-request script",
+  search: "Historique de la recherche",
+  history_empty: "L'historique est vide",
+  history_deleted: "Historique supprimé",
+  clear: "Nettoyer",
+  clear_all: "Tout nettoyer",
+  cleared: "Nettoyé",
+  close: "Fermer",
+  sort: "Trier",
+  time: "Temps",
+  duration: "Durée",
+  no_duration: "Aucune durée",
+  show_more: "Plus d'informations",
+  hide_more: "Moins d'informations",
+  collection: "Collection",
+  current_collection: "Collection Actuelle",
+  select_collection: "Selectionner une Collection",
+  create_collection: "Créer une Collection",
+  new: "Nouveau",
+  import_export: "Importer / Exporter",
+  more: "Plus",
+  folder: "Dossier",
+  new_folder: "Nouveau Dossier",
+  my_new_folder: "Mon Nouveau Dossier",
+  folder_empty: "Ce Dossier est vide",
+  edit_folder: "Éditer le Dossier",
+  edit: "Éditer",
+  delete: "Supprimer",
+  deleted: "Supprimé",
+  undo: "Annuler",
+  collection_empty: "Cette Collection est vide",
+  new_collection: "Nouvelle Collection",
+  my_new_collection: "Ma Nouvelle Collection",
+  edit_collection: "Éditer la Collection",
+  edit_request: "Éditer ma requête",
+  save_request_as: "Sauvegarder ma requête sous",
+  export: "Exporter",
+  connecting_to: "Connexion à {name}...",
+  connected: "Connecté",
+  connected_to: "Connecté à {name}",
+  disconnected: "Déconnecté",
+  disconnected_from: "Déconnecté sur {name}",
+  something_went_wrong: "Quelque chose n'a pas marché!",
+  error_occurred: "Une erreur s'est produite.",
+  browser_support_sse:
+    "Ce navigateur ne semble pas prendre en charge les événements envoyés par le serveur.",
+  log: "Log",
+  no_url: "Aucune URL",
+  run_query: "Lancer une recherche",
+  copy_query: "Copier la recherche",
+  kinda_dark: "Plutôt Sombre",
+  clearly_white: "Clairement Blanc",
+  just_black: "Seulement Noir",
+  auto_system: "Auth (système)",
+  green: "Vert",
+  yellow: "Jaune",
+  pink: "Rose",
+  red: "Rouge",
+  purple: "Violet",
+  orange: "Orange",
+  cyan: "Cyan",
+  blue: "Bleue",
+  loading: "Chargement...",
+  fetching: "Récupération...",
+  waiting_send_req: "(en attente de l'envoi de la demande)",
+  cancel: "Annuler",
+  save: "Sauvarder",
+  dismiss: "Dismiss",
+  are_you_sure: "Êtes-vous sûr?",
+  yes: "Oui",
+  no: "Non",
+  restore: "Restaurer",
+  add_star: "Ajouter une étoile",
+  remove_star: "Supprimer une étoile",
+  nothing_found: "Rien n'a été trouvé",
+  replace_current: "Remplacer l'actuel",
+  replace_json: "Replacer avec du JSON",
+  preserve_current: "Conserver l'actuel",
+  import_json: "Importer depuis un JSON",
+  download_file: "Télécharger un fichier",
+  upload_file: "Charger un fichier",
+  copy_response: "Copier la réponse",
+  copy_code: "Copier le code",
+  copy_schema: "Copier le  Schéma",
+  use_request: "Utiliser cette  requête",
+  documentation: "Documentation",
+  docs: "Docs",
+  reset_default: "Rétablir la valeur par défaut",
+  fields: "CHAMPS",
+  deprecated: "DÉPRÉCIÉ",
+  add_one_header: "(ajouter au moins un en-tête)",
+  add_one_parameter: "(ajouter au moins un paramètre)",
+  header_count: "{count} en-tête",
+  parameter_count: "{count} paramètre",
+  variable_count: "{count} variable",
+  value_count: "{count} valeur",
+  send_request_first: "Envoyez d'abord une requête",
+  generate_docs: "Genérer  une Documentation",
+  generate_docs_message:
+    "Importer n'importe quelle collection de Postwoman pour générer de la documentation en déplacement.",
+  generate_docs_first: "Générer la documentation d'abord",
+  docs_generated: "Documentation générée",
+  import_collections: "Importer les collections",
+  optional: "(optionnel)",
+  json: "JSON",
+  none: "Aucun",
+  username: "Username",
+  password: "Password",
+  token: "Token",
+  payload: "Payload",
+  choose_file: "Choisir un fichier",
+  file_imported: "Fichier importé",
+  f12_details: "(F12 pour voir les détails)",
+  we_use_cookies: "Nous utilisons des cookies",
+  copied_to_clipboard: "Copié dans le presse-papier",
+  finished_in: "Fini en {duration}ms",
+  check_console_details: "Consultez la console pour plus de détails.",
+  download_started: "Téléchargement démarré",
+  url_invalid_format: "L'URL n'est pas formatée correctement",
+  curl_invalid_format: "cURL n'est pas formaté correctement",
+  enable_proxy: "Essayez en activant le Proxy",
+  complete_config_urls: "Veuillez compléter les urls de configuration.",
+  token_request_saved: "Requête de Token sauvegardé",
+  donate_info1:
+    "Si vous avez apprécié la productivité de l'utilisation de Postwoman, considérez le don comme un signe d'appréciation.",
+  donate_info2:
+    "Vous pouvez soutenir le développement de Postwoman par les méthodes suivantes :",
+  one_time_recurring: "Ponctuel ou récurrent",
+  one_time: "Une fois",
+  recurring: "Récurrent",
+  wiki: "Wiki",
+  error: "Erreur",
+  go_home: "Aller à l'accueil",
+  reload: "Recharger",
+  enter_curl: "Entrer cURL",
+  empty: "Vide",
+  extensions: "Extensions",
+  extensions_info1: "Extension pour navigateur qui simplifie l'accès à Postwoman",
+  extensions_info2: "Obtenez l'extension Postwoman pour navigateur !",
+  installed: "Installé",
+  login_with: "Se connecter avec",
+  logged_out: "Se déconnecter",
+  logout: "Déconnexion",
+  account: "Compte",
+  sync: "Synchroniser",
+  syncHistory: "Historique",
+  syncCollections: "Collections",
+  turn_on: "Activer",
+  login_first: "Se connecter d'abord",
+  paste_a_collection: "Coller une collection",
+  import_from_sync: "Importer depuis la synchronisation"
 };
--- a/lang/ja-JP.js
+++ b/lang/ja-JP.js
@@ -111,7 +111,7 @@ export default {
  no_label: "ラベル無し",
  prerequest_script: "プレリクエストスクリプト",
  no_prerequest_script: "プレリクエストスクリプト無し",
-  search_history: "検索履歴",
+  search: "検索履歴",
  history_empty: "履歴が空です",
  history_deleted: "履歴が削除された",
  clear: "クリア",
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -247,6 +247,11 @@
                    <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>
@@ -305,11 +310,13 @@
                          (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>
@@ -371,7 +378,7 @@
                    <div>
                      <button
                        class="icon"
-                        onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
+                        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
@@ -386,6 +393,15 @@
                        </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>
@@ -397,7 +413,7 @@
            <div class="flex-wrap">
              <span v-if="version.name" class="mono">
                <a
-                  class="link"
+                  class="footer-link"
                  :href="
                    'https://github.com/liyasthomas/postwoman/releases/tag/' +
                      version.name
@@ -409,7 +425,7 @@
                  {{ version.name }}
                </a>
                <a
-                  class="link"
+                  class="footer-link hide-on-small-screen"
                  href="https://www.netlify.com"
                  target="_blank"
                  rel="noopener"
@@ -564,19 +580,19 @@
      <div slot="body">
        <div>
          <label>{{ $t("send_request") }}</label>
-          <kbd>⌘ G</kbd>
+          <kbd>{{ getSpecialKey() }} G</kbd>
        </div>
        <div>
          <label>{{ $t("save_to_collections") }}</label>
-          <kbd>⌘ S</kbd>
+          <kbd>{{ getSpecialKey() }} S</kbd>
        </div>
        <div>
          <label>{{ $t("copy_request_link") }}</label>
-          <kbd>⌘ K</kbd>
+          <kbd>{{ getSpecialKey() }} K</kbd>
        </div>
        <div>
          <label>{{ $t("reset_request") }}</label>
-          <kbd>⌘ L</kbd>
+          <kbd>{{ getSpecialKey() }} L</kbd>
        </div>
      </div>
      <div slot="footer"></div>
@@ -649,21 +665,15 @@
 </template>

 <style scoped lang="scss">
-.link {
+.footer-link {
  margin: 8px 16px;
 }
-@media (max-width: 768px) {
-  .link {
-    display: flex;
-    flex: 1;
-  }
-}
 </style>

 <script>
 import intializePwa from "../assets/js/pwa";
 import * as version from "../.postwoman/version.json";
-import { hasChromeExtensionInstalled } from "../functions/strategies/ChromeStrategy";
+import { hasExtensionInstalled } from "../functions/strategies/ExtensionStrategy";
 import firebase from "firebase/app";
 import { fb } from "../functions/fb";

@@ -675,13 +685,15 @@ export default {
  },

  methods: {
+    getSpecialKey() {
+      return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl";
+    },
    linkActive(path) {
      return {
        "nuxt-link-exact-active": this.$route.path === path,
        "nuxt-link-active": this.$route.path === path
      };
    },
-
    logout() {
      fb.currentUser = null;
      firebase
@@ -695,6 +707,21 @@ export default {
      this.$toast.info(this.$t("logged_out"), {
        icon: "vpn_key"
      });
+    },
+    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
+      }
    }
  },

@@ -708,9 +735,9 @@ export default {
      showExtensions: false,
      showShortcuts: false,
      showSupport: false,
-      firefoxExtInstalled: window.firefoxExtSendRequest,
-      chromeExtInstalled: window.chrome && hasChromeExtensionInstalled(),
-      fb
+      extensionInstalled: hasExtensionInstalled(),
+      fb,
+      navigatorShare: navigator.share
    };
  },

@@ -771,8 +798,7 @@ export default {
      let showExtensionsToast =
        localStorage.getItem("showExtensionsToast") === "yes";
      if (
-        !this.firefoxExtInstalled &&
-        !this.chromeExtInstalled &&
+        !this.extensionInstalled &&
        !showExtensionsToast
      ) {
        setTimeout(() => {
@@ -799,6 +825,14 @@ export default {
          });
        }, 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));
    })();

    window.addEventListener("scroll", event => {
@@ -839,6 +873,10 @@ export default {
    availableLocales() {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
    }
+  },
+
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener);
  }
 };
 </script>
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -2,9 +2,9 @@
 // TODO: Use these when rendering the pages (rather than just for head/meta tags...)
 export const meta = {
  name: "Postwoman",
-  shortDescription: "API request builder",
+  shortDescription: "A free, fast and beautiful API request builder",
  description:
-    "The Postwoman API request builder helps you create your requests faster, saving you precious time on your development."
+    "Web alternative to Postman - Helps you create requests faster, saving precious time on development."
 };
 // Sets the base path for the router.
 // Important for deploying to GitHub pages.
@@ -73,7 +73,7 @@ export default {
      },
      {
        itemprop: "image",
-        content: `${routerBase.router.base}logo.jpg`
+        content: `https://postwoman.io/logo.jpg`
      },
      // Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt)
      {
@@ -129,7 +129,7 @@ export default {
      },
      {
        property: "og:image",
-        content: `${routerBase.router.base}logo.jpg`
+        content: `https://postwoman.io/logo.jpg`
      },
      // Twitter
      {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "postwoman",
-    "version": "1.5.0",
+    "version": "1.9.0",
    "description": "A free, fast and beautiful API request builder",
    "author": "liyasthomas",
    "private": true,
@@ -14,33 +14,34 @@
        "generate": "nuxt generate",
        "e2e": "cypress run",
        "e2e:open": "cypress open",
-        "dev:e2e": "start-server-and-test dev http://localhost:3000 e2e:open",
-        "test": "start-server-and-test dev http://localhost:3000 e2e"
+        "dev:e2e": "server-test dev :3000 e2e:open",
+        "test": "start-server-and-test start http-get://localhost:3000 e2e"
    },
    "dependencies": {
-        "@nuxtjs/axios": "^5.9.3",
+        "@nuxtjs/axios": "^5.9.5",
        "@nuxtjs/google-analytics": "^2.2.3",
        "@nuxtjs/google-tag-manager": "^2.3.1",
-        "@nuxtjs/pwa": "^3.0.0-beta.19",
+        "@nuxtjs/pwa": "^3.0.0-beta.20",
        "@nuxtjs/robots": "^2.4.2",
        "@nuxtjs/sitemap": "^2.0.1",
        "@nuxtjs/toast": "^3.3.0",
        "ace-builds": "^1.4.8",
-        "firebase": "^7.7.0",
-        "graphql": "^14.5.8",
+        "firebase": "^7.9.1",
+        "graphql": "^14.6.0",
+        "graphql-language-service-interface": "^2.3.3",
        "nuxt": "^2.11.0",
        "nuxt-i18n": "^6.5.0",
        "v-tooltip": "^2.0.3",
-        "vue-virtual-scroll-list": "^1.4.4",
+        "vue-virtual-scroll-list": "^1.4.6",
        "vuefire": "^2.2.1",
        "vuejs-auto-complete": "^0.9.0",
        "vuex-persist": "^2.2.0",
-        "yargs-parser": "^16.1.0"
+        "yargs-parser": "^17.0.0"
    },
    "devDependencies": {
-        "cypress": "^3.8.3",
+        "cypress": "^4.0.2",
        "node-sass": "^4.13.1",
        "sass-loader": "^8.0.2",
-        "start-server-and-test": "^1.10.6"
+        "start-server-and-test": "^1.10.8"
    }
 }
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -363,8 +363,8 @@ export default {
      let file = this.$refs.collectionUpload.files[0];
      if (file !== undefined && file !== null) {
        let reader = new FileReader();
-        reader.onload = e => {
-          this.collectionJSON = e.target.result;
+        reader.onload = ({ target }) => {
+          this.collectionJSON = target.result;
        };
        reader.readAsText(file);
        this.$toast.info(this.$t("file_imported"), {
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -187,67 +187,21 @@
              useWorker: false
            }"
          />
-          <div class="flex-wrap">
-            <label>{{ $t("query_variables") }}</label>
-            <div>
-              <button
-                class="icon"
-                @click="variables = []"
-                v-tooltip.bottom="$t('clear')"
-              >
-                <i class="material-icons">clear_all</i>
-              </button>
-            </div>
-          </div>
-          <ul v-for="(variable, index) in variables" :key="index">
-            <li>
-              <input
-                :placeholder="$t('variable_count', { count: index + 1 })"
-                :name="'variable_key_' + index"
-                :value="variable.key"
-                @change="
-                  $store.commit('setGQLVariableKey', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="$t('value_count', { count: index + 1 })"
-                :name="'variable_value_' + index"
-                :value="variable.value"
-                @change="
-                  $store.commit('setGQLVariableValue', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                autofocus
-              />
-            </li>
-            <div>
-              <li>
-                <button
-                  class="icon"
-                  @click="removeQueryVariable(index)"
-                  v-tooltip.bottom="$t('delete')"
-                >
-                  <i class="material-icons">delete</i>
-                </button>
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <button class="icon" @click="addQueryVariable">
-                <i class="material-icons">add</i>
-                <span>{{ $t("add_new") }}</span>
-              </button>
-            </li>
-          </ul>
+        </pw-section>
+
+        <pw-section class="yellow" label="Variables" ref="variables">
+          <Editor
+            v-model="variableString"
+            :lang="'json'"
+            :options="{
+              maxLines: responseBodyMaxLines,
+              minLines: '16',
+              fontSize: '16px',
+              autoScrollEditorIntoView: true,
+              showPrintMargin: false,
+              useWorker: false
+            }"
+          />
        </pw-section>

        <pw-section class="purple" label="Response" ref="response">
@@ -391,6 +345,7 @@
 import axios from "axios";
 import * as gql from "graphql";
 import textareaAutoHeight from "../directives/textareaAutoHeight";
+import { commonHeaders } from "../functions/headers";
 import AceEditor from "../components/ace-editor";
 import QueryEditor from "../components/graphql/queryeditor";
 import { sendNetworkRequest } from "../functions/network";
@@ -410,130 +365,7 @@ export default {
  data() {
    return {
      schemaString: "",
-      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"
-      ],
+      commonHeaders,
      queryFields: [],
      mutationFields: [],
      subscriptionFields: [],
@@ -564,14 +396,6 @@ export default {
        this.$store.commit("setGQLState", { value, attribute: "headers" });
      }
    },
-    variables: {
-      get() {
-        return this.$store.state.gql.variables;
-      },
-      set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "variables" });
-      }
-    },
    gqlQueryString: {
      get() {
        return this.$store.state.gql.query;
@@ -580,6 +404,17 @@ export default {
        this.$store.commit("setGQLState", { value, attribute: "query" });
      }
    },
+    variableString: {
+      get() {
+        return this.$store.state.gql.variablesJSONString;
+      },
+      set(value) {
+        this.$store.commit("setGQLState", {
+          value,
+          attribute: "variablesJSONString"
+        });
+      }
+    },
    headerString() {
      const result = this.headers
        .filter(({ key }) => !!key)
@@ -667,18 +502,9 @@ export default {
          headers[header.key] = header.value;
        });

-        let variables = {};
+        let variables = JSON.parse(this.variableString);
+
        const gqlQueryString = this.gqlQueryString;
-        this.variables.forEach(variable => {
-          // todo: better variable type validation
-          if (gqlQueryString.indexOf(`\$${variable.key}: Int`) > -1) {
-            variables[variable.key] = parseInt(variable.value);
-          } else if (gqlQueryString.indexOf(`\$${variable.key}: Float`) > -1) {
-            variables[variable.key] = parseFloat(variable.value);
-          } else {
-            variables[variable.key] = variable.value;
-          }
-        });

        const reqOptions = {
          method: "post",
@@ -835,13 +661,10 @@ export default {
    downloadResponse() {
      const dataToWrite = JSON.stringify(this.schemaString, null, 2);
      const file = new Blob([dataToWrite], { type: "application/json" });
-      const a = document.createElement("a"),
-        url = URL.createObjectURL(file);
+      const a = document.createElement("a");
+      const url = URL.createObjectURL(file);
      a.href = url;
-      a.download = (this.url + " on " + Date() + ".graphql").replace(
-        /\./g,
-        "[dot]"
-      );
+      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]");
      document.body.appendChild(a);
      a.click();
      this.$refs.downloadResponse.innerHTML = this.doneButton;
@@ -879,30 +702,6 @@ export default {
      });
      // console.log(oldHeaders);
    },
-    addQueryVariable(index) {
-      this.$store.commit("addGQLVariable", {
-        key: "",
-        value: ""
-      });
-      return false;
-    },
-    removeQueryVariable(index) {
-      const oldVariables = this.variables.slice();
-
-      this.$store.commit("removeGQLVariable", index);
-      this.$toast.error(this.$t("deleted"), {
-        icon: "delete",
-        action: {
-          text: this.$t("undo"),
-          duration: 4000,
-          onClick: (e, toastObject) => {
-            this.variables = oldVariables;
-            toastObject.remove();
-          }
-        }
-      });
-      // console.log(oldVariables);
-    },
    scrollInto(view) {
      this.$refs[view].$el.scrollIntoView({
        behavior: "smooth"
--- a/pages/index.vue
+++ b/pages/index.vue
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -211,24 +211,20 @@ export default {
    urlValid() {
      const protocol = "^(wss?:\\/\\/)?";
      const validIP = new RegExp(
-        protocol +
-          "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
+        `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
      );
      const validHostname = new RegExp(
-        protocol +
-          "(([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/])$"
+        `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
      );
      return validIP.test(this.url) || validHostname.test(this.url);
    },
    serverValid() {
      const protocol = "^(https?:\\/\\/)?";
      const validIP = new RegExp(
-        protocol +
-          "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
+        `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
      );
      const validHostname = new RegExp(
-        protocol +
-          "(([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/])$"
+        `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
      );
      return validIP.test(this.server) || validHostname.test(this.server);
    }
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -38,7 +38,7 @@
                {{ setting.value ? $t("enabled") : $t("disabled") }}
              </pw-toggle>
            </p>
-            <p v-if="fb.currentSettings.length == 0">
+            <p v-if="fb.currentSettings.length !== 3">
              <button class="" @click="initSettings">
                <i class="material-icons">sync</i>
                <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
@@ -141,6 +141,21 @@
      </ul>
    </pw-section>

+    <pw-section class="purple" :label="$t('extensions')" ref="extensions">
+      <ul>
+        <li>
+          <div class="flex-wrap">
+            <pw-toggle
+              :on="settings.EXTENSIONS_ENABLED"
+              @change="toggleSetting('EXTENSIONS_ENABLED')"
+            >
+              {{ $t("extensions_use_toggle") }}
+            </pw-toggle>
+          </div>
+        </li>
+      </ul>
+    </pw-section>
+
    <pw-section class="blue" :label="$t('proxy')" ref="proxy">
      <ul>
        <li>
@@ -192,7 +207,12 @@
            {{ $t("postwoman_official_proxy_hosting") }}
            <br />
            {{ $t("read_the") }}
-            <a href="https://apollotv.xyz/legal" target="_blank" rel="noopener">
+            <a
+              class="link"
+              href="https://apollotv.xyz/legal"
+              target="_blank"
+              rel="noopener"
+            >
              {{ $t("apollotv_privacy_policy") }} </a
            >.
          </p>
@@ -256,7 +276,7 @@ export default {
          aceEditor: "vibrant_ink"
        },
        {
-          color: "var(--bg-color)",
+          color: "var(--ac-color)",
          name: this.$t("auto_system"),
          vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
          class: "auto",
@@ -323,7 +343,12 @@ export default {
        PROXY_URL:
          this.$store.state.postwoman.settings.PROXY_URL ||
          "https://postwoman.apollotv.xyz/",
-        PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
+        PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || "",
+        EXTENSIONS_ENABLED:
+          typeof this.$store.state.postwoman.settings.EXTENSIONS_ENABLED !==
+          "undefined"
+            ? this.$store.state.postwoman.settings.EXTENSIONS_ENABLED
+            : true
      },

      doneButton: '<i class="material-icons">done</i>',
@@ -398,9 +423,9 @@ export default {
      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) {
+            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
              icon: "sync",
              duration: null,
              closeOnSwipe: false,
@@ -408,7 +433,8 @@ export default {
                text: this.$t("yes"),
                onClick: (e, toastObject) => {
                  fb.writeSettings("syncHistory", true);
-                  fb.writeSettings("syncCollections", false);
+                  fb.writeSettings("syncCollections", true);
+                  fb.writeSettings("syncEnvironments", true);
                  this.$router.push({ path: "/settings" });
                  toastObject.remove();
                }
@@ -427,9 +453,9 @@ export default {
      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) {
+            this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
              icon: "sync",
              duration: null,
              closeOnSwipe: false,
@@ -437,7 +463,8 @@ export default {
                text: this.$t("yes"),
                onClick: (e, toastObject) => {
                  fb.writeSettings("syncHistory", true);
-                  fb.writeSettings("syncCollections", false);
+                  fb.writeSettings("syncCollections", true);
+                  fb.writeSettings("syncEnvironments", true);
                  this.$router.push({ path: "/settings" });
                  toastObject.remove();
                }
@@ -456,16 +483,17 @@ export default {
    },
    initSettings() {
      fb.writeSettings("syncHistory", true);
-      fb.writeSettings("syncCollections", false);
+      fb.writeSettings("syncCollections", true);
+      fb.writeSettings("syncEnvironments", true);
    },
-    resetProxy(e) {
+    resetProxy({ target }) {
      this.settings.PROXY_URL = `https://postwoman.apollotv.xyz/`;
-      e.target.innerHTML = this.doneButton;
+      target.innerHTML = this.doneButton;
      this.$toast.info(this.$t("cleared"), {
        icon: "clear_all"
      });
      setTimeout(
-        () => (e.target.innerHTML = '<i class="material-icons">clear_all</i>'),
+        () => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
        1000
      );
    }
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -23,22 +23,6 @@ export default {
    gql.headers[index].value = value;
  },

-  addGQLVariable({ gql }, object) {
-    gql.variables.push(object);
-  },
-
-  removeGQLVariable({ gql }, index) {
-    gql.variables.splice(index, 1);
-  },
-
-  setGQLVariableKey({ gql }, { index, value }) {
-    gql.variables[index].key = value;
-  },
-
-  setGQLVariableValue({ gql }, { index, value }) {
-    gql.variables[index].value = value;
-  },
-
  addHeaders({ request }, value) {
    request.headers.push(value);
  },
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -56,7 +56,13 @@ export const SETTINGS_KEYS = [
   * An array of properties to exclude from the URL.
   * e.g. 'auth'
   */
-  "URL_EXCLUDES"
+  "URL_EXCLUDES",
+
+  /**
+   * A boolean value indicating whether to use the browser extensions
+   * to run the requests
+   */
+  "EXTENSIONS_ENABLED"
 ];

 export const state = () => ({
@@ -68,6 +74,13 @@ export const state = () => ({
      requests: []
    }
  ],
+  environments: [
+    {
+      name: "My Environment Variables",
+      variables: []
+    }
+  ],
+  editingEnvironment: {},
  selectedRequest: {},
  editingRequest: {}
 });
@@ -96,6 +109,80 @@ export const mutations = {
    settings[key] = value;
  },

+  removeVariables({ editingEnvironment }, value) {
+    editingEnvironment.variables = value;
+  },
+
+  setEditingEnvironment(state, value) {
+    state.editingEnvironment = { ...value };
+  },
+
+  setVariableKey({ editingEnvironment }, { index, value }) {
+    editingEnvironment.variables[index].key = value;
+  },
+
+  setVariableValue({ editingEnvironment }, { index, value }) {
+    editingEnvironment.variables[index].value = testValue(value);
+  },
+
+  removeVariable({ editingEnvironment }, variables) {
+    editingEnvironment.variables = variables;
+  },
+
+  addVariable({ editingEnvironment }, value) {
+    editingEnvironment.variables.push(value);
+  },
+
+  replaceEnvironments(state, environments) {
+    state.environments = environments;
+  },
+
+  importAddEnvironments(state, { environments, confirmation }) {
+    const duplicateEnvironment = environments.some(
+      item => {
+        return state.environments.some(
+          item2 => {
+          return item.name.toLowerCase() === item2.name.toLowerCase();
+        });
+      }
+    );
+    if (duplicateEnvironment) {
+      this.$toast.info("Duplicate environment");
+      return;
+    };
+    state.environments = [...state.environments, ...environments];
+
+    let index = 0;
+    for (let environment of state.environments) {
+      environment.environmentIndex = index;
+      index += 1;
+    }
+    this.$toast.info(confirmation, {
+      icon: "folder_shared"
+    });
+  },
+
+  removeEnvironment({ environments }, environmentIndex) {
+    environments.splice(environmentIndex, 1);
+  },
+
+  saveEnvironment({ environments }, payload) {
+    const { environment, environmentIndex } = payload;
+    const { name } = environment;
+    const duplicateEnvironment = environments.length === 1
+      ? false
+      : environments.some(
+      item =>
+        item.environmentIndex !== environmentIndex &&
+        item.name.toLowerCase() === name.toLowerCase()
+    );
+    if (duplicateEnvironment) {
+      this.$toast.info("Duplicate environment");
+      return;
+    }
+    environments[environmentIndex] = environment;
+  },
+
  replaceCollections(state, collections) {
    state.collections = collections;
  },
@@ -112,7 +199,9 @@ export const mutations = {

  addNewCollection({ collections }, collection) {
    const { name } = collection;
-    const duplicateCollection = collections.some(item => item.name === name);
+    const duplicateCollection = collections.some(
+      item => item.name.toLowerCase() === name.toLowerCase()
+    );
    if (duplicateCollection) {
      this.$toast.info("Duplicate collection");
      return;
@@ -131,9 +220,13 @@ export const mutations = {
  },

  editCollection({ collections }, payload) {
-    const { collection, collectionIndex } = payload;
-    const { name } = collection;
-    const duplicateCollection = collections.some(item => item.name === name);
+    const {
+      collection: { name },
+      collectionIndex
+    } = payload;
+    const duplicateCollection = collections.some(
+      item => item.name.toLowerCase() === name.toLowerCase()
+    );
    if (duplicateCollection) {
      this.$toast.info("Duplicate collection");
      return;
@@ -317,3 +410,12 @@ export const mutations = {
    state.selectedRequest = Object.assign({}, request);
  }
 };
+
+function testValue(myValue) {
+  try {
+      return JSON.parse(myValue);
+  } catch(ex) {
+      // Now we know it's a string just leave it as a string value.
+      return myValue;
+  }
+}
--- a/store/state.js
+++ b/store/state.js
@@ -1,8 +1,8 @@
 export default () => ({
  request: {
    method: "GET",
-    url: "https://reqres.in",
-    path: "/api/users",
+    url: "https://httpbin.org",
+    path: "/get",
    label: "",
    auth: "None",
    httpUser: "",
@@ -20,7 +20,7 @@ export default () => ({
  gql: {
    url: "https://rickandmortyapi.com/graphql",
    headers: [],
-    variables: [],
+    variablesJSONString: "{}",
    query: ""
  },
  oauth2: {
--- a/tests/e2e/integration/app.starter.spec.js
+++ b/tests/e2e/integration/app.starter.spec.js
@@ -1,7 +1,7 @@
 describe('Visit home', () => {
  it('Have a page title with "Postwoman"', () => {
-    cy.visit('/')
-      .get('title')
+    cy.visit('/', { retryOnStatusCodeFailure: true })
+    .get('title')
      .should('contain','Postwoman')
  })
 })
--- a/tests/e2e/integration/feature.url-queries.spec.js
+++ b/tests/e2e/integration/feature.url-queries.spec.js
@@ -1,57 +1,34 @@
-describe('Methods', () => {
-  const methods = [ 'POST', 'HEAD', 'POST', 'PUT', 'DELETE','OPTIONS', 'PATCH']
-  methods.forEach((method) => {
-      it(`Change the default method GET to ${method} with url query`, () => {
-        cy.visit(`/?method=${method}`)
-          .get('#method').should('have.value', method)
-      })
-  })
-})
-
-describe('Url and path', () => {
-  it('Change default url with query and reset default path to empty string and make a request to cat api', () => {
-      cy.seedAndVisit('catapi', '/?url=https://api.thecatapi.com&path=')
-      .get('#url').then((el) => expect(el.val() === 'https://api.thecatapi.com').to.equal(true))
-      .get("#path").then((el) => expect(el.val() === '').to.equal(true))
-      .get('#response-details-wrapper').should($wrapper => {
-        expect($wrapper).to.contain('FAKE Cat API')
-      })
-  })
-})
-
 describe('Authentication', () => {
-  it(`Change default auth 'None' to 'Basic' and set httpUser and httpPassword with url query`, () => {
+  it(`Change default auth user and pass with url`, () => {
    cy.visit(`?&auth=Basic Auth&httpUser=foo&httpPassword=bar`, { retryOnStatusCodeFailure: true })
-      .get('#authentication').contains('Authentication').click()
-        .then(() => {
-          cy.get('input[name="http_basic_user"]', { timeout: 500 })
-            .invoke('val')
-            .then((user) => {
-              expect(user === 'foo').to.equal(true)
-              cy.log('Success! user === foo')
-            })
+      .get('input[name="http_basic_user"]', { timeout: 500 })
+      .invoke('val')
+      .then((user) => {
+        expect(user === 'foo').to.equal(true)
+      })

-          cy.get('input[name="http_basic_passwd"]')
-            .invoke('val')
-            .then((user) => {
-              expect(user === 'bar').to.equal(true)
-              cy.log('Success! password === bar')
-            })
-        })
+      .get('input[name="http_basic_passwd"]')
+      .invoke('val')
+      .then((pass) => {
+        expect(pass === 'bar').to.equal(true)
+      })
  })

-  const base64Tkn = encodeURI(btoa('{"alg":"HS256", "typ": "JWT"}'))
-
-  it(`Change default auth 'None' to 'Bearer token' and set bearerToken with url query`, () => {
-    cy.visit(`/?auth=Bearer Token&bearerToken=${base64Tkn}`, { retryOnStatusCodeFailure: true })
-        .get('#authentication').contains('Authentication').click()
-          .then(() => {
-            cy.get('input[name="bearer_token"]', { timeout: 500 })
-              .invoke('val')
-              .then((tkn) => {
-                expect(tkn === base64Tkn).to.equal(true)
-                cy.log(`Success! input[name="bearer_token"] === ${base64Tkn}`)
-              })
-          })
-  })
+  it('Enable user and pass at url with toggler', () => {
+    cy.visit('/', { retryOnStatusCodeFailure: true })
+      .get('#auth')
+      .select('Basic Auth')
+      .get('input[name="http_basic_user"]', { timeout: 500 })
+      .type('foo')
+      .get('input[name="http_basic_passwd"]', { timeout: 500 })
+      .type('bar')
+      .url()
+      .should('not.contain', 'foo')
+      .should('not.contain', 'bar')
+      .get('.toggle')
+      .click()
+      .url()
+      .should('contain', 'foo')
+      .should('contain', 'bar')
+    })
 })
--- a/tests/e2e/integration/proxy.spec.js
+++ b/tests/e2e/integration/proxy.spec.js
@@ -0,0 +1,20 @@
+describe('Proxy disabled - local request', () => {
+  it('Change default url with query and make a request to local cat api', () => {
+    cy.seedAndVisit('catapi', '/?url=https://api.thecatapi.com&path=')
+      .get('#url').then((el) => expect(el.val() === 'https://api.thecatapi.com').to.equal(true))
+      .get("#path").then((el) => expect(el.val() === '').to.equal(true))
+      .get('#response-details-wrapper').should($wrapper => {
+        expect($wrapper).to.contain('FAKE Cat API')
+      })
+  })
+})
+
+describe('Proxy enabled - external request', () => {
+  it('Enable the proxy and make a request to the real cat api', () => {
+    cy.enableProxy('/?url=https://api.thecatapi.com&path=')
+      .get('#send').click()
+      .get('#response-details-wrapper').should($wrapper => {
+        expect($wrapper).to.contain('Cat API')
+      })
+  })
+})
--- a/tests/e2e/support/commands.js
+++ b/tests/e2e/support/commands.js
@@ -7,10 +7,23 @@
 */
 Cypress.Commands.add('seedAndVisit', (seedData, path = '/', method = 'GET') => {
  cy.server()
-    .route(method, 'https://api.thecatapi.com/', `fixture:${seedData}`).as(
-    'load'
-  )
+    .route(method, 'https://api.thecatapi.com/', `fixture:${seedData}`).as('load')
+
  cy.visit(path)
    .get('#send').click()
-    .wait('@load')
+      .wait('@load')
+})
+
+/**
+* Creates cy.enableProxy() function
+* This function will enable the proxy and navigate back to a given path
+* @param { String } goBackPath The page go back
+*/
+Cypress.Commands.add('enableProxy', (goBackPath) => {
+  cy.visit('/settings')
+    .get('#proxy')
+    .find('.toggle')
+    .click( { force: true } )
+    .should('have.class', 'on')
+    .visit(goBackPath)
 })