From eb463a29587081965591a732b4dba74ee5c89925 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 6 Nov 2022 17:56:44 -0600
Subject: [PATCH] Add:Start of localization i18n #1103

---
 client/components/app/SideRail.vue            | 16 ++---
 client/components/controls/GlobalSearch.vue   |  2 +-
 client/components/tables/UsersTable.vue       |  2 +-
 .../tables/library/LibrariesTable.vue         |  2 +-
 client/nuxt.config.js                         |  3 +-
 client/pages/account.vue                      | 20 +++----
 client/pages/config/index.vue                 | 60 +++++++++----------
 client/plugins/i18n.js                        | 47 +++++++++++++++
 client/strings/en-us.json                     | 54 +++++++++++++++++
 client/strings/es.json                        | 54 +++++++++++++++++
 client/strings/it.json                        | 54 +++++++++++++++++
 client/strings/pl.json                        | 54 +++++++++++++++++
 client/strings/zh-ch.json                     | 54 +++++++++++++++++
 13 files changed, 367 insertions(+), 55 deletions(-)
 create mode 100644 client/plugins/i18n.js
 create mode 100644 client/strings/en-us.json
 create mode 100644 client/strings/es.json
 create mode 100644 client/strings/it.json
 create mode 100644 client/strings/pl.json
 create mode 100644 client/strings/zh-ch.json

diff --git a/client/components/app/SideRail.vue b/client/components/app/SideRail.vue
index 9cdbf192..835062f6 100644
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@@ -9,7 +9,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Home</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
 
       <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -17,7 +17,7 @@
     <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="material-icons">format_list_bulleted</span>
 
-      <p class="font-book pt-1" style="font-size: 0.9rem">Latest</p>
+      <p class="font-book pt-1" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
 
       <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -27,7 +27,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Library</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
 
       <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -37,7 +37,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Series</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
 
       <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -45,7 +45,7 @@
     <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="material-icons-outlined">collections_bookmark</span>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Collections</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
 
       <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -58,7 +58,7 @@
         />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Authors</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
 
       <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -66,7 +66,7 @@
     <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="abs-icons icon-podcast text-xl"></span>
 
-      <p class="font-book pt-1.5" style="font-size: 0.9rem">Search</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">{{ $strings.ButtonSearch }}</p>
 
       <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -74,7 +74,7 @@
     <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
       <span class="material-icons text-2xl">warning</span>
 
-      <p class="font-book pt-1.5" style="font-size: 1rem">Issues</p>
+      <p class="font-book pt-1.5" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
 
       <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
diff --git a/client/components/controls/GlobalSearch.vue b/client/components/controls/GlobalSearch.vue
index 09590299..185b1363 100644
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="sm:w-80 w-full relative">
     <form @submit.prevent="submitSearch">
-      <ui-text-input ref="input" v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
+      <ui-text-input ref="input" v-model="search" :placeholder="$strings.SearchPlaceholder" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
     </form>
     <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
       <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index e615ca2b..1651f3f2 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
     <div class="flex items-center mb-2">
-      <h1 class="text-xl">Users</h1>
+      <h1 class="text-xl">{{ $strings.HeaderUsers }}</h1>
       <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddUser">
         <span class="material-icons" style="font-size: 1.4rem">add</span>
       </div>
diff --git a/client/components/tables/library/LibrariesTable.vue b/client/components/tables/library/LibrariesTable.vue
index 86ddec47..cac4cca1 100644
--- a/client/components/tables/library/LibrariesTable.vue
+++ b/client/components/tables/library/LibrariesTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="librariesTable" class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
     <div class="flex items-center mb-2">
-      <h1 class="text-xl">Libraries</h1>
+      <h1 class="text-xl">{{ $strings.HeaderLibraries }}</h1>
       <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddLibrary">
         <span class="material-icons" style="font-size: 1.4rem">add</span>
       </div>
