feat: use --app-name in error page title (#7693)

Author: lustsazeus-lab

src/browser/pages/error.html

@@ -11,7 +11,7 @@
       content="style-src 'self'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
     <meta name="color-scheme" content="light dark" />
-    <title>{{ERROR_TITLE}} - code-server</title>
+    <title>{{ERROR_TITLE}} - {{APP_NAME}}</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="/manifest.json" crossorigin="use-credentials" />

src/node/cli.ts

@@ -519,6 +519,7 @@ export interface DefaultedArgs extends ConfigArgs {
   "extensions-dir": string
   "user-data-dir": string
   "session-socket": string
+  "app-name": string
   /* Positional arguments. */
   _: string[]
 }
@@ -665,6 +666,10 @@ export async function setDefaults(cliArgs: UserProvidedArgs, configArgs?: Config
   }
   args["proxy-domain"] = finalProxies
 
+  if (!args["app-name"]) {
+    args["app-name"] = "code-server"
+  }
+
   args._ = getResolvedPathsFromArgs(args)
 
   return {

src/node/routes/errors.ts

@@ -57,7 +57,8 @@ export const errorHandler: express.ErrorRequestHandler = async (err, req, res, n
       replaceTemplates(req, content)
         .replace(/{{ERROR_TITLE}}/g, statusCode.toString())
         .replace(/{{ERROR_HEADER}}/g, statusCode.toString())
-        .replace(/{{ERROR_BODY}}/g, escapeHtml(err.message)),
+        .replace(/{{ERROR_BODY}}/g, escapeHtml(err.message))
+        .replace(/{{APP_NAME}}/g, req.args["app-name"]),
     )
   } else {
     res.json({

src/node/routes/login.ts

@@ -29,8 +29,7 @@ const getRoot = async (req: Request, error?: Error): Promise<string> => {
   const content = await fs.readFile(path.join(rootPath, "src/browser/pages/login.html"), "utf8")
   const locale = req.args["locale"] || "en"
   i18n.changeLanguage(locale)
-  const appName = req.args["app-name"] || "code-server"
-  const welcomeText = req.args["welcome-text"] || (i18n.t("WELCOME", { app: appName }) as string)
+  const welcomeText = req.args["welcome-text"] || (i18n.t("WELCOME", { app: req.args["app-name"] }) as string)
 
   // Determine password message using i18n
   let passwordMsg = i18n.t("LOGIN_PASSWORD", { configFile: req.args.config })
@@ -43,7 +42,7 @@ const getRoot = async (req: Request, error?: Error): Promise<string> => {
   return replaceTemplates(
     req,
     content
-      .replace(/{{I18N_LOGIN_TITLE}}/g, i18n.t("LOGIN_TITLE", { app: appName }))
+      .replace(/{{I18N_LOGIN_TITLE}}/g, i18n.t("LOGIN_TITLE", { app: req.args["app-name"] }))
       .replace(/{{WELCOME_TEXT}}/g, welcomeText)
       .replace(/{{PASSWORD_MSG}}/g, passwordMsg)
       .replace(/{{I18N_LOGIN_BELOW}}/g, i18n.t("LOGIN_BELOW"))

src/node/routes/vscode.ts

@@ -172,16 +172,15 @@ router.get("/", ensureVSCodeLoaded, async (req, res, next) => {
 })
 
 router.get("/manifest.json", async (req, res) => {
-  const appName = req.args["app-name"] || "code-server"
   res.writeHead(200, { "Content-Type": "application/manifest+json" })
 
   res.end(
     replaceTemplates(
       req,
       JSON.stringify(
         {
-          name: appName,
-          short_name: appName,
+          name: req.args["app-name"],
+          short_name: req.args["app-name"],
           start_url: ".",
           display: "fullscreen",
           display_override: ["window-controls-overlay"],

test/unit/node/cli.test.ts

@@ -38,6 +38,7 @@ const defaults = {
   "extensions-dir": path.join(paths.data, "extensions"),
   "user-data-dir": paths.data,
   "session-socket": path.join(paths.data, "code-server-ipc.sock"),
+  "app-name": "code-server",
   _: [],
 }
 

test/unit/node/routes/errors.test.ts

@@ -1,4 +1,5 @@
 import express from "express"
+import { UserProvidedArgs, setDefaults } from "../../../../src/node/cli"
 import { errorHandler } from "../../../../src/node/routes/errors"
 
 describe("error page is rendered for text/html requests", () => {
@@ -9,7 +10,7 @@ describe("error page is rendered for text/html requests", () => {
       statusCode: 404,
       message: ";>hello<script>alert(1)</script>",
     }
-    const req = createRequest()
+    const req = await createRequest()
     const res = {
       status: jest.fn().mockReturnValue(this),
       send: jest.fn().mockReturnValue(this),
@@ -20,9 +21,41 @@ describe("error page is rendered for text/html requests", () => {
     expect(res.status).toHaveBeenCalledWith(404)
     expect(res.send).toHaveBeenCalledWith(expect.not.stringContaining("<script>"))
   })
+
+  it("should use custom app-name in error page title", async () => {
+    const err = {
+      statusCode: 404,
+      message: "Not found",
+    }
+    const req = await createRequest({ "app-name": "MyCodeServer" })
+    const res = {
+      status: jest.fn().mockReturnValue(this),
+      send: jest.fn().mockReturnValue(this),
+      set: jest.fn().mockReturnValue(this),
+    } as unknown as express.Response
+
+    await errorHandler(err, req, res, jest.fn())
+    expect(res.send).toHaveBeenCalledWith(expect.stringContaining("<title>404 - MyCodeServer</title>"))
+  })
+
+  it("should use default 'code-server' when app-name is not set", async () => {
+    const err = {
+      statusCode: 500,
+      message: "Internal error",
+    }
+    const req = await createRequest()
+    const res = {
+      status: jest.fn().mockReturnValue(this),
+      send: jest.fn().mockReturnValue(this),
+      set: jest.fn().mockReturnValue(this),
+    } as unknown as express.Response
+
+    await errorHandler(err, req, res, jest.fn())
+    expect(res.send).toHaveBeenCalledWith(expect.stringContaining("<title>500 - code-server</title>"))
+  })
 })
 
-function createRequest(): express.Request {
+async function createRequest(args: UserProvidedArgs = {}): Promise<express.Request> {
   return {
     headers: {
       accept: ["text/html"],
@@ -31,5 +64,6 @@ function createRequest(): express.Request {
     query: {
       to: "test",
     },
+    args: await setDefaults(args),
   } as unknown as express.Request
 }