Language Picker on Create First User

[58bits]

It would be great if there was a language picker on the 'Create First User' page at startup.

The locale may not always be the preferred one by the user - depending on what country they're in and the machine their using. For example, I use a MBP in Thailand, and the machine and browser region is set to the Thai thailand, with English as my preferred language. Google used to do this as well and they now place the language option directly below the search field.

[DanRibbens]

The default is set from your OS default through the browser though. If your preferred language is English, why is your system set to Thai?

I thought language settings would be independent of geographic location. Sorry for not understanding, just trying to gain perspective.

[58bits]

Hi @DanRibbens - thanks a bunch for taking the time to reply.

On both a MBP and Windows 11 machine - display / OS Language is set to English (United States), but my Country or region is set to Thailand (since that's where I am).

I've not looked yet at how you're doing language detection with i18next, but are you considering the the HTTP Accept-Language header? On both machines it's sent as Accept-Language: en-US,en;q=0.9,th-TH;q=0.8,th;q=0.7

Hope some of this helps, although I guess this is an edge case of sorts.

[58bits]

I've also just re-read and tweaked my original post above - which was a tad misleading. Sorry about that.

[58bits]

@JessChowdhury @DanRibbens - just to add a little here then, I feel this is still a valid scenario - although likely in the 'would be nice' category - but in short, I think Payload could consider a server language detection strategy to compliment the current browser detection strategy described by @JessChowdhury in the issue I raised here.. #2661

As mentioned in the issue, we do this with a server-side helper that looks for either a cookie (first), or the request header.

In our remix app (also via Express) it looks a bit like this...

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const cspNonce = crypto.randomBytes(16).toString('hex')
  const callbackName = isbot(request.headers.get('user-agent'))
    ? 'onAllReady'
    : 'onShellReady'

  const lng = await i18nextServer.getLocale(request)
  const ns = i18nextServer.getRouteNamespaces(remixContext)
  const i18n = createInstance()
  await i18n
    .use(initReactI18next)
    .use(Backend)
    .init({
      ...i18nextConfig,
      lng,
      ns,
      backend: {
        loadPath: resolvePath('./public/locales/{{lng}}/{{ns}}.json'),
      },
    })

  return await new Promise((resolve, reject) => {
    let didError = false

    const { pipe, abort } = renderToPipeableStream(
      <NonceContext.Provider value={cspNonce}>
        <I18nextProvider i18n={i18n}>
          <RemixServer context={remixContext} url={request.url} />
        </I18nextProvider>
...

... although there's a little more work required to set this up.

And so coming back to original topic above - perhaps putting the language picker on the 'Create First User' page would be a helpful interim solution? (for the expats and digital nomads in the world ;-))

[58bits]

Also again - thanks to @JessChowdhury 's reply - we've set our current language to...

i18n: {
    lng: 'en',
  },

... in payload.config.ts - which is fine for development and while we're seeding / resetting the db - but again, would be nice to offer a language option on the initial screen as well.