From 1c12c66b3159ad79c958e12d49574fa6eb8fb6bb Mon Sep 17 00:00:00 2001
From: LaurentBrieu <laurent.brieu@mediapart.fr>
Date: Thu, 28 Nov 2019 13:27:52 +0100
Subject: [PATCH] Add translations for FR/EN catalogues

---
 lang/en-US.js       | 82 ++++++++++++++++++++++++++++++++++++++++++++-
 lang/fr-FR.js       | 82 ++++++++++++++++++++++++++++++++++++++++++++-
 layouts/default.vue | 56 +++++++++++++++----------------
 pages/graphql.vue   | 22 ++++++------
 pages/index.vue     | 72 +++++++++++++++++++--------------------
 pages/realtime.vue  | 18 +++++-----
 pages/settings.vue  | 22 ++++++------
 7 files changed, 257 insertions(+), 97 deletions(-)

diff --git a/lang/en-US.js b/lang/en-US.js
index d8d44af56..513f7dfba 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -1,3 +1,83 @@
 export default {
-  send: 'Send'
+  home: 'Home',
+  realtime: 'Realtime',
+  graphql: 'GraphQL',
+  settings: 'Settings',
+  request: 'Request',
+  install_pwa: 'Install PWA',
+  support_us: 'Support us',
+  tweet: 'Tweet',
+  options: 'Options',
+  communication: 'Communication',
+  endpoint: 'Endpoint',
+  schema: 'Schema',
+  theme: 'Theme',
+  subscribe: 'Subscribe',
+  choose_language: 'Choose Language',
+  shortcuts: 'Shortcuts',
+  send_request: 'Send Request',
+  save_to_collections: 'Save to Collections',
+  copy_request_link: 'Copy Request Link',
+  reset_request: 'Reset Request',
+  support_us_on: 'Support us on',
+  open_collective: 'Open Collective',
+  paypal: 'PayPal',
+  patreon: 'Patreon',
+  javascript_code: 'JavaScript Code',
+  method: 'Method',
+  path: 'Path',
+  label: 'Label',
+  again: 'Again',
+  content_type: 'Content Type',
+  raw_input: 'Raw input',
+  parameter_list: 'Parameter List',
+  raw_request_body: 'Raw Request Body',
+  show_code: 'Show Code',
+  hide_code: 'Hide Code',
+  show_prerequest_script: 'Show Pre-Request Script',
+  hide_prerequest_script: 'Hide Pre-Request Script',
+  authentication: 'Authentication',
+  authentication_type: 'Authentication type',
+  include_in_url: 'Include in URL',
+  parameters: 'Parameters',
+  expand_response: 'Expand response',
+  collapse_response: 'Collapse response',
+  hide_preview: 'Hide Preview',
+  preview_html: 'Preview HTML',
+  history: 'History',
+  collections: 'Collections',
+  import_curl: 'Import cURL',
+  import: 'Import',
+  generate_code: 'Generate code',
+  request_type: 'Request type',
+  generated_code: 'Generated code',
+  status: 'Status',
+  headers: 'Headers',
+  websocket: 'WebSocket',
+  waiting_for_connection: '(waiting for connection)',
+  message: 'Message',
+  sse: 'SSE',
+  server: 'Server',
+  events: 'Events',
+  url: 'URL',
+  get_schema: 'Get schema',
+  header_list: 'Header list',
+  add_new: 'Add new',
+  response: 'Response',
+  query: 'Query',
+  queries: 'Queries',
+  mutations: 'Mutations',
+  subscriptions: 'Subscriptions',
+  types: 'Types',
+  send: 'Send',
+  background: 'Background',
+  color: 'Color',
+  labels: 'Labels',
+  multi_color: 'Multi-color',
+  enabled: 'Enabled',
+  disabled: 'Disabled',
+  proxy: 'Proxy',
+  postwoman_official_proxy_hosting: 'Postwoman\'s Official Proxy is hosted by ApolloTV.',
+  read_the: 'Read the',
+  apollotv_privacy_policy: 'ApolloTV privacy policy'
 }
