feature: add locale name for language

pinry-spa/src/components/PHeader.vue

@@ -102,7 +102,7 @@
                   :key="`locale-${locale}`"
                   @click="setLocale(locale)"
                   class="navbar-item">
-                  {{ locale }}
+                  {{ langs[locale] }}
                 </a>
               </div>
             </div>
@@ -136,6 +136,7 @@
 </template>
 
 <script>
+import localeUtils from '@/components/utils/i18n';
 import api from './api';
 import modals from './modals';
 
@@ -148,7 +149,7 @@ export default {
         loggedIn: false,
         meta: {},
       },
-      langs: ['en'],
+      langs: localeUtils.langCode2Name,
     };
   },
   computed: {

pinry-spa/src/components/utils/i18n/index.js

@@ -0,0 +1,17 @@
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+
+const messages = {
+  en,
+  zh,
+};
+
+const langCode2Name = {
+  en: 'English',
+  zh: '简体中文',
+};
+
+export default {
+  messages,
+  langCode2Name,
+};

pinry-spa/src/main.js

@@ -2,17 +2,12 @@ import Buefy from 'buefy';
 import Vue from 'vue';
 import { VueMasonryPlugin } from 'vue-masonry';
 import VueI18n from 'vue-i18n';
+import localeUtils from './components/utils/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';
-import zh from './assets/locales/zh.json';
 
-const messages = {
-  en,
-  zh,
-};
 
 Vue.config.productionTip = false;
 Vue.use(Buefy);
@@ -23,7 +18,7 @@ setUpAxiosCsrfConfig();
 const i18n = new VueI18n({
   locale: localStorage.getItem('localeCode') || navigator.language.split('-')[0],
   fallbackLocale: 'en',
-  messages,
+  messages: localeUtils.messages,
 });
 
 new Vue({