Activities of "Mehmet"

Hi

Did you try @maliming's suggesion?

Hi @FarReach,

It is a known issue. We are trying to fix the problem. It will probably be resolved in v4.3.1.

Thanks.

Hi,

We've created an internal issue. We will inform you when resolved. Thanks for the reporting.

Hi,

Please see this question. We answered a similar question before.

Hi @wazbek,

I cannot reproduce the problem. Can you explain the steps to reproduce?

Thanks.

You should replace the current-user.component.ts to display current tenant and user name in the header. Please apply the steps below:

1. Run the following commands in order to create a component:

yarn ng generate module components/current-user --module app
yarn ng generate component components/current-user --export --inline-style --skip-tests

2. Replace the generated current-user.component.ts content with the following:

import { ApplicationConfiguration, AuthService, ConfigState } from '@abp/ng.core';
import { Component, Inject, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Select } from '@ngxs/store';
import { ProfilePictureImage, PROFILE_PICTURE } from '@volo/abp.commercial.ng.ui';
import { BehaviorSubject, Observable } from 'rxjs';

@Component({
  selector: 'app-current-user',
  templateUrl: 'current-user.component.html',
  styles: [
    `
      i.fas.user-avatar-big,
      i.fas.user-avatar {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    `,
  ],
})
export class CurrentUserComponent implements OnInit {
  @Select(ConfigState.getOne('currentUser'))
  currentUser$: Observable<ApplicationConfiguration.CurrentUser>;

  @Select(ConfigState.getDeep('currentTenant.name'))
  tenantName$: Observable<string>;

  constructor(
    @Inject(PROFILE_PICTURE) public profilePicture$: BehaviorSubject<ProfilePictureImage>,
    private authService: AuthService,
    private router: Router
  ) {}

  ngOnInit() {}

  logout() {
    this.authService.logout().subscribe(() => {
      this.router.navigate(['/'], { state: { redirectUrl: this.router.url } });
    });
  }
}

3. Replace the generated current-user.component.ts content with the following:

<ng-container *ngIf="currentUser$ | async as user">
  <ng-template #loginBtn>
    <a role="button" routerLink="/account/login" class="btn">{{
      'AbpAccount::Login' | abpLocalization
    }}</a>
  </ng-template>
  <div *ngIf="user.isAuthenticated; else loginBtn" class="dropdown btn-group" ngbDropdown>
    <a ngbDropdownToggle class="btn pointer">
      <ng-container *ngIf="profilePicture$ | async as pP">
        <ng-container [ngSwitch]="pP.type">
          <img *ngSwitchCase="'image'" [src]="pP.source" alt="user" class="user-avatar" />
          <i *ngSwitchCase="'icon'" [ngClass]="pP.source"></i>
        </ng-container>
      </ng-container>
      <span class="ml-1">
        <small *ngIf="tenantName$ | async as tenantName"
          ><i>{{ tenantName }}</i
          >\</small
        >
        <span>{{ user.userName }}</span>
      </span>
    </a>
    <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
      <div class="p-2 row">
        <div class="pr-0 col col-auto">
          <ng-container *ngIf="profilePicture$ | async as pP">
            <ng-container [ngSwitch]="pP.type">
              <img *ngSwitchCase="'image'" [src]="pP.source" alt="user" class="user-avatar-big" />
              <i *ngSwitchCase="'icon'" [ngClass]="pP.source"></i>
            </ng-container>
          </ng-container>
        </div>
        <div class="pl-2 col">
          <span>{{ 'AbpAccount::Welcome' | abpLocalization }}</span
          ><br />
          <small *ngIf="tenantName$ | async as tenantName"
            ><i>{{ tenantName }}</i
            >\</small
          >
          <strong>{{ user.userName }}</strong>
        </div>
      </div>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item pointer" routerLink="/account/manage-profile">{{
        'AbpAccount::ManageYourProfile' | abpLocalization
      }}</a>
      <a class="dropdown-item pointer" routerLink="/account/security-logs">{{
        'AbpAccount::MySecurityLogs' | abpLocalization
      }}</a>
      <a class="dropdown-item pointer" id="logout" (click)="logout()">{{
        'AbpUi::Logout' | abpLocalization
      }}</a>
    </div>
  </div>
</ng-container>

4. Replace the generated current-user.module.ts content with the following:

import { CoreModule } from '@abp/ng.core';
import { NgModule } from '@angular/core';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { CurrentUserComponent } from './current-user.component';

@NgModule({
  imports: [CoreModule, NgbDropdownModule],
  exports: [CurrentUserComponent],
  declarations: [CurrentUserComponent]
})
export class CurrentUserModule {}

5. Change the current user component in lepton theme with your component. To do this, inject the NavItemsService to AppComponent and patch the current user nav item like this:

import { NavItemsService } from '@abp/ng.theme.shared';
import { Component } from '@angular/core';
import { eThemeLeptonComponents } from '@volo/abp.ng.theme.lepton';
import { CurrentUserComponent } from './components/current-user/current-user.component';

@Component(/* component metadata */)
export class AppComponent {
  constructor(private navItems: NavItemsService) {
    this.navItems.patchItem(eThemeLeptonComponents.CurrentUser, {
      component: CurrentUserComponent,
    });
  }
}

See the result:

Hi,

You can move a menu element by modifying the menu elements' parentName. Please see the modifying the menu document.

Hi,

Please see placing a search input before benu items section in this document.

But I'm afraid it will not work in your project due to ABP version. If you upgrade the ABP version to the latest, you can add search input to menu and you'll see the tenant name in the header.

If you can't update your project for any reason, we can explain how you can achieve this by replacing some components.

Hi,

Can you share the local storage with me after logging in? Can you also share the oAuthConfig object in the environment?

Hi,

We have got back the account public module in this version (v4.3). So the module in Angular UI contains less features than MVC's account public module. We will gradually add new features.

I created an issue about this, but it might take a while to finalize. If google login is so critical for you, please keep use the authorization code flow.

Thanks for your understanding and patience.