diff --git a/lang/fr-FR.js b/lang/fr-FR.js
index d99c3ac55..ac9035bae 100644
--- a/lang/fr-FR.js
+++ b/lang/fr-FR.js
@@ -1,3 +1,83 @@
 export default {
-  send: 'Envoyer'
+  home: 'Accueil',
+  realtime: 'Temps réel',
+  graphql: 'GraphQL',
+  settings: 'Paramètres',
+  request: 'Request',  
+  install_pwa: 'Installer la PWA',
+  support_us: 'Nous supporter',
+  tweet: 'Tweeter',
+  options: 'Options',
+  communication: 'Communication',
+  endpoint: 'Endpoint',
+  schema: 'Schéma',
+  theme: 'Thème',
+  subscribe: 'S\'inscrire',
+  choose_language: 'Sélectionner une langue',
+  shortcuts: 'Raccourcis',
+  send_request: 'Envoyer la requête',
+  save_to_collections: 'Sauvegarder dans les collections',
+  copy_request_link: 'Copier le lien de la requête',
+  reset_request: 'Réinitialiser la requête',
+  support_us_on: 'Supportez-nous sur',
+  open_collective: 'Ouvrir Collective',
+  paypal: 'PayPal',
+  patreon: 'Patreon',
+  javascript_code: 'Code JavaScript',
+  method: 'Méthode',
+  path: 'Chemin d\'accès',
+  label: 'Libellé',
+  again: 'Réessayer',
+  content_type: 'Type de contenu',
+  raw_input: 'Texte brut',
+  parameter_list: 'Liste des paramètres',
+  raw_request_body: 'Corps de la requête en texte brut',
+  show_code: 'Afficher le code',
+  hide_code: 'Masquer le code',
+  show_prerequest_script: 'Afficher le script de pré-requête',
+  hide_prerequest_script: 'Masquer le script de pré-requête',
+  authentication: 'Authentification',
+  authentication_type: 'Type d\'authentification',
+  include_in_url: 'Inclure dans l\'URL',
+  parameters: 'Paramètres',
+  expand_response: 'Agrandir la réponse',
+  collapse_response: 'Réduire la réponse',
+  hide_preview: 'Masquer la prévisualisation',
+  preview_html: 'Prévisualiser le HTML',
+  history: 'Historique',
+  collections: 'Collections',
+  import_curl: 'Importer en cURL',
+  importer: 'Importer',
+  generate_code: 'Générer le code',
+  request_type: 'Type de requête',
+  generated_code: 'Code généré',
+  status: 'Statut',
+  headers: 'En-têtes',
+  websocket: 'WebSocket',
+  waiting_for_connection: '(en attente de connexion)',
+  message: 'Message',
+  sse: 'SSE',
+  server: 'Serveur',
+  events: 'Évènements',
+  url: 'URL',
+  get_schema: 'Récuperer le schéma',
+  header_list: 'Liste d\'en-têtes',
+  add_new: 'Ajouter',
+  response: 'Réponse',
+  query: 'Requête',
+  queries: 'Requêtes',
+  mutations: 'Mutations',
+  subscriptions: 'Abonnements',
+  types: 'Types',
+  send: 'Envoyer',
+  background: 'Arrière-plan',
+  color: 'Couleur',
+  labels: 'Libellés',
+  multi_color: 'Multi-couleurs',
+  enabled: 'Activé',
+  disabled: 'Désactivé',
+  proxy: 'Proxy',
+  postwoman_official_proxy_hosting: 'Le proxy officiel de Postwoman est hébergé par ApolloTV.',
+  read_the: 'Lire la',
+  apollotv_privacy_policy: 'politique de confidentialité ApolloTV'
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index 535454be5..89211407a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -31,7 +31,7 @@
             class="icon"
             id="installPWA"
             @click.prevent="showInstallPrompt()"
-            v-tooltip="'Install PWA'"
+            v-tooltip="$t('install_pwa')"
           >
             <i class="material-icons">offline_bolt</i>
           </button>
@@ -47,7 +47,7 @@
                   v-close-popover
                 >
                   <i class="material-icons">keyboard</i>
-                  <span>Shortcuts</span>
+                  <span>{{ $t('shortcuts') }}</span>
                 </button>
               </div>
               <div>
@@ -57,7 +57,7 @@
                   v-close-popover
                 >
                   <i class="material-icons">favorite</i>
-                  <span>Support us</span>
+                  <span>{{ $t('support_us') }}</span>
                 </button>
               </div>
               <div>
@@ -76,7 +76,7 @@
                       d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
                     />
                   </svg>
-                  <span>Tweet</span>
+                  <span>{{ $t('tweet') }}</span>
                 </button>
               </div>
             </template>
@@ -95,7 +95,7 @@
             <nuxt-link
               :to="localePath('index')"
               :class="linkActive('/')"
-              v-tooltip.right="'Home'"
+              v-tooltip.right="$t('home')"
               aria-label="Home"
             >
               <logo alt style="height: 24px;"></logo>
@@ -103,21 +103,21 @@
             <nuxt-link
               :to="localePath('realtime')"
               :class="linkActive('/realtime')"
-              v-tooltip.right="'Realtime'"
+              v-tooltip.right="$t('realtime')"
             >
               <i class="material-icons">settings_input_hdmi</i>
             </nuxt-link>
             <nuxt-link
               :to="localePath('graphql')"
               :class="linkActive('/graphql')"
-              v-tooltip.right="'GraphQL'"
+              v-tooltip.right="$t('graphql')"
             >
               <i class="material-icons">cloud</i>
             </nuxt-link>
             <nuxt-link
               :to="localePath('settings')"
               :class="linkActive('/settings')"
-              v-tooltip.right="'Settings'"
+              v-tooltip.right="$t('settings')"
               aria-label="Settings"
             >
               <i class="material-icons">settings</i>
@@ -127,17 +127,17 @@
             <nav class="secondary-nav">
               <ul>
                 <li>
-                  <a href="#request" v-tooltip.right="'Request'">
+                  <a href="#request" v-tooltip.right="$t('request')">
                     <i class="material-icons">cloud_upload</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#options" v-tooltip.right="'Options'">
+                  <a href="#options" v-tooltip.right="$t('options')">
                     <i class="material-icons">toc</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#response" v-tooltip.right="'Response'">
+                  <a href="#response" v-tooltip.right="$t('response')">
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>
@@ -148,12 +148,12 @@
             <nav class="secondary-nav">
               <ul>
                 <li>
-                  <a href="#request" v-tooltip.right="'Request'">
+                  <a href="#request" v-tooltip.right="$t('request')">
                     <i class="material-icons">cloud_upload</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#response" v-tooltip.right="'Communication'">
+                  <a href="#response" v-tooltip.right="$t('communication')">
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>
@@ -164,12 +164,12 @@
             <nav class="secondary-nav">
               <ul>
                 <li>
-                  <a href="#endpoint" v-tooltip.right="'Endpoint'">
+                  <a href="#endpoint" v-tooltip.right="$t('endpoint')">
                     <i class="material-icons">cloud_upload</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#schema" v-tooltip.right="'Schema'">
+                  <a href="#schema" v-tooltip.right="$t('schema')">
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>
@@ -180,12 +180,12 @@
             <nav class="secondary-nav">
               <ul>
                 <li>
-                  <a href="#theme" v-tooltip.right="'Theme'">
+                  <a href="#theme" v-tooltip.right="$t('theme')">
                     <i class="material-icons">brush</i>
                   </a>
                 </li>
                 <li>
-                  <a href="#proxy" v-tooltip.right="'Proxy'">
+                  <a href="#proxy" v-tooltip.right="$t('proxy')">
                     <i class="material-icons">public</i>
                   </a>
                 </li>
@@ -239,12 +239,12 @@
             target="_blank"
             rel="noopener"
           >
-            <button class="icon" v-tooltip="'Subscribe'">
+            <button class="icon" v-tooltip="$t('subscribe')">
               <i class="material-icons">email</i>
             </button>
           </a>
           <v-popover>
-            <button class="icon" v-tooltip="'Choose Language'">
+            <button class="icon" v-tooltip="$t('choose_language')">
               <i class="material-icons">translate</i>
             </button>
             <template slot="popover">
@@ -268,7 +268,7 @@
         <ul>
           <li>
             <div class="flex-wrap">
-              <h3 class="title">Shortcuts</h3>
+              <h3 class="title">{{ $t('shortcuts') }}</h3>
               <div>
                 <button class="icon" @click="showShortcuts = false">
                   <i class="material-icons">close</i>
@@ -281,22 +281,22 @@
       <div slot="body">
         <br />
         <div>
-          <label>Send Request</label>
+          <label>{{ $t('send_request') }}</label>
           <kbd>⌘ G</kbd>
         </div>
         <br />
         <div>
-          <label>Save to Collections</label>
+          <label>{{ $t('save_to_collections') }}</label>
           <kbd>⌘ S</kbd>
         </div>
         <br />
         <div>
-          <label>Copy Request Link</label>
+          <label>{{ $t('copy_request_link') }}</label>
           <kbd>⌘ K</kbd>
         </div>
         <br />
         <div>
-          <label>Reset Request</label>
+          <label>{{ $t('reset_request') }}</label>
           <kbd>⌘ L</kbd>
         </div>
         <br />
@@ -308,7 +308,7 @@
         <ul>
           <li>
             <div class="flex-wrap">
-              <h3 class="title">Support us on</h3>
+              <h3 class="title">{{ $t('support_us_on') }}</h3>
               <div>
                 <button class="icon" @click="showSupport = false">
                   <i class="material-icons">close</i>
@@ -327,7 +327,7 @@
           >
             <button class="icon">
               <i class="material-icons">favorite</i>
-              <span>Open Collective</span>
+              <span>{{ $t('open_collective') }}</span>
             </button>
           </a>
         </div>
@@ -339,7 +339,7 @@
           >
             <button class="icon">
               <i class="material-icons">favorite</i>
-              <span>PayPal</span>
+              <span>{{ $t('paypal') }}</span>
             </button>
           </a>
         </div>
@@ -351,7 +351,7 @@
           >
             <button class="icon">
               <i class="material-icons">favorite</i>
-              <span>Patreon</span>
+              <span>{{ $t('patreon') }}</span>
             </button>
           </a>
         </div>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index acc7be752..91c96a2ac 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -5,7 +5,7 @@
         <pw-section class="blue" label="Endpoint" ref="endpoint">
           <ul>
             <li>
-              <label for="url">URL</label>
+              <label for="url">{{ $t("url") }}</label>
               <input
                 id="url"
                 type="url"
@@ -17,7 +17,7 @@
               <li>
                 <label for="get" class="hide-on-small-screen">&nbsp;</label>
                 <button id="get" name="get" @click="getSchema">
-                  Get Schema
+                  {{ $t("get_schema") }}
                   <span><i class="material-icons">send</i></span>
                 </button>
               </li>
@@ -29,7 +29,7 @@
           <ul>
             <li>
               <div class="flex-wrap">
-                <label for="headerList">Header List</label>
+                <label for="headerList">{{ $t("header_list") }}</label>
                 <div>
                   <button
                     class="icon"
@@ -95,7 +95,7 @@
             <li>
               <button class="icon" @click="addRequestHeader">
                 <i class="material-icons">add</i>
-                <span>Add New</span>
+                <span>{{ $t("add_new") }}</span>
               </button>
             </li>
           </ul>
@@ -103,7 +103,7 @@
 
         <pw-section class="green" label="Schema" ref="schema">
           <div class="flex-wrap">
-            <label>response</label>
+            <label>{{ $t("response") }}</label>
             <div>
               <button
                 class="icon"
@@ -152,7 +152,7 @@
         </pw-section>
         <pw-section class="cyan" label="Query" ref="query">
           <div class="flex-wrap">
-            <label for="gqlQuery">Query</label>
+            <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
               <button
                 class="icon"
@@ -179,7 +179,7 @@
         </pw-section>
         <pw-section class="purple" label="Response" ref="response">
           <div class="flex-wrap">
-            <label for="responseField">Response</label>
+            <label for="responseField">{{ $t("response") }}</label>
             <div>
               <button
                 class="icon"
@@ -217,7 +217,7 @@
               checked="checked"
             />
             <label v-if="queryFields.length > 0" for="queries-tab"
-              >Queries</label
+              >{{ $t("queries") }}</label
             >
             <div v-if="queryFields.length > 0" class="tab">
               <div v-for="field in queryFields" :key="field.name">
@@ -233,7 +233,7 @@
               checked="checked"
             />
             <label v-if="mutationFields.length > 0" for="mutations-tab"
-              >Mutations</label
+              >{{ $t("mutations") }}</label
             >
             <div v-if="mutationFields.length > 0" class="tab">
               <div v-for="field in mutationFields" :key="field.name">
@@ -249,7 +249,7 @@
               checked="checked"
             />
             <label v-if="subscriptionFields.length > 0" for="subscriptions-tab"
-              >Subscriptions</label
+              >{{ $t("subscriptions") }}</label
             >
             <div v-if="subscriptionFields.length > 0" class="tab">
               <div v-for="field in subscriptionFields" :key="field.name">
@@ -264,7 +264,7 @@
               name="side"
               checked="checked"
             />
-            <label v-if="gqlTypes.length > 0" for="gqltypes-tab">Types</label>
+            <label v-if="gqlTypes.length > 0" for="gqltypes-tab">{{ $t("types") }}</label>
             <div v-if="gqlTypes.length > 0" class="tab">
               <div v-for="type in gqlTypes" :key="type.name">
                 <gql-type :gqlType="type" />
diff --git a/pages/index.vue b/pages/index.vue
index d6555efb9..d50d93283 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@
           <ul>
             <li>
               <div class="flex-wrap">
-                <label for="generatedCode">JavaScript Code</label>
+                <label for="generatedCode">{{ $t("javascript_code") }}</label>
                 <div>
                   <a
                     href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
@@ -39,7 +39,7 @@
         <pw-section class="blue" label="Request" ref="request">
           <ul>
             <li>
-              <label for="method">Method</label>
+              <label for="method">{{ $t("method") }}</label>
               <select id="method" v-model="method" @change="methodChange">
                 <option>GET</option>
                 <option>HEAD</option>
@@ -51,7 +51,7 @@
               </select>
             </li>
             <li>
-              <label for="url">URL</label>
+              <label for="url">{{ $t("url") }}</label>
               <input
                 :class="{ error: !isValidURL }"
                 @keyup.enter="isValidURL ? sendRequest() : null"
@@ -62,7 +62,7 @@
               />
             </li>
             <li>
-              <label for="path">Path</label>
+              <label for="path">{{ $t("path") }}</label>
               <input
                 @keyup.enter="isValidURL ? sendRequest() : null"
                 id="path"
@@ -72,7 +72,7 @@
               />
             </li>
             <li>
-              <label for="label">Label</label>
+              <label for="label">{{ $t("label") }}</label>
               <input
                 id="label"
                 name="label"
@@ -98,7 +98,7 @@
                   ref="sendButton"
                 >
                   {{ $t("send") }}
-                  <span id="hidden-message">Again</span>
+                  <span id="hidden-message">{{ $t("again") }}</span>
                   <span>
                     <i class="material-icons">send</i>
                   </span>
@@ -113,7 +113,7 @@
           >
             <ul>
               <li>
-                <label for="contentType">Content Type</label>
+                <label for="contentType">{{ $t("content_type") }}</label>
                 <autocomplete
                   :source="validContentTypes"
                   :spellcheck="false"
@@ -127,8 +127,8 @@
                 <div class="flex-wrap">
                   <span>
                     <pw-toggle :on="rawInput" @change="rawInput = $event"
-                      >Raw Input
-                      {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
+                      >{{ $t("raw_input") }}
+                      {{ rawInput ? $t("enabled") : $t("disabled") }}</pw-toggle
                     >
                   </span>
                   <div>
@@ -154,7 +154,7 @@
             <div v-if="!rawInput">
               <ul>
                 <li>
-                  <label for="reqParamList">Parameter List</label>
+                  <label for="reqParamList">{{ $t("parameter_list") }}</label>
                   <textarea
                     id="reqParamList"
                     readonly
@@ -216,7 +216,7 @@
                     name="addrequest"
                   >
                     <i class="material-icons">add</i>
-                    <span>Add New</span>
+                    <span>{{ $t("add_new") }}</span>
                   </button>
                 </li>
               </ul>
@@ -224,7 +224,7 @@
             <div v-else>
               <ul>
                 <li>
-                  <label for="rawBody">Raw Request Body</label>
+                  <label for="rawBody">{{ $t("raw_request_body") }}</label>
                   <textarea
                     id="rawBody"
                     @keydown="formatRawParams"
@@ -251,7 +251,7 @@
                 @click="isHidden = !isHidden"
                 :disabled="!isValidURL"
                 v-tooltip.bottom="{
-                  content: isHidden ? 'Show Code' : 'Hide Code'
+                  content: isHidden ? $t('show_code') : $t('hide_code')
                 }"
               >
                 <i class="material-icons">flash_on</i>
@@ -261,8 +261,8 @@
                 id="preRequestScriptButton"
                 v-tooltip.bottom="{
                   content: !showPreRequestScript
-                    ? 'Show Pre-Request Script'
-                    : 'Hide Pre-Request Script'
+                    ? $t('show_prerequest_script')
+                    : $t('hide_prerequest_script')
                 }"
                 @click="showPreRequestScript = !showPreRequestScript"
               >
