feat(web): react-typed-i18n页面国际化

.changeset/hungry-candles-fold.md

@@ -0,0 +1,5 @@
+---
+"@scow/config": patch
+---
+
+使配置文件中文本配置项兼容国际化类型，实现自定义配置文本的国际化展示

.changeset/nice-kings-begin.md

@@ -0,0 +1,12 @@
+---
+"@scow/portal-server": patch
+"@scow/portal-web": minor
+"@scow/mis-web": minor
+"@scow/lib-server": patch
+"@scow/auth": minor
+"@scow/lib-web": minor
+"@scow/docs": patch
+"@scow/test-adapter": patch
+---
+
+实现 SCOW 门户系统与管理系统的页面国际化功能

.changeset/proud-garlics-repair.md

@@ -0,0 +1,5 @@
+---
+"@scow/grpc-api": patch
+---
+
+修改交互式应用的 html 配置表单的 lable 与 placeholder 的 grpc 类型为 i18nStringType

apps/auth/package.json

@@ -28,6 +28,7 @@
     "liquidjs": "10.8.4",
     "@scow/config": "workspace:*",
     "@scow/lib-config": "workspace:*",
+    "@scow/lib-server": "workspace:*",
     "@scow/lib-ssh": "workspace:*",
     "@scow/utils": "workspace:*",
     "@sinclair/typebox": "0.31.1",
@@ -43,7 +44,8 @@
     "pino": "8.15.0",
     "nodemailer": "6.9.4",
     "qrcode": "1.5.3",
