Replaced hard-coded strings with localizable strings

Added en locale as localization fallback

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,7 @@
     <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 +26,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,7 @@
     <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 +26,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,14 +43,14 @@ 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
           class="icon"
           @click="displayModalImportExport(true)"
-          v-tooltip="'Import / Export'"
+          v-tooltip="$t('import_export')"
         >
           <i class="material-icons">import_export</i>
         </button>

components/collections/request.vue

@@ -1,26 +1,26 @@
 <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,16 @@
 <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 +27,7 @@
             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 +35,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 +58,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 +67,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 +79,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 +92,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 +110,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 +131,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 +140,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 +164,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 +179,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 +205,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 +231,20 @@
                 <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 +252,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 +376,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 +397,7 @@ export default {
         this.filterText = "";
       }
       updateOnLocalStorage("history", this.history);
-      this.$toast.error("Deleted", {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete"
       });
     },