Activities of "vd"

What a coincidence, I was just looking for exactly the same feature !

The way the mobile menu currently works is confusing :

The two first menu items appear as icons on the left. When one of those items is a parent item and you click on it, its children will display.....in the full menu.

Could you please fix it so we can chose which items go left and right, and which goes in the hamburger menu ?

I was still getting the error so I tried another approach : replace the ToolbarComponent with my own, like explained here. In my custom toolbar, I can now check if the user is public or not and show the corresponding menu accordingly.

However, I get another console error :

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: 'undefined'. Expression location: MyToolbarContainerComponent component. Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (core.mjs:11010:11)
    at bindingUpdated (core.mjs:14251:17)
    at bindingUpdated2 (core.mjs:14266:12)
    at pureFunction2Internal (core.mjs:22917:12)
    at Module.ɵɵpureFunction2 (core.mjs:22711:12)
--->    at MyToolbarContainerComponent_Template (toolbar-container.component.html:3:10)
    at ReactiveLViewConsumer.runInContext (core.mjs:11103:13)
    at executeTemplate (core.mjs:11404:22)
    at refreshView (core.mjs:12898:13)
    at detectChangesInView (core.mjs:13062:9)

The problem seems to be here :

     <lpx-toolbar [profileRef]="profileRef$" (profileClick)="toggleCtxMenu()">
    <ng-container
--->    ngIf="{
            user: userProfileService.user$ | async,
            profileRef: profileRef$ | async
        } as data"
    >
        <lpx-context-menu *ngIf="data.profileRef" #menu="lpx-context-menu" (lpxClickOutside)="menu.close()" [exceptedRefs]="[data.profileRef]">
            <lpx-context-menu-header>
                <div class="lpx-user-ctx-header">
                    <div class="lpx-user-ctx-img">
                        <lpx-avatar [avatar]="data.user?.avatar"></lpx-avatar>
                    </div>
                    <div class="lpx-user-ctx-info">
                        <span class="lpx-context-menu-user-name">
                            {{ data.user?.fullName || data.user?.userName }}
                        </span>
                        <span *ngIf="data.user?.tenant?.name as tenantName" class="lpx-context-menu-user-tenant">
                            {{ tenantName }}
                        </span>
                        <span class="lpx-context-menu-user-email">{{ data.user?.email }}</span>
                    </div>
                </div>
            </lpx-context-menu-header>
            <ng-container *ngFor="let actions of data.user?.userActionGroups">
                <lpx-context-menu-action-group>
                    <lpx-navbar-routes [navbarItems]="actions" [routerItem]="false"></lpx-navbar-routes>
                </lpx-context-menu-action-group>
            </ng-container>
        </lpx-context-menu>
    </ng-container>
</lpx-toolbar>

I downloaded lepton-x source code for comparison but there seems to be no difference between my html and yours.

The link you provided is for implementing passwordless authentication with MVC when I'm trying to figure out how to refresh the page without reloading (after autologin) in Angular.

Hi,

could you please check this if it helps you
https://support.abp.io/QA/Questions/4484/Allow-Guest-user-to-use-certain-application-services-served-by-a-guest-page#answer-562eec34-7eec-073f-0829-3a092fd6770f

Right now, I'm trying to avoid refreshing the page in Angular. This link is not about Angular.

For instance, when changing the language in any abp project, the texts are replaced without the page needing to refresh. How is it done ?

hi as a workaround, can you do something like this? With this method, you won't need to reload the page.

export class AppComponent { 
  config = inject(ConfigStateService); 
  authService = inject(AuthService); 
  router = inject(Router); 
 
  constructor() { 
    const currentUser = this.config.getOne('currentUser'); 
 
    if (currentUser == null || currentUser.id == null) { 
      const loginParams: LoginParams = { 
        username: 'admin', // change with your username 
        password: '1q2w3E*', // change with your password 
        redirectUrl: '/', 
      }; 
      this.router.navigateByUrl('/account/login').then(() => { 
        this.authService 
          .login(loginParams) 
          .subscribe(); 
      }); 
    } 
  } 
} 

Thanks but with your workaround, the login page is displayed for 1-2 seconds before being redirected to the main page. Seeing the login page for a few seconds before it disappears is confusing for the user.

Hi,

I'm using Angular with Resource Owner Password Flow so I don't think changing Login.cshtml will help me.

Besides, the public login should occur automatically when opening any page of the application. Not only the login page.