diff --git a/client/nuxt.config.js b/client/nuxt.config.js
index 462cdb65..37cd8349 100644
--- a/client/nuxt.config.js
+++ b/client/nuxt.config.js
@@ -52,7 +52,8 @@ module.exports = {
     '@/plugins/init.client.js',
     '@/plugins/axios.js',
     '@/plugins/toast.js',
-    '@/plugins/utils.js'
+    '@/plugins/utils.js',
+    '@/plugins/i18n.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
diff --git a/client/pages/account.vue b/client/pages/account.vue
index 88c294c1..9250257a 100644
--- a/client/pages/account.vue
+++ b/client/pages/account.vue
@@ -1,35 +1,35 @@
 <template>
   <div id="page-wrapper" class="page p-6 overflow-y-auto relative" :class="streamLibraryItem ? 'streaming' : ''">
     <div class="w-full max-w-xl mx-auto">
-      <h1 class="text-2xl">Account</h1>
+      <h1 class="text-2xl">{{ $strings.HeaderAccount }}</h1>
 
       <div class="my-4">
         <div class="flex -mx-2">
           <div class="w-2/3 px-2">
-            <ui-text-input-with-label disabled :value="username" label="Username" />
+            <ui-text-input-with-label disabled :value="username" :label="$strings.LabelUsername" />
           </div>
           <div class="w-1/3 px-2">
-            <ui-text-input-with-label disabled :value="usertype" label="Account Type" />
+            <ui-text-input-with-label disabled :value="usertype" :label="$strings.LabelAccountType" />
           </div>
         </div>
 
         <div class="w-full h-px bg-primary my-4" />
 
-        <p v-if="!isGuest" class="mb-4 text-lg">Change Password</p>
+        <p v-if="!isGuest" class="mb-4 text-lg">{{ $strings.HeaderChangePassword }}</p>
         <form v-if="!isGuest" @submit.prevent="submitChangePassword">
-          <ui-text-input-with-label v-model="password" :disabled="changingPassword" type="password" label="Password" class="my-2" />
-          <ui-text-input-with-label v-model="newPassword" :disabled="changingPassword" type="password" label="New Password" class="my-2" />
-          <ui-text-input-with-label v-model="confirmPassword" :disabled="changingPassword" type="password" label="Confirm Password" class="my-2" />
+          <ui-text-input-with-label v-model="password" :disabled="changingPassword" type="password" :label="$strings.LabelPassword" class="my-2" />
+          <ui-text-input-with-label v-model="newPassword" :disabled="changingPassword" type="password" :label="$strings.LabelNewPassword" class="my-2" />
+          <ui-text-input-with-label v-model="confirmPassword" :disabled="changingPassword" type="password" :label="$strings.LabelConfirmPassword" class="my-2" />
           <div class="flex items-center py-2">
-            <p v-if="isRoot" class="text-error py-2 text-xs">* Root user is the only user that can have an empty password</p>
+            <p v-if="isRoot" class="text-error py-2 text-xs">* {{ $strings.NoteChangeRootPassword }}</p>
             <div class="flex-grow" />
-            <ui-btn v-show="(password && newPassword && confirmPassword) || isRoot" type="submit" :loading="changingPassword" color="success">Submit</ui-btn>
+            <ui-btn v-show="(password && newPassword && confirmPassword) || isRoot" type="submit" :loading="changingPassword" color="success">{{ $strings.ButtonChangePasswordSubmit }}</ui-btn>
           </div>
         </form>
       </div>
 
       <div class="py-4 mt-8 flex">
-        <ui-btn color="primary flex items-center text-lg" @click="logout"><span class="material-icons mr-4 icon-text">logout</span>Logout</ui-btn>
+        <ui-btn color="primary flex items-center text-lg" @click="logout"><span class="material-icons mr-4 icon-text">logout</span>{{ $strings.ButtonLogout }}</ui-btn>
       </div>
     </div>
   </div>
diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index 70c25681..d8615d35 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -2,19 +2,19 @@
   <div>
     <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-2">
       <div class="mb-2">
-        <h1 class="text-xl">Settings</h1>
+        <h1 class="text-xl">{{ $strings.HeaderSettings }}</h1>
       </div>
 
       <div class="lg:flex">
         <div class="flex-1">
           <div class="pt-4">
-            <h2 class="font-semibold">General</h2>
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsGeneral }}</h2>
           </div>
           <div class="flex items-end py-2">
             <ui-toggle-switch v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" />
-            <ui-tooltip :text="tooltips.storeCoverWithItem">
+            <ui-tooltip :text="$strings.LabelSettingsStoreCoversWithItemHelp">
               <p class="pl-4">
