Activities of "Mehmet"

Nothing has been developed on this issue yet. We'll work on this.

Hi @ninomartini

We linked the Gravatar image with the email of the current user. But not released yet. It'll be released on May 21.

Can I change the default Gravator for users that don't have Gravator?

We'll work on this.

Thanks.

Yes, you should update @volo/abp.ng.* packages.

Open the package.json and replace the @volo/abp.ng.* packages with below:

"@volo/abp.ng.account": "~2.7.1",
"@volo/abp.ng.audit-logging": "~2.7.1",
"@volo/abp.ng.identity": "~2.7.1",
"@volo/abp.ng.identity-server": "~2.7.1",
"@volo/abp.ng.language-management": "~2.7.1",
"@volo/abp.ng.saas": "~2.7.1",
"@volo/abp.ng.text-template-management": "~2.7.1",
"@volo/abp.ng.theme.lepton": "~2.7.1",

Then remove yarn.lock (or package-lock.json) and install packages.

May 21, 2020,

See the milestones: https://github.com/abpframework/abp/milestones

Hi

We'll fix the problem. Until the problem is resolved, you can protect the page via AuthGuard as shown below:

// app-routing.module.ts

import { ..., AuthGuard } from '@abp/ng.core';
//...
 {
    path: 'setting-management',
    canActivate: [AuthGuard], // added canActivate
   //...
  }

Hi

Can you run the following command in the angular root folder and share the result with us?

yarn list --pattern abp

It seems installed ABP packages are outdated.

Hi,

I think you can achieve what you want by replacing AccountComponent.

Run the following command to create a component:

yarn ng generate component account --entryComponent

Then open account.component.ts in app/account folder and replace the content with below:

import {
  ApplicationConfiguration,
  Config,
  ConfigState,
  getAbpRoutes,
  SessionState,
  SetLanguage,
} from '@abp/ng.core';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Select, Store } from '@ngxs/store';
import { eAccountComponents } from '@volo/abp.ng.account';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import snq from 'snq';

@Component({
  selector: 'abp-account',
  templateUrl: './account.component.html',
})
export class AccountComponent {
  @Select(ConfigState.getDeep('multiTenancy.isEnabled'))
  isMultiTenancyEnabled$: Observable<boolean>;

  @Select(ConfigState.getDeep('localization.languages'))
  languages$: Observable<ApplicationConfiguration.Language[]>;

  tenantBoxKey = eAccountComponents.TenantBox;

  get defaultLanguage$(): Observable<{ displayName: string; flagIcon: string }> {
    return this.languages$.pipe(
      map(languages => {
        const lang: Partial<ApplicationConfiguration.Language> = snq(
          () => languages.find(l => l.cultureName === this.selectedLangCulture),
          {} as any,
        );
        return {
          displayName: lang.displayName || '',
          flagIcon: lang.flagIcon,
        };
      }),
    );
  }

  get dropdownLanguages$(): Observable<ApplicationConfiguration.Language[]> {
    return this.languages$.pipe(
      map(
        languages =>
          snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)),
        [],
      ),
    );
  }

  get selectedLangCulture(): string {
    return this.store.selectSnapshot(SessionState.getLanguage);
  }

  get appInfo(): Config.Application {
    return this.store.selectSnapshot(ConfigState.getApplicationInfo);
  }

  get pageLabel(): string {
    return getAbpRoutes()
      .find(route => route.path === 'account')
      .children.reduce((acc, val) => {
        if (this.router.url.includes(val.path)) {
          return val.name;
        }
        return acc;
      }, '');
  }

  constructor(private store: Store, private router: Router) {}

  onChangeLang(cultureName: string) {
    this.store.dispatch(new SetLanguage(cultureName));
  }
}

Open account.component.html and replace content with the following:

