Improve language code.

web/src/App.js

@@ -72,7 +72,6 @@ class App extends Component {
   }
 
   UNSAFE_componentWillMount() {
-    Setting.setLanguage();
     this.updateMenuKey();
     this.getAccount();
   }
@@ -139,6 +138,13 @@ class App extends Component {
     return location.toString().replace(location.search, "");
   }
 
+  setLanguage(account) {
+    let language = account?.language;
+    if (language !== "" && language !== i18next.language) {
+      Setting.setLanguage(language);
+    }
+  }
+
   getAccount() {
     let query = this.getAccessTokenParam();
     if (query === "") {
@@ -153,6 +159,8 @@ class App extends Component {
         if (res.status === "ok") {
           account = res.data;
           account.organization = res.data2;
+
+          this.setLanguage(account);
         } else {
           if (res.msg !== "Please sign in first") {
             Setting.showMessage("error", `Failed to sign in: ${res.msg}`);
@@ -196,7 +204,7 @@ class App extends Component {
   handleRightDropdownClick(e) {
     if (e.key === '/account') {
       this.props.history.push(`/account`);
-    } else if (e.key === 'logout') {
+    } else if (e.key === '/logout') {
       this.logout();
     }
   }

web/src/Conf.js

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export const ShowGithubCorner = false
+export const ShowGithubCorner = false;
+export const GithubRepo = "https://github.com/casbin/casdoor";
 
-export const GithubRepo = "https://github.com/casbin/casdoor"
+export const ForceLanguage = "en";
+export const DefaultLanguage = "en";

web/src/CustomGithubCorner.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import * as Conf from "./common/Conf"
+import * as Conf from "./Conf";
 import GithubCorner from "react-github-corner";
 
 class CustomGithubCorner extends React.Component {

web/src/SelectLanguageBox.js

@@ -30,13 +30,11 @@ class SelectLanguageBox extends React.Component {
     };
   }
 
-  onClick(e) {
-    Setting.changeLanguage(e.key);
-  };
-
   render() {
     const menu = (
-      <Menu onClick={this.onClick.bind(this)}>
+      <Menu onClick={(e) => {
+        Setting.changeLanguage(e.key);
+      }}>
         <Menu.Item key="en" icon={<IconFont type="icon-en" />}>English</Menu.Item>
         <Menu.Item key="zh" icon={<IconFont type="icon-zh" />}>简体中文</Menu.Item>
         <Menu.Item key="fr" icon={<IconFont type="icon-fr" />}>Français</Menu.Item>

web/src/Setting.js

@@ -21,6 +21,7 @@ import i18next from "i18next";
 import copy from "copy-to-clipboard";
 import {authConfig} from "./auth/Auth";
 import {Helmet} from "react-helmet";
+import moment from "moment";
 
 export let ServerUrl = "";
 
@@ -308,20 +309,43 @@ export function getAvatarColor(s) {
   return colorList[random % 4];
 }
 
-export function setLanguage() {
-  let language = localStorage.getItem('language');
-  if (language === undefined) {
-    language = "en"
-  }
-  i18next.changeLanguage(language)
+export function setLanguage(language) {
+  localStorage.setItem("language", language);
+  changeMomentLanguage(language);
+  i18next.changeLanguage(language);
 }
 
 export function changeLanguage(language) {
-  localStorage.setItem("language", language)
-  i18next.changeLanguage(language)
+  localStorage.setItem("language", language);
+  changeMomentLanguage(language);
+  i18next.changeLanguage(language);
   window.location.reload(true);
 }
 
+export function changeMomentLanguage(language) {
+  return;
+  if (language === "zh") {
+    moment.locale("zh", {
+      relativeTime: {
+        future: "%s内",
+        past: "%s前",
+        s: "几秒",
+        ss: "%d秒",
+        m: "1分钟",
+        mm: "%d分钟",
+        h: "1小时",
+        hh: "%d小时",
+        d: "1天",
+        dd: "%d天",
+        M: "1个月",
+        MM: "%d个月",
+        y: "1年",
+        yy: "%d年",
+      },
+    });
+  }
+}
+
 export function getClickable(text) {
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid

web/src/i18n.js

@@ -12,38 +12,85 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import i18n from 'i18next'
-import zh from './locales/zh/data.json'
-import en from './locales/en/data.json'
-import fr from './locales/fr/data.json'
-import de from './locales/de/data.json'
-import ko from './locales/ko/data.json'
-import ru from './locales/ru/data.json'
-import ja from './locales/ja/data.json'
+import i18n from "i18next";
+import zh from "./locales/zh/data.json";
+import en from "./locales/en/data.json";
+import fr from "./locales/fr/data.json";
+import de from "./locales/de/data.json";
+import ko from "./locales/ko/data.json";
+import ru from "./locales/ru/data.json";
+import ja from "./locales/ja/data.json";
+import * as Conf from "./Conf";
+import * as Setting from "./Setting";
 
 const resources = {
   en: en,
   zh: zh,
   fr: fr,
-  ja: ja,
   de: de,
   ko: ko,
   ru: ru,
+  ja: ja,
 };
 
-i18n
-  .init({
-    lng: "en",
+function initLanguage() {
+  let language = localStorage.getItem("language");
+  if (language === undefined || language == null) {
+    if (Conf.ForceLanguage !== "") {
+      language = Conf.ForceLanguage;
+    } else {
+      let userLanguage;
+      userLanguage = navigator.language;
+      switch (userLanguage) {
+        case "zh-CN":
+          language = "zh";
+          break;
+        case "zh":
+          language = "zh";
+          break;
+        case "en":
+          language = "en";
+          break;
+        case "en-US":
+          language = "en";
+          break;
+        case "fr":
+          language = "fr";
+          break;
+        case "de":
+          language = "de";
+          break;
+        case "ko":
+          language = "ko";
+          break;
+        case "ru":
+          language = "ru";
+          break;
+        case "ja":
+          language = "ja";
+          break;
+        default:
+          language = Conf.DefaultLanguage;
+      }
+    }
+  }
+  Setting.changeMomentLanguage(language);
+
+  return language;
+}
+
+i18n.init({
+  lng: initLanguage(),
 
   resources: resources,
 
   keySeparator: false,
 
   interpolation: {
-      escapeValue: false
+    escapeValue: false,
   },
-    
+  //debug: true,
   saveMissing: true,
-  })
+});
 
 export default i18n;