Merge pull request #20935 from abpframework/issue/4576

fix : set language with ui-culture on auth-code-flow

npm/ng-packs/packages/core/src/lib/services/config-state.service.ts

@@ -17,6 +17,8 @@ export class ConfigStateService {
   private updateSubject = new Subject<void>();
   private readonly store = new InternalStore({} as ApplicationConfigurationDto);
 
+  public uiCultureFromAuthCodeFlow: string;
+
   setState(config: ApplicationConfigurationDto) {
     this.store.set(config);
   }
@@ -53,8 +55,13 @@ export class ConfigStateService {
     if (!appState.localization.currentCulture.cultureName) {
       throw new Error('culture name should defined');
     }
-    return this.getlocalizationResource(appState.localization.currentCulture.cultureName).pipe(
+
+    const cultureName =
+      this.uiCultureFromAuthCodeFlow ?? appState.localization.currentCulture.cultureName;
+
+    return this.getlocalizationResource(cultureName).pipe(
       map(result => ({ ...appState, localization: { ...appState.localization, ...result } })),
+      tap(() => (this.uiCultureFromAuthCodeFlow = undefined)),
     );
   }
 
@@ -71,10 +78,10 @@ export class ConfigStateService {
   }
 
   refreshLocalization(lang: string): Observable<null> {
-    if(this.includeLocalizationResources){
+    if (this.includeLocalizationResources) {
       return this.refreshAppState().pipe(map(() => null));
     }
-    
+
     return this.getlocalizationResource(lang)
       .pipe(
         tap(result =>
@@ -145,7 +152,7 @@ export class ConfigStateService {
     return keys.reduce((acc, key) => ({ ...acc, [key]: features.values[key] }), {});
   }
 
-  getFeatures$(keys: string[]): Observable<{ [key: string]: string; } | undefined> {
+  getFeatures$(keys: string[]): Observable<{ [key: string]: string } | undefined> {
     return this.store.sliceState(({ features }) => {
       if (!features?.values) return;
 
@@ -168,10 +175,13 @@ export class ConfigStateService {
 
     const keysFound = Object.keys(settings).filter(key => key.indexOf(keyword) > -1);
 
-    return keysFound.reduce((acc, key) => {
+    return keysFound.reduce(
-      acc[key] = settings[key];
+      (acc, key) => {
-      return acc;
+        acc[key] = settings[key];
-    }, {} as Record<string, string>);
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
   }
 
   getSettings$(keyword?: string) {
@@ -183,10 +193,13 @@ export class ConfigStateService {
 
           const keysFound = Object.keys(settings).filter(key => key.indexOf(keyword) > -1);
 
-          return keysFound.reduce((acc, key) => {
+          return keysFound.reduce(
-            acc[key] = settings[key];
+            (acc, key) => {
-            return acc;
+              acc[key] = settings[key];
-          }, {} as Record<string, string>);
+              return acc;
+            },
+            {} as Record<string, string>,
+          );
         }),
       );
   }

npm/ng-packs/packages/core/src/lib/services/window.service.ts

@@ -3,9 +3,9 @@ import { DOCUMENT } from '@angular/common';
 
 @Injectable({ providedIn: 'root' })
 export class AbpWindowService {
-  protected readonly document = inject(DOCUMENT);
+  public readonly document = inject(DOCUMENT);
-  protected readonly window = this.document.defaultView;
+  public readonly window = this.document.defaultView;
-  protected readonly navigator = this.window.navigator;
+  public readonly navigator = this.window.navigator;
 
   copyToClipboard(text: string): Promise<void> {
     return this.navigator.clipboard.writeText(text);

npm/ng-packs/packages/oauth/src/lib/strategies/auth-code-flow-strategy.ts

@@ -1,6 +1,6 @@
 import { noop } from '@abp/ng.core';
 import { Params } from '@angular/router';
-import { from, of } from 'rxjs';
+import { filter, from, of, take, tap } from 'rxjs';
 import { AuthFlowStrategy } from './auth-flow-strategy';
 import { isTokenExpired } from '../utils';
 
@@ -9,6 +9,7 @@ export class AuthCodeFlowStrategy extends AuthFlowStrategy {
 
   async init() {
     this.checkRememberMeOption();
+    this.listenToTokenReceived();
 
     return super
       .init()
@@ -34,6 +35,46 @@ export class AuthCodeFlowStrategy extends AuthFlowStrategy {
     }
   }
 
+  private getCultureParams(queryParams?: Params) {
+    const lang = this.sessionState.getLanguage();
+    const culture = { culture: lang, 'ui-culture': lang };
+    return { ...(lang && culture), ...queryParams };
+  }
+
+  protected setUICulture() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.configState.uiCultureFromAuthCodeFlow = urlParams.get('ui-culture');
+  }
+
+  protected replaceURLParams() {
+    const location = this.windowService.window.location;
+    const history = this.windowService.window.history;
+
+    const href =
+      location.origin +
+      location.pathname +
+      location.search
+        .replace(/iss=[^&$]*/, '')
+        .replace(/culture=[^&$]*/, '')
+        .replace(/ui-culture=[^&$]*/, '') +
+      location.hash;
+
+    history.replaceState(null, '', href);
+  }
+
+  protected listenToTokenReceived() {
+    this.oAuthService.events
+      .pipe(
+        filter(event => event.type === 'token_received'),
+        tap(() => {
+          this.setUICulture();
+          this.replaceURLParams();
+        }),
+        take(1),
+      )
+      .subscribe();
+  }
+
   navigateToLogin(queryParams?: Params) {
     let additionalState = '';
     if (queryParams?.returnUrl) {
@@ -62,10 +103,4 @@ export class AuthCodeFlowStrategy extends AuthFlowStrategy {
     this.oAuthService.initCodeFlow('', this.getCultureParams(queryParams));
     return of(null);
   }
-
-  private getCultureParams(queryParams?: Params) {
-    const lang = this.sessionState.getLanguage();
-    const culture = { culture: lang, 'ui-culture': lang };
-    return { ...(lang && culture), ...queryParams };
-  }
 }

npm/ng-packs/packages/oauth/src/lib/strategies/auth-flow-strategy.ts

@@ -13,6 +13,7 @@ import {
 
 import {
   AbpLocalStorageService,
+  AbpWindowService,
   ConfigStateService,
   EnvironmentService,
   HttpErrorReporterService,
@@ -38,6 +39,7 @@ export abstract class AuthFlowStrategy {
   protected sessionState: SessionStateService;
   protected localStorageService: AbpLocalStorageService;
   protected rememberMeService: RememberMeService;
+  protected windowService: AbpWindowService;
   protected tenantKey: string;
   protected router: Router;
 
@@ -65,6 +67,7 @@ export abstract class AuthFlowStrategy {
     this.router = injector.get(Router);
     this.oAuthErrorFilterService = injector.get(OAuthErrorFilterService);
     this.rememberMeService = injector.get(RememberMeService);
+    this.windowService = injector.get(AbpWindowService);
 
     this.listenToOauthErrors();
   }