Activities of "alina@iwell.nl"

Thank you for trying to help. Closing the ticket.

Thank you for the response.

To simplify the question, is it possible to reload the page in ABP Angular without using the code

window.location.reload();

?

Hi sumeyye.kurtulus, Thank you for your response.

We don't use LeptonX or Lepton theme. Though the language is applied only when you force refreshing the page by

window.location.reload();

In LeptonX the language is applied without refreshing the page completely. How can I apply the same behaviour without using LeptonX?

I've managed to get rid of the error by adding the

provideAbpCore(
            withOptions({
                environment,
                registerLocaleFn: registerLocale(
                    {
                        cultureNameLocaleFileMap: { 'nl-NL': 'nl' },
                        errorHandlerFn: ({ resolve, reject, locale, error }) => {
                            // the error can be handled here
                        },
                    },
                ),
            }),
        ),

but still to see the new language applied I have to refresh the page

window.location.reload();

is it possible to reload page data without reloading the whole page by using abp methods?

Hello,

I replaced LeptonX Language switcher with a custom one.

typescript:

import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core';
import { Component, inject } from '@angular/core';
import { map, Observable } from 'rxjs';

@Component({
    selector: 'app-language-selector',
    templateUrl: './language-selector.component.html',
    styleUrls: ['./language-selector.component.scss'],
    standalone: false,
})
export class LanguageSelectorComponent {
    private configState = inject(ConfigStateService);
    private sessionState = inject(SessionStateService);

    languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages');

    get selectedLanguageName$(): Observable<string> {
        return this.languages$.pipe(
            map((languages) => {
                const selectedLang = languages.find((lang) => lang.cultureName === this.selectedLangCulture());
                return selectedLang ? selectedLang.displayName : '';
            }),
        );
    }

    get selectedLanguageShortName$(): Observable<string> {
        return this.languages$.pipe(
            map((languages) => {
                const selectedLang = languages.find((lang) => lang.cultureName === this.selectedLangCulture());
                return selectedLang ? selectedLang.twoLetterISOLanguageName : '';
            }),
        );
    }

    selectedLangCulture(): string {
        return this.sessionState.getLanguage();
    }

    onChangeLang(cultureName: string) {
        this.sessionState.setLanguage(cultureName);
    }
}

template:

<div class="language-selector">
    <div class="dropdown" ngbDropdown #languageDropdown="ngbDropdown" display="static">
        <a
            ngbDropdownToggle
            autoClose="outside"
            class="nav-link"
            href="javascript:void(0)"
            role="button"
            id="dropdownMenuLink"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false">
            <span class="language-short">{{ selectedLanguageShortName$ | async }}</span>
            <div class="language-long">
                <i class="ri-global-line"></i>
                <span>
                    {{ selectedLanguageName$ | async }}
                </span>
            </div>
        </a>

        <div
            class="dropdown-menu dropdown-menu-right border-0 shadow-lg"
            aria-labelledby="dropdownMenuLink"
            [class.d-block]="languageDropdown.isOpen()">
            <a
                *ngFor="let lang of languages$ | async"
                href="javascript:void(0)"
                class="dropdown-item"
                [class.active]="lang.cultureName === selectedLangCulture()"
                (click)="onChangeLang(lang.cultureName)">
                {{ lang?.displayName }}
            </a>
        </div>
    </div>
</div>

Now after switching the language I get an error and the page is not being translated: Though after refreshing the page, the selected language is allplied.

What shall I do to make it work?

Thank you for a quick response! The solution works!

Thank you for checking and your reply!

I confirm that we have

const oAuthConfig = {
  ...
  impersonation: {
    tenantImpersonation: true,
    userImpersonation: true,
  },
};

Steps to reproduce:

• In app-routing.module.ts create routes

const routes: Routes = [
    {
        path: '',
        loadChildren: () => import('./modules/page1.module').then((m) => m.Page1Module),
        canActivate: [
            authGuard,
            (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
                inject(RedirectGuard).canActivate(next, state),
        ],
    },
    {
        path: 'page1',
        loadChildren: () => import('./modules/page1.module').then((m) => m.Page1Module),
    },
    {
        path: 'page2',
        loadChildren: () => import('./modules/page2.module').then((m) => m.Page2Module),
    },

• create a guard canActivate

@Injectable({
    providedIn: 'root',
})
export class RedirectGuard {
    constructor(private router: Router) {}
    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        const permissionService = inject(PermissionService);

        const canViewPage1 = permissionService.getGrantedPolicy('Portal.Admin');
        if (canViewPage1) {
            this.router.navigate(['/page1']);
            return true;
        }

        const canViewPage2 = permissionService.getGrantedPolicy('Portal.All');
        if (canViewPage2) {
            this.router.navigate(['/page2']);
            return true;
        }
        return false;
    }
}

• Page1 should be available only for admins, who can make impersonation, Page2 - for all
• Try to impersonate with the user that doesn't have Admin rights. Get 403 error. Refresh the page. Impersonation works. Important: This code worked before the migration! Would be nice that 403 error doesn't happen.

Thank you!

Upgrading ABP from 8.2.2 to 8.3.4 broke impersonation, because we forgot to add changes to Angular configuration as mentioned in the migration guide. Applying these changes fixed impersonation to the extent that it works again. However, impersonating a user results in a 403 forbidden error. Furthermore, ending the impersonation results in a database concurrency exception in the backend.

We have investigated this issue, but was unable to resolve it. The following steps outline the hypothesis for the occurrence of the 403 forbidden error:

• Impersonating a user redirects to the application root
• This causes the canActivate guard to be triggered
• In this guard the PermissionService is used to determine if the monitoring policy is present
• This should be false, but returns true, as the Admin user (who can impersonate) has permissions
• The user is being redirected to the page according to the rights of the Admin user
• This redirect is not allowed, resulting in the 403 forbidden error - because the impersonated user doesn't have rights

Since impersonation was working before the APB upgrade, something changed from 8.2.2 to 8.3.4 that causes the PermissionService to use permissions from the original token instead of the new token

hi masum.ulu, thank you! will be waiting for the updates. regards!

It would be really helpful to make this Navbar configurable. Could you implement it in near future? Thank you.