language saved in preferences and removed localstorage

apps/red-ui/src/app/app.module.ts

@@ -36,6 +36,7 @@ import { HELP_DOCS, IqserHelpModeModule, MAX_RETRIES_ON_SERVER_ERROR, ServerErro
 import { KeycloakService } from 'keycloak-angular';
 import { GeneralSettingsService } from '@services/general-settings.service';
 import { BreadcrumbsComponent } from '@components/breadcrumbs/breadcrumbs.component';
+import { UserPreferenceService } from '@services/user-preference.service';
 
 export function httpLoaderFactory(httpClient: HttpClient): PruningTranslationLoader {
     return new PruningTranslationLoader(httpClient, '/assets/i18n/', '.json');
@@ -110,17 +111,17 @@ const components = [AppComponent, AuthErrorComponent, NotificationsComponent, Sp
             multi: true,
             useClass: HttpCacheInterceptor,
         },
-        {
+        /*{
             provide: APP_INITIALIZER,
             multi: true,
             useFactory: languageInitializer,
             deps: [LanguageService],
-        },
+        },*/
         {
             provide: APP_INITIALIZER,
             multi: true,
             useFactory: configurationInitializer,
-            deps: [KeycloakService, Title, ConfigService, GeneralSettingsService],
+            deps: [KeycloakService, Title, ConfigService, GeneralSettingsService, LanguageService, UserPreferenceService],
         },
         {
             provide: MissingTranslationHandler,

apps/red-ui/src/app/i18n/language.service.ts

@@ -1,11 +1,12 @@
 import { Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { UserPreferenceService } from '@services/user-preference.service';
 
 @Injectable({
     providedIn: 'root',
 })
 export class LanguageService {
-    constructor(private readonly _translateService: TranslateService) {
+    constructor(private readonly _translateService: TranslateService, private readonly _userPreferenceService: UserPreferenceService) {
         _translateService.addLangs(['en', 'de']);
     }
 
@@ -13,14 +14,18 @@ export class LanguageService {
         return this._translateService.currentLang;
     }
 
+    languageAvailable(language: string): boolean {
+        return this._translateService.getLangs().includes(language);
+    }
+
     chooseAndSetInitialLanguage() {
         let defaultLang: string;
-        const localStorageLang = localStorage.getItem('redaction.language');
+        const userPreferenceLang = this._userPreferenceService.getLanguage();
         // const browserLang = this._translateService.getBrowserLang();
         const browserLang = 'en'; // Force language to english until translations are ready
-        if (this._translateService.getLangs().includes(localStorageLang)) {
-            defaultLang = localStorageLang;
-        } else if (this._translateService.getLangs().includes(browserLang)) {
+        if (this.languageAvailable(userPreferenceLang)) {
+            defaultLang = userPreferenceLang;
+        } else if (this.languageAvailable(browserLang)) {
             defaultLang = browserLang;
         } else {
             defaultLang = 'en';
@@ -31,7 +36,7 @@ export class LanguageService {
     }
 
     async changeLanguage(language: string) {
-        localStorage.setItem('redaction.language', language);
+        await this._userPreferenceService.saveLanguage(language);
         document.documentElement.lang = language;
         await this._translateService.use(language).toPromise();
     }

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts

@@ -50,6 +50,7 @@ export class UserProfileScreenComponent implements OnInit {
     }
 
     get languageChanged(): boolean {
+        console.log('plm');
         return this._profileModel['language'] !== this.formGroup.get('language').value;
     }
 

apps/red-ui/src/app/services/user-preference.service.ts

@@ -9,7 +9,6 @@ type UserAttributes = Record<string, List>;
 export class UserPreferenceService extends GenericService<UserAttributes> {
     constructor(protected readonly _injector: Injector) {
         super(_injector, 'attributes');
-        this.reload();
     }
 
     private _userAttributes: UserAttributes = {};
@@ -34,6 +33,20 @@ export class UserPreferenceService extends GenericService<UserAttributes> {
         await this.savePreferences([fileId], key).toPromise();
     }
 
+    getLanguage(): string {
+        const key = 'Language';
+        if (this.userAttributes[key]?.length > 0) {
+            return this.userAttributes[key][0];
+        }
+        return '';
+    }
+
+    async saveLanguage(language: string): Promise<void> {
+        const key = 'Language';
+        this.userAttributes[key] = [language];
+        await this.savePreferences([language], key).toPromise();
+    }
+
     getFilePreviewTooltipsPreference(): boolean {
         const key = 'File-Preview-Tooltips';
         return this._getAttribute(key, 'false') === 'true';

apps/red-ui/src/app/utils/configuration.initializer.ts

@@ -4,12 +4,16 @@ import { Title } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { KeycloakEventType, KeycloakService } from 'keycloak-angular';
 import { GeneralSettingsService } from '@services/general-settings.service';
+import { LanguageService } from '@i18n/language.service';
+import { UserPreferenceService } from '@services/user-preference.service';
 
 export function configurationInitializer(
     keycloakService: KeycloakService,
     title: Title,
     configService: ConfigService,
     generalSettingsService: GeneralSettingsService,
+    languageService: LanguageService,
+    userPreferenceService: UserPreferenceService,
 ) {
     return () =>
         keycloakService.keycloakEvents$
@@ -21,6 +25,8 @@ export function configurationInitializer(
                     title.setTitle('RedactManager');
                     return of({});
                 }),
+                tap(() => userPreferenceService.reload()),
+                tap(() => languageService.chooseAndSetInitialLanguage()),
                 take(1),
             )
             .toPromise();