@@ -313,7 +313,7 @@
 
         <section id="options">
           <input id="tab-one" type="radio" name="options" checked="checked" />
-          <label for="tab-one">Authentication</label>
+          <label for="tab-one">{{ $t('authentication') }}</label>
           <div class="tab">
             <pw-section
               class="cyan"
@@ -323,7 +323,7 @@
               <ul>
                 <li>
                   <div class="flex-wrap">
-                    <label for="auth">Authentication Type</label>
+                    <label for="auth">{{ $t('authentication') }}</label>
                     <div>
                       <button
                         class="icon"
@@ -392,19 +392,19 @@
                 <pw-toggle
                   :on="!urlExcludes.auth"
                   @change="setExclude('auth', !$event)"
-                  >Include in URL</pw-toggle
+                  >{{ $t('include_in_url') }}</pw-toggle
                 >
               </div>
             </pw-section>
           </div>
           <input id="tab-two" type="radio" name="options" />
-          <label for="tab-two">Headers</label>
+          <label for="tab-two">{{ $t('headers') }}</label>
           <div class="tab">
             <pw-section class="orange" label="Headers" ref="headers">
               <ul>
                 <li>
                   <div class="flex-wrap">
-                    <label for="headerList">Header List</label>
+                    <label for="headerList">{{ $t('header_list') }}</label>
                     <div>
                       <button
                         class="icon"
