From dafa8ab4dfe82b17b1de18bc1829d056ad771b83 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Fri, 9 Jun 2023 15:14:15 +0200
Subject: [PATCH] fix(console): fallback to default language if browser
 language not supported (#5999)

fix: fallback to default language if browser language not supported
---
 console/src/app/app.component.ts         | 11 ++++++-----
 console/src/app/services/grpc.service.ts |  6 +++++-
 console/src/app/utils/language.ts        |  3 +++
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 console/src/app/utils/language.ts

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