fix(console): fallback to default language if browser language not su…

…pported (#5999)

fix: fallback to default language if browser language not supported

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);

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<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) => {

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';