@@ -471,20 +471,20 @@
                 <li>
                   <button class="icon" @click="addRequestHeader">
                     <i class="material-icons">add</i>
-                    <span>Add New</span>
+                    <span>{{ $t('add_new') }}</span>
                   </button>
                 </li>
               </ul>
             </pw-section>
           </div>
           <input id="tab-three" type="radio" name="options" />
-          <label for="tab-three">Parameters</label>
+          <label for="tab-three">{{ $t('parameters') }}</label>
           <div class="tab">
             <pw-section class="pink" label="Parameters" ref="parameters">
               <ul>
                 <li>
                   <div class="flex-wrap">
-                    <label for="paramList">Parameter List</label>
+                    <label for="paramList">{{ $t('parameter_list') }}</label>
                     <div>
                       <button
                         class="icon"
@@ -549,7 +549,7 @@
                 <li>
                   <button class="icon" @click="addRequestParam">
                     <i class="material-icons">add</i>
-                    <span>Add New</span>
+                    <span>{{ $t('add_new') }}</span>
                   </button>
                 </li>
               </ul>
@@ -565,7 +565,7 @@
         >
           <ul>
             <li>
-              <label for="status">status</label>
+              <label for="status">{{ $t('status') }}</label>
               <input
                 :class="statusCategory ? statusCategory.className : ''"
                 :value="response.status || '(waiting to send request)'"
