UI add protecting of language settings and will modify incorrect value to correctly

mindinsight/ui/src/components/header.vue

@@ -172,12 +172,14 @@ export default {
       set(val) {},
     },
     isChinese() {
-      let isChinese = false;
-      if (
-        localStorage.getItem('milang') &&
-        localStorage.getItem('milang') === 'zh-cn'
-      ) {
-        isChinese = true;
+      let isChinese = true;
+      const languageList = ['zh-cn', 'en-us'];
+      const language = window.localStorage.getItem('milang');
+
+      if (language && languageList.includes(language)) {
+        isChinese = language === languageList[0];
+      } else {
+        window.localStorage.setItem('milang', languageList[0]);
       }
       return isChinese;
     },

mindinsight/ui/src/i18n.js

@@ -37,14 +37,15 @@ function loadLocaleMessages() {
 }
 
 /* load default language pack */
+const languageList = ['zh-cn', 'en-us'];
 const langStorge = window.localStorage.getItem('milang');
 let langflag;
 // Check language by default
-if (langStorge) {
+if (langStorge && languageList.includes(langStorge)) {
   langflag = langStorge;
 } else {
   // set Chinese if no default language
-  langflag = 'zh-cn';
+  langflag = languageList[0];
   window.localStorage.setItem('milang', langflag);
 }
 

mindinsight/ui/src/main.js

@@ -26,10 +26,14 @@ import $ from 'jquery';
 import locale from 'element-ui/lib/locale/lang/en';
 import localezh from 'element-ui/lib/locale/lang/zh-CN';
 
-if (
-  localStorage.getItem('milang') &&
-  localStorage.getItem('milang') !== 'zh-cn'
-) {
+let language = window.localStorage.getItem('milang');
+const languageList = ['zh-cn', 'en-us'];
+if (!language || !languageList.includes(language)) {
+  language = languageList[0];
+  window.localStorage.setItem('milang', language);
+}
+
+if (language !== languageList[0]) {
   Vue.use(ElementUI, {locale});
 } else {
   Vue.use(ElementUI, {localezh});

mindinsight/ui/src/views/train-manage/graph.vue

@@ -529,7 +529,14 @@ export default {
     }
 
     this.trainJobID = this.$route.query.train_id;
-    this.language = localStorage.getItem('milang') || 'zh-cn';
+
+    this.language = window.localStorage.getItem('milang');
+    const languageList = ['zh-cn', 'en-us'];
+    if (!this.language || !languageList.includes(this.language)) {
+      this.language = languageList[0];
+      window.localStorage.setItem('milang', this.language);
+    }
+
     document.title = `${decodeURIComponent(this.trainJobID)}-${this.$t(
         'graph.titleText',
     )}-MindInsight`;