[Feat]: Add i18n to the login page

[zhaozhiming]

What is your suggestion?

Add i18n to the login page

Why do you want this feature?

I want to display the login page in a different language.

Are there any workarounds to get this functionality today?

No. Use the welcome-text parameter only to translate partial content to what language I want on the login page.

Are you interested in submitting a PR for this?

Yes. Something like this:

[jsjoeio]

@code-asher what are your thoughts on this?

[code-asher]

Makes sense to me. Code supports other languages so seems reasonable that we should as well. We could add JSON files for translations and then maybe we can read the Code locale file to pick the right one?

[code-asher]

I am imagining a JSON file like this:

{
  "Welcome to {appName}": "hey there hello this is {appName} have fun"
}

And we use it roughly like so (untested and could probably be optimized):

function i18n(str, args) {
  if (locale !== "en") {
    try {
      const translations = require(locale + ".json")
      if (typeof translations[str] === "undefined") {
        throw new Error(`${locale} has no translations for ${str}`)
      }
      str = translations[str]
    } catch (error) {
      // Maybe log once?
    }
  }
  if (typeof args !== "undefined") {
    for (const key in args) {
      str = str.replace(new RegExp("\\{" + key + "\\}", "g"), args[key]);
    }
  }
  return str
}
// ...
const welcomeText = req.args["welcome-text"] || i18n("Welcome to {appName}", { appName })

[jsjoeio]

That makes sense to me! And seems like it would be straightforward enough to implement.

Only question that comes to mind: would we maintain those translation files?

I wonder if alternatively, we could tell the user to place it in a specific location and then read from there.

Benefits: we don't end up maintaining language translations we don't know and we don't increase size of code-server with a bunch of text files.

Thoughts?

[code-asher]

Yeah they would have to be community maintained for sure. I hesitate to make it a manual process for the user though; it could be unfairly punishing to non-English speakers. I have no idea if there is a standard for shipping language files but to avoid increasing code-server's size we could download them on the fly from the repository. Although they will be very small in our case (plus they are shipped compressed) so their impact is probably low. Optimizing that could be premature. We may want to add code owners when someone submits or edits a translation file. Then when we add/change a string we add/update the key in the translation files as well and the owners get automatically pinged to come in and add/update translations. I think we would make no guarantees though and if an owner goes AWOL we merge anyway which means it is possible for the file to become stale. In this case those strings fall back to English and if a user reports those we can ask they go bug the translation file owner or submit their own translation. :P

[jsjoeio]

it could
be unfairly punishing to non-English speakers.

Definitely wouldn't want that so good point.

We may want to add code owners when someone submits or edits a
translation file.

Seems easy enough!

In this case those strings fall back to English and
if a user reports those we can ask they go bug the translation
file owner or submit their own translation. :P

Agreed, seems like a solid approach.

Sounds like we have a plan and we think this is worth doing!

[zhaozhiming]

I'm happy to see the feature suggestion be accepted.
Most of @code-asher ideas are the same as mine.
I've implemented it on my local machine and am glad to submit a PR.

[jsjoeio]

@zhaozhiming that would be amazing!