feat: add i18n in login page

Author: zhaozhiming

package.json

@@ -95,6 +95,7 @@
     "express": "5.0.0-alpha.8",
     "http-proxy": "^1.18.0",
     "httpolyglot": "^0.1.2",
+    "i18next": "^22.4.6",
     "js-yaml": "^4.0.0",
     "limiter": "^1.1.5",
     "pem": "^1.14.2",

src/browser/pages/login.html

@@ -10,7 +10,7 @@
       http-equiv="Content-Security-Policy"
       content="style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
-    <title>{{APP_NAME}} login</title>
+    <title>{{APP_NAME}} {{I18N_LOGIN_TITLE}}</title>
     <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon-dark-support.svg" />
     <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />
     <link rel="manifest" href="{{BASE}}/manifest.json" crossorigin="use-credentials" />
@@ -25,7 +25,7 @@
       <div class="card-box">
         <div class="header">
           <h1 class="main">{{WELCOME_TEXT}}</h1>
-          <div class="sub">Please log in below. {{PASSWORD_MSG}}</div>
+          <div class="sub">{{I18N_LOGIN_BELOW}}{{PASSWORD_MSG}}</div>
         </div>
         <div class="content">
           <form class="login-form" method="post">
@@ -38,11 +38,11 @@ <h1 class="main">{{WELCOME_TEXT}}</h1>
                 autofocus
                 class="password"
                 type="password"
-                placeholder="PASSWORD"
+                placeholder="{{I18N_PASSWORD_PLACEHOLDER}}"
                 name="password"
                 autocomplete="current-password"
               />
-              <input class="submit -button" value="SUBMIT" type="submit" />
+              <input class="submit -button" value="{{I18N_SUBMIT}}" type="submit" />
             </div>
             {{ERROR}}
           </form>

src/node/cli.ts

@@ -88,6 +88,7 @@ export interface UserProvidedArgs extends UserProvidedCodeArgs {
   verbose?: boolean
   "app-name"?: string
   "welcome-text"?: string
+  "lng"?: string
   /* Positional arguments. */
   _?: string[]
 }
