Merge branch 'master' into feature/post-request-tests

README.md

@@ -218,8 +218,11 @@ _**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/li
 
 📦 **Add-ons**: Official add-ons for Postwoman.
 
- - **[Postwoman Proxy β](https://github.com/postwoman-io/postwoman-proxy)** - A simple proxy server created for Postwoman
+ - **[Proxy β](https://github.com/postwoman-io/postwoman-proxy)** - A simple proxy server created for Postwoman
- - **[Postwoman CLI β](https://github.com/postwoman-io/postwoman-cli)** - A CLI solution for Postwoman
+ - **[CLI β](https://github.com/postwoman-io/postwoman-cli)** - A CLI solution for Postwoman
+ - **[Browser Extensions](https://github.com/AndrewBastin/postwoman-firefox)** - 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)  |  ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_16x16.png) **Chrome (coming soon)**
 
 _Add-ons are developed and maintained under **[Official Postwoman Organization](https://github.com/postwoman-io)**_
 

components/collections/addCollection.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">New Collection</h3>
+            <h3 class="title">{{ $t("new_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -17,7 +17,11 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="name" placeholder="My New Collection" />
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="$t('my_new_collection')"
+          />
         </li>
       </ul>
     </div>
@@ -26,10 +30,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="addNewCollection">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>

components/collections/addFolder.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">New Folder</h3>
+            <h3 class="title">{{ $t("new_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -17,7 +17,11 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="name" placeholder="My New Folder" />
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="$t('my_new_folder')"
+          />
         </li>
       </ul>
     </div>
@@ -26,10 +30,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="addNewFolder">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>

components/collections/collection.vue

@@ -10,14 +10,14 @@
         </button>
       </div>
       <v-popover>
-        <button class="tooltip-target icon" v-tooltip="'More'">
+        <button class="tooltip-target icon" v-tooltip="$t('more')">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button class="icon" @click="$emit('add-folder')" v-close-popover>
               <i class="material-icons">create_new_folder</i>
-              <span>New folder</span>
+              <span>{{ $t("new_folder") }}</span>
             </button>
           </div>
           <div>
@@ -27,13 +27,13 @@
               v-close-popover
             >
               <i class="material-icons">create</i>
-              <span>Edit</span>
+              <span>{{ $t("edit") }}</span>
             </button>
           </div>
           <div>
             <button class="icon" @click="removeCollection" v-close-popover>
               <i class="material-icons">delete</i>
-              <span>Delete</span>
+              <span>{{ $t("delete") }}</span>
             </button>
           </div>
         </template>
@@ -56,7 +56,7 @@
             collection.folders.length === 0 && collection.requests.length === 0
           "
         >
-          <label>Collection is empty</label>
+          <label>{{ $t("collection_empty") }}</label>
         </li>
       </ul>
       <ul>

components/collections/editCollection.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Edit Collection</h3>
+            <h3 class="title">{{ $t("edit_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -31,10 +31,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="saveCollection">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>

components/collections/editFolder.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Edit Folder</h3>
+            <h3 class="title">{{ $t("edit_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -31,10 +31,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="editFolder">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>

components/collections/editRequest.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Edit Request</h3>
+            <h3 class="title">{{ $t("edit_request") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -17,7 +17,7 @@
     <div slot="body">
       <ul>
         <li>
-          <label for="selectLabel">Label</label>
+          <label for="selectLabel">{{ $t("label") }}</label>
           <input
             type="text"
             id="selectLabel"
@@ -25,7 +25,7 @@
             @keyup.enter="saveRequest"
             :placeholder="request.name"
           />
-          <label for="selectCollection">Collection</label>
+          <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -38,7 +38,7 @@
                 hidden
                 disabled
                 selected
-                >Current Collection</option
+                >{{ $t("current_collection") }}</option
               >
               <option
                 v-for="(collection, index) in $store.state.postwoman
@@ -50,7 +50,7 @@
               </option>
             </select>
           </span>
-          <label for="selectFolder">Folder</label>
+          <label for="selectFolder">{{ $t("folder") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -75,10 +75,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="saveRequest">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>

components/collections/folder.vue

@@ -10,20 +10,20 @@
         </button>
       </div>
       <v-popover>
-        <button class="tooltip-target icon" v-tooltip="'More'">
+        <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="editFolder" v-close-popover>
               <i class="material-icons">edit</i>
-              <span>Edit</span>
+              <span>{{ $t("edit") }}</span>
             </button>
           </div>
           <div>
             <button class="icon" @click="removeFolder" v-close-popover>
               <i class="material-icons">delete</i>
-              <span>Delete</span>
+              <span>{{ $t("delete") }}</span>
             </button>
           </div>
         </template>
@@ -49,7 +49,7 @@
           />
         </li>
         <li v-if="folder.requests.length === 0">
-          <label>Folder is empty</label>
+          <label>{{ $t("folder_empty") }}</label>
         </li>
       </ul>
     </div>

components/collections/importExportCollections.vue

@@ -23,10 +23,10 @@
           <button
             class="icon"
             @click="openDialogChooseFileToReplaceWith"
-            v-tooltip="'Replace current'"
+            v-tooltip="$t('replace_current')"
           >
             <i class="material-icons">create_new_folder</i>
-            <span>Replace with JSON</span>
+            <span>{{ $t("replace_json") }}</span>
             <input
               type="file"
               @change="replaceWithJSON"
@@ -37,10 +37,10 @@
           <button
             class="icon"
             @click="openDialogChooseFileToImportFrom"
-            v-tooltip="'Preserve current'"
+            v-tooltip="$t('preserve_current')"
           >
             <i class="material-icons">folder_shared</i>
-            <span>Import from JSON</span>
+            <span>{{ $t("import_json") }}</span>
             <input
               type="file"
               @change="importFromJSON"
@@ -55,14 +55,14 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button
             class="icon primary"
             @click="exportJSON"
-            v-tooltip="'Download file'"
+            v-tooltip="$t('download_file')"
           >
-            Export
+            {{ $t("export") }}
           </button>
         </span>
       </div>

components/collections/index.vue

@@ -43,16 +43,12 @@ TODO:
       <div>
         <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
-          <span>New</span>
+          <span>{{ $t("new") }}</span>
         </button>
       </div>
       <div>
-        <button
+        <button class="icon" @click="displayModalImportExport(true)">
-          class="icon"
+          {{ $t("import_export") }}
-          @click="displayModalImportExport(true)"
-          v-tooltip="'Import / Export'"
-        >
-          <i class="material-icons">import_export</i>
         </button>
         <!-- <a
           href="https://github.com/liyasthomas/postwoman/wiki/Collections"
@@ -90,12 +86,18 @@ TODO:
         </li>
       </ul>
     </virtual-list>
+    <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
+      <button class="icon">
+        <i class="material-icons">books</i>
+        <span>{{ $t("generate_docs") }}</span>
+      </button>
+    </nuxt-link>
   </div>
 </template>
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 232px);
+  max-height: calc(100vh - 276px);
 }
 
 ul {

components/collections/request.vue

@@ -1,26 +1,30 @@
 <template>
   <div class="flex-wrap">
     <div>
-      <button class="icon" @click="selectRequest()" v-tooltip="'Use request'">
+      <button
+        class="icon"
+        @click="selectRequest()"
+        v-tooltip="$t('use_request')"
+      >
         <i class="material-icons">insert_drive_file</i>
         <span>{{ request.name }}</span>
       </button>
     </div>
     <v-popover>
-      <button class="tooltip-target icon" v-tooltip="'More'">
+      <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-request')" v-close-popover>
             <i class="material-icons">edit</i>
-            <span>Edit</span>
+            <span>{{ $t("edit") }}</span>
           </button>
         </div>
         <div>
           <button class="icon" @click="removeRequest" v-close-popover>
             <i class="material-icons">delete</i>
-            <span>Delete</span>
+            <span>{{ $t("delete") }}</span>
           </button>
         </div>
       </template>

components/collections/saveRequestAs.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Save Request As</h3>
+            <h3 class="title">{{ $t("save_request_as") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
@@ -17,7 +17,7 @@
     <div slot="body">
       <ul>
         <li>
-          <label for="selectLabel">Label</label>
+          <label for="selectLabel">{{ $t("label") }}</label>
           <input
             type="text"
             id="selectLabel"
@@ -25,7 +25,7 @@
             :placeholder="defaultRequestName"
             @keyup.enter="saveRequestAs"
           />
-          <label for="selectCollection">Collection</label>
+          <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -38,7 +38,7 @@
                 hidden
                 disabled
                 selected
-                >Select a Collection</option
+                >{{ $t("select_collection") }}</option
               >
               <option
                 v-for="(collection, index) in $store.state.postwoman
@@ -50,7 +50,7 @@
               </option>
             </select>
           </span>
-          <label for="selectFolder">Folder</label>
+          <label for="selectFolder">{{ $t("folder") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -67,7 +67,7 @@
               </option>
             </select>
           </span>
-          <label for="selectRequest">Request</label>
+          <label for="selectRequest">{{ $t("request") }}</label>
           <span class="select-wrapper">
             <select
               type="text"
@@ -92,10 +92,10 @@
         <span></span>
         <span>
           <button class="icon" @click="hideModal">
-            Cancel
+            {{ $t("cancel") }}
           </button>
           <button class="icon primary" @click="saveRequestAs">
-            Save
+            {{ $t("save") }}
           </button>
         </span>
       </div>
@@ -184,7 +184,7 @@ export default {
       const userDidntSpecifyCollection =
         this.$data.requestData.collectionIndex === undefined;
       if (userDidntSpecifyCollection) {
-        this.$toast.error("Select a Collection", {
+        this.$toast.error(this.$t("select_collection"), {
           icon: "error"
         });
         return;

components/graphql/field.vue

@@ -23,7 +23,7 @@
     </div>
 
     <div class="field-deprecated" v-if="gqlField.isDeprecated">
-      DEPRECATED
+      {{ $t("deprecated") }}
     </div>
   </div>
 </template>

components/graphql/type.vue

@@ -6,7 +6,7 @@
     </div>
 
     <div v-if="gqlType.getFields">
-      <h5>FIELDS</h5>
+      <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
         <gql-field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
       </div>

components/history.vue

@@ -1,11 +1,11 @@
 <template>
-  <pw-section class="green" icon="history" label="History" ref="history">
+  <pw-section class="green" icon="history" :label="$t('history')" ref="history">
     <ul>
       <li id="filter-history">
         <input
           aria-label="Search"
           type="text"
-          placeholder="search history"
+          :placeholder="$t('search_history')"
           v-model="filterText"
         />
       </li>
@@ -22,7 +22,9 @@
             class="icon"
             :class="{ stared: entry.star }"
             @click="toggleStar(index)"
-            v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }"
+            v-tooltip="{
+              content: !entry.star ? $t('add_star') : $t('remove_star')
+            }"
           >
             <i class="material-icons">
               {{ entry.star ? "star" : "star_border" }}
@@ -30,11 +32,11 @@
           </button>
           <li>
             <input
-              aria-label="Label"
+              :aria-label="$t('label')"
               type="text"
               readonly
               :value="entry.label"
-              placeholder="No label"
+              :placeholder="$t('no_label')"
               class="bg-color"
             />
           </li>
@@ -53,7 +55,7 @@
             </button>
           </li> -->
           <v-popover>
-            <button class="tooltip-target icon" v-tooltip="'Options'">
+            <button class="tooltip-target icon" v-tooltip="$t('options')">
               <i class="material-icons">more_vert</i>
             </button>
             <template slot="popover">
@@ -62,11 +64,11 @@
                   class="icon"
                   :id="'use-button#' + index"
                   @click="useHistory(entry)"
-                  aria-label="Edit"
+                  :aria-label="$t('edit')"
                   v-close-popover
                 >
                   <i class="material-icons">restore</i>
-                  <span>Restore</span>
+                  <span>{{ $t("restore") }}</span>
                 </button>
               </div>
               <div>
@@ -74,11 +76,11 @@
                   class="icon"
                   :id="'delete-button#' + index"
                   @click="deleteHistory(entry)"
-                  aria-label="Delete"
+                  :aria-label="$t('delete')"
                   v-close-popover
                 >
                   <i class="material-icons">delete</i>
-                  <span>Delete</span>
+                  <span>{{ $t("delete") }}</span>
                 </button>
               </div>
             </template>
@@ -87,7 +89,7 @@
         <div class="show-on-large-screen">
           <li class="method-list-item">
             <input
-              aria-label="Method"
+              :aria-label="$t('method')"
               type="text"
               readonly
               :value="entry.method"
@@ -105,20 +107,20 @@
         <div class="show-on-large-screen">
           <li>
             <input
-              aria-label="URL"
+              :aria-label="$t('url')"
               type="text"
               readonly
               :value="entry.url"
-              placeholder="No URL"
+              :placeholder="$t('no_url')"
             />
           </li>
           <li>
             <input
-              aria-label="Path"
+              :aria-label="$t('path')"
               type="text"
               readonly
               :value="entry.path"
-              placeholder="No path"
+              :placeholder="$t('no_path')"
             />
           </li>
         </div>
@@ -126,7 +128,7 @@
           <div v-if="showMore" class="show-on-large-screen">
             <li>
               <input
-                aria-label="Time"
+                :aria-label="$t('time')"
                 type="text"
                 readonly
                 :value="entry.time"
@@ -135,20 +137,20 @@
             </li>
             <li>
               <input
-                aria-label="Duration"
+                :aria-label="$t('duration')"
                 type="text"
                 readonly
                 :value="entry.duration"
-                placeholder="No duration"
+                :placeholder="$t('no_duration')"
               />
             </li>
             <li>
               <input
-                aria-label="Pre Request Script"
+                :aria-label="$t('prerequest_script')"
                 type="text"
                 readonly
                 :value="entry.preRequestScript"
-                placeholder="No pre request script"
+                :placeholder="$t('no_prerequest_script')"
               />
             </li>
           </div>
@@ -159,11 +161,11 @@
       :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
     >
       <li>
-        <label>Nothing found "{{ filterText }}"</label>
+        <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
       </li>
     </ul>
     <p v-if="history.length === 0" class="info">
-      History is empty
+      {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0">
       <div class="flex-wrap" v-if="!isClearingHistory">
@@ -174,23 +176,23 @@
           @click="enableHistoryClearing"
         >
           <i class="material-icons">clear_all</i>
-          <span>Clear All</span>
+          <span>{{ $t("clear_all") }}</span>
         </button>
         <v-popover>
-          <button class="tooltip-target icon" v-tooltip="'Sort'">
+          <button class="tooltip-target icon" v-tooltip="$t('sort')">
             <i class="material-icons">sort</i>
           </button>
           <template slot="popover">
             <div>
               <button class="icon" @click="sort_by_label()" v-close-popover>
                 <i class="material-icons">sort_by_alpha</i>
-                <span>Label</span>
+                <span>{{ $t("label") }}</span>
               </button>
             </div>
             <div>
               <button class="icon" @click="sort_by_time()" v-close-popover>
                 <i class="material-icons">access_time</i>
-                <span>Time</span>
+                <span>{{ $t("time") }}</span>
               </button>
             </div>
             <div>
@@ -200,25 +202,25 @@
                 v-close-popover
               >
                 <i class="material-icons">assistant</i>
-                <span>Status</span>
+                <span>{{ $t("status") }}</span>
               </button>
             </div>
             <div>
               <button class="icon" @click="sort_by_url()" v-close-popover>
                 <i class="material-icons">language</i>
-                <span>URL</span>
+                <span>{{ $t("url") }}</span>
               </button>
             </div>
             <div>
               <button class="icon" @click="sort_by_path()" v-close-popover>
                 <i class="material-icons">timeline</i>
-                <span>Path</span>
+                <span>{{ $t("path") }}</span>
               </button>
             </div>
             <div v-if="showMore">
               <button class="icon" @click="sort_by_duration()" v-close-popover>
                 <i class="material-icons">timer</i>
-                <span>Duration</span>
+                <span>{{ $t("duration") }}</span>
               </button>
             </div>
             <div>
@@ -226,20 +228,22 @@
                 <i class="material-icons">
                   {{ !showMore ? "first_page" : "last_page" }}
                 </i>
-                <span>{{ !showMore ? "Show more" : "Hide more" }}</span>
+                <span>{{ !showMore ? $t("show_more") : $t("hide_more") }}</span>
               </button>
             </div>
           </template>
         </v-popover>
       </div>
       <div class="flex-wrap" v-else>
-        <label for="clear-history-button" class="info">Are you sure?</label>
+        <label for="clear-history-button" class="info">
+          {{ $t("are_you_sure") }}
+        </label>
         <div>
           <button
             class="icon"
             id="confirm-clear-history-button"
             @click="clearHistory"
-            v-tooltip="'Yes'"
+            v-tooltip="$t('yes')"
           >
             <i class="material-icons">done</i>
           </button>
@@ -247,7 +251,7 @@
             class="icon"
             id="reject-clear-history-button"
             @click="disableHistoryClearing"
-            v-tooltip="'No'"
+            v-tooltip="$t('no')"
           >
             <i class="material-icons">close</i>
           </button>
@@ -371,7 +375,7 @@ export default {
       this.filterText = "";
       this.disableHistoryClearing();
       updateOnLocalStorage("history", this.history);
-      this.$toast.error("History Deleted", {
+      this.$toast.error(this.$t("history_deleted"), {
         icon: "delete"
       });
     },
@@ -392,7 +396,7 @@ export default {
         this.filterText = "";
       }
       updateOnLocalStorage("history", this.history);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete"
       });
     },

functions/network.js

@@ -0,0 +1,24 @@
+import AxiosStrategy from "./strategies/AxiosStrategy";
+import ProxyStrategy from "./strategies/ProxyStrategy";
+import FirefoxStrategy from "./strategies/FirefoxStrategy";
+
+
+const runAppropriateStrategy = (req, store) => {
+  // The firefox plugin injects a function to send requests through it
+  // If that is available, then we can use the FirefoxStrategy
+  if (window.firefoxExtSendRequest) {
+    return FirefoxStrategy(req, store); 
+  }
+
+  if (store.state.postwoman.settings.PROXY_ENABLED) {
+    return ProxyStrategy(req, store);
+  }
+
+  return AxiosStrategy(req, store);
+}
+
+const sendNetworkRequest = (req, store) => 
+  runAppropriateStrategy(req, store)
+    .finally(() => window.$nuxt.$loading.finish());
+
+export { sendNetworkRequest };

functions/strategies/AxiosStrategy.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const axiosStrategy = async (req, _store) => {
+  const res = await axios(req);
+  return res;
+};
+
+export default axiosStrategy;

functions/strategies/FirefoxStrategy.js

@@ -0,0 +1,15 @@
+const firefoxStrategy = (req, _store) => new Promise((resolve, reject) => {
+
+  const eventListener = (event) => {
+    window.removeEventListener("firefoxExtSendRequestComplete", eventListener);
+
+    if (event.detail.error) reject(JSON.parse(event.detail.error));
+    else resolve(JSON.parse(event.detail.response));
+  };
+
+  window.addEventListener("firefoxExtSendRequestComplete", eventListener);
+
+  window.firefoxExtSendRequest(req);
+});
+
+export default firefoxStrategy;

functions/strategies/ProxyStrategy.js

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const proxyStrategy = async (req, store) => {
+  const { data } = await axios.post(
+    store.state.postwoman.settings.PROXY_URL ||
+      "https://postwoman.apollotv.xyz/",
+    req
+  );
+  return data;
+};
+
+export default proxyStrategy;

lang/en-US.js

@@ -106,5 +106,148 @@ export default {
   client_id: "Client ID",
   scope: "Scope",
   state: "State",
-  token_req_list: "Token Request List"
+  token_req_list: "Token Request List",
+  no_path: "No path",
+  no_label: "No label",
+  prerequest_script: "Pre-Request Script",
+  no_prerequest_script: "No pre-request script",
+  search_history: "search history",
+  history_empty: "History is empty",
+  history_deleted: "History Deleted",
+  clear: "Clear",
+  clear_all: "Clear All",
+  cleared: "Cleared",
+  close: "Close",
+  sort: "Sort",
+  time: "Time",
+  duration: "Duration",
+  no_duration: "No duration",
+  show_more: "Show more",
+  hide_more: "Hide more",
+  collection: "Collection",
+  current_collection: "Current Collection",
+  select_collection: "Select a Collection",
+  create_collection: "Create a Collection",
+  new: "New",
+  import_export: "Import / Export",
+  more: "More",
+  folder: "Folder",
+  new_folder: "New Folder",
+  my_new_folder: "My New Folder",
+  folder_empty: "Folder is empty",
+  edit_folder: "Edit Folder",
+  edit: "Edit",
+  delete: "Delete",
+  deleted: "Deleted",
+  undo: "Undo",
+  collection_empty: "Collection is empty",
+  new_collection: "New Collection",
+  my_new_collection: "My New Collection",
+  edit_collection: "Edit Collection",
+  edit_request: "Edit Request",
+  save_request_as: "Save Request As",
+  export: "Export",
+  connecting_to: "Connecting to {name}...",
+  connected: "Connected",
+  connected_to: "Connected to {name}",
+  disconnected: "Disconnected",
+  disconnected_from: "Disconnected from {name}",
+  something_went_wrong: "Something went wrong!",
+  error_occurred: "An error has occurred.",
+  browser_support_sse:
+    "This browser doesn't seems to have Server Sent Events support.",
+  log: "Log",
+  no_url: "No URL",
+  run_query: "Run Query",
+  copy_query: "Copy Query",
+  kinda_dark: "Kinda Dark",
+  clearly_white: "Clearly White",
+  just_black: "Just Black",
+  auto_system: "Auth (system)",
+  green: "Green",
+  yellow: "Yellow",
+  pink: "Pink",
+  red: "Red",
+  purple: "Purple",
+  orange: "Orange",
+  cyan: "Cyan",
+  blue: "Blue",
+  loading: "Loading...",
+  fetching: "Fetching...",
+  waiting_send_req: "(waiting to send request)",
+  cancel: "Cancel",
+  save: "Save",
+  dismiss: "Dismiss",
+  are_you_sure: "Are you sure?",
+  yes: "Yes",
+  no: "No",
+  restore: "Restore",
+  add_star: "Add star",
+  remove_star: "Remove star",
+  nothing_found: "Nothing found",
+  replace_current: "Replace current",
+  replace_json: "Replace with JSON",
+  preserve_current: "Preserve current",
+  import_json: "Import from JSON",
+  download_file: "Download file",
+  upload_file: "Upload file",
+  copy_response: "Copy response",
+  copy_code: "Copy code",
+  copy_schema: "Copy Schema",
+  use_request: "Use request",
+  documentation: "Documentation",
+  docs: "Docs",
+  reset_default: "Reset to default",
+  fields: "FIELDS",
+  deprecated: "DEPRECATED",
+  add_one_header: "(add at least one header)",
+  add_one_parameter: "(add at least one parameter)",
+  header_count: "header {count}",
+  parameter_count: "parameter {count}",
+  variable_count: "variable {count}",
+  value_count: "value {count}",
+  send_request_first: "Send a request first",
+  generate_docs: "Generate Documentation",
+  generate_docs_message:
+    "Import any Postwoman Collection to Generate Documentation on-the-go.",
+  generate_docs_first: "Generate documentation first",
+  docs_generated: "Documentation generated",
+  import_collections: "Import collections",
+  optional: "(optional)",
+  json: "JSON",
+  none: "None",
+  username: "Username",
+  password: "Password",
+  token: "Token",
+  payload: "Payload",
+  choose_file: "Choose a file",
+  file_imported: "File imported",
+  f12_details: "(F12 for details)",
+  we_use_cookies: "We use cookies",
+  copied_to_clipboard: "Copied to clipboard",
+  finished_in: "Finished in {duration}ms",
+  check_console_details: "Check console for details.",
+  download_started: "Download started",
+  url_invalid_format: "URL is not formatted properly",
+  curl_invalid_format: "cURL is not formatted properly",
+  enable_proxy: "Try enabling Proxy",
+  complete_config_urls: "Please complete configuration urls.",
+  token_request_saved: "Token request saved",
+  donate_info1:
+    "If you have enjoyed the productivity of using Postwoman, consider donating as a sign of appreciation.",
+  donate_info2:
+    "You can support Postwoman development via the following methods:",
+  one_time_recurring: "One-time or recurring",
+  one_time: "One-time",
+  recurring: "Recurring",
+  wiki: "Wiki",
+  error: "Error",
+  go_home: "Go Home",
+  reload: "Reload",
+  enter_curl: "Enter cURL",
+  empty: "Empty",
+  extensions: "Extensions",
+  extensions_info1: "Browser extension that simplifies access to Postwoman",
+  extensions_info2: "Get Postwoman browser extension!",
+  installed: "Installed"
 };

layouts/default.vue

@@ -12,7 +12,7 @@
               :to="localePath('index')"
               :class="linkActive('/')"
               v-tooltip.right="$t('home')"
-              aria-label="Home"
+              :aria-label="$t('home')"
             >
               <logo alt class="material-icons" style="height: 24px;"></logo>
             </nuxt-link>
@@ -27,7 +27,7 @@
               :to="localePath('graphql')"
               :class="linkActive('/graphql')"
               v-tooltip.right="$t('graphql')"
-              aria-label="GraphQL"
+              :aria-label="$t('graphql')"
             >
               <svg
                 class="material-icons"
@@ -141,8 +141,8 @@
             <nuxt-link
               :to="localePath('doc')"
               :class="linkActive('/doc')"
-              v-tooltip.right="'Documentation'"
+              v-tooltip.right="$t('documentation')"
-              aria-label="Documentation"
+              :aria-label="$t('documentation')"
             >
               <i class="material-icons">books</i>
             </nuxt-link>
@@ -150,7 +150,7 @@
               :to="localePath('settings')"
               :class="linkActive('/settings')"
               v-tooltip.right="$t('settings')"
-              aria-label="Settings"
+              :aria-label="$t('settings')"
             >
               <i class="material-icons">settings</i>
             </nuxt-link>
@@ -289,10 +289,20 @@
                   <i class="material-icons">offline_bolt</i>
                 </button>
                 <v-popover>
-                  <button class="icon" v-tooltip="'More'">
+                  <button class="icon" v-tooltip="$t('more')">
                     <i class="material-icons">more_vert</i>
                   </button>
                   <template slot="popover">
+                    <div>
+                      <button
+                        class="icon"
+                        @click="showExtensions = true"
+                        v-close-popover
+                      >
+                        <i class="material-icons">extension</i>
+                        <span>{{ $t("extensions") }}</span>
+                      </button>
+                    </div>
                     <div>
                       <button
                         class="icon"
@@ -402,6 +412,80 @@
         <aside class="nav-second"></aside>
       </div>
     </div>
+    <modal v-if="showExtensions" @close="showExtensions = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">{{ $t("extensions") }}</h3>
+              <div>
+                <button class="icon" @click="showExtensions = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <p class="info">
+          {{ $t("extensions_info1") }}
+        </p>
+        <div>
+          <a
+            href="https://addons.mozilla.org/en-US/firefox/addon/postwoman"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <svg
+                class="material-icons"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181 1.832-2.066 4.499-3.378 7.472-3.378 5.912 0 8.263 4.283 8.003 6.657z"
+                />
+              </svg>
+              <span>Firefox</span>
+              <span
+                class="icon"
+                v-if="firefoxExtInstalled"
+                v-tooltip="$t('installed')"
+              >
+                <i class="material-icons">done</i>
+              </span>
+            </button>
+          </a>
+        </div>
+        <div>
+          <button class="icon" disabled>
+            <svg
+              class="material-icons"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M2.897 4.181c2.43-2.828 5.763-4.181 9.072-4.181 4.288 0 8.535 2.273 10.717 6.554-2.722.001-6.984 0-9.293 0-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644l-3.793-6.596zm5.11 7.819c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991-3.988 1.791-3.988 3.991zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225-1.33 2.04-1.945 4.294-1.945 6.507 0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214c1.864 1.734 2.271 4.542 1.007 6.719-.951 1.641-3.988 6.766-5.46 9.248 7.189.443 12.752-5.36 12.752-11.972 0-1.313-.22-2.66-.69-3.995h-7.609z"
+              />
+            </svg>
+            <span>Chrome (coming soon)</span>
+            <span
+              class="icon"
+              v-if="chromeExtInstalled"
+              v-tooltip="$t('installed')"
+            >
+              <i class="material-icons">done</i>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </modal>
     <modal v-if="showShortcuts" @close="showShortcuts = false">
       <div slot="header">
         <ul>
@@ -454,18 +538,17 @@
       </div>
       <div slot="body">
         <p class="info">
-          If you have enjoyed the productivity of using Postwoman, consider
+          {{ $t("donate_info1") }}
-          donating as a sign of appreciation.
         </p>
         <p class="info">
-          You can support Postwoman development via the following methods:
+          {{ $t("donate_info2") }}
         </p>
         <div>
           <a
             href="https://opencollective.com/postwoman"
             target="_blank"
             rel="noopener"
-            v-tooltip.right="'One-time or recurring'"
+            v-tooltip.right="$t('one_time_recurring')"
           >
             <button class="icon">
               <i class="material-icons">donut_large</i>
@@ -478,7 +561,7 @@
             href="https://www.paypal.me/liyascthomas"
             target="_blank"
             rel="noopener"
-            v-tooltip.right="'One-time'"
+            v-tooltip.right="$t('one_time')"
           >
             <button class="icon">
               <i class="material-icons">payment</i>
@@ -491,7 +574,7 @@
             href="https://www.patreon.com/liyasthomas"
             target="_blank"
             rel="noopener"
-            v-tooltip.right="'Recurring'"
+            v-tooltip.right="$t('recurring')"
           >
             <button class="icon">
               <i class="material-icons">local_parking</i>
@@ -533,8 +616,12 @@ export default {
       // prompt.
       showInstallPrompt: null,
       version: {},
+      showExtensions: false,
       showShortcuts: false,
-      showSupport: false
+      showSupport: false,
+      firefoxExtInstalled:
+        window.firefoxExtSendRequest !== undefined ? true : false,
+      chromeExtInstalled: false
     };
   },
 
@@ -577,13 +664,13 @@ export default {
       this.showInstallPrompt = await intializePwa();
       let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes";
       if (!cookiesAllowed) {
-        this.$toast.show("We use cookies", {
+        this.$toast.show(this.$t("we_use_cookies"), {
           icon: "info",
           duration: 5000,
           theme: "toasted-primary",
           action: [
             {
-              text: "Dismiss",
+              text: this.$t("dismiss"),
               onClick: (e, toastObject) => {
                 localStorage.setItem("cookiesAllowed", "yes");
                 toastObject.goAway(0);
@@ -592,6 +679,37 @@ export default {
           ]
         });
       }
+      let showExtensionsToast =
+        localStorage.getItem("showExtensionsToast") === "yes";
+      if (
+        !this.firefoxExtInstalled &&
+        !this.chromeExtInstalled &&
+        !showExtensionsToast
+      ) {
+        setTimeout(() => {
+          this.$toast.show(this.$t("extensions_info2"), {
+            icon: "extension",
+            duration: 5000,
+            theme: "toasted-primary",
+            action: [
+              {
+                text: this.$t("yes"),
+                onClick: (e, toastObject) => {
+                  this.showExtensions = true;
+                  localStorage.setItem("showExtensionsToast", "yes");
+                  toastObject.goAway(0);
+                }
+              },
+              {
+                text: this.$t("no"),
+                onClick: (e, toastObject) => {
+                  toastObject.goAway(0);
+                }
+              }
+            ]
+          });
+        }, 15000);
+      }
     })();
 
     window.addEventListener("scroll", event => {

layouts/error.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="page page-error">
-    <img src="~static/icons/error.svg" alt="Error" class="error_banner" />
+    <img
+      src="~static/icons/error.svg"
+      :alt="$t('error')"
+      class="error_banner"
+    />
     <h2>{{ error.statusCode }}</h2>
     <h3>{{ error.message }}</h3>
     <p>
       <nuxt-link to="/">
-        <button>Go Home</button>
+        <button>{{ $t("go_home") }}</button>
       </nuxt-link>
     </p>
     <p>
-      <a href @click.prevent="reloadApplication">Reload</a>
+      <a href @click.prevent="reloadApplication">{{ $t("reload") }}</a>
     </p>
   </div>
 </template>

nuxt.config.js

@@ -361,6 +361,9 @@ export default {
       }
     ],
     defaultLocale: "en",
+    vueI18n: {
+      fallbackLocale: "en"
+    },
     lazy: true,
     langDir: "lang/"
   },

package-lock.json

@@ -1413,12 +1413,12 @@
             }
         },
         "@nuxtjs/axios": {
-            "version": "5.9.2",
+            "version": "5.9.3",
-            "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.9.2.tgz",
+            "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.9.3.tgz",
-            "integrity": "sha512-OwRy40N7Q0V0i5A8ojUy9TlvvaYDPlDmUDKPMVxkcFf+wnmgtJbLJGgHrPWof9Y0jb9EXLgxbRmk0LgrNk7QCw==",
+            "integrity": "sha512-+P1BK7MxMRL4q1WeYM9vyfocJrRoskbuD2TztKU8ryunK8JgpkIvqCzQxTI2BLUbOPd7qvjPLwzA0QBdzqYlaA==",
             "requires": {
                 "@nuxtjs/proxy": "^1.3.3",
-                "axios": "^0.19.0",
+                "axios": "^0.19.1",
                 "axios-retry": "^3.1.2",
                 "consola": "^2.11.3",
                 "defu": "^0.0.4"
@@ -1834,9 +1834,9 @@
             }
         },
         "ace-builds": {
-            "version": "1.4.7",
+            "version": "1.4.8",
-            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.7.tgz",
+            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.8.tgz",
-            "integrity": "sha512-gwQGVFewBopRLho08BfahyvRa9FlB43JUig5ItAKTYc9kJJsbA9QNz75p28QtQomoPQ9rJx82ymL21x4ZSZmdg=="
+            "integrity": "sha512-8ZVAxwyCGAxQX8mOp9imSXH0hoSPkGfy8igJy+WO/7axL30saRhKgg1XPACSmxxPA7nfHVwM+ShWXT+vKsNuFg=="
         },
         "acorn": {
             "version": "6.4.0",
@@ -1972,9 +1972,9 @@
             },
             "dependencies": {
                 "readable-stream": {
-                    "version": "2.3.6",
+                    "version": "2.3.7",
-                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-                    "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+                    "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
                     "dev": true,
                     "requires": {
                         "core-util-is": "~1.0.0",
@@ -2166,12 +2166,11 @@
             "dev": true
         },
         "axios": {
-            "version": "0.19.0",
+            "version": "0.19.1",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.1.tgz",
-            "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+            "integrity": "sha512-Yl+7nfreYKaLRvAvjNPkvfjnQHJM1yLBY3zhqAwcJSwR/6ETkanUgylgtIvkvz0xJ+p/vZuNw8X7Hnb7Whsbpw==",
             "requires": {
-                "follow-redirects": "1.5.10",
+                "follow-redirects": "1.5.10"
-                "is-buffer": "^2.0.2"
             },
             "dependencies": {
                 "debug": {
@@ -2190,11 +2189,6 @@
                         "debug": "=3.1.0"
                     }
                 },
-                "is-buffer": {
-                    "version": "2.0.4",
-                    "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-                    "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
-                },
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -5112,9 +5106,9 @@
             "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
         },
         "globule": {
-            "version": "1.2.1",
+            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
+            "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.0.tgz",
-            "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+            "integrity": "sha512-YlD4kdMqRCQHrhVdonet4TdRtv1/sZKepvoxNT4Nrhrp5HI8XFfc8kFlGlBn2myBo80aGp8Eft259mbcUJhgSg==",
             "dev": true,
             "requires": {
                 "glob": "~7.1.1",
@@ -7048,9 +7042,9 @@
             }
         },
         "node-sass": {
-            "version": "4.13.0",
+            "version": "4.13.1",
-            "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
+            "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
-            "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
+            "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
             "dev": true,
             "requires": {
                 "async-foreach": "^0.1.3",
@@ -9359,22 +9353,22 @@
             }
         },
         "sass-loader": {
-            "version": "8.0.1",
+            "version": "8.0.2",
-            "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.1.tgz",
+            "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
-            "integrity": "sha512-ANR2JHuoxzCI+OPDA0hJBv1Y16A2021hucu0S3DOGgpukKzq9W+4vX9jhIqs4qibT5E7RIRsHMMrN0kdF5nUig==",
+            "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
             "dev": true,
             "requires": {
                 "clone-deep": "^4.0.1",
                 "loader-utils": "^1.2.3",
                 "neo-async": "^2.6.1",
                 "schema-utils": "^2.6.1",
-                "semver": "^7.1.1"
+                "semver": "^6.3.0"
             },
             "dependencies": {
                 "semver": {
-                    "version": "7.1.1",
+                    "version": "6.3.0",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.1.tgz",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-                    "integrity": "sha512-WfuG+fl6eh3eZ2qAf6goB7nhiCd7NPXhmyFxigB/TOkQyeLP8w8GsVehvtGNtnNmyboz4TgeK40B1Kbql/8c5A==",
+                    "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
                     "dev": true
                 }
             }
@@ -10026,9 +10020,9 @@
             },
             "dependencies": {
                 "readable-stream": {
-                    "version": "2.3.6",
+                    "version": "2.3.7",
-                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-                    "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+                    "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
                     "dev": true,
                     "requires": {
                         "core-util-is": "~1.0.0",

package.json

@@ -18,14 +18,14 @@
         "test": "start-server-and-test dev http://localhost:3000 e2e"
     },
     "dependencies": {
-        "@nuxtjs/axios": "^5.9.2",
+        "@nuxtjs/axios": "^5.9.3",
         "@nuxtjs/google-analytics": "^2.2.3",
         "@nuxtjs/google-tag-manager": "^2.3.1",
         "@nuxtjs/pwa": "^3.0.0-beta.19",
         "@nuxtjs/robots": "^2.4.2",
         "@nuxtjs/sitemap": "^2.0.1",
         "@nuxtjs/toast": "^3.3.0",
-        "ace-builds": "^1.4.7",
+        "ace-builds": "^1.4.8",
         "graphql": "^14.5.8",
         "nuxt": "^2.11.0",
         "nuxt-i18n": "^6.4.1",
@@ -37,8 +37,8 @@
     },
     "devDependencies": {
         "cypress": "^3.8.2",
-        "node-sass": "^4.13.0",
+        "node-sass": "^4.13.1",
-        "sass-loader": "^8.0.1",
+        "sass-loader": "^8.0.2",
         "start-server-and-test": "^1.10.6"
     }
 }

pages/doc.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Collections" ref="collections">
+    <pw-section class="blue" :label="$t('collections')" ref="collections">
       <ul>
         <li>
           <p class="info">
-            Import any Postwoman Collection to Generate Documentation on-the-go.
+            {{ $t("generate_docs_message") }}
           </p>
         </li>
       </ul>
@@ -14,10 +14,10 @@
             <button
               class="icon"
               @click="$refs.collectionUpload.click()"
-              v-tooltip="'JSON'"
+              v-tooltip="$t('json')"
             >
               <i class="material-icons">folder</i>
-              <span>Import collections</span>
+              <span>{{ $t("import_collections") }}</span>
             </button>
           </label>
           <input
@@ -48,7 +48,7 @@
         <li>
           <button class="icon" @click="getDoc">
             <i class="material-icons">book</i>
-            <span>Generate Documentation</span>
+            <span>{{ $t("generate_docs") }}</span>
           </button>
         </li>
       </ul>
@@ -56,7 +56,7 @@
 
     <pw-section class="green" label="Documentation" ref="documentation">
       <p v-if="this.items.length === 0" class="info">
-        Generate documentation first
+        {{ $t("generate_docs_first") }}
       </p>
       <div>
         <span
@@ -66,7 +66,7 @@
         >
           <h2>
             <i class="material-icons">folder</i>
-            {{ collection.name || "None" }}
+            {{ collection.name || $t("none") }}
           </h2>
           <span
             class="folder"
@@ -75,7 +75,7 @@
           >
             <h3>
               <i class="material-icons">folder_open</i>
-              {{ folder.name || "None" }}
+              {{ folder.name || $t("none") }}
             </h3>
             <span
               class="request"
@@ -84,99 +84,104 @@
             >
               <h4>
                 <i class="material-icons">insert_drive_file</i>
-                {{ request.name || "None" }}
+                {{ request.name || $t("none") }}
               </h4>
               <p class="doc-desc" v-if="request.url">
                 <span>
-                  URL: <code>{{ request.url || "None" }}</code>
+                  {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.path">
                 <span>
-                  Path: <code>{{ request.path || "None" }}</code>
+                  {{ $t("path") }}:
+                  <code>{{ request.path || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.method">
                 <span>
-                  Method: <code>{{ request.method || "None" }}</code>
+                  {{ $t("method") }}:
+                  <code>{{ request.method || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.auth">
                 <span>
-                  Authentication:
+                  {{ $t("authentication") }}:
-                  <code>{{ request.auth || "None" }}</code>
+                  <code>{{ request.auth || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.httpUser">
                 <span>
-                  Username: <code>{{ request.httpUser || "None" }}</code>
+                  {{ $t("username") }}:
+                  <code>{{ request.httpUser || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.httpPassword">
                 <span>
-                  Password:
+                  {{ $t("password") }}:
-                  <code>{{ request.httpPassword || "None" }}</code>
+                  <code>{{ request.httpPassword || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.bearerToken">
                 <span>
-                  Token: <code>{{ request.bearerToken || "None" }}</code>
+                  {{ $t("token") }}:
+                  <code>{{ request.bearerToken || $t("none") }}</code>
                 </span>
               </p>
-              <h4 v-if="request.headers.length > 0">Headers</h4>
+              <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-              <span
+              <span v-if="request.headers">
-                v-if="request.headers"
+                <p
-                v-for="header in request.headers"
+                  v-for="header in request.headers"
-                :key="header.key"
+                  :key="header.key"
-              >
+                  class="doc-desc"
-                <p class="doc-desc">
+                >
                   <span>
-                    {{ header.key || "None" }}:
+                    {{ header.key || $t("none") }}:
-                    <code>{{ header.value || "None" }}</code>
+                    <code>{{ header.value || $t("none") }}</code>
                   </span>
                 </p>
               </span>
-              <h4 v-if="request.params.length > 0">Parameters</h4>
+              <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-              <span
+              <span v-if="request.params">
-                v-if="request.params"
+                <p
-                v-for="parameter in request.params"
+                  v-for="parameter in request.params"
-                :key="parameter.key"
+                  :key="parameter.key"
-              >
+                  class="doc-desc"
-                <p class="doc-desc">
+                >
                   <span>
-                    {{ parameter.key || "None" }}:
+                    {{ parameter.key || $t("none") }}:
-                    <code>{{ parameter.value || "None" }}</code>
+                    <code>{{ parameter.value || $t("none") }}</code>
                   </span>
                 </p>
               </span>
-              <h4 v-if="request.bodyParam">Payload</h4>
+              <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
-              <span
+              <span v-if="request.bodyParam">
-                v-if="request.bodyParam"
+                <p
-                v-for="payload in request.bodyParam"
+                  v-for="payload in request.bodyParam"
-                :key="payload.key"
+                  :key="payload.key"
-              >
+                  class="doc-desc"
-                <p class="doc-desc">
+                >
                   <span>
-                    {{ payload.key || "None" }}:
+                    {{ payload.key || $t("none") }}:
-                    <code>{{ payload.value || "None" }}</code>
+                    <code>{{ payload.value || $t("none") }}</code>
                   </span>
                 </p>
               </span>
               <p class="doc-desc" v-if="request.rawParams">
                 <span>
-                  Parameters: <code>{{ request.rawParams || "None" }}</code>
+                  {{ $t("parameters") }}:
+                  <code>{{ request.rawParams || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.contentType">
                 <span>
-                  Content Type:
+                  {{ $t("content_type") }}:
-                  <code>{{ request.contentType || "None" }}</code>
+                  <code>{{ request.contentType || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.requestType">
                 <span>
-                  Request Type:
+                  {{ $t("request_type") }}:
-                  <code>{{ request.requestType || "None" }}</code>
+                  <code>{{ request.requestType || $t("none") }}</code>
                 </span>
               </p>
             </span>
@@ -188,98 +193,103 @@
           >
             <h4>
               <i class="material-icons">insert_drive_file</i>
-              {{ request.name || "None" }}
+              {{ request.name || $t("none") }}
             </h4>
             <p class="doc-desc" v-if="request.url">
               <span>
-                URL: <code>{{ request.url || "None" }}</code>
+                {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.path">
               <span>
-                Path: <code>{{ request.path || "None" }}</code>
+                {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.method">
               <span>
-                Method: <code>{{ request.method || "None" }}</code>
+                {{ $t("method") }}:
+                <code>{{ request.method || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.auth">
               <span>
-                Authentication:
+                {{ $t("authentication") }}:
-                <code>{{ request.auth || "None" }}</code>
+                <code>{{ request.auth || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.httpUser">
               <span>
-                Username: <code>{{ request.httpUser || "None" }}</code>
+                {{ $t("username") }}:
+                <code>{{ request.httpUser || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.httpPassword">
               <span>
-                Password: <code>{{ request.httpPassword || "None" }}</code>
+                {{ $t("password") }}:
+                <code>{{ request.httpPassword || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.bearerToken">
               <span>
-                Token: <code>{{ request.bearerToken || "None" }}</code>
+                {{ $t("token") }}:
+                <code>{{ request.bearerToken || $t("none") }}</code>
               </span>
             </p>
-            <h4 v-if="request.headers.length > 0">Headers</h4>
+            <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-            <span
+            <span v-if="request.headers">
-              v-if="request.headers"
+              <p
-              v-for="header in request.headers"
+                v-for="header in request.headers"
-              :key="header.key"
+                :key="header.key"
-            >
+                class="doc-desc"
-              <p class="doc-desc">
+              >
                 <span>
-                  {{ header.key || "None" }}:
+                  {{ header.key || $t("none") }}:
-                  <code>{{ header.value || "None" }}</code>
+                  <code>{{ header.value || $t("none") }}</code>
                 </span>
               </p>
             </span>
-            <h4 v-if="request.params.length > 0">Parameters</h4>
+            <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-            <span
+            <span v-if="request.params">
-              v-if="request.params"
+              <p
-              v-for="parameter in request.params"
+                v-for="parameter in request.params"
-              :key="parameter.key"
+                :key="parameter.key"
-            >
+                class="doc-desc"
-              <p class="doc-desc">
+              >
                 <span>
-                  {{ parameter.key || "None" }}:
+                  {{ parameter.key || $t("none") }}:
-                  <code>{{ parameter.value || "None" }}</code>
+                  <code>{{ parameter.value || $t("none") }}</code>
                 </span>
               </p>
             </span>
-            <h4 v-if="request.bodyParam">Payload</h4>
+            <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
-            <span
+            <span v-if="request.bodyParam">
-              v-if="request.bodyParam"
+              <p
-              v-for="payload in request.bodyParam"
+                v-for="payload in request.bodyParam"
-              :key="payload.key"
+                :key="payload.key"
-            >
+                class="doc-desc"
-              <p class="doc-desc">
+              >
                 <span>
-                  {{ payload.key || "None" }}:
+                  {{ payload.key || $t("none") }}:
-                  <code>{{ payload.value || "None" }}</code>
+                  <code>{{ payload.value || $t("none") }}</code>
                 </span>
               </p>
             </span>
             <p class="doc-desc" v-if="request.rawParams">
               <span>
-                Parameters: <code>{{ request.rawParams || "None" }}</code>
+                {{ $t("parameters") }}:
+                <code>{{ request.rawParams || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.contentType">
               <span>
-                Content Type:
+                {{ $t("content_type") }}:
-                <code>{{ request.contentType || "None" }}</code>
+                <code>{{ request.contentType || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.requestType">
               <span>
-                Request Type:
+                {{ $t("request_type") }}:
-                <code>{{ request.requestType || "None" }}</code>
+                <code>{{ request.requestType || $t("none") }}</code>
               </span>
             </p>
           </span>
@@ -305,9 +315,6 @@
   }
 }
 
-.collection {
-}
-
 .folder {
   border-left: 1px solid var(--brd-color);
   margin: 16px 0 0;
@@ -360,11 +367,11 @@ export default {
           this.collectionJSON = e.target.result;
         };
         reader.readAsText(file);
-        this.$toast.info("File imported", {
+        this.$toast.info(this.$t("file_imported"), {
           icon: "attach_file"
         });
       } else {
-        this.$toast.error("Choose a file", {
+        this.$toast.error(this.$t("choose_file"), {
           icon: "attach_file"
         });
       }
@@ -373,7 +380,7 @@ export default {
     getDoc() {
       try {
         this.items = JSON.parse(this.collectionJSON);
-        this.$toast.info("Documentation generated", {
+        this.$toast.info(this.$t("docs_generated"), {
           icon: "book"
         });
       } catch (e) {

pages/graphql.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" label="Endpoint" ref="endpoint">
+        <pw-section class="blue" :label="$t('endpoint')" ref="endpoint">
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -25,7 +25,7 @@
           </ul>
         </pw-section>
 
-        <pw-section class="orange" label="Headers" ref="headers">
+        <pw-section class="orange" :label="$t('headers')" ref="headers">
           <ul>
             <li>
               <div class="flex-wrap">
@@ -34,7 +34,7 @@
                   <button
                     class="icon"
                     @click="headers = []"
-                    v-tooltip.bottom="'Clear'"
+                    v-tooltip.bottom="$t('clear')"
                   >
                     <i class="material-icons">clear_all</i>
                   </button>
@@ -45,7 +45,7 @@
                 readonly
                 v-textarea-auto-height="headerString"
                 v-model="headerString"
-                placeholder="(add at least one header)"
+                :placeholder="$t('add_one_header')"
                 rows="1"
               ></textarea>
             </li>
@@ -53,7 +53,7 @@
           <ul v-for="(header, index) in headers" :key="index">
             <li>
               <autocomplete
-                :placeholder="'header ' + (index + 1)"
+                :placeholder="$t('header_count', { count: index + 1 })"
                 :source="commonHeaders"
                 :spellcheck="false"
                 :value="header.key"
@@ -68,7 +68,7 @@
             </li>
             <li>
               <input
-                :placeholder="'value ' + (index + 1)"
+                :placeholder="$t('value_count', { count: index + 1 })"
                 :name="'value' + index"
                 :value="header.value"
                 @change="
@@ -85,6 +85,7 @@
                 <button
                   class="icon"
                   @click="removeRequestHeader(index)"
+                  v-tooltip.bottom="$t('delete')"
                   id="header"
                 >
                   <i class="material-icons">delete</i>
@@ -102,7 +103,7 @@
           </ul>
         </pw-section>
 
-        <pw-section class="green" label="Schema" ref="schema">
+        <pw-section class="green" :label="$t('schema')" ref="schema">
           <div class="flex-wrap">
             <label>{{ $t("response") }}</label>
             <div>
@@ -112,8 +113,8 @@
                 ref="ToggleExpandResponse"
                 v-tooltip="{
                   content: !expandResponse
-                    ? 'Expand response'
+                    ? $t('expand_response')
-                    : 'Collapse response'
+                    : $t('collapse_response')
                 }"
               >
                 <i class="material-icons">
@@ -124,7 +125,7 @@
                 class="icon"
                 @click="downloadResponse"
                 ref="downloadResponse"
-                v-tooltip="'Download file'"
+                v-tooltip="$t('download_file')"
               >
                 <i class="material-icons">get_app</i>
               </button>
@@ -132,7 +133,7 @@
                 class="icon"
                 ref="copySchemaCode"
                 @click="copySchema"
-                v-tooltip="'Copy Schema'"
+                v-tooltip="$t('copy_schema')"
               >
                 <i class="material-icons">file_copy</i>
               </button>
@@ -153,14 +154,14 @@
           />
         </pw-section>
 
-        <pw-section class="cyan" label="Query" ref="query">
+        <pw-section class="cyan" :label="$t('query')" ref="query">
           <div class="flex-wrap">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
               <button
                 class="icon"
                 @click="runQuery()"
-                v-tooltip.bottom="'Run Query'"
+                v-tooltip.bottom="$t('run_query')"
               >
                 <i class="material-icons">play_arrow</i>
               </button>
@@ -168,7 +169,7 @@
                 class="icon"
                 @click="copyQuery"
                 ref="copyQueryButton"
-                v-tooltip="'Copy Query'"
+                v-tooltip="$t('copy_query')"
               >
                 <i class="material-icons">file_copy</i>
               </button>
@@ -191,7 +192,7 @@
               <button
                 class="icon"
                 @click="variables = []"
-                v-tooltip.bottom="'Clear'"
+                v-tooltip.bottom="$t('clear')"
               >
                 <i class="material-icons">clear_all</i>
               </button>
@@ -200,7 +201,7 @@
           <ul v-for="(variable, index) in variables" :key="index">
             <li>
               <input
-                :placeholder="'variable ' + (index + 1)"
+                :placeholder="$t('variable_count', { count: index + 1 })"
                 :name="'variable_key_' + index"
                 :value="variable.key"
                 @change="
@@ -214,7 +215,7 @@
             </li>
             <li>
               <input
-                :placeholder="'value ' + (index + 1)"
+                :placeholder="$t('value_count', { count: index + 1 })"
                 :name="'variable_value_' + index"
                 :value="variable.value"
                 @change="
@@ -228,7 +229,11 @@
             </li>
             <div>
               <li>
-                <button class="icon" @click="removeQueryVariable(index)">
+                <button
+                  class="icon"
+                  @click="removeQueryVariable(index)"
+                  v-tooltip.bottom="$t('delete')"
+                >
                   <i class="material-icons">delete</i>
                 </button>
               </li>
@@ -252,7 +257,7 @@
                 class="icon"
                 @click="copyResponse"
                 ref="copyResponseButton"
-                v-tooltip="'Copy Response'"
+                v-tooltip="$t('copy_response')"
               >
                 <i class="material-icons">file_copy</i>
               </button>
@@ -274,7 +279,7 @@
         </pw-section>
       </div>
       <aside class="sticky-inner inner-right">
-        <pw-section class="purple" label="Docs" ref="docs">
+        <pw-section class="purple" :label="$t('docs')" ref="docs">
           <section>
             <input
               v-if="queryFields.length > 0"
@@ -366,7 +371,7 @@
             "
             class="info"
           >
-            Send a request first
+            {{ $t("send_request_first") }}
           </p>
         </pw-section>
       </aside>
@@ -386,6 +391,7 @@ import axios from "axios";
 import * as gql from "graphql";
 import textareaAutoHeight from "../directives/textareaAutoHeight";
 import AceEditor from "../components/ace-editor";
+import { sendNetworkRequest } from "../functions/network";
 
 export default {
   directives: {
@@ -605,7 +611,7 @@ export default {
       aux.select();
       document.execCommand("copy");
       document.body.removeChild(aux);
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       setTimeout(
@@ -621,7 +627,7 @@ export default {
       aux.select();
       document.execCommand("copy");
       document.body.removeChild(aux);
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       setTimeout(
@@ -637,7 +643,7 @@ export default {
       aux.select();
       document.execCommand("copy");
       document.body.removeChild(aux);
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       setTimeout(
@@ -661,14 +667,9 @@ export default {
         const gqlQueryString = this.gqlQueryString;
         this.variables.forEach(variable => {
           // todo: better variable type validation
-          const intRex = new RegExp(`\$${variable.key}\: Int`);
+          if (gqlQueryString.indexOf(`\$${variable.key}: Int`) > -1) {
-          intRex.compile();
-          const floatRex = new RegExp(`\$${variable.key}\: Float`);
-          floatRex.compile();
-
-          if (intRex.test(gqlQueryString)) {
             variables[variable.key] = parseInt(variable.value);
-          } else if (floatRex.test(gqlQueryString)) {
+          } else if (gqlQueryString.indexOf(`\$${variable.key}: Float`) > -1) {
             variables[variable.key] = parseFloat(variable.value);
           } else {
             variables[variable.key] = variable.value;
@@ -685,33 +686,19 @@ export default {
           data: JSON.stringify({ query: gqlQueryString, variables })
         };
 
-        const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
+        const data = await sendNetworkRequest(reqOptions, this.$store);
-          ? {
-              method: "post",
-              url:
-                this.$store.state.postwoman.settings.PROXY_URL ||
-                `https://postwoman.apollotv.xyz/`,
-              data: reqOptions
-            }
-          : reqOptions;
-
-        const res = await axios(reqConfig);
-
-        const data = this.$store.state.postwoman.settings.PROXY_ENABLED
-          ? res.data
-          : res;
 
         this.responseString = JSON.stringify(data.data, null, 2);
 
         this.$nuxt.$loading.finish();
         const duration = Date.now() - startTime;
-        this.$toast.info(`Finished in ${duration}ms`, {
+        this.$toast.info(this.$t("finished_in", { duration }), {
           icon: "done"
         });
       } catch (error) {
         this.$nuxt.$loading.finish();
 
-        this.$toast.error(error + " (F12 for details)", {
+        this.$toast.error(`${error} ${this.$t("f12_details")}`, {
           icon: "error"
         });
         console.log("Error", error);
@@ -719,7 +706,7 @@ export default {
     },
     async getSchema() {
       const startTime = Date.now();
-      this.schemaString = "Loading...";
+      this.schemaString = this.$t("loading");
       this.scrollInto("schema");
 
       // Start showing the loading bar as soon as possible.
@@ -824,13 +811,13 @@ export default {
 
         this.$nuxt.$loading.finish();
         const duration = Date.now() - startTime;
-        this.$toast.info(`Finished in ${duration}ms`, {
+        this.$toast.info(this.$t("finished_in", { duration }), {
           icon: "done"
         });
       } catch (error) {
         this.$nuxt.$loading.finish();
-        this.schemaString = error + ". Check console for details.";
+        this.schemaString = `${error}. ${check_console_details}`;
-        this.$toast.error(error + " (F12 for details)", {
+        this.$toast.error(`${error} ${this.$t("f12_details")}`, {
           icon: "error"
         });
         console.log("Error", error);
@@ -854,7 +841,7 @@ export default {
       document.body.appendChild(a);
       a.click();
       this.$refs.downloadResponse.innerHTML = this.doneButton;
-      this.$toast.success("Download started", {
+      this.$toast.success(this.$t("download_started"), {
         icon: "done"
       });
       setTimeout(() => {
@@ -875,10 +862,10 @@ export default {
       const oldHeaders = this.headers.slice();
 
       this.$store.commit("removeGQLHeader", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           duration: 4000,
           onClick: (e, toastObject) => {
             this.headers = oldHeaders;
@@ -899,10 +886,10 @@ export default {
       const oldVariables = this.variables.slice();
 
       this.$store.commit("removeGQLVariable", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           duration: 4000,
           onClick: (e, toastObject) => {
             this.variables = oldVariables;

pages/index.vue

@@ -18,7 +18,7 @@
                     target="_blank"
                     rel="noopener"
                   >
-                    <button class="icon" v-tooltip="'Wiki'">
+                    <button class="icon" v-tooltip="$t('wiki')">
                       <i class="material-icons">help</i>
                     </button>
                   </a>
@@ -40,7 +40,7 @@
           </ul>
         </pw-section>
 
-        <pw-section class="blue" label="Request" ref="request">
+        <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
             <li>
               <label for="method">{{ $t("method") }}</label>
@@ -86,7 +86,7 @@
                 name="label"
                 type="text"
                 v-model="label"
-                placeholder="(optional)"
+                :placeholder="$t('optional')"
               />
             </li>
             <li>
@@ -135,7 +135,7 @@
                       <button
                         class="icon"
                         @click="$refs.payload.click()"
-                        v-tooltip="'Upload file'"
+                        v-tooltip="$t('upload_file')"
                       >
                         <i class="material-icons">attach_file</i>
                       </button>
@@ -159,7 +159,7 @@
                     readonly
                     v-textarea-auto-height="rawRequestBody"
                     v-model="rawRequestBody"
-                    placeholder="(add at least one parameter)"
+                    :placeholder="$t('add_one_parameter')"
                     rows="1"
                   ></textarea>
                 </li>
@@ -200,6 +200,7 @@
                     <button
                       class="icon"
                       @click="removeRequestBodyParam(index)"
+                      v-tooltip.bottom="$t('delete')"
                       id="delParam"
                     >
                       <i class="material-icons">delete</i>
@@ -306,7 +307,7 @@
               <button
                 class="icon"
                 @click="clearContent('', $event)"
-                v-tooltip.bottom="'Clear All'"
+                v-tooltip.bottom="$t('clear_all')"
                 ref="clearAll"
               >
                 <i class="material-icons">clear_all</i>
@@ -321,7 +322,7 @@
           <div class="tab">
             <pw-section
               class="cyan"
-              label="Authentication"
+              :label="$t('authentication')"
               ref="authentication"
             >
               <ul>
@@ -332,7 +333,7 @@
                       <button
                         class="icon"
                         @click="clearContent('auth', $event)"
-                        v-tooltip.bottom="'Clear'"
+                        v-tooltip.bottom="$t('clear')"
                       >
                         <i class="material-icons">clear_all</i>
                       </button>
@@ -443,14 +444,14 @@
                       <button
                         class="icon"
                         @click="clearContent('access_token', $event)"
-                        v-tooltip.bottom="'Clear'"
+                        v-tooltip.bottom="$t('clear')"
                       >
                         <i class="material-icons">clear_all</i>
                       </button>
                       <button
                         class="icon"
                         @click="showTokenRequest = false"
-                        v-tooltip.bottom="'Close'"
+                        v-tooltip.bottom="$t('close')"
                       >
                         <i class="material-icons">close</i>
                       </button>
@@ -458,7 +459,7 @@
                   </div>
                   <input
                     id="token-name"
-                    placeholder="(optional)"
+                    :placeholder="$t('optional')"
                     name="token_name"
                     v-model="accessTokenName"
                     type="text"
@@ -556,7 +557,7 @@
                       <button
                         class="icon"
                         @click="clearContent('headers', $event)"
-                        v-tooltip.bottom="'Clear'"
+                        v-tooltip.bottom="$t('clear')"
                       >
                         <i class="material-icons">clear_all</i>
                       </button>
@@ -567,7 +568,7 @@
                     readonly
                     v-textarea-auto-height="headerString"
                     v-model="headerString"
-                    placeholder="(add at least one header)"
+                    :placeholder="$t('add_one_header')"
                     rows="1"
                   ></textarea>
                 </li>
@@ -575,7 +576,7 @@
               <ul v-for="(header, index) in headers" :key="index">
                 <li>
                   <autocomplete
-                    :placeholder="'header ' + (index + 1)"
+                    :placeholder="$t('header_count', { count: index + 1 })"
                     :source="commonHeaders"
                     :spellcheck="false"
                     :value="header.key"
@@ -591,7 +592,7 @@
                 </li>
                 <li>
                   <input
-                    :placeholder="'value ' + (index + 1)"
+                    :placeholder="$t('value_count', { count: index + 1 })"
                     :name="'value' + index"
                     :value="header.value"
                     @change="
@@ -608,6 +609,7 @@
                     <button
                       class="icon"
                       @click="removeRequestHeader(index)"
+                      v-tooltip.bottom="$t('delete')"
                       id="header"
                     >
                       <i class="material-icons">delete</i>
@@ -637,7 +639,7 @@
                       <button
                         class="icon"
                         @click="clearContent('parameters', $event)"
-                        v-tooltip.bottom="'Clear'"
+                        v-tooltip.bottom="$t('clear')"
                       >
                         <i class="material-icons">clear_all</i>
                       </button>
@@ -648,7 +650,7 @@
                     readonly
                     v-textarea-auto-height="queryString"
                     v-model="queryString"
-                    placeholder="(add at least one parameter)"
+                    :placeholder="$t('add_one_parameter')"
                     rows="1"
                   ></textarea>
                 </li>
@@ -656,7 +658,7 @@
               <ul v-for="(param, index) in params" :key="index">
                 <li>
                   <input
-                    :placeholder="'parameter ' + (index + 1)"
+                    :placeholder="$t('parameter_count', { count: index + 1 })"
                     :name="'param' + index"
                     :value="param.key"
                     @change="
@@ -670,7 +672,7 @@
                 </li>
                 <li>
                   <input
-                    :placeholder="'value ' + (index + 1)"
+                    :placeholder="$t('value_count', { count: index + 1 })"
                     :name="'value' + index"
                     :value="param.value"
                     @change="
@@ -686,6 +688,7 @@
                     <button
                       class="icon"
                       @click="removeRequestParam(index)"
+                      v-tooltip.bottom="$t('delete')"
                       id="param"
                     >
                       <i class="material-icons">delete</i>
@@ -722,7 +725,7 @@
         <pw-section
           class="purple"
           id="response"
-          label="Response"
+          :label="$t('response')"
           ref="response"
         >
           <ul>
@@ -730,7 +733,7 @@
               <label for="status">{{ $t("status") }}</label>
               <input
                 :class="statusCategory ? statusCategory.className : ''"
-                :value="response.status || '(waiting to send request)'"
+                :value="response.status || $t('waiting_send_req')"
                 ref="status"
                 id="status"
                 name="status"
@@ -770,7 +773,7 @@
                     @click="downloadResponse"
                     ref="downloadResponse"
                     v-if="response.body"
-                    v-tooltip="'Download file'"
+                    v-tooltip="$t('download_file')"
                   >
                     <i class="material-icons">get_app</i>
                   </button>
@@ -779,7 +782,7 @@
                     @click="copyResponse"
                     ref="copyResponse"
                     v-if="response.body"
-                    v-tooltip="'Copy response'"
+                    v-tooltip="$t('copy_response')"
                   >
                     <i class="material-icons">file_copy</i>
                   </button>
@@ -835,7 +838,11 @@
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
           <div class="tab">
-            <pw-section class="yellow" label="Collections" ref="collections">
+            <pw-section
+              class="yellow"
+              :label="$t('collections')"
+              ref="collections"
+            >
               <collections />
             </pw-section>
           </div>
@@ -870,7 +877,7 @@
                 id="import-text"
                 autofocus
                 rows="8"
-                placeholder="Enter cURL"
+                :placeholder="$t('enter_curl')"
               ></textarea>
             </li>
           </ul>
@@ -880,7 +887,7 @@
             <span></span>
             <span>
               <button class="icon" @click="showModal = false">
-                Cancel
+                {{ $t("cancel") }}
               </button>
               <button class="icon primary" @click="handleImport">
                 {{ $t("import") }}
@@ -928,7 +935,7 @@
                     @click="copyRequestCode"
                     id="copyRequestCode"
                     ref="copyRequestCode"
-                    v-tooltip="'Copy code'"
+                    v-tooltip="$t('copy_code')"
                   >
                     <i class="material-icons">file_copy</i>
                   </button>
@@ -971,7 +978,7 @@
                   <button
                     class="icon"
                     @click="clearContent('tokens', $event)"
-                    v-tooltip.bottom="'Clear'"
+                    v-tooltip.bottom="$t('clear')"
                   >
                     <i class="material-icons">clear_all</i>
                   </button>
@@ -1009,7 +1016,7 @@
                 <button
                   class="icon"
                   @click="removeOAuthToken(index)"
-                  v-tooltip.bottom="'Delete'"
+                  v-tooltip.bottom="$t('delete')"
                 >
                   <i class="material-icons">delete</i>
                 </button>
@@ -1017,7 +1024,7 @@
             </div>
           </ul>
           <p v-if="tokens.length === 0" class="info">
-            Empty
+            {{ $t("empty") }}
           </p>
         </div>
         <div slot="footer"></div>
@@ -1059,7 +1066,7 @@
                     :disabled="this.tokenReqs.length === 0"
                     class="icon"
                     @click="removeOAuthTokenReq"
-                    v-tooltip.bottom="'Delete'"
+                    v-tooltip.bottom="$t('delete')"
                   >
                     <i class="material-icons">delete</i>
                   </button>
@@ -1128,6 +1135,7 @@ import getEnvironmentVariablesFromScript from "../functions/preRequest";
 import parseTemplateString from "../functions/templating";
 import AceEditor from "../components/ace-editor";
 import { tokenRequest, oauthRedirect } from "../assets/js/oauth";
+import { sendNetworkRequest } from "../functions/network";
 
 const statusCategories = [
   {
@@ -1389,8 +1397,8 @@ export default {
     },
     "response.body": function(val) {
       if (
-        this.response.body === "(waiting to send request)" ||
+        this.response.body === this.$t("waiting_send_req") ||
-        this.response.body === "Loading..."
+        this.response.body === this.$t("loading")
       ) {
         this.responseBodyText = this.response.body;
         this.responseBodyType = "text";
@@ -1985,27 +1993,15 @@ export default {
       if (typeof requestOptions.data === "string") {
         requestOptions.data = parseTemplateString(requestOptions.data);
       }
-      const config = this.$store.state.postwoman.settings.PROXY_ENABLED
-        ? {
-            method: "POST",
-            url:
-              this.$store.state.postwoman.settings.PROXY_URL ||
-              "https://postwoman.apollotv.xyz/",
-            data: requestOptions
-          }
-        : requestOptions;
 
-      const response = await this.$axios(config);
+      return await sendNetworkRequest(requestOptions, this.$store);
-      return this.$store.state.postwoman.settings.PROXY_ENABLED
-        ? response.data
-        : response;
     },
     async sendRequest() {
       this.$toast.clear();
       this.scrollInto("response");
 
       if (!this.isValidURL) {
-        this.$toast.error("URL is not formatted properly", {
+        this.$toast.error(this.$t("url_invalid_format"), {
           icon: "error"
         });
         return;
@@ -2019,8 +2015,8 @@ export default {
         this.$refs.response.$el.classList.toggle("hidden");
       }
       this.previewEnabled = false;
-      this.response.status = "Fetching...";
+      this.response.status = this.$t("fetching");
-      this.response.body = "Loading...";
+      this.response.body = this.$t("loading");
 
       const auth =
         this.auth === "Basic Auth"
@@ -2081,7 +2077,7 @@ export default {
         );
 
         const duration = Date.now() - startTime;
-        this.$toast.info(`Finished in ${duration}ms`, {
+        this.$toast.info(this.$t("finished_in", { duration }), {
           icon: "done"
         });
 
@@ -2134,12 +2130,12 @@ export default {
           return;
         } else {
           this.response.status = error.message;
-          this.response.body = error + ". Check console for details.";
+          this.response.body = `${error}. ${this.$t("check_console_details")}`;
-          this.$toast.error(error + " (F12 for details)", {
+          this.$toast.error(`${error} ${this.$t("f12_details")}`, {
             icon: "error"
           });
           if (!this.$store.state.postwoman.settings.PROXY_ENABLED) {
-            this.$toast.info("Try enabling Proxy", {
+            this.$toast.info(this.$t("enable_proxy"), {
               icon: "help",
               duration: 8000,
               action: {
@@ -2184,10 +2180,10 @@ export default {
       const oldHeaders = this.headers.slice();
 
       this.$store.commit("removeHeaders", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.headers = oldHeaders;
             toastObject.remove();
@@ -2204,10 +2200,10 @@ export default {
       const oldParams = this.params.slice();
 
       this.$store.commit("removeParams", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.params = oldParams;
             toastObject.remove();
@@ -2224,10 +2220,10 @@ export default {
       const oldBodyParams = this.bodyParams.slice();
 
       this.$store.commit("removeBodyParams", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.bodyParams = oldBodyParams;
             toastObject.remove();
@@ -2255,7 +2251,7 @@ export default {
         document.execCommand("copy");
         document.body.removeChild(dummy);
         this.$refs.copyRequest.innerHTML = this.doneButton;
-        this.$toast.info("Copied to clipboard", {
+        this.$toast.info(this.$t("copied_to_clipboard"), {
           icon: "done"
         });
         setTimeout(
@@ -2266,7 +2262,7 @@ export default {
     },
     copyRequestCode() {
       this.$refs.copyRequestCode.innerHTML = this.doneButton;
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       this.$refs.generatedCode.select();
@@ -2283,7 +2279,7 @@ export default {
     },
     copyResponse() {
       this.$refs.copyResponse.innerHTML = this.doneButton;
-      this.$toast.success("Copied to clipboard", {
+      this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done"
       });
       const aux = document.createElement("textarea");
@@ -2318,7 +2314,7 @@ export default {
       document.body.appendChild(a);
       a.click();
       this.$refs.downloadResponse.innerHTML = this.doneButton;
-      this.$toast.success("Download started", {
+      this.$toast.success(this.$t("download_started"), {
         icon: "done"
       });
       setTimeout(() => {
@@ -2448,7 +2444,7 @@ export default {
         this.showModal = false;
       } catch (error) {
         this.showModal = false;
-        this.$toast.error("cURL is not formatted properly", {
+        this.$toast.error(this.$t("curl_invalid_format"), {
           icon: "error"
         });
       }
@@ -2512,7 +2508,7 @@ export default {
           this.scope = "";
       }
       e.target.innerHTML = this.doneButton;
-      this.$toast.info("Cleared", {
+      this.$toast.info(this.$t("cleared"), {
         icon: "clear_all"
       });
       setTimeout(
@@ -2522,7 +2518,7 @@ export default {
     },
     saveRequest() {
       if (!this.checkCollections()) {
-        this.$toast.error("Create a Collection", {
+        this.$toast.error(this.$t("create_collection"), {
           icon: "error"
         });
         return;
@@ -2586,11 +2582,11 @@ export default {
           this.rawParams = e.target.result;
         };
         reader.readAsText(file);
-        this.$toast.info("File imported", {
+        this.$toast.info(this.$t("file_imported"), {
           icon: "attach_file"
         });
       } else {
-        this.$toast.error("Choose a file", {
+        this.$toast.error(this.$t("choose_file"), {
           icon: "attach_file"
         });
       }
@@ -2600,7 +2596,7 @@ export default {
         this.oidcDiscoveryUrl === "" &&
         (this.authUrl === "" || this.accessTokenUrl === "")
       ) {
-        this.$toast.error("Please complete configuration urls.", {
+        this.$toast.error(this.$t("complete_config_urls"), {
           icon: "error"
         });
         return;
@@ -2641,10 +2637,10 @@ export default {
     removeOAuthToken(index) {
       const oldTokens = this.tokens.slice();
       this.$store.commit("removeOAuthToken", index);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.tokens = oldTokens;
             toastObject.remove();
@@ -2664,7 +2660,7 @@ export default {
           name,
           details
         });
-        this.$toast.info("Token request saved");
+        this.$toast.info(this.$t("token_request_saved"));
         this.showTokenRequestList = false;
       } catch (e) {
         this.$toast.error(e, {
@@ -2679,10 +2675,10 @@ export default {
       );
       if (targetReqIndex < 0) return;
       this.$store.commit("removeOAuthTokenReq", targetReqIndex);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
-          text: "Undo",
+          text: this.$t("undo"),
           onClick: (e, toastObject) => {
             this.tokenReqs = oldTokenReqs;
             toastObject.remove();

pages/realtime.vue

@@ -4,7 +4,7 @@
       <input id="tab-one" type="radio" name="options" checked="checked" />
       <label for="tab-one">{{ $t("websocket") }}</label>
       <div class="tab">
-        <pw-section class="blue" label="Request" ref="request">
+        <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -39,13 +39,13 @@
 
         <pw-section
           class="purple"
-          label="Communication"
+          :label="$t('communication')"
           id="response"
           ref="response"
         >
           <ul>
             <li>
-              <label for="log">Log</label>
+              <label for="log">{{ $t("log") }}</label>
               <div id="log" name="log" class="log">
                 <span v-if="communication.log">
                   <span
@@ -94,7 +94,7 @@
       <input id="tab-two" type="radio" name="options" />
       <label for="tab-two">{{ $t("sse") }}</label>
       <div class="tab">
-        <pw-section class="blue" label="Request" ref="request">
+        <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
             <li>
               <label for="server">{{ $t("server") }}</label>
@@ -129,7 +129,7 @@
 
         <pw-section
           class="purple"
-          label="Communication"
+          :label="$t('communication')"
           id="response"
           ref="response"
         >
@@ -243,7 +243,7 @@ export default {
     connect() {
       this.communication.log = [
         {
-          payload: `Connecting to ${this.url}...`,
+          payload: this.$t("connecting_to", { name: this.url }),
           source: "info",
           color: "var(--ac-color)"
         }
@@ -254,13 +254,13 @@ export default {
           this.connectionState = true;
           this.communication.log = [
             {
-              payload: `Connected to ${this.url}.`,
+              payload: this.$t("connected_to", { name: this.url }),
               source: "info",
               color: "var(--ac-color)",
               ts: new Date().toLocaleTimeString()
             }
           ];
-          this.$toast.success("Connected", {
+          this.$toast.success(this.$t("connected"), {
             icon: "sync"
           });
         };
@@ -270,12 +270,12 @@ export default {
         this.socket.onclose = event => {
           this.connectionState = false;
           this.communication.log.push({
-            payload: `Disconnected from ${this.url}.`,
+            payload: this.$t("disconnected_from", { name: this.url }),
             source: "info",
             color: "#ff5555",
             ts: new Date().toLocaleTimeString()
           });
-          this.$toast.error("Disconnected", {
+          this.$toast.error(this.$t("disconnected"), {
             icon: "sync_disabled"
           });
         };
@@ -288,7 +288,7 @@ export default {
         };
       } catch (ex) {
         this.handleError(ex);
-        this.$toast.error("Something went wrong!", {
+        this.$toast.error(this.$t("something_went_wrong"), {
           icon: "error"
         });
       }
@@ -300,7 +300,7 @@ export default {
       this.disconnect();
       this.connectionState = false;
       this.communication.log.push({
-        payload: `An error has occurred.`,
+        payload: this.$t("error_occurred"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString()
@@ -349,7 +349,7 @@ export default {
     start() {
       this.events.log = [
         {
-          payload: `Connecting to ${this.server}...`,
+          payload: this.$t("connecting_to", { name: this.server }),
           source: "info",
           color: "var(--ac-color)"
         }
@@ -361,13 +361,13 @@ export default {
             this.connectionSSEState = true;
             this.events.log = [
               {
-                payload: `Connected to ${this.server}.`,
+                payload: this.$t("connected_to", { name: this.server }),
                 source: "info",
                 color: "var(--ac-color)",
                 ts: new Date().toLocaleTimeString()
               }
             ];
-            this.$toast.success("Connected", {
+            this.$toast.success(this.$t("connected"), {
               icon: "sync"
             });
           };
@@ -377,12 +377,12 @@ export default {
           this.sse.onclose = event => {
             this.connectionSSEState = false;
             this.events.log.push({
-              payload: `Disconnected from ${this.server}.`,
+              payload: this.$t("disconnected_from", { name: this.server }),
               source: "info",
               color: "#ff5555",
               ts: new Date().toLocaleTimeString()
             });
-            this.$toast.error("Disconnected", {
+            this.$toast.error(this.$t("disconnected"), {
               icon: "sync_disabled"
             });
           };
@@ -395,14 +395,14 @@ export default {
           };
         } catch (ex) {
           this.handleSSEError(ex);
-          this.$toast.error("Something went wrong!", {
+          this.$toast.error(this.$t("something_went_wrong"), {
             icon: "error"
           });
         }
       } else {
         this.events.log = [
           {
-            payload: `This browser doesn't seems to have Server Sent Events support.`,
+            payload: this.$t("browser_support_sse"),
             source: "info",
             color: "#ff5555",
             ts: new Date().toLocaleTimeString()
@@ -414,7 +414,7 @@ export default {
       this.stop();
       this.connectionSSEState = false;
       this.events.log.push({
-        payload: `An error has occurred.`,
+        payload: this.$t("error_occurred"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString()

pages/settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="cyan" label="Theme" ref="theme">
+    <pw-section class="cyan" :label="$t('theme')" ref="theme">
       <ul>
         <li>
           <label>{{ $t("background") }}</label>
@@ -58,7 +58,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="blue" label="Proxy" ref="proxy">
+    <pw-section class="blue" :label="$t('proxy')" ref="proxy">
       <ul>
         <li>
           <div class="flex-wrap">
@@ -76,7 +76,7 @@
               target="_blank"
               rel="noopener"
             >
-              <button class="icon" v-tooltip="'Wiki'">
+              <button class="icon" v-tooltip="$t('wiki')">
                 <i class="material-icons">help</i>
               </button>
             </a>
@@ -90,7 +90,7 @@
             <button
               class="icon"
               @click="settings.PROXY_URL = `https://postwoman.apollotv.xyz/`"
-              v-tooltip.bottom="'Reset to default'"
+              v-tooltip.bottom="$t('reset_default')"
             >
               <i class="material-icons">clear_all</i>
             </button>
@@ -152,26 +152,26 @@ export default {
       themes: [
         {
           color: "#202124",
-          name: "Kinda Dark",
+          name: this.$t("kinda_dark"),
           class: "",
           aceEditor: "twilight"
         },
         {
           color: "#ffffff",
-          name: "Clearly White",
+          name: this.$t("clearly_white"),
           vibrant: true,
           class: "light",
           aceEditor: "iplastic"
         },
         {
           color: "#000000",
-          name: "Just Black",
+          name: this.$t("just_black"),
           class: "black",
           aceEditor: "vibrant_ink"
         },
         {
           color: "var(--bg-color)",
-          name: "Auto (system)",
+          name: this.$t("auto_system"),
           vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
           class: "auto",
           aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
@@ -184,42 +184,42 @@ export default {
         // If the color is vibrant, black is used as the active foreground color.
         {
           color: "#50fa7b",
-          name: "Green",
+          name: this.$t("green"),
           vibrant: true
         },
         {
           color: "#f1fa8c",
-          name: "Yellow",
+          name: this.$t("yellow"),
           vibrant: true
         },
         {
           color: "#ff79c6",
-          name: "Pink",
+          name: this.$t("pink"),
           vibrant: true
         },
         {
           color: "#ff5555",
-          name: "Red",
+          name: this.$t("red"),
           vibrant: false
         },
         {
           color: "#bd93f9",
-          name: "Purple",
+          name: this.$t("purple"),
           vibrant: true
         },
         {
           color: "#ffb86c",
-          name: "Orange",
+          name: this.$t("orange"),
           vibrant: true
         },
         {
           color: "#8be9fd",
-          name: "Cyan",
+          name: this.$t("cyan"),
           vibrant: true
         },
         {
           color: "#57b5f9",
-          name: "Blue",
+          name: this.$t("blue"),
           vibrant: false
         }
       ],