Browser Language Preference Needs To Be Honored

[vw98075]

Overview of the issue

When Spanish is on the top of the language setting in my browser, my app still shows the content in the default language, English although Spanish is a language in my app.

Motivation for or Use Case

The browser language setting needs to be honored.

Reproduce the error

Create an app with multiple languages such as English as the default language and Spanish. Set Spanish on the top of your browser language setting. Access the app and it will show in English.

Related issues

Suggest a Fix

JHipster Version(s)

JHipster configuration

{
  "generator-jhipster": {
    "applicationType": "monolith",
    "baseName": "myapp",
    "jhipsterVersion": "7.1.0",
    "skipClient": false,
    "skipServer": false,
    "skipUserManagement": false,
    "skipCheckLengthOfIdentifier": false,
    "skipFakeData": false,
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "testFrameworks": ["cypress", "gatling"],
    "blueprints": [],
    "otherModules": [],
    "pages": [],
    "creationTimestamp": 1625095262715,
    "serviceDiscoveryType": false,
    "reactive": false,
    "authenticationType": "jwt",
    "packageName": "com.abc.myapp",
    "serverPort": "8080",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "buildTool": "gradle",
    "serverSideOptions": [],
    "websocket": false,
    "searchEngine": false,
    "messageBroker": false,
    "enableSwaggerCodegen": false,
    "clientFramework": "vue",
    "withAdminUi": true,
    "clientTheme": "cosmo",
    "clientThemeVariant": "primary",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "packageFolder": "com/abc/myapp",
    "jwtSecretKey": "NThkZDg5YjE3OTkxNGU2YjUzNjAwODMwZjY4ODRiYmIyOWVkN2Q0NmZhMjZhNDU4MmQyYTQ5NDcxOWZlODRjY2ZhYWE5NjNjZWJkZDUyYzljYTU0NmU0OGExZDY4N2EwZjljZWQwMTliYWU3NGZiZTQ3NDQ1MGIwOTNjZDU3NmE=",
    "devServerPort": 9060,
    "clientPackageManager": "npm",
    "languages": ["en", "es"]
  }
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

• Checking this box is mandatory (this is just to show you read everything)

[gmarziou]

I think this is a specific choice for your app, I'm not sure it would make sense to make it the default behavior. You can still implement it yourself with Spring LocaleResolver

[vw98075]

What I described is the correct multi-language web application behaviour. For example, Gitea, a Github like application, demonstrates the multi-language behaviour. The language setting in the browser will dictate the language display in the application. Try https://try.gitea.io/

[gmarziou]

You have described one way of doing it, there are other ways. Personally, I prefer that each application use its own preferences rather than relying on a global browser setting.

But maybe your proposition could be a good default and you could contribute it.

[github-actions]

This issue is stale because it has been open 30 days with no activity.
Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted.
We are accepting PRs 😃.
Comment or this will be closed in 7 days

[atomfrede]

Keep it open

[github-actions]

This issue is stale because it has been open 30 days with no activity.
Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted.
We are accepting PRs 😃.
Comment or this will be closed in 7 days

[vw98075]

Currently, I have some free time on hand to look into this issue. I do some coding tracing on the language setting in the front end Vue. Here is what I understand about the language setting:

1. initially, it retrieves the language settings (native/default language, available languages) based on the configuration/app language preference (in the jhipsterConfig). And sets the displaying language with $store.getters.currentLanguage (which is the native/default language). And the variable is for storing the data, but not for governing the displayed language.

2. Once a user signs in the app, the current language is set with the user's language key.

To solve the issue, a change needed is to set the current language based on the first language in the browser preference priority list which is in the jhipsterConfig.languages.

I see a generated Javascript code pormpts.js with some related code:
const languageOptions = this.getAllSupportedLanguageOptions(); ... return languageOptions.filter(...);
I, however, can't find the Typescript code which generates the Javascript code. Can someone from the JHipster team shed some light on the subject?

[vw98075]

I change the following line in the refreshTranslation method of TranslationService.ts file

currentLanguage = newLanguage ? newLanguage : 'en';

to

currentLanguage = newLanguage ? newLanguage : navigator.language;

With the change, the browser language setting is considered in the app language selection.

[github-actions]

This issue is stale because it has been open 30 days with no activity.
Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted.
We are accepting PRs 😃.
Comment or this will be closed in 7 days

[vw98075]

I have a fix for this issue in our app. I, however, don't know how to make the change for JHipster generator.

[mraible]

The easiest way I've found to contribute a fix this this:

• Create a brand new app with JHipster. Check it into GitHub and push it to a main branch.
• Create a branch with your desired changed to make everything work. Create a PR. This PR will show all the changes you need to make.
• Take the changes and incorporate them into a PR for JHipster. Before you open the PR, test your changes locally and verify a new app's code matches the code from the previous step. SmartSynchronize can help with this.

Keep in mind that you will need to make these changes for Angular, React, and Vue.

[vw98075]

The related changes are in the jhi-navbar.component.ts..ejs. I made changes based on our application language selections. I am not a Javascript person. So, it will take me longer to have a generic solution.

[gmarziou]

Keep in mind that you will need to make these changes for Angular, React, and Vue.

@mraible I think it's asking for too much. You can't expect contributors to know well 3 frameworks.

[vw98075]

I can't push my code change due to "remote: Permission to jhipster/generator-jhipster.git denied to ..."

[gmarziou]

It's normal, because this is not how it works. You should push to your clone and then create a pull request to main project.

See https://github.com/jhipster/generator-jhipster/blob/main/CONTRIBUTING.md#submitting-a-pull-request

[vw98075]

The change I make for this matter is only on Vue. I have a look at Angular and React, but can't find the related code. As a result, I don't make the same code change for those two sets of front-end code.