@@ -586,7 +586,7 @@
           <ul v-if="response.body">
             <li>
               <div class="flex-wrap">
-                <label for="body">response</label>
+                <label for="body">{{ $t('response') }}</label>
                 <div>
                   <button
                     class="icon"
@@ -595,8 +595,8 @@
                     v-if="response.body"
                     v-tooltip="{
                       content: !expandResponse
-                        ? 'Expand response'
-                        : 'Collapse response'
+                        ? $t('expand_response')
+                        : $t('collapse_response')
                     }"
                   >
                     <i class="material-icons" v-if="!expandResponse"
@@ -655,7 +655,7 @@
                   >
                   <i class="material-icons" v-else>visibility_off</i>
                   <span>{{
-                    previewEnabled ? "Hide Preview" : "Preview HTML"
+                    previewEnabled ? $t('hide_preview') : $t('preview_html')
                   }}</span>
                 </button>
               </div>
@@ -667,7 +667,7 @@
       <aside class="sticky-inner inner-right">
         <section>
           <input id="history-tab" type="radio" name="side" checked="checked" />
-          <label for="history-tab">History</label>
+          <label for="history-tab">{{ $t('history') }}</label>
           <div class="tab">
             <history
               @useHistory="handleUseHistory"
@@ -675,7 +675,7 @@
             ></history>
           </div>
           <input id="collection-tab" type="radio" name="side" />