-                Store covers with item
+                {{ $strings.LabelSettingsStoreCoversWithItem }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -22,9 +22,9 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.storeMetadataWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeMetadataWithItem', val)" />
-            <ui-tooltip :text="tooltips.storeMetadataWithItem">
+            <ui-tooltip :text="$strings.LabelSettingsStoreMetadataWithItemHelp">
               <p class="pl-4">
-                Store metadata with item
+                {{ $strings.LabelSettingsStoreMetadataWithItem }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -32,31 +32,31 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
-            <ui-tooltip :text="tooltips.sortingIgnorePrefix">
+            <ui-tooltip :text="$strings.LabelSettingsSortingIgnorePrefixesHelp">
               <p class="pl-4">
-                Ignore prefixes when sorting
+                {{ $strings.LabelSettingsSortingIgnorePrefixes }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
           <div v-if="newServerSettings.sortingIgnorePrefix" class="w-72 ml-14 mb-2">
-            <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" label="Prefixes to Ignore (case insensitive)" @input="updateSortingPrefixes" :disabled="updatingServerSettings" />
+            <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" :label="$strings.LabelPrefixesToIgnore" @input="updateSortingPrefixes" :disabled="updatingServerSettings" />
           </div>
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
-            <p class="pl-4">Chromecast support</p>
+            <p class="pl-4">{{ $strings.LabelSettingsChromecastSupport }}</p>
           </div>
 
           <div class="pt-4">
-            <h2 class="font-semibold">Display</h2>
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsDisplay }}</h2>
           </div>
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="homepageUseBookshelfView" :disabled="updatingServerSettings" @input="updateHomeUseBookshelfView" />
-            <ui-tooltip :text="tooltips.bookshelfView">
+            <ui-tooltip :text="$strings.LabelSettingsBookshelfViewHelp">
               <p class="pl-4">
-                Home page use bookshelf view
+                {{ $strings.LabelSettingsHomePageBookshelfView }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -64,30 +64,30 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="useBookshelfView" :disabled="updatingServerSettings" @input="updateUseBookshelfView" />
-            <ui-tooltip :text="tooltips.bookshelfView">
+            <ui-tooltip :text="$strings.LabelSettingsBookshelfViewHelp">
               <p class="pl-4">
-                Library use bookshelf view
+                {{ $strings.LabelSettingsLibraryBookshelfView }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
 
           <div class="flex items-center py-2">
-            <p class="pr-4">Date Format</p>
+            <p class="pr-4">{{ $strings.LabelSettingsDateFormat }}</p>
             <ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" />
           </div>
         </div>
 
         <div class="flex-1">
           <div class="pt-4">
-            <h2 class="font-semibold">Scanner</h2>
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsScanner }}</h2>
           </div>
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerParseSubtitle', val)" />
-            <ui-tooltip :text="tooltips.scannerParseSubtitle">
+            <ui-tooltip :text="$strings.LabelSettingsParseSubtitlesHelp">
               <p class="pl-4">
-                Parse subtitles
+                {{ $strings.LabelSettingsParseSubtitles }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -95,9 +95,9 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.scannerFindCovers" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerFindCovers', val)" />
-            <ui-tooltip :text="tooltips.scannerFindCovers">
+            <ui-tooltip :text="$strings.LabelSettingsFindCoversHelp">
               <p class="pl-4">
-                Find covers
+                {{ $strings.LabelSettingsFindCovers }}
                 <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
@@ -168,14 +168,14 @@
           </div> -->
 
           <div class="pt-4">
-            <h2 class="font-semibold">Experimental Features</h2>
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsExperimental }}</h2>
           </div>
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="showExperimentalFeatures" />
             <ui-tooltip :text="tooltips.experimentalFeatures">
               <p class="pl-4">
-                Experimental Features
+                Experimental features
                 <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
                   <span class="material-icons icon-text text-sm">info_outlined</span>
                 </a>
@@ -210,14 +210,14 @@
 
     <div class="flex items-center py-4">
       <div class="flex-grow" />
-      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeCache">Purge All Cache</ui-btn>
-      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeItemsCache">Purge Items Cache</ui-btn>
-      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isResettingLibraryItems" @click="resetLibraryItems">Remove All Library Items</ui-btn>
+      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeCache">{{ $strings.ButtonPurgeAllCache }}</ui-btn>
+      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isPurgingCache" @click.stop="purgeItemsCache">{{ $strings.ButtonPurgeItemsCache }}</ui-btn>
+      <ui-btn color="bg" small :padding-x="4" class="hidden lg:block mr-2" :loading="isResettingLibraryItems" @click="resetLibraryItems">{{ $strings.ButtonRemoveAllLibraryItems }}</ui-btn>
     </div>
     <div class="flex items-center py-4">
       <div class="flex-grow" />
       <p class="pr-2 text-sm font-book text-yellow-400">
