Merge pull request #8124 from abpframework/feat/manage-profile-url

Angular UI: Set "Manage Your Profile" URL dynamically and documented the Angular UI account module

docs/en/Migration-Guides/Abp-4_3-Angular.md

@@ -1,90 +0,0 @@
-# Angular UI v4.3 Migration Guide
-
-## Breaking Changes
-
-### Manage Profile Page
-
-Before v4.3, the "Manage Your Profile" link in the current user dropdown on the top bar redirected the user to MVC's profile management page. As of v4.3, the same link will land on a page in the Angular UI account module instead. So you have to install and implement the account module to your Angular project when you update the ABP to v4.3.
-
-#### Account Module Implementation
-
-Install the `@abp/ng.account` NPM package by running the below command:
-
-```bash
-npm install @abp/ng.account@next
-```
-
-> Make sure v4.3-rc or higher version is installed.
-
-Open the `app.module.ts` and add `AccountConfigModule.forRoot()` to the imports array as shown below:
-
-```js
-// app.module.ts
-
-import { AccountConfigModule } from '@abp/ng.account/config';
-//...
-
-@NgModule({
-  imports: [
-    //...
-    AccountConfigModule.forRoot()
-  ],
-  //...
-})
-export class AppModule {}
-```
-
-Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
-
-```js
-// app-routing.module.ts
-const routes: Routes = [
-  //...
-  {
-    path: 'account',
-    loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
-  },
-  //...
-export class AppRoutingModule {}
-```
-
-#### Account Module Implementation for Commercial Templates
-
-The pro startup template comes with `@volo/abp.ng.account` package. You should update the package version to v4.3-rc or higher version. The package can be updated by running the following command:
-
-```bash
-npm install @volo/abp.ng.account@next
-```
-> Make sure v4.3-rc or higher version is installed.
-
-`AccountConfigModule` is already imported to `app.module.ts` in the startup template. So no need to import the module to the `AppModule`. If you removed the `AccountConfigModule` from the `AppModule`, you can import it as shown below:
-
-```js
-// app.module.ts
-
-import { AccountConfigModule } from '@volo/abp.ng.account/config';
-//...
-
-@NgModule({
-  imports: [
-    //...
-    AccountConfigModule.forRoot()
-  ],
-  //...
-})
-export class AppModule {}
-```
-
-Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
-
-```js
-// app-routing.module.ts
-const routes: Routes = [
-  //...
-  {
-    path: 'account',
-    loadChildren: () => import('@volo/abp.ng.account').then(m => m.AccountPublicModule.forLazy()),
-  },
-  //...
-export class AppRoutingModule {}
-```

docs/en/Migration-Guides/Abp-4_3.md

@@ -1,5 +0,0 @@
-# ABP v4.3 Migration Guide
-
-## Angular UI
-
-See the [Angular UI Migration Guide](Abp-4_3-Angular.md).

docs/en/UI/Angular/Account-Module.md

