feat: can specify available UI languages for an organization (#1306)

2025-05-23 02:35:49 +08:00 · 2022-11-19 22:11:19 +08:00 · 2022-11-19 22:11:19 +08:00 · 19ba37e0c2
commit 19ba37e0c2
parent b98ce19211
17 changed files with 75 additions and 31 deletions
--- a/object/init.go
+++ b/object/init.go
@ -58,6 +58,7 @@ func initBuiltInOrganization() bool {
 		PhonePrefix:   "86",
 		DefaultAvatar: fmt.Sprintf("%s/img/casbin.svg", conf.GetConfigString("staticBaseUrl")),
 		Tags:          []string{},
+		Languages:     []string{"en", "zh", "es", "fr", "de", "ja", "ko", "ru"},
 		AccountItems: []*AccountItem{
 			{Name: "Organization", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
 			{Name: "ID", Visible: true, ViewRule: "Public", ModifyRule: "Immutable"},
--- a/object/organization.go
+++ b/object/organization.go
@ -45,6 +45,7 @@ type Organization struct {
 	DefaultAvatar      string   `xorm:"varchar(100)" json:"defaultAvatar"`
 	DefaultApplication string   `xorm:"varchar(100)" json:"defaultApplication"`
 	Tags               []string `xorm:"mediumtext" json:"tags"`
+	Languages          []string `xorm:"varchar(255)" json:"languages"`
 	MasterPassword     string   `xorm:"varchar(100)" json:"masterPassword"`
 	EnableSoftDeletion bool     `json:"enableSoftDeletion"`
 	IsProfilePublic    bool     `json:"isProfilePublic"`
--- a/web/src/App.js
+++ b/web/src/App.js
@ -636,7 +636,7 @@ class App extends Component {
                {
                  this.renderAccount()
                }
-                <SelectLanguageBox />
+                {this.state.account && <SelectLanguageBox languages={this.state.account.organization.languages} />}
              </div>
            </Header>
            <Layout style={{backgroundColor: "#f5f5f5", alignItems: "stretch"}}>
@ -680,7 +680,7 @@ class App extends Component {
              {
                this.renderAccount()
              }
-              <SelectLanguageBox />
+              {this.state.account && <SelectLanguageBox languages={this.state.account.organization.languages} />}
            </div>
          </Header>
          {
--- a/web/src/App.less
+++ b/web/src/App.less
@ -59,12 +59,6 @@
  height: 70px; /* Footer height */
 }

-#language-box-corner {
-  position: absolute;
-  top: 75px;
-  right: 0;
-}
-
 .language-box {
  background: url("@{StaticBaseUrl}/img/muti_language.svg");
  background-size: 25px, 25px;
--- a/web/src/OrganizationEditPage.js
+++ b/web/src/OrganizationEditPage.js
@ -255,6 +255,31 @@ class OrganizationEditPage extends React.Component {
            }} />
          </Col>
        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Languages"), i18next.t("general:Languages - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}}
+              value={this.state.organization.languages}
+              onChange={(value => {
+                this.updateOrganizationField("languages", value);
+              })} >
+              {
+                [
+                  {value: "en", label: "English"},
+                  {value: "zh", label: "简体中文"},
+                  {value: "es", label: "Español"},
+                  {value: "fr", label: "Français"},
+                  {value: "de", label: "Deutsch"},
+                  {value: "ja", label: "日本語"},
+                  {value: "ko", label: "한국어"},
+                  {value: "ru", label: "Русский"},
+                ].map((item, index) => <Option key={index} value={item.value}>{item.label}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
        <Row style={{marginTop: "20px"}} >
          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
            {Setting.getLabel(i18next.t("organization:Soft deletion"), i18next.t("organization:Soft deletion - Tooltip"))} :
--- a/web/src/OrganizationListPage.js
+++ b/web/src/OrganizationListPage.js
@ -37,6 +37,7 @@ class OrganizationListPage extends BaseListPage {
      defaultAvatar: `${Setting.StaticBaseUrl}/img/casbin.svg`,
      defaultApplication: "",
      tags: [],
+      languages: ["en", "zh", "es", "fr", "de", "ja", "ko", "ru"],
      masterPassword: "",
      enableSoftDeletion: false,
      isProfilePublic: true,
--- a/web/src/SelectLanguageBox.js
+++ b/web/src/SelectLanguageBox.js
@ -28,28 +28,45 @@ class SelectLanguageBox extends React.Component {
    super(props);
    this.state = {
      classes: props,
+      languages: props.languages ?? ["en", "zh", "es", "fr", "de", "ja", "ko", "ru"],
    };
  }

+  items = [
+    this.getItem("English", "en", flagIcon("US", "English")),
+    this.getItem("简体中文", "zh", flagIcon("CN", "简体中文")),
+    this.getItem("Español", "es", flagIcon("ES", "Español")),
+    this.getItem("Français", "fr", flagIcon("FR", "Français")),
+    this.getItem("Deutsch", "de", flagIcon("DE", "Deutsch")),
+    this.getItem("日本語", "ja", flagIcon("JP", "日本語")),
+    this.getItem("한국어", "ko", flagIcon("KR", "한국어")),
+    this.getItem("Русский", "ru", flagIcon("RU", "Русский")),
+  ];
+
+  getOrganizationLanguages(languages) {
+    const select = [];
+    for (const language of languages) {
+      this.items.map((item, index) => item.key === language ? select.push(item) : null);
+    }
+    return select;
+  }
+
+  getItem(label, key, icon) {
+    return {key, icon, label};
+  }
+
  render() {
+    const languageItems = this.getOrganizationLanguages(this.state.languages);
    const menu = (
-      <Menu onClick={(e) => {
-        Setting.changeLanguage(e.key);
+      <Menu items={languageItems} onClick={(e) => {
+        Setting.setLanguage(e.key);
      }}>
-        <Menu.Item key="en" icon={flagIcon("US", "English")}>English</Menu.Item>
-        <Menu.Item key="zh" icon={flagIcon("CN", "简体中文")}>简体中文</Menu.Item>
-        <Menu.Item key="es" icon={flagIcon("ES", "Español")}>Español</Menu.Item>
-        <Menu.Item key="fr" icon={flagIcon("FR", "Français")}>Français</Menu.Item>
-        <Menu.Item key="de" icon={flagIcon("DE", "Deutsch")}>Deutsch</Menu.Item>
-        <Menu.Item key="ja" icon={flagIcon("JP", "日本語")}>日本語</Menu.Item>
-        <Menu.Item key="ko" icon={flagIcon("KR", "한국어")}>한국어</Menu.Item>
-        <Menu.Item key="ru" icon={flagIcon("RU", "Русский")}>Русский</Menu.Item>
      </Menu>
    );

    return (
      <Dropdown overlay={menu} >
-        <div className="language-box" id={this.props.id} style={this.props.style} />
+        <div className="language-box" style={{display: languageItems.length === 0 ? "none" : null, ...this.props.style}} />
      </Dropdown>
    );
  }
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@ -552,13 +552,6 @@ export function setLanguage(language) {
  i18next.changeLanguage(language);
 }

-export function changeLanguage(language) {
-  localStorage.setItem("language", language);
-  changeMomentLanguage(language);
-  i18next.changeLanguage(language);
-  // window.location.reload(true);
-}
-
 export function getAcceptLanguage() {
  return i18next.language + ";q=0.9,en;q=0.8";
 }
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@ -28,9 +28,7 @@ import i18next from "i18next";
 import CustomGithubCorner from "../CustomGithubCorner";
 import {CountDownInput} from "../common/CountDownInput";
 import SelectLanguageBox from "../SelectLanguageBox";
-import {withTranslation} from "react-i18next";
 import {CaptchaModal} from "../common/CaptchaModal";
-import {withRouter} from "react-router-dom";

 const {TabPane} = Tabs;

@ -800,7 +798,7 @@ class LoginPage extends React.Component {
                  {/* {*/}
                  {/*  this.state.clientId !== null ? "Redirect" : null*/}
                  {/* }*/}
-                  <SelectLanguageBox id="language-box-corner" style={{top: "55px", right: "5px", position: "absolute"}} />
+                  <SelectLanguageBox languages={application.organizationObj.languages} style={{top: "55px", right: "5px", position: "absolute"}} />
                  {
                    this.renderSignedInBox()
                  }
@ -817,4 +815,4 @@ class LoginPage extends React.Component {
  }
 }

-export default withTranslation()(withRouter(LoginPage));
+export default LoginPage;
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@ -645,7 +645,7 @@ class SignupPage extends React.Component {
                {
                  Setting.renderLogo(application)
                }
-                <SelectLanguageBox id="language-box-corner" style={{top: "55px", right: "5px", position: "absolute"}} />
+                <SelectLanguageBox languages={application.organizationObj.languages} style={{top: "55px", right: "5px", position: "absolute"}} />
                {
                  this.renderForm(application)
                }
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@ -170,6 +170,8 @@
    "Is enabled - Tooltip": "Ist aktiviert - Tooltip",
    "LDAPs": "LDAPs",
    "LDAPs - Tooltip": "LDAPs - Tooltip",
+    "Languages": "Languages",
+    "Languages - Tooltip": "Languages - Tooltip",
    "Last name": "Last name",
    "Logo": "Logo",
    "Logo - Tooltip": "App's image tag",
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@ -170,6 +170,8 @@
    "Is enabled - Tooltip": "Is enabled - Tooltip",
    "LDAPs": "LDAPs",
    "LDAPs - Tooltip": "LDAPs - Tooltip",
+    "Languages": "Languages",
+    "Languages - Tooltip": "Languages - Tooltip",
    "Last name": "Last name",
    "Logo": "Logo",
    "Logo - Tooltip": "Logo - Tooltip",
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@ -170,6 +170,8 @@
    "Is enabled - Tooltip": "Est activé - infobulle",
    "LDAPs": "LDAPs",
    "LDAPs - Tooltip": "LDAPs - Infobulle",
+    "Languages": "Languages",
+    "Languages - Tooltip": "Languages - Tooltip",
    "Last name": "Last name",
    "Logo": "Logo",
    "Logo - Tooltip": "App's image tag",
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@ -170,6 +170,8 @@
    "Is enabled - Tooltip": "有効にする - ツールチップ",
    "LDAPs": "LDAP",
    "LDAPs - Tooltip": "LDAP - ツールチップ",
+    "Languages": "Languages",
+    "Languages - Tooltip": "Languages - Tooltip",
    "Last name": "Last name",
    "Logo": "Logo",
    "Logo - Tooltip": "App's image tag",
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@ -170,6 +170,8 @@
    "Is enabled - Tooltip": "Is enabled - Tooltip",
    "LDAPs": "LDAPs",
    "LDAPs - Tooltip": "LDAPs - Tooltip",
+    "Languages": "Languages",
+    "Languages - Tooltip": "Languages - Tooltip",
    "Last name": "Last name",
    "Logo": "Logo",
    "Logo - Tooltip": "App's image tag",
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@ -170,6 +170,8 @@
    "Is enabled - Tooltip": "Включено - Подсказка",
    "LDAPs": "LDAPы",
    "LDAPs - Tooltip": "LDAPs - Подсказки",
+    "Languages": "Languages",
+    "Languages - Tooltip": "Languages - Tooltip",
    "Last name": "Фамилия",
    "Logo": "Логотип",
    "Logo - Tooltip": "App's image tag",
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@ -170,6 +170,8 @@
    "Is enabled - Tooltip": "是否启用",
    "LDAPs": "LDAP",
    "LDAPs - Tooltip": "LDAPs",
+    "Languages": "语言",
+    "Languages - Tooltip": "可选语言",
    "Last name": "姓氏",
    "Logo": "Logo",
    "Logo - Tooltip": "应用程序向外展示的图标",