diff --git a/console/src/app/app.component.ts b/console/src/app/app.component.ts index 9c473a288e..7249dad127 100644 --- a/console/src/app/app.component.ts +++ b/console/src/app/app.component.ts @@ -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); diff --git a/console/src/app/services/grpc.service.ts b/console/src/app/services/grpc.service.ts index a842edfb2a..e8897fbc31 100644 --- a/console/src/app/services/grpc.service.ts +++ b/console/src/app/services/grpc.service.ts @@ -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 { 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) => { diff --git a/console/src/app/utils/language.ts b/console/src/app/utils/language.ts new file mode 100644 index 0000000000..d4c54f3757 --- /dev/null +++ b/console/src/app/utils/language.ts @@ -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';