-          <label for="collection-tab">Collections</label>
+          <label for="collection-tab">{{ $t('collections') }}</label>
           <div class="tab">
             <pw-section class="yellow" label="Collections" ref="collections">
               <collections />
@@ -695,7 +695,7 @@
           <ul>
             <li>
               <div class="flex-wrap">
-                <h3 class="title">Import cURL</h3>
+                <h3 class="title">{{ $t('import_curl') }}</h3>
                 <div>
                   <button class="icon" @click="showModal = false">
                     <i class="material-icons">close</i>
@@ -722,7 +722,7 @@
             <li>
               <button class="icon" @click="handleImport">
                 <i class="material-icons">get_app</i>
-                <span>Import</span>
+                <span>{{ $t('import') }}</span>
               </button>
             </li>
           </ul>
@@ -734,7 +734,7 @@
           <ul>
             <li>
               <div class="flex-wrap">
-                <h3 class="title">Generate code</h3>
+                <h3 class="title">{{ $t('generate_code') }}</h3>
                 <div>
                   <button class="icon" @click="isHidden = true">
                     <i class="material-icons">close</i>
@@ -747,7 +747,7 @@
         <div slot="body">
           <ul>
             <li>
-              <label for="requestType">Request Type</label>
+              <label for="requestType">{{ $t('request_type') }}</label>
               <select id="requestType" v-model="requestType">
                 <option>JavaScript XHR</option>
                 <option>Fetch</option>
