From 69794fe29df60a55bc736af42e3914e4a09a4cb4 Mon Sep 17 00:00:00 2001 From: Yang Luo Date: Tue, 14 Sep 2021 01:22:13 +0800 Subject: [PATCH] Improve language code. --- web/src/App.js | 12 ++++- web/src/{common => }/Conf.js | 6 ++- web/src/CustomGithubCorner.js | 2 +- web/src/SelectLanguageBox.js | 8 ++-- web/src/Setting.js | 40 ++++++++++++---- web/src/i18n.js | 89 ++++++++++++++++++++++++++--------- 6 files changed, 118 insertions(+), 39 deletions(-) rename web/src/{common => }/Conf.js (78%) diff --git a/web/src/App.js b/web/src/App.js index ad2973ea..d18d9725 100644 --- a/web/src/App.js +++ b/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(); } } diff --git a/web/src/common/Conf.js b/web/src/Conf.js similarity index 78% rename from web/src/common/Conf.js rename to web/src/Conf.js index 2c3b38b7..b226f0cc 100644 --- a/web/src/common/Conf.js +++ b/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"; diff --git a/web/src/CustomGithubCorner.js b/web/src/CustomGithubCorner.js index 06d8c0c2..6b161bbc 100644 --- a/web/src/CustomGithubCorner.js +++ b/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 { diff --git a/web/src/SelectLanguageBox.js b/web/src/SelectLanguageBox.js index 7642dfe8..50ab17c8 100644 --- a/web/src/SelectLanguageBox.js +++ b/web/src/SelectLanguageBox.js @@ -30,13 +30,11 @@ class SelectLanguageBox extends React.Component { }; } - onClick(e) { - Setting.changeLanguage(e.key); - }; - render() { const menu = ( - + { + Setting.changeLanguage(e.key); + }}> }>English }>简体中文 }>Français diff --git a/web/src/Setting.js b/web/src/Setting.js index 886ee67d..f18348ef 100644 --- a/web/src/Setting.js +++ b/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 diff --git a/web/src/i18n.js b/web/src/i18n.js index 2805a9fb..ae81ea48 100644 --- a/web/src/i18n.js +++ b/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); - resources: resources, + return language; +} - keySeparator: false, +i18n.init({ + lng: initLanguage(), - interpolation: { - escapeValue: false - }, - - saveMissing: true, - }) + resources: resources, -export default i18n; \ No newline at end of file + keySeparator: false, + + interpolation: { + escapeValue: false, + }, + //debug: true, + saveMissing: true, +}); + +export default i18n;