-    "speakeasy": "2.0.0"
+    "speakeasy": "2.0.0",
+    "react-typed-i18n": "2.3.0"
   },
   "devDependencies": {
     "@types/asn1": "0.2.1",

apps/auth/src/auth/bindOtpHtml.ts

@@ -11,10 +11,12 @@
  */
 
 import { DEFAULT_PRIMARY_COLOR } from "@scow/config/build/ui";
+import { getLanguageCookie } from "@scow/lib-server";
 import { FastifyReply, FastifyRequest } from "fastify";
 import { join } from "path";
 import { config, FAVICON_URL } from "src/config/env";
 import { uiConfig } from "src/config/ui";
+import { AuthTextsType, languages } from "src/i18n";
 
 
 function parseHostname(req: FastifyRequest): string | undefined {
@@ -48,7 +50,12 @@
 
   const hostname = parseHostname(req);
 
+  // 获取当前语言ID及对应的绑定OTP页面文本
+  const languageId = getLanguageCookie(req.raw);
+  const authTexts: AuthTextsType = languages[languageId];
+
   return rep.status(err ? 401 : 200).view("/otp/bindOtp.liquid", {
+    authTexts: authTexts,
     cssUrl: join(config.BASE_PATH, config.AUTH_BASE_PATH, "/public/assets/tailwind.min.css"),
     faviconUrl: join(config.BASE_PATH, FAVICON_URL),
     backgroundColor: uiConfig.primaryColor?.defaultColor ?? DEFAULT_PRIMARY_COLOR,

apps/auth/src/auth/loginHtml.ts

@@ -11,12 +11,14 @@
  */
 
 import { DEFAULT_PRIMARY_COLOR } from "@scow/config/build/ui";
+import { getI18nConfigCurrentText, getLanguageCookie } from "@scow/lib-server/build/i18n";
 import { FastifyReply, FastifyRequest } from "fastify";
 import { join } from "path";
 import { createCaptcha } from "src/auth/captcha";
 import { authConfig, OtpStatusOptions, ScowLogoType } from "src/config/auth";
 import { config, FAVICON_URL, LOGO_URL } from "src/config/env";
 import { uiConfig } from "src/config/ui";
+import { AuthTextsType, languages } from "src/i18n";
 
 
 export async function serveLoginHtml(
@@ -36,8 +38,19 @@ export async function serveLoginHtml(
     ? await createCaptcha(req.server)
     : undefined;
 
+  // 获取当前语言ID及对应的登录页面文本
+  const languageId = getLanguageCookie(req.raw);
+  const authTexts: AuthTextsType = languages[languageId];
+
+  // 获取sloganI18nText
+  const sloganTitle = getI18nConfigCurrentText(authConfig.ui?.slogan.title, languageId);
+  const sloganTextArr = authConfig.ui?.slogan.texts.map((text) => {
+    return getI18nConfigCurrentText(text, languageId);
+  });
+
   return rep.status(
     verifyCaptchaFail ? 400 : err ? 401 : 200).view("login.liquid", {
+    authTexts: authTexts,
     cssUrl: join(config.BASE_PATH, config.AUTH_BASE_PATH, "/public/assets/tailwind.min.css"),
     eyeImagePath: join(config.BASE_PATH, config.AUTH_BASE_PATH, "/public/assets/icons/eye.png"),
     eyeCloseImagePath: join(config.BASE_PATH, config.AUTH_BASE_PATH, "/public/assets/icons/eye-close.png"),
@@ -51,8 +64,8 @@ export async function serveLoginHtml(
     logoLink: authConfig.ui?.logo.customLogoLink ?? "",
     callbackUrl,
     sloganColor: authConfig.ui?.slogan.color || "white",
-    sloganTitle: authConfig.ui?.slogan.title || "",
-    sloganTextArr: authConfig.ui?.slogan.texts || [],
+    sloganTitle: sloganTitle || "",
+    sloganTextArr: sloganTextArr || [],
     footerTextColor: authConfig.ui?.footerTextColor || "white",
     themeColor: uiConfig.primaryColor?.defaultColor ?? DEFAULT_PRIMARY_COLOR,
     err,

apps/auth/src/config/auth.ts

@@ -31,6 +31,20 @@ export enum ScowLogoType {
   "light" = "light",
 }
 
+// 创建配置文件中显示文字项的配置类型
+export const createI18nStringSchema = (description: string, defaultValue?: string) => {
+  return Type.Union([
+    Type.String(),
+    Type.Object({
+      i18n: Type.Object({
+        default: Type.String({ description: "国际化类型默认值" }),
+        en: Type.Optional(Type.String({ description: "国际化类型英文值" })),
+        zh_cn: Type.Optional(Type.String({ description: "国际化类型简体中文值" })),
+      }),
+    }),
+  ], { description, default: defaultValue });
+};
+
 export const LdapConfigSchema = Type.Object({
   url: Type.String({ description: "LDAP地址" }),
   searchBase: Type.String({ description: "从哪个节点搜索登录用户对应的LDAP节点" }),
@@ -166,8 +180,8 @@ export const UiConfigSchema = Type.Object({
   }, { default: {} }),
   slogan: Type.Object({
     color: Type.String({ description: "默认标语文字颜色", default: "white" }),
-    title: Type.String({ description: "默认标语标题", default: "" }),
-    texts: Type.Array(Type.String(), { description: "默认 slogan 正文数组", default: []}),
+    title: createI18nStringSchema("默认标语标题", ""),
+    texts: Type.Array(createI18nStringSchema(""), { description: "默认 slogan 正文数组", default: []}),
   }, { default: {} }),
   footerTextColor: Type.String({ description: "默认 footer 文字颜色", default: "white" }),
 });

apps/auth/src/i18n/en.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2022 Peking University and Peking University Institute for Computing and Digital Economy
+ * SCOW is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *          http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export default {
+  login: {
+    login: "Log In",
+    accountPasswordLogin: "Account Password Login",
+    username: "Username",
+    password: "Password",
+    otpVCode: "OTP Verification Code",
+    inputVCode: "Please enter the verification code",
+    refreshError: "Refresh failed, please click to retry.",
+    invalidVCode: "Invalid verification code, please re-enter.",
+    invalidInput: "Invalid username / password, please check.",
+    invalidOtp: "Invalid OTP Verification Code, please re-enter.",
+    bindOtp: "Bind OTP",
+  },
+  bindOtp: {
+    bindOtp: "Bind OTP",
+    returnLogin: "Return to Login",
+    userName: "Username",
+    password: "Password",
+    invalidUserNamePassword: "Invalid username/password. Please check.",
+    confirm: "Confirm",
+    expiredUserInfo: "User information has expired, please bind again!",
+    bindLimit1: "Please complete binding within ",
+    bindLimit2: " minutes",
+    email: "Your Email ",
+    getBindLink: "Get Binding Link",
+    bindLinkSended: "Binding link has been sent. Please verify within your email.",
+    bindLinkFailed1: "Failed to send the binding link. Please try again in ",
+    bindLinkFailed2: " seconds.",
+    bindRequestError1: "Do not request binding link frequently. Please try again in ",
+    bindRequestError2: " seconds.",
+    reRequestLink: "You can now request the link again.",
+  },
+};

apps/auth/src/i18n/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2022 Peking University and Peking University Institute for Computing and Digital Economy
+ * SCOW is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *          http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { languageDictionary } from "react-typed-i18n";
+
+
+const zh_cn = () => import("./zh_cn").then((x) => x.default);
+const en = () => import("./en").then((x) => x.default);
+
+// return language type
+export type AuthTextsType = Awaited<ReturnType<typeof zh_cn>>;
+
+export const languages = languageDictionary({
+  zh_cn,
+  en,
+});

apps/auth/src/i18n/zh_cn.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2022 Peking University and Peking University Institute for Computing and Digital Economy
+ * SCOW is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *          http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export default {
+  login: {
+    login: "登录",
+    accountPasswordLogin: "账号密码登录",
+    username: "用户名",
+    password: "密码",
+    otpVCode: "OTP验证码",
+    inputVCode: "请输入验证码",
+    refreshError: "刷新失败，请点击重试",
+    invalidVCode: "验证码无效，请重新输入。",
+    invalidInput: "用户名/密码无效，请检查。",
+    invalidOtp: "OTP验证码无效，请重新输入。",
+    bindOtp: "绑定otp",
+  },
+  bindOtp: {
+    bindOtp: "绑定OTP",
+    returnLogin: "返回登录",
+    userName: "用户名",
+    password: "密码",
+    invalidUserNamePassword: "用户名/密码无效，请检查。",
+    confirm: "确认",
+    expiredUserInfo: "用户信息过期，请重新绑定!",
+    bindLimit1: "请于",
+    bindLimit2: "分钟内完成绑定",
+    email: "您的邮箱",
+    getBindLink: "获取绑定链接",
+    bindLinkSended: "绑定链接已发送，请在邮箱内进行验证",
+    bindLinkFailed1: "绑定链接发送失败，请在",
+    bindLinkFailed2: "秒后重新获取",
+    bindRequestError1: "请勿频繁获取绑定链接，请在",
+    bindRequestError2: "秒后重新获取",
+    reRequestLink: "现在您可以重新获取链接",
+  },
+};

apps/auth/views/login.liquid

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>登录</title>
+  <title>{{ authTexts.login.login }}</title>
   <link href="{{ cssUrl }}" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="{{ faviconUrl }}"></link>
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -42,31 +42,31 @@
       <div class="w-1/2 h-screen ml-20 flex items-center justify-center">
         <div class="w-80 max-w-md min-w-max bg-white rounded-lg py-12">
           <form method="post" action="">
-            <div class="mb-16 text-2xl font-semibold text-center">账号密码登录</div>
+            <div class="mb-16 text-2xl font-semibold text-center">{{ authTexts.login.accountPasswordLogin }}</div>
             <div class="px-14 flex flex-col items-center">
               <div class="w-72 mb-10">
-                <input type='text' name="username" placeholder="用户名" required
+                <input type='text' name="username" placeholder="{{ authTexts.login.username }}" required
                     class="px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-none" />
               </div>
               <div class="w-72 mb-10">
                 <div class="relative flex items-center">
-                    <input id="password" name="password" placeholder="密码" type="password" required
+                    <input id="password" name="password" placeholder="{{ authTexts.login.password }}" type="password" required
                         class="px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-none" />
                     <div id="eye-elem" class="absolute w-5 h-5 right-3 bg-contain"></div>
                 </div>
               </div>
               {% if enableTotp %}
                 <div class="w-full mb-10">
                   <div class="flex items-center">
-                    <input name="otpCode" placeholder="OTP验证码" type="text" required
+                    <input name="otpCode" placeholder="{{ authTexts.login.otpVCode }}" type="text" required
                       class="px-8 w-full py-2 border rounded text-gray-700 focus:outline-none"/>
                   </div>
                 </div>
               {% endif %}
               {% if enableCaptcha %}
                 <div class="w-full mb-10">
                   <div class="flex items-center">
-                    <input name="code" placeholder="请输入验证码" type="text" required
+                    <input name="code" placeholder="{{ authTexts.login.inputVCode }}" type="text" required
                         class=" px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-none" />
                     <div id="captcha" onclick="refreshCaptcha()" class="cursor-pointer">{{ code }}</div>
                     <script>
@@ -81,15 +81,15 @@
                           ).then( async function (response) {
                             captchaDiv.innerHTML = await response.text();
                           }).catch(() => {
-                            captchaDiv.textContent = "刷新失败，请点击重试"
+                            captchaDiv.textContent = "{{ authTexts.login.refreshError }}"
                           });
                       }
-                      </script>
+                    </script>
                   </div>
                 </div>
 
                 {% if verifyCaptchaFail %}
-                  <p class="my-4 text-center text-red-600">验证码无效，请重新输入。</p>
+                  <p class="my-4 text-center text-red-600">{{ authTexts.login.invalidVCode }}</p>
                 {% endif %}
 
               {% else %}
@@ -100,21 +100,21 @@
               <input type="hidden" name="callbackUrl" value="{{ callbackUrl }}" />
 
               {% if err %}
-                <p class="my-4 text-center text-red-600">用户名/密码无效，请检查。</p>
+                <p class="my-4 text-center text-red-600">{{ authTexts.login.invalidInput }}</p>
               {% endif %}
               {% if verifyOtpFail %}
-                <p class="my-4 text-center text-red-600">OTP验证码无效，请重新输入。</p>
+                <p class="my-4 text-center text-red-600">{{ authTexts.login.invalidOtp }}</p>
               {% endif %}
               <button type="submit" class="w-72 py-2 mb-14 rounded button-primary text-gray-100 focus:outline-none">
-                  登录
+                  {{ authTexts.login.login }}
               </button>
             </div>
           </form>
           {% if showBindOtpButton %}
             <div class="px-12 mt-4">
               <form action="{{ otpBasePath }}/bind" method="get">
                 <button type="submit" name="action" value="bindOtp" class="px text-gray-400">
-                  绑定otp
+                  {{ authTexts.login.bindOtp }}
                 </button>
                 <input type="hidden" name="callbackUrl" value="{{ callbackUrl }}" />
               </form>