@@ -758,7 +758,7 @@
           <ul>
             <li>
               <div class="flex-wrap">
-                <label for="generatedCode">Generated Code</label>
+                <label for="generatedCode">{{ $t('generated_code') }}</label>
                 <div>
                   <button
                     class="icon"
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 6680e3b8f..0abff8cd8 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -2,12 +2,12 @@
   <div class="page">
     <section id="options">
       <input id="tab-one" type="radio" name="options" checked="checked" />
-      <label for="tab-one">WebSocket</label>
+      <label for="tab-one">{{ $t("websocket") }}</label>
       <div class="tab">
         <pw-section class="blue" label="Request" ref="request">
           <ul>
             <li>
-              <label for="url">URL</label>
+              <label for="url">{{ $t("url") }}</label>
               <input
                 id="url"
                 type="url"
@@ -56,13 +56,13 @@
                     }}{{ logEntry.payload }}</span
                   >
                 </span>
-                <span v-else>(waiting for connection)</span>
+                <span v-else>{{ $t("waiting_for_connection") }}</span>
               </div>
             </li>
           </ul>
           <ul>
             <li>
-              <label for="message">Message</label>
+              <label for="message">{{ $t("message") }}</label>
               <input
                 id="message"
                 name="message"
@@ -81,7 +81,7 @@
                   :disabled="!connectionState"
                   @click="sendMessage"
                 >
