Consider language from user settings (#1179)

apps/client/src/app/core/auth.guard.ts

@@ -72,7 +72,13 @@ export class AuthGuard implements CanActivate {
           })
         )
         .subscribe((user) => {
-          if (
+          const userLanguage = user?.settings?.language;
+
+          if (userLanguage && document.documentElement.lang !== userLanguage) {
+            window.location.href = `../${userLanguage}`;
+            resolve(false);
+            return;
+          } else if (
             state.url.startsWith('/home') &&
             user.settings.viewMode === ViewMode.ZEN
           ) {

apps/client/src/app/pages/account/account-page.component.ts

@@ -149,10 +149,6 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     this.update();
   }
 
-  public onChangeLanguage(aLanguage: string) {
-    window.location.href = `../${aLanguage}/account`;
-  }
-
   public onChangeUserSetting(aKey: string, aValue: string) {
     this.dataService
       .putUserSetting({ [aKey]: aValue })
@@ -167,6 +163,14 @@ export class AccountPageComponent implements OnDestroy, OnInit {
             this.user = user;
 
             this.changeDetectorRef.markForCheck();
+
+            if (aKey === 'language') {
+              if (aValue) {
+                window.location.href = `../${aValue}/account`;
+              } else {
+                window.location.href = `../`;
+              }
+            }
           });
       });
   }

apps/client/src/app/pages/account/account-page.html

@@ -120,8 +120,9 @@
                     <mat-select
                       name="language"
                       [value]="language"
-                      (selectionChange)="onChangeLanguage($event.value)"
+                      (selectionChange)="onChangeUserSetting('language', $event.value)"
                     >
+                      <mat-option [value]="null"></mat-option>
                       <mat-option value="de">Deutsch</mat-option>
                       <mat-option value="en">English</mat-option>
                     </mat-select>