From e70a45161247371728e1ee24a1537683bab9be23 Mon Sep 17 00:00:00 2001
From: Dexter Griffiths <dexgriffiths@hotmail.co.uk>
Date: Fri, 15 Apr 2022 02:48:28 +0900
Subject: [PATCH] added basic i18n frame and locale changer to navigation bar

---
 pinry-spa/package.json                 |  1 +
 pinry-spa/src/assets/locales/en.json   |  3 +++
 pinry-spa/src/components/LoginForm.vue |  2 +-
 pinry-spa/src/components/PHeader.vue   |  6 ++++++
 pinry-spa/src/main.js                  | 13 +++++++++++++
 pinry-spa/yarn.lock                    |  5 +++++
 6 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 pinry-spa/src/assets/locales/en.json

diff --git a/pinry-spa/package.json b/pinry-spa/package.json
index ba5f39e..75348ab 100644
--- a/pinry-spa/package.json
+++ b/pinry-spa/package.json
@@ -13,6 +13,7 @@
     "core-js": "^3.3.2",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
+    "vue-i18n": "8",
     "vue-masonry": "^0.11.8",
     "vue-router": "^3.1.3"
   },
diff --git a/pinry-spa/src/assets/locales/en.json b/pinry-spa/src/assets/locales/en.json
new file mode 100644
index 0000000..0865dee
--- /dev/null
+++ b/pinry-spa/src/assets/locales/en.json
@@ -0,0 +1,3 @@
+{
+    "loginTitle": "Login"
+}
\ No newline at end of file
diff --git a/pinry-spa/src/components/LoginForm.vue b/pinry-spa/src/components/LoginForm.vue
index da82ec1..f46dea4 100644
--- a/pinry-spa/src/components/LoginForm.vue
+++ b/pinry-spa/src/components/LoginForm.vue
@@ -3,7 +3,7 @@
     <div @keydown="triggerDoLogin">
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
-          <p class="modal-card-title">Login</p>
+          <p class="modal-card-title">{{ $t("loginTitle") }}</p>
         </header>
         <section class="modal-card-body">
           <b-field label="Username"
diff --git a/pinry-spa/src/components/PHeader.vue b/pinry-spa/src/components/PHeader.vue
index 7bfd036..d798562 100644
--- a/pinry-spa/src/components/PHeader.vue
+++ b/pinry-spa/src/components/PHeader.vue
@@ -109,6 +109,11 @@
                 </a>
               </div>
             </div>
+            <div class="locale-changer">
+              <select v-model="$i18n.locale">
+                 <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
+              </select>
+            </div>
           </div>
         </div>
       </div>
@@ -129,6 +134,7 @@ export default {
         loggedIn: false,
         meta: {},
       },
+      langs: ['en'],
     };
   },
   computed: {
diff --git a/pinry-spa/src/main.js b/pinry-spa/src/main.js
index 9496e58..a50a0a9 100644
--- a/pinry-spa/src/main.js
+++ b/pinry-spa/src/main.js
@@ -1,17 +1,30 @@
 import Buefy from 'buefy';
 import Vue from 'vue';
 import { VueMasonryPlugin } from 'vue-masonry';
+import VueI18n from 'vue-i18n';
 import App from './App.vue';
 import router from './router';
 import setUpAxiosCsrfConfig from './components/utils/csrf';
 import './registerServiceWorker';
+import en from './assets/locales/en.json';
+
+const messages = {
+  en,
+};
 
 Vue.config.productionTip = false;
 Vue.use(Buefy);
 Vue.use(VueMasonryPlugin);
+Vue.use(VueI18n);
 setUpAxiosCsrfConfig();
 
+const i18n = new VueI18n({
+  locale: 'en',
+  messages,
+});
+
 new Vue({
   router,
+  i18n,
   render: h => h(App),
 }).$mount('#app');
diff --git a/pinry-spa/yarn.lock b/pinry-spa/yarn.lock
index 99f0082..aaf9c68 100644
--- a/pinry-spa/yarn.lock
+++ b/pinry-spa/yarn.lock
@@ -7160,6 +7160,11 @@ vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&sync_timestamp=1568190386192&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
 
+vue-i18n@8:
+  version "8.27.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.27.1.tgz#fe660f6c14793ae404d6a715875d772594a3324f"
+  integrity sha512-lWrGm4F25qReJ7XxSnFVb2h3PfW54ldnM4C+YLBGGJ75+Myt/kj4hHSTKqsyDLamvNYpvINMicSOdW+7yuqgIQ==
+
 vue-loader@^15.7.2:
   version "15.8.3"
   resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.8.3.tgz#857cb9e30eb5fc25e66db48dce7e4f768602a23c"