@@ -0,0 +1,125 @@
+# Angular UI Account Module
+
+Angular UI account module is available as of v4.3. It contains some pages (login, register, manage your profile, etc.).
+
+If you implement the account module to your project;
+
+- "Manage your profile" link in the current user dropdown on the top bar will redirect the user to a page in the account module.
+- You can switch the authentication flow to the resource owner password flow.
+
+
+### Account Module Implementation
+
+Install the `@abp/ng.account` NPM package by running the below command:
+
+```bash
+npm install @abp/ng.account@next
+```
+
+> Make sure v4.3-rc or higher version is installed.
+
+Open the `app.module.ts` and add `AccountConfigModule.forRoot()` to the imports array as shown below:
+
+```js
+// app.module.ts
+
+import { AccountConfigModule } from '@abp/ng.account/config';
+//...
+
+@NgModule({
+  imports: [
+    //...
+    AccountConfigModule.forRoot()
+  ],
+  //...
+})
+export class AppModule {}
+```
+
+Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
+
+```js
+// app-routing.module.ts
+const routes: Routes = [
+  //...
+  {
+    path: 'account',
+    loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
+  },
+  //...
+export class AppRoutingModule {}
+```
+
+### Account Public Module Implementation for Commercial Templates
+
+The pro startup template comes with `@volo/abp.ng.account` package. You should update the package version to v4.3-rc or higher version. The package can be updated by running the following command:
+
+```bash
+npm install @volo/abp.ng.account@next
+```
+> Make sure v4.3-rc or higher version is installed.
+
+Open the `app.module.ts` and add `AccountPublicConfigModule.forRoot()` to the imports array as shown below:
+
+```js
+// app.module.ts
+
+import { AccountPublicConfigModule } from '@volo/abp.ng.account/public/config';
+//...
+
+@NgModule({
+  imports: [
+    //...
+    AccountPublicConfigModule.forRoot()
+  ],
+  //...
+})
+export class AppModule {}
+```
+
+Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
+
+```js
+// app-routing.module.ts
+const routes: Routes = [
+  //...
+  {
+    path: 'account',
+    loadChildren: () => import('@volo/abp.ng.account/public').then(m => m.AccountPublicModule.forLazy()),
+  },
+  //...
+export class AppRoutingModule {}
+```
+
+### Manage Profile Page
+
+Before v4.3, the "Manage Your Profile" link in the current user dropdown on the top bar redirected the user to MVC's profile management page. As of v4.3, if you implemented the account module to your project, the same link will land on a page in the Angular UI account module instead.
+
+### My Security Logs Page [COMMERCIAL]
+
+Before v4.3, the "My Security Logs" link in the current user dropdown on the top bar redirected the user to MVC's my security logs page. As of v4.3, if you implemented the account module to your project, the same link will land on a page in the Angular UI account public module instead.
+
+### Resource Owner Password Flow
+
+OAuth is preconfigured as authorization code flow in Angular application templates by default. If you implemented the account module to your project, you can switch the flow to resource owner password flow by changing the OAuth configuration in the _environment.ts_ files as shown below:
+
+```js
+import { Config } from '@abp/ng.core';
+
+export const environment = {
+  // other options removed for sake of brevity
+
+  oAuthConfig: {
+    issuer: 'https://localhost:44305', // IdentityServer url
+    clientId: 'MyProjectName_App',
+    dummyClientSecret: '1q2w3e*',
+    scope: 'offline_access MyProjectName',
+  },
+
+  // other options removed for sake of brevity
+} as Config.Environment;
+```
+
+> Note: The resource owner password flow does not support the two-factor authentication for some technical reasons.
+
+See the [Authorization in Angular UI](./Authorization) document for more details.

docs/en/UI/Angular/Authorization.md

@@ -1,6 +1,9 @@
-# Authorization in Angular UI
+## Authorization in Angular UI
 