-        Report bugs, request features, and contribute on
+        {{ $strings.MessageReportBugsAndContribute }}
         <a class="underline" href="https://github.com/advplyr/audiobookshelf" target="_blank">github</a>
       </p>
       <a href="https://github.com/advplyr/audiobookshelf" target="_blank" class="text-white hover:text-gray-200 hover:scale-150 hover:rotate-6 transform duration-500">
@@ -282,12 +282,6 @@ export default {
         scannerPreferOpfMetadata: 'OPF file metadata will be used for book details over folder names',
         scannerPreferMatchedMetadata: 'Matched data will overide book details when using Quick Match',
         scannerPreferAudioMetadata: 'Audio file ID3 meta tags will be used for book details over folder names',
-        scannerParseSubtitle: 'Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by " - "<br>i.e. "Book Title - A Subtitle Here" has the subtitle "A Subtitle Here"',
-        sortingIgnorePrefix: 'i.e. for prefix "the" book title "The Book Title" would sort as "Book Title, The"',
-        scannerFindCovers: 'If your audiobook does not have an embedded cover or a cover image inside the folder, the scanner will attempt to find a cover.<br>Note: This will extend scan time',
-        bookshelfView: 'Skeumorphic design with wooden shelves',
-        storeCoverWithItem: 'By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named "cover" will be kept',
-        storeMetadataWithItem: 'By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension',
         enableEReader: 'E-reader is still a work in progress, but use this setting to open it up to all your users (or use the "Experimental Features" toggle just for use by you)',
         scannerPreferOverdriveMediaMarker: 'MP3 files from Overdrive come with chapter timings embedded as custom metadata. Enabling this will use these tags for chapter timings automatically',
         scannerUseSingleThreadedProber: 'The old scanner used a single thread. Leaving it in to use as a comparison for now.',
diff --git a/client/plugins/i18n.js b/client/plugins/i18n.js
new file mode 100644
index 00000000..2719507c
--- /dev/null
+++ b/client/plugins/i18n.js
@@ -0,0 +1,47 @@
+import Vue from "vue"
+
+const defaultCode = 'en-us'
+
+Vue.prototype.$i18nCode = ''
+Vue.prototype.$strings = {}
+
+var translations = {}
+
+function loadTranslationStrings(code) {
+  return new Promise((resolve) => {
+    import(`../strings/${code}`).then((fileContents) => {
+      resolve(fileContents.default)
+    }).catch((error) => {
+      console.error('Failed to load i18n strings', code, error)
+      resolve({})
+    })
+  })
+}
+
+async function loadi18n(code) {
+  if (Vue.prototype.$i18nCode == code) {
+    // already set
+    return
+  }
+
+  const currentCode = Vue.prototype.$i18nCode
+  const strings = translations[code] || await loadTranslationStrings(code)
+
+  translations[code] = strings
+  Vue.prototype.$i18nCode = code
+
+  if (!currentCode) {
+    // first load
+    Vue.prototype.$strings = strings
+    return
+  }
+
+  for (const key in Vue.prototype.$strings) {
+    Vue.prototype.$strings[key] = strings[key] || translations[defaultCode][key]
+  }
+  console.log('i18n strings=', Vue.prototype.$strings)
+}
+
+Vue.prototype.$i18nUpdate = loadi18n
+
+loadi18n(defaultCode)
\ No newline at end of file
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
new file mode 100644
index 00000000..3311a57e
--- /dev/null
+++ b/client/strings/en-us.json
@@ -0,0 +1,54 @@
+{
+  "ButtonHome": "Home",
+  "ButtonLatest": "Latest",
+  "ButtonLibrary": "Library",
+  "ButtonSeries": "Series",
+  "ButtonCollections": "Collections",
+  "ButtonAuthors": "Authors",
+  "ButtonSearch": "Search",
+  "ButtonIssues": "Issues",
+  "ButtonChangePasswordSubmit": "Submit",
+  "ButtonLogout": "Logout",
+  "ButtonPurgeAllCache": "Purge All Cache",
+  "ButtonPurgeItemsCache": "Purge Items Cache",
+  "ButtonRemoveAllLibraryItems": "Remove All Library Items",
+  "HeaderAccount": "Account",
+  "HeaderChangePassword": "Change Password",
+  "HeaderSettings": "Settings",
+  "HeaderLibraries": "Libraries",
+  "HeaderUsers": "Users",
+  "HeaderListeningSessions": "Listening Sessions",
+  "HeaderBackups": "Backups",
+  "HeaderLogs": "Logs",
+  "HeaderNotifications": "Notifications",
+  "HeaderLibraryStats": "Library Stats",
+  "HeaderYourStats": "Your Stats",
+  "HeaderSettingsGeneral": "General",
+  "HeaderSettingsScanner": "Scanner",
+  "HeaderSettingsDisplay": "Display",
+  "HeaderSettingsExperimental": "Experimental Features",
+  "LabelUsername": "Username",
+  "LabelAccountType": "Account Type",
+  "LabelPassword": "Password",
+  "LabelNewPassword": "New Password",
+  "LabelConfirmPassword": "Confirm Password",
+  "LabelSettingsStoreCoversWithItem": "Store covers with item",
+  "LabelSettingsStoreCoversWithItemHelp": "By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named \"cover\" will be kept",
+  "LabelSettingsStoreMetadataWithItem": "Store metadata with item",
+  "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension",
+  "LabelSettingsSortingIgnorePrefixes": "Ignore prefixes when sorting",
+  "LabelSettingsSortingIgnorePrefixesHelp": "i.e. for prefix \"the\" book title \"The Book Title\" would sort as \"Book Title, The\"",
+  "LabelPrefixesToIgnore": "Prefixes to Ignore (case insensitive)",
+  "LabelSettingsChromecastSupport": "Chromecast support",
+  "LabelSettingsHomePageBookshelfView": "Home page use bookshelf view",
+  "LabelSettingsLibraryBookshelfView": "Library use bookshelf view",
+  "LabelSettingsBookshelfViewHelp": "Skeumorphic design with wooden shelves",
+  "LabelSettingsDateFormat": "Date Format",
+  "LabelSettingsParseSubtitles": "Parse subtitles",
+  "LabelSettingsParseSubtitlesHelp": "Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by \" - \"<br>i.e. \"Book Title - A Subtitle Here\" has the subtitle \"A Subtitle Here\"",
+  "LabelSettingsFindCovers": "Find covers",
+  "LabelSettingsFindCoversHelp": "If your audiobook does not have an embedded cover or a cover image inside the folder, the scanner will attempt to find a cover.<br>Note: This will extend scan time",
+  "MessageReportBugsAndContribute": "Report bugs, request features, and contribute on",
+  "NoteChangeRootPassword": "Root user is the only user that can have an empty password",
+  "SearchPlaceholder": "Search.."
+}
\ No newline at end of file
diff --git a/client/strings/es.json b/client/strings/es.json
new file mode 100644
index 00000000..3311a57e
--- /dev/null
+++ b/client/strings/es.json
@@ -0,0 +1,54 @@
+{
+  "ButtonHome": "Home",
+  "ButtonLatest": "Latest",
+  "ButtonLibrary": "Library",
+  "ButtonSeries": "Series",
+  "ButtonCollections": "Collections",
+  "ButtonAuthors": "Authors",
+  "ButtonSearch": "Search",
+  "ButtonIssues": "Issues",
+  "ButtonChangePasswordSubmit": "Submit",
+  "ButtonLogout": "Logout",
+  "ButtonPurgeAllCache": "Purge All Cache",
+  "ButtonPurgeItemsCache": "Purge Items Cache",
+  "ButtonRemoveAllLibraryItems": "Remove All Library Items",
+  "HeaderAccount": "Account",
+  "HeaderChangePassword": "Change Password",
+  "HeaderSettings": "Settings",
+  "HeaderLibraries": "Libraries",
+  "HeaderUsers": "Users",
+  "HeaderListeningSessions": "Listening Sessions",
+  "HeaderBackups": "Backups",
+  "HeaderLogs": "Logs",
+  "HeaderNotifications": "Notifications",
+  "HeaderLibraryStats": "Library Stats",
+  "HeaderYourStats": "Your Stats",
+  "HeaderSettingsGeneral": "General",
+  "HeaderSettingsScanner": "Scanner",
+  "HeaderSettingsDisplay": "Display",
+  "HeaderSettingsExperimental": "Experimental Features",
+  "LabelUsername": "Username",
+  "LabelAccountType": "Account Type",
+  "LabelPassword": "Password",
+  "LabelNewPassword": "New Password",
+  "LabelConfirmPassword": "Confirm Password",
+  "LabelSettingsStoreCoversWithItem": "Store covers with item",
+  "LabelSettingsStoreCoversWithItemHelp": "By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named \"cover\" will be kept",
+  "LabelSettingsStoreMetadataWithItem": "Store metadata with item",
+  "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension",
+  "LabelSettingsSortingIgnorePrefixes": "Ignore prefixes when sorting",
+  "LabelSettingsSortingIgnorePrefixesHelp": "i.e. for prefix \"the\" book title \"The Book Title\" would sort as \"Book Title, The\"",
+  "LabelPrefixesToIgnore": "Prefixes to Ignore (case insensitive)",
+  "LabelSettingsChromecastSupport": "Chromecast support",
+  "LabelSettingsHomePageBookshelfView": "Home page use bookshelf view",
+  "LabelSettingsLibraryBookshelfView": "Library use bookshelf view",
+  "LabelSettingsBookshelfViewHelp": "Skeumorphic design with wooden shelves",
+  "LabelSettingsDateFormat": "Date Format",
+  "LabelSettingsParseSubtitles": "Parse subtitles",
+  "LabelSettingsParseSubtitlesHelp": "Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by \" - \"<br>i.e. \"Book Title - A Subtitle Here\" has the subtitle \"A Subtitle Here\"",
+  "LabelSettingsFindCovers": "Find covers",
+  "LabelSettingsFindCoversHelp": "If your audiobook does not have an embedded cover or a cover image inside the folder, the scanner will attempt to find a cover.<br>Note: This will extend scan time",
+  "MessageReportBugsAndContribute": "Report bugs, request features, and contribute on",
+  "NoteChangeRootPassword": "Root user is the only user that can have an empty password",
+  "SearchPlaceholder": "Search.."
+}
\ No newline at end of file
diff --git a/client/strings/it.json b/client/strings/it.json
new file mode 100644
index 00000000..3311a57e
--- /dev/null
+++ b/client/strings/it.json
@@ -0,0 +1,54 @@
+{
+  "ButtonHome": "Home",
+  "ButtonLatest": "Latest",
+  "ButtonLibrary": "Library",
+  "ButtonSeries": "Series",
+  "ButtonCollections": "Collections",
+  "ButtonAuthors": "Authors",
+  "ButtonSearch": "Search",
+  "ButtonIssues": "Issues",
+  "ButtonChangePasswordSubmit": "Submit",
+  "ButtonLogout": "Logout",
+  "ButtonPurgeAllCache": "Purge All Cache",
+  "ButtonPurgeItemsCache": "Purge Items Cache",
+  "ButtonRemoveAllLibraryItems": "Remove All Library Items",
+  "HeaderAccount": "Account",
+  "HeaderChangePassword": "Change Password",
+  "HeaderSettings": "Settings",
+  "HeaderLibraries": "Libraries",
+  "HeaderUsers": "Users",
+  "HeaderListeningSessions": "Listening Sessions",
+  "HeaderBackups": "Backups",
+  "HeaderLogs": "Logs",
+  "HeaderNotifications": "Notifications",
+  "HeaderLibraryStats": "Library Stats",
+  "HeaderYourStats": "Your Stats",
+  "HeaderSettingsGeneral": "General",
+  "HeaderSettingsScanner": "Scanner",
+  "HeaderSettingsDisplay": "Display",
+  "HeaderSettingsExperimental": "Experimental Features",
+  "LabelUsername": "Username",
+  "LabelAccountType": "Account Type",
+  "LabelPassword": "Password",
+  "LabelNewPassword": "New Password",
+  "LabelConfirmPassword": "Confirm Password",
+  "LabelSettingsStoreCoversWithItem": "Store covers with item",
+  "LabelSettingsStoreCoversWithItemHelp": "By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named \"cover\" will be kept",
+  "LabelSettingsStoreMetadataWithItem": "Store metadata with item",
+  "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension",
+  "LabelSettingsSortingIgnorePrefixes": "Ignore prefixes when sorting",
+  "LabelSettingsSortingIgnorePrefixesHelp": "i.e. for prefix \"the\" book title \"The Book Title\" would sort as \"Book Title, The\"",
+  "LabelPrefixesToIgnore": "Prefixes to Ignore (case insensitive)",
+  "LabelSettingsChromecastSupport": "Chromecast support",
+  "LabelSettingsHomePageBookshelfView": "Home page use bookshelf view",
+  "LabelSettingsLibraryBookshelfView": "Library use bookshelf view",
+  "LabelSettingsBookshelfViewHelp": "Skeumorphic design with wooden shelves",
+  "LabelSettingsDateFormat": "Date Format",
+  "LabelSettingsParseSubtitles": "Parse subtitles",
+  "LabelSettingsParseSubtitlesHelp": "Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by \" - \"<br>i.e. \"Book Title - A Subtitle Here\" has the subtitle \"A Subtitle Here\"",
+  "LabelSettingsFindCovers": "Find covers",
+  "LabelSettingsFindCoversHelp": "If your audiobook does not have an embedded cover or a cover image inside the folder, the scanner will attempt to find a cover.<br>Note: This will extend scan time",
+  "MessageReportBugsAndContribute": "Report bugs, request features, and contribute on",
+  "NoteChangeRootPassword": "Root user is the only user that can have an empty password",
+  "SearchPlaceholder": "Search.."
+}
\ No newline at end of file
diff --git a/client/strings/pl.json b/client/strings/pl.json
new file mode 100644
index 00000000..3311a57e
--- /dev/null
+++ b/client/strings/pl.json
@@ -0,0 +1,54 @@
+{
+  "ButtonHome": "Home",
+  "ButtonLatest": "Latest",
+  "ButtonLibrary": "Library",
+  "ButtonSeries": "Series",
+  "ButtonCollections": "Collections",
+  "ButtonAuthors": "Authors",
+  "ButtonSearch": "Search",
+  "ButtonIssues": "Issues",
+  "ButtonChangePasswordSubmit": "Submit",
+  "ButtonLogout": "Logout",
+  "ButtonPurgeAllCache": "Purge All Cache",
+  "ButtonPurgeItemsCache": "Purge Items Cache",
+  "ButtonRemoveAllLibraryItems": "Remove All Library Items",
+  "HeaderAccount": "Account",
+  "HeaderChangePassword": "Change Password",
+  "HeaderSettings": "Settings",
+  "HeaderLibraries": "Libraries",
+  "HeaderUsers": "Users",
+  "HeaderListeningSessions": "Listening Sessions",
+  "HeaderBackups": "Backups",
+  "HeaderLogs": "Logs",
+  "HeaderNotifications": "Notifications",
+  "HeaderLibraryStats": "Library Stats",
+  "HeaderYourStats": "Your Stats",
+  "HeaderSettingsGeneral": "General",
+  "HeaderSettingsScanner": "Scanner",
+  "HeaderSettingsDisplay": "Display",
+  "HeaderSettingsExperimental": "Experimental Features",
+  "LabelUsername": "Username",
+  "LabelAccountType": "Account Type",
+  "LabelPassword": "Password",
+  "LabelNewPassword": "New Password",
+  "LabelConfirmPassword": "Confirm Password",
+  "LabelSettingsStoreCoversWithItem": "Store covers with item",
+  "LabelSettingsStoreCoversWithItemHelp": "By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named \"cover\" will be kept",
+  "LabelSettingsStoreMetadataWithItem": "Store metadata with item",
+  "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension",
+  "LabelSettingsSortingIgnorePrefixes": "Ignore prefixes when sorting",
+  "LabelSettingsSortingIgnorePrefixesHelp": "i.e. for prefix \"the\" book title \"The Book Title\" would sort as \"Book Title, The\"",
+  "LabelPrefixesToIgnore": "Prefixes to Ignore (case insensitive)",
+  "LabelSettingsChromecastSupport": "Chromecast support",
+  "LabelSettingsHomePageBookshelfView": "Home page use bookshelf view",
+  "LabelSettingsLibraryBookshelfView": "Library use bookshelf view",
+  "LabelSettingsBookshelfViewHelp": "Skeumorphic design with wooden shelves",
+  "LabelSettingsDateFormat": "Date Format",
+  "LabelSettingsParseSubtitles": "Parse subtitles",
+  "LabelSettingsParseSubtitlesHelp": "Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by \" - \"<br>i.e. \"Book Title - A Subtitle Here\" has the subtitle \"A Subtitle Here\"",
+  "LabelSettingsFindCovers": "Find covers",
+  "LabelSettingsFindCoversHelp": "If your audiobook does not have an embedded cover or a cover image inside the folder, the scanner will attempt to find a cover.<br>Note: This will extend scan time",
+  "MessageReportBugsAndContribute": "Report bugs, request features, and contribute on",
+  "NoteChangeRootPassword": "Root user is the only user that can have an empty password",
+  "SearchPlaceholder": "Search.."
+}
\ No newline at end of file
diff --git a/client/strings/zh-ch.json b/client/strings/zh-ch.json
new file mode 100644
index 00000000..3311a57e
--- /dev/null
+++ b/client/strings/zh-ch.json
@@ -0,0 +1,54 @@
+{
+  "ButtonHome": "Home",
+  "ButtonLatest": "Latest",
+  "ButtonLibrary": "Library",
+  "ButtonSeries": "Series",
+  "ButtonCollections": "Collections",
+  "ButtonAuthors": "Authors",
+  "ButtonSearch": "Search",
+  "ButtonIssues": "Issues",
+  "ButtonChangePasswordSubmit": "Submit",
+  "ButtonLogout": "Logout",
+  "ButtonPurgeAllCache": "Purge All Cache",
+  "ButtonPurgeItemsCache": "Purge Items Cache",
+  "ButtonRemoveAllLibraryItems": "Remove All Library Items",
+  "HeaderAccount": "Account",
+  "HeaderChangePassword": "Change Password",
+  "HeaderSettings": "Settings",
+  "HeaderLibraries": "Libraries",
+  "HeaderUsers": "Users",
+  "HeaderListeningSessions": "Listening Sessions",
+  "HeaderBackups": "Backups",
+  "HeaderLogs": "Logs",
+  "HeaderNotifications": "Notifications",
+  "HeaderLibraryStats": "Library Stats",
+  "HeaderYourStats": "Your Stats",
+  "HeaderSettingsGeneral": "General",
+  "HeaderSettingsScanner": "Scanner",
+  "HeaderSettingsDisplay": "Display",
+  "HeaderSettingsExperimental": "Experimental Features",
+  "LabelUsername": "Username",
+  "LabelAccountType": "Account Type",
+  "LabelPassword": "Password",
+  "LabelNewPassword": "New Password",
+  "LabelConfirmPassword": "Confirm Password",
+  "LabelSettingsStoreCoversWithItem": "Store covers with item",
+  "LabelSettingsStoreCoversWithItemHelp": "By default covers are stored in /metadata/items, enabling this setting will store covers in your library item folder. Only one file named \"cover\" will be kept",
+  "LabelSettingsStoreMetadataWithItem": "Store metadata with item",
+  "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension",
+  "LabelSettingsSortingIgnorePrefixes": "Ignore prefixes when sorting",
+  "LabelSettingsSortingIgnorePrefixesHelp": "i.e. for prefix \"the\" book title \"The Book Title\" would sort as \"Book Title, The\"",
+  "LabelPrefixesToIgnore": "Prefixes to Ignore (case insensitive)",
+  "LabelSettingsChromecastSupport": "Chromecast support",
+  "LabelSettingsHomePageBookshelfView": "Home page use bookshelf view",
+  "LabelSettingsLibraryBookshelfView": "Library use bookshelf view",
+  "LabelSettingsBookshelfViewHelp": "Skeumorphic design with wooden shelves",
+  "LabelSettingsDateFormat": "Date Format",
+  "LabelSettingsParseSubtitles": "Parse subtitles",
+  "LabelSettingsParseSubtitlesHelp": "Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by \" - \"<br>i.e. \"Book Title - A Subtitle Here\" has the subtitle \"A Subtitle Here\"",
+  "LabelSettingsFindCovers": "Find covers",
+  "LabelSettingsFindCoversHelp": "If your audiobook does not have an embedded cover or a cover image inside the folder, the scanner will attempt to find a cover.<br>Note: This will extend scan time",
+  "MessageReportBugsAndContribute": "Report bugs, request features, and contribute on",
+  "NoteChangeRootPassword": "Root user is the only user that can have an empty password",
+  "SearchPlaceholder": "Search.."
+}
\ No newline at end of file