fix(console): fallback to default language if browser language not supported (#5999)

fix: fallback to default language if browser language not supported
This commit is contained in:
Max Peintner 2023-06-09 15:14:15 +02:00 committed by GitHub
parent 66e639b5ad
commit dafa8ab4df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 6 deletions

View File

@ -19,6 +19,7 @@ import { KeyboardShortcutsService } from './services/keyboard-shortcuts/keyboard
import { ManagementService } from './services/mgmt.service';
import { ThemeService } from './services/theme.service';
import { UpdateService } from './services/update.service';
import { fallbackLanguage, supportedLanguages, supportedLanguagesRegexp } from './utils/language';
@Component({
selector: 'cnsl-root',
@ -267,15 +268,15 @@ export class AppComponent implements OnDestroy {
}
private setLanguage(): void {
this.translate.addLangs(['de', 'en', 'es', 'fr', 'it', 'ja', 'pl', 'zh']);
this.translate.setDefaultLang('en');
this.translate.addLangs(supportedLanguages);
this.translate.setDefaultLang(fallbackLanguage);
this.authService.user.subscribe((userprofile) => {
if (userprofile) {
const cropped = navigator.language.split('-')[0] ?? 'en';
const fallbackLang = cropped.match(/de|en|es|fr|it|ja|pl|zh/) ? cropped : 'en';
const cropped = navigator.language.split('-')[0] ?? fallbackLanguage;
const fallbackLang = cropped.match(supportedLanguagesRegexp) ? cropped : fallbackLanguage;
const lang = userprofile?.human?.profile?.preferredLanguage.match(/de|en|es|fr|it|ja|pl|zh/)
const lang = userprofile?.human?.profile?.preferredLanguage.match(supportedLanguagesRegexp)
? userprofile.human.profile?.preferredLanguage
: fallbackLang;
this.translate.use(lang);

View File

@ -8,6 +8,7 @@ import { catchError, switchMap, tap, throwError } from 'rxjs';
import { AdminServiceClient } from '../proto/generated/zitadel/AdminServiceClientPb';
import { AuthServiceClient } from '../proto/generated/zitadel/AuthServiceClientPb';
import { ManagementServiceClient } from '../proto/generated/zitadel/ManagementServiceClientPb';
import { fallbackLanguage, supportedLanguagesRegexp } from '../utils/language';
import { AuthenticationService } from './authentication.service';
import { EnvironmentService } from './environment.service';
import { ExhaustedService } from './exhausted.service';
@ -40,8 +41,11 @@ export class GrpcService {
public loadAppEnvironment(): Promise<any> {
this.themeService.applyLabelPolicy();
// We use the browser language until we can make API requests to get the users configured language.
const browserLanguage = this.translate.getBrowserLang();
const language = browserLanguage?.match(supportedLanguagesRegexp) ? browserLanguage : fallbackLanguage;
return this.translate
.use(this.translate.getBrowserLang() || this.translate.defaultLang)
.use(language || this.translate.defaultLang)
.pipe(
switchMap(() => this.envService.env),
tap((env) => {

View File

@ -0,0 +1,3 @@
export const supportedLanguages = ['de', 'en', 'es', 'fr', 'it', 'ja', 'pl', 'zh'];
export const supportedLanguagesRegexp: RegExp = /de|en|es|fr|it|ja|pl|zh/;
export const fallbackLanguage: string = 'en';