-OAuth is preconfigured in Angular application templates. So, when you start a project using the CLI (or Suite, for that matter), authorization already works. You can find **OAuth configuration** in the _environment.ts_ files.
+OAuth is preconfigured in Angular application templates. So, when you start a project using the CLI (or Suite, for that matter), authorization already works. ABP Angular UI packages are using [angular-oauth2-oidc library](https://github.com/manfredsteyer/angular-oauth2-oidc#logging-in) for managing OAuth in the Angular client. 
+You can find **OAuth configuration** in the _environment.ts_ files.
+
+### Authorization Code Flow 
 
 ```js
 import { Config } from '@abp/ng.core';
@@ -23,6 +26,31 @@ export const environment = {
 
 ```
 
-This configuration results in an [OAuth authorization code flow with PKCE](https://tools.ietf.org/html/rfc7636) and we are using [angular-oauth2-oidc library](https://github.com/manfredsteyer/angular-oauth2-oidc#logging-in) for managing OAuth in the Angular client.
+This configuration results in an [OAuth authorization code flow with PKCE](https://tools.ietf.org/html/rfc7636).
-
 According to this flow, the user is redirected to an external login page which is built with MVC. So, if you need **to customize the login page**, please follow [this community article](https://community.abp.io/articles/how-to-customize-the-login-page-for-mvc-razor-page-applications-9a40f3cd).
+
+
+### Resource Owner Password Flow
+
+If you implemented the [Angular UI account module](./Account-Module) to your project, you can switch the flow to resource owner password flow by changing the OAuth configuration in the _environment.ts_ files as shown below:
+
+```js
+import { Config } from '@abp/ng.core';
+
+export const environment = {
+  // other options removed for sake of brevity
+
+  oAuthConfig: {
+    issuer: 'https://localhost:44305',
+    clientId: 'MyProjectName_App',
+    dummyClientSecret: '1q2w3e*',
+    scope: 'offline_access MyProjectName',
+  },
+
+  // other options removed for sake of brevity
+} as Config.Environment;
+```
+
+According to this flow, the user is redirected to the login page in the account module.
+
+> Note: The resource owner password flow does not support the two-factor authentication for some technical reasons.

npm/ng-packs/package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "ng": "ng",
     "symlink": "symlink",
+    "symlink-all": "symlink copy --angular --prod --all-packages --no-watch --sync --excluded-packages @abp/ng.schematics",
     "start": "ng serve dev-app",
     "start:internal": "ng serve dev-app --configuration=internal",
     "start:regression": "ng serve dev-app --configuration=regression",

npm/ng-packs/packages/account/config/src/account-config.module.ts

@@ -1,12 +1,21 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { Injector, ModuleWithProviders, NgModule } from '@angular/core';
+import { NAVIGATE_TO_MANAGE_PROFILE } from '@abp/ng.core';
 import { ACCOUNT_ROUTE_PROVIDERS } from './providers/route.provider';
+import { navigateToManageProfileFactory } from './utils/factories';
 
 @NgModule()
 export class AccountConfigModule {
   static forRoot(): ModuleWithProviders<AccountConfigModule> {
     return {
       ngModule: AccountConfigModule,
-      providers: [ACCOUNT_ROUTE_PROVIDERS],
+      providers: [
+        ACCOUNT_ROUTE_PROVIDERS,
+        {
+          provide: NAVIGATE_TO_MANAGE_PROFILE,
+          useFactory: navigateToManageProfileFactory,
+          deps: [Injector],
+        },
+      ],
     };
   }
 }

npm/ng-packs/packages/account/config/src/providers/route.provider.ts

@@ -29,7 +29,7 @@ export function configureRoutes(routes: RoutesService) {
         order: 2,
       },
       {
-        path: '/account/manage-profile',
+        path: '/account/manage',
         name: eAccountRouteNames.ManageProfile,
         parentName: eAccountRouteNames.Account,
         order: 3,

npm/ng-packs/packages/account/config/src/utils/factories.ts

@@ -0,0 +1,13 @@
+import { Injector } from '@angular/core';
+import { RoutesService } from '@abp/ng.core';
+import { Router } from '@angular/router';
+import { eAccountRouteNames } from '../enums/route-names';
+
+export function navigateToManageProfileFactory(injector: Injector) {
+  return () => {
+    const router = injector.get(Router);
+    const routes = injector.get(RoutesService);
+    const { path } = routes.find(item => item.name === eAccountRouteNames.ManageProfile);
+    router.navigateByUrl(path);
+  };
+}

npm/ng-packs/packages/account/src/lib/account-routing.module.ts

@@ -78,7 +78,7 @@ const routes: Routes = [
         ],
       },
       {
-        path: 'manage-profile',
+        path: 'manage',
         component: ReplaceableRouteContainerComponent,
         canActivate: [AuthGuard],
         data: {

npm/ng-packs/packages/core/src/lib/tokens/index.ts

@@ -1,3 +1,4 @@
 export * from './list.token';
 export * from './lodaer-delay.token';
+export * from './manage-profile.token';
 export * from './options.token';

npm/ng-packs/packages/core/src/lib/tokens/manage-profile.token.ts

@@ -0,0 +1,21 @@
+import { InjectionToken, inject } from '@angular/core';
+import { EnvironmentService } from '../services/environment.service';
+
+export const NAVIGATE_TO_MANAGE_PROFILE = new InjectionToken<() => void>(
+  'NAVIGATE_TO_MANAGE_PROFILE',
+  {
+    providedIn: 'root',
+    factory: () => {
+      const environment = inject(EnvironmentService);
+
+      return () => {
+        window.open(
+          `${environment.getEnvironment().oAuthConfig.issuer}/Account/Manage?returnUrl=${
+            window.location.href
+          }`,
+          '_self',
+        );
+      };
+    },
+  },
+);

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts

@@ -1,5 +1,10 @@
-import { AuthService, ConfigStateService, CurrentUserDto } from '@abp/ng.core';
+import {
-import { Component } from '@angular/core';
+  AuthService,
+  ConfigStateService,
+  CurrentUserDto,
+  NAVIGATE_TO_MANAGE_PROFILE,
+} from '@abp/ng.core';
+import { Component, Inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -35,7 +40,7 @@ import { Observable } from 'rxjs';
         aria-labelledby="dropdownMenuLink"
         [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
       >
-        <a class="dropdown-item" routerLink="/account/manage-profile"
+        <a class="dropdown-item pointer" (click)="navigateToManageProfile()"
           ><i class="fa fa-cog mr-1"></i>{{ 'AbpAccount::ManageYourProfile' | abpLocalization }}</a
         >
         <a class="dropdown-item" href="javascript:void(0)" (click)="logout()"
@@ -52,7 +57,11 @@ export class CurrentUserComponent {
     return window.innerWidth < 992;
   }
 
-  constructor(private authService: AuthService, private configState: ConfigStateService) {}
+  constructor(
+    @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile,
+    private authService: AuthService,
+    private configState: ConfigStateService,
+  ) {}
 
   navigateToLogin() {
     this.authService.navigateToLogin();