feat: support for switching languages on the login page (#5323)

packages/core/client/src/i18n/SwitchLanguage.tsx

@@ -0,0 +1,42 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { TranslationOutlined } from '@ant-design/icons';
+import { Dropdown } from 'antd';
+import React from 'react';
+import { useAPIClient } from '../api-client';
+import languageCodes from '../locale';
+import { useSystemSettings } from '../system-settings';
+
+export function SwitchLanguage() {
+  const { data } = useSystemSettings();
+  const api = useAPIClient();
+  return (
+    data?.data?.enabledLanguages.length > 1 && (
+      <Dropdown
+        menu={{
+          onClick(info) {
+            api.auth.setLocale(info.key);
+            window.location.reload();
+          },
+          selectable: true,
+          defaultSelectedKeys: [api.auth.locale],
+          items: data?.data?.enabledLanguages?.map((code) => {
+            return {
+              key: code,
+              label: languageCodes[code].label,
+            };
+          }),
+        }}
+      >
+        <TranslationOutlined style={{ fontSize: 24 }} />
+      </Dropdown>
+    )
+  );
+}

packages/core/client/src/index.ts

@@ -73,7 +73,10 @@ export * from './modules/blocks/useParentRecordCommon';
 export { OpenModeProvider, useOpenModeContext } from './modules/popup/OpenModeProvider';
 export { PopupContextProvider } from './modules/popup/PopupContextProvider';
 export { usePopupUtils } from './modules/popup/usePopupUtils';
-export {
-  VariablePopupRecordProvider,
-  useCurrentPopupRecord,
-} from './modules/variable/variablesProvider/VariablePopupRecordProvider';
+
+export { SwitchLanguage } from './i18n/SwitchLanguage';
+export { VariablePopupRecordProvider } from './modules/variable/variablesProvider/VariablePopupRecordProvider';
+
+export { useCurrentPopupRecord } from './modules/variable/variablesProvider/VariablePopupRecordProvider';
+
+export { languageCodes } from './locale';

packages/core/client/src/locale/index.ts

@@ -7,6 +7,15 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
 export type LocaleOptions = {
   label: string;
 };
@@ -81,7 +90,7 @@ export const dayjsLocale = {
   'zh-TW': 'zh-tw',
 };
 
-export default {
+export const languageCodes = {
   'ar-EG': { label: 'العربية' },
   'az-AZ': { label: 'Azərbaycan dili' },
   'bg-BG': { label: 'Български' },
@@ -150,3 +159,5 @@ export default {
   'zh-HK': { label: '繁體中文（香港）' },
   'zh-TW': { label: '繁體中文（台湾）' },
 };
+
+export default languageCodes;

packages/plugins/@nocobase/plugin-auth/src/client/pages/AuthLayout.tsx

@@ -8,7 +8,7 @@
  */
 
 import { css } from '@emotion/css';
-import { PoweredBy, ReadPretty, useAPIClient, useRequest, useSystemSettings } from '@nocobase/client';
+import { PoweredBy, ReadPretty, SwitchLanguage, useAPIClient, useRequest, useSystemSettings } from '@nocobase/client';
 import { Spin } from 'antd';
 import React, { FC } from 'react';
 import { Outlet } from 'react-router-dom';
@@ -46,7 +46,6 @@ export const AuthenticatorsContextProvider: FC<{ children: React.ReactNode }> =
 
 export function AuthLayout() {
   const { data } = useSystemSettings();
-
   return (
     <div
       style={{
@@ -55,6 +54,9 @@ export function AuthLayout() {
         paddingTop: '20vh',
       }}
     >
+      <div style={{ position: 'fixed', top: '2em', right: '2em' }}>
+        <SwitchLanguage />
+      </div>
       <h1 style={{ textAlign: 'center' }}>
         <ReadPretty.TextArea value={data?.data?.title} />
       </h1>