-                  Send
+                  {{ $t("send") }}
                   <span>
                     <i class="material-icons">send</i>
                   </span>
@@ -92,12 +92,12 @@
         </pw-section>
       </div>
       <input id="tab-two" type="radio" name="options" />
-      <label for="tab-two">SSE</label>
+      <label for="tab-two">{{ $t("sse") }}</label>
       <div class="tab">
         <pw-section class="blue" label="Request" ref="request">
           <ul>
             <li>
-              <label for="server">Server</label>
+              <label for="server">{{ $t("server") }}</label>
               <input
                 id="server"
                 type="url"
@@ -137,7 +137,7 @@
         >
           <ul>
             <li>
-              <label for="log">Events</label>
+              <label for="log">{{ $t("events") }}</label>
               <div id="log" name="log" class="log">
                 <span v-if="events.log">
                   <span
@@ -148,7 +148,7 @@
                     }}{{ logEntry.payload }}</span
                   >
                 </span>
-                <span v-else>(waiting for connection)</span>
+                <span v-else>{{ $t("waiting_for_connection") }}</span>
               </div>
               <div id="result"></div>
             </li>
diff --git a/pages/settings.vue b/pages/settings.vue
index fbedbf176..4c23da364 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -3,7 +3,7 @@
     <pw-section class="cyan" label="Theme" ref="theme">
       <ul>
         <li>
-          <h3 class="title">Background</h3>
+          <h3 class="title">{{ $t("background") }}</h3>
           <div class="backgrounds">
             <span
               :key="theme.class"
@@ -22,7 +22,7 @@
       </ul>
       <ul>
         <li>
-          <h3 class="title">Color</h3>
+          <h3 class="title">{{ $t("color") }}</h3>
           <div class="colors">
             <span
               :key="entry.color"
@@ -41,14 +41,14 @@
       </ul>
       <ul>
         <li>
-          <h3 class="title">Labels</h3>
+          <h3 class="title">{{ $t("color") }}</h3>
           <span>
             <pw-toggle
               :on="settings.FRAME_COLORS_ENABLED"
               @change="toggleSetting('FRAME_COLORS_ENABLED')"
-              >Multi-color
+              >{{ $t("multi_color") }}
               {{
-                settings.FRAME_COLORS_ENABLED ? "Enabled" : "Disabled"
+                settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled")
               }}</pw-toggle
             >
           </span>
@@ -64,8 +64,8 @@
               <pw-toggle
                 :on="settings.PROXY_ENABLED"
                 @change="toggleSetting('PROXY_ENABLED')"
-                >Proxy
-                {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}</pw-toggle
+                >{{ $t("proxy") }}
+                {{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}</pw-toggle
               >
             </span>
             <a
@@ -83,7 +83,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <label for="url">URL</label>
+            <label for="url">{{ $t("url") }}</label>
             <button
               class="icon"
               @click="settings.PROXY_URL = `https://postwoman.apollotv.xyz/`"
@@ -103,11 +103,11 @@
       <ul class="info">
         <li>
           <p>
-            Postwoman's Official Proxy is hosted by ApolloTV.
+            {{ $t("postwoman_official_proxy_hosting") }}
             <br />
-            Read the
+            {{ $t("read_the") }}
             <a href="https://apollotv.xyz/legal" target="_blank" rel="noopener"
-              >ApolloTV privacy policy</a
+              >{{ $t("apollotv_privacy_policy") }}</a
             >.
           </p>
         </li>