<div class="row">
  <div class="col col-md-6 col-lg-4 offset-md-3 offset-lg-4">
    <div class="account-brand p-4 text-center mb-1">
      <a #navbarBrand class="navbar-brand" routerLink="/" alt="Logo"></a>
    </div>
    <div class="card">
      <div class="card-header">
        <h2 class="card-title d-inline-block">{{ pageLabel | abpLocalization }}</h2>
        <nav class="navbar navbar-expand p-0 pt-1 float-right">
          <ul class="navbar-nav ml-auto toolbar-nav">
            <li class="nav-item">
              <div class="dropdown" ngbDropdown>
                <a
                  *ngIf="defaultLanguage$ | async as defaultLang"
                  class="pointer"
                  role="button"
                  id="dropdownMenuLink"
                  ngbDropdownToggle
                  [class.dropdown-toggle]="false"
                >
                  <span
                    class="flag-icon flag-icon-squared flag-icon-{{ defaultLang.flagIcon }}"
                  ></span>
                </a>
                <div
                  ngbDropdownMenu
                  class="dropdown-menu dropdown-menu-right"
                  *ngIf="(dropdownLanguages$ | async).length > 0"
                >
                  <a
                    *ngFor="let lang of dropdownLanguages$ | async"
                    class="dropdown-item pointer"
                    (click)="onChangeLang(lang.cultureName)"
                  >
                    <span
                      class="flag-icon flag-icon-{{ lang.flagIcon }} flag-icon-squared mr-2"
                    ></span>
                    {{ lang?.displayName }}</a
                  >
                </div>
              </div>
            </li>
          </ul>
        </nav>
      </div>
      <div class="card-body">
        <router-outlet></router-outlet>
      </div>
    </div>

    <div class="p-3 text-center text-muted">
      <div class="copyright">
        <span>© {{ appInfo.name }}</span
        ><br />
      </div>
    </div>
  </div>
</div>

Now, you should replace the AccountComponent with your own AccountComponent.

Open app.component.ts;

• Inject the Store
• Dispatch the AddReplaceableComponent action.

import { ..., AddReplaceableComponent } from '@abp/ng.core'; // import AddReplaceableComponent
import { Store } from '@ngxs/store'; // import Store
import { AccountComponent } from './account/account.component'; // import your AccountComponent
import { eAccountComponents } from '@volo/abp.ng.account'; // import eAccountComponents
// ...
export class AppComponent implements OnInit {
  constructor(..., private store: Store) {} // injected store

  ngOnInit() {
//...

    this.store.dispatch(
      new AddReplaceableComponent({ component: AccountComponent, key: eAccountComponents.Account }),
    );
  }
}

Hi @DRPDEV

Please run the following command:

 yarn add volo/abp.ng.text-template-management --tilde

Hi @wazbek

You can override the lepton styles by adding your custom styles to styles.scss.

Here is an example:

Add below content to styles.scss:

.navbar.navbar-expand-lg.user-nav-mobile {
  background-color: cornsilk;
}

.lp-opened-sidebar .lp-sidebar,
.lp-closed .lp-sidebar {
  background-color: darkslategrey;
}

Final UI will look like below:

If the colors is not changed in your app, you can add the !important suffix like below:

.navbar.navbar-expand-lg.user-nav-mobile {
  background-color: cornsilk !important;
}

.lp-opened-sidebar .lp-sidebar,
.lp-closed .lp-sidebar {
  background-color: darkslategrey !important;
}

You can avoid the !important. Open the angular.json and find the styles array. Move bootstrap to top level of styles array and replace the path input with below:

{
    "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "lazy": false,
    "bundleName": "bootstrap.min"
}
```

Is there a way I can overwrite the account/login route in angular or inject a different authguard so that I can overwrite the path it goes to when someone not logged in? Right now I have managed to inject components to take place of the LoginComponent and TenantBoxComponent so that when they are redirect to the account/login page it just shows a please wait message but I am interested if there is a better way to do that? Or if I could inject a component to take over the Layout component of account/login page and make it even cleaner

Hi @saintpoida

Here is the Account module's components:

| Component key | Description | |----------------------------------------------------|-------------------------| | Account.LoginComponent | Login page | | Account.RegisterComponent | Register page | | Account.ManageProfileComponent | Manage profile page | | Account.ForgotPasswordComponent | Forgot password page | | Account.ResetPasswordComponent | Reset password page | | Account.AccountComponent | The component that wraps register, login, forgot password, and reset password pages. Contains <router-outlet>. | | Account.ChangePasswordComponent | Change password form in manage profile page | | Account.PersonalSettingsComponent | Personal settings form in manage profile page | | Account.TenantBoxComponent | Tenant changing box in account component |

Did you try to replace AccountComponent? I think you can do whatever you want by replacing this component.

You can define your custom guard to AccountModule route definition in AppRoutingModule like below:

{
path: 'account',
canActivate: [MyAuthGuard],
loadChildren: () => import('@volo/abp.ng.account').then(m => m.AccountModule),
},

Or you can override the AuthGuard completely by adding a provide to AppModule like below:

// app.module metadata
providers: [{ provide: AuthGuard, useClass: MyAuthGuard }]