@@ -264,6 +265,13 @@ export const options: Options<Required<UserProvidedArgs>> = {
     `,
     deprecated: true,
   },
+  "lng": {
+    type: "string",
+    description: `
+      Language show on login page, more infomations to read up on
+      https://en.wikipedia.org/wiki/IETF_language_tag.
+    `,
+  },
 }
 
 export const optionDescriptions = (opts: Partial<Options<Required<UserProvidedArgs>>> = options): string[] => {

src/node/i18n/index.ts

@@ -0,0 +1,21 @@
+import i18next from "i18next"
+import * as en from "./locales/en.json"
+import * as zhCn from "./locales/zh-cn.json"
+
+i18next.init({
+  lng: "en",
+  fallbackLng: "en", // language to use if translations in user language are not available.
+  returnNull: false,
+  lowerCaseLng: true,
+  debug: process.env.NODE_ENV === "development",
+  resources: {
+    en: {
+      translation: en,
+    },
+    "zh-cn": {
+      translation: zhCn,
+    },
+  },
+})
+
+export default i18next

src/node/i18n/locales/en.json

@@ -0,0 +1,13 @@
+{
+  "LOGIN_TITLE": "login",
+  "LOGIN_BELOW": "Please log in below. ",
+  "WELCOME": "Welcome to {{app}}",
+  "LOGIN_PASSWORD": "Check the config file at {{configFile}} for the password.",
+  "LOGIN_USING_ENV_PASSWORD": "Password was set from $PASSWORD.",
+  "LOGIN_USING_HASHED_PASSWORD": "Password was set from $HASHED_PASSWORD.",
+  "SUBMIT": "SUBMIT",
+  "PASSWORD_PLACEHOLDER": "PASSWORD",
+  "LOGIN_RATE_LIMIT": "Login rate limited!",
+  "MISS_PASSWORD": "Missing password",
+  "INCORRECT_PASSWORD": "Incorrect password"
+}

src/node/i18n/locales/zh-cn.json

@@ -0,0 +1,13 @@
+{
+  "LOGIN_TITLE": "登录",
+  "LOGIN_BELOW": "请在下面登录。",
+  "WELCOME": "欢迎来到 {{app}}",
+  "LOGIN_PASSWORD": "查看配置文件 {{configFile}} 中的密码。",
+  "LOGIN_USING_ENV_PASSWORD": "密码在 $PASSWORD 中设置。",
+  "LOGIN_USING_HASHED_PASSWORD": "密码在 $HASHED_PASSWORD 中设置。",
+  "SUBMIT": "提交",
+  "PASSWORD_PLACEHOLDER": "密码",
+  "LOGIN_RATE_LIMIT": "登录速率限制!",
+  "MISS_PASSWORD": "缺少密码",
+  "INCORRECT_PASSWORD": "密码不正确"
+}

src/node/routes/login.ts

@@ -7,6 +7,7 @@ import { CookieKeys } from "../../common/http"
 import { rootPath } from "../constants"
 import { authenticated, getCookieOptions, redirect, replaceTemplates } from "../http"
 import { getPasswordMethod, handlePasswordValidation, humanPath, sanitizeString, escapeHtml } from "../util"
+import i18n from "../i18n"
 
 // RateLimiter wraps around the limiter library for logins.
 // It allows 2 logins every minute plus 12 logins every hour.
@@ -28,13 +29,15 @@ export class RateLimiter {
 
 const getRoot = async (req: Request, error?: Error): Promise<string> => {
   const content = await fs.readFile(path.join(rootPath, "src/browser/pages/login.html"), "utf8")
+  const lng = req.args["lng"] || "en"
+  i18n.changeLanguage(lng)
   const appName = req.args["app-name"] || "code-server"
-  const welcomeText = req.args["welcome-text"] || `Welcome to ${appName}`
-  let passwordMsg = `Check the config file at ${humanPath(os.homedir(), req.args.config)} for the password.`
+  const welcomeText = req.args["welcome-text"] || (i18n.t("WELCOME", { app: appName }) as string)
+  let passwordMsg = i18n.t("LOGIN_PASSWORD", { configFile: humanPath(os.homedir(), req.args.config) })
   if (req.args.usingEnvPassword) {
-    passwordMsg = "Password was set from $PASSWORD."
+    passwordMsg = i18n.t("LOGIN_USING_ENV_PASSWORD")
   } else if (req.args.usingEnvHashedPassword) {
-    passwordMsg = "Password was set from $HASHED_PASSWORD."
+    passwordMsg = i18n.t("LOGIN_USING_HASHED_PASSWORD")
   }
 
   return replaceTemplates(
@@ -43,6 +46,10 @@ const getRoot = async (req: Request, error?: Error): Promise<string> => {
       .replace(/{{APP_NAME}}/g, appName)
       .replace(/{{WELCOME_TEXT}}/g, welcomeText)
       .replace(/{{PASSWORD_MSG}}/g, passwordMsg)
+      .replace(/{{I18N_LOGIN_TITLE}}/g, i18n.t("LOGIN_TITLE"))
+      .replace(/{{I18N_LOGIN_BELOW}}/g, i18n.t("LOGIN_BELOW"))
+      .replace(/{{I18N_PASSWORD_PLACEHOLDER}}/g, i18n.t("PASSWORD_PLACEHOLDER"))
+      .replace(/{{I18N_SUBMIT}}/g, i18n.t("SUBMIT"))
       .replace(/{{ERROR}}/, error ? `<div class="error">${escapeHtml(error.message)}</div>` : ""),
   )
 }
@@ -70,11 +77,11 @@ router.post<{}, string, { password: string; base?: string }, { to?: string }>("/
   try {
     // Check to see if they exceeded their login attempts
     if (!limiter.canTry()) {
-      throw new Error("Login rate limited!")
+      throw new Error(i18n.t("LOGIN_RATE_LIMIT") as string)
     }
 
     if (!password) {
-      throw new Error("Missing password")
+      throw new Error(i18n.t("MISS_PASSWORD") as string)
     }
 
     const passwordMethod = getPasswordMethod(hashedPasswordFromArgs)
@@ -108,7 +115,7 @@ router.post<{}, string, { password: string; base?: string }, { to?: string }>("/
       }),
     )
 
-    throw new Error("Incorrect password")
+    throw new Error(i18n.t("INCORRECT_PASSWORD") as string)
   } catch (error: any) {
     const renderedHtml = await getRoot(req, error)
     res.send(renderedHtml)

test/unit/node/cli.test.ts

@@ -70,6 +70,7 @@ describe("parser", () => {
           "--verbose",
           ["--app-name", "custom instance name"],
           ["--welcome-text", "welcome to code"],
+          ["--lng", "zh-cn"],
           "2",
 
           ["--locale", "ja"],
@@ -131,6 +132,7 @@ describe("parser", () => {
       verbose: true,
       "app-name": "custom instance name",
       "welcome-text": "welcome to code",
+      "lng": "zh-cn",
       version: true,
       "bind-addr": "192.169.0.1:8080",
     })

test/unit/node/routes/login.test.ts

@@ -138,5 +138,16 @@ describe("login", () => {
       expect(resp.status).toBe(200)
       expect(htmlContent).toContain(`Welcome to ${appName}`)
     })
+
+    it("should return correct welcome text when lng is set to non-English", async () => {
+      process.env.PASSWORD = previousEnvPassword
+      const lng = "zh-cn"
+      const codeServer = await integration.setup([`--lng=${lng}`], "")
+      const resp = await codeServer.fetch("/login", { method: "GET" })
+
+      const htmlContent = await resp.text()
+      expect(resp.status).toBe(200)
+      expect(htmlContent).toContain(`欢迎来到 code-server`)
+    })
   })
 })

tsconfig.json

@@ -22,7 +22,8 @@
       "./test/node_modules/@types",
       "./lib/vscode/src/vs/server/@types"
     ],
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "resolveJsonModule": true
   },
   "include": ["./src/**/*"],
   "exclude": ["/test", "/lib", "/ci", "/doc"]