feat(account): make personal settings component replaceable

#2404

npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.ts

@@ -1,13 +1,16 @@
 import { Component, Input, TemplateRef } from '@angular/core';
+import { Account } from '../../models/account';
 
 @Component({
   selector: 'abp-auth-wrapper',
   templateUrl: './auth-wrapper.component.html',
+  exportAs: 'abpAuthWrapper',
 })
-export class AuthWrapperComponent {
+export class AuthWrapperComponent
+  implements Account.AuthWrapperComponentInputs, Account.AuthWrapperComponentOutputs {
   @Input()
-  mainContentRef: TemplateRef<any>;
+  readonly mainContentRef: TemplateRef<any>;
 
   @Input()
-  cancelContentRef: TemplateRef<any>;
+  readonly cancelContentRef: TemplateRef<any>;
 }

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html

@@ -33,7 +33,9 @@
               {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
               <hr />
             </h4>
-            <abp-personal-settings-form></abp-personal-settings-form>
+            <abp-personal-settings-form
+              *abpReplaceableTemplate="{ componentKey: 'Account.PersonalSettingsComponent' }"
+            ></abp-personal-settings-form>
           </div>
         </div>
       </div>

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts

@@ -5,14 +5,20 @@ import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { take, withLatestFrom, finalize } from 'rxjs/operators';
 import { ToasterService } from '@abp/ng.theme.shared';
+import { Account } from '../../models/account';
 
 const { maxLength, required, email } = Validators;
 
 @Component({
   selector: 'abp-personal-settings-form',
   templateUrl: './personal-settings.component.html',
+  exportAs: 'abpPersonalSettingsForm',
 })
-export class PersonalSettingsComponent implements OnInit {
+export class PersonalSettingsComponent
+  implements
+    OnInit,
+    Account.PersonalSettingsComponentInputs,
+    Account.PersonalSettingsComponentOutputs {
   @Select(ProfileState.getProfile)
   profile$: Observable<Profile.Response>;
 
@@ -20,7 +26,11 @@ export class PersonalSettingsComponent implements OnInit {
 
   inProgress: boolean;
 
-  constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
+  constructor(
+    private fb: FormBuilder,
+    private store: Store,
+    private toasterService: ToasterService,
+  ) {}
 
   ngOnInit() {
     this.buildForm();
@@ -29,10 +39,7 @@ export class PersonalSettingsComponent implements OnInit {
   buildForm() {
     this.store
       .dispatch(new GetProfile())
-      .pipe(
+      .pipe(withLatestFrom(this.profile$), take(1))
-        withLatestFrom(this.profile$),
-        take(1),
-      )
       .subscribe(([, profile]) => {
         this.form = this.fb.group({
           userName: [profile.userName, [required, maxLength(256)]],

npm/ng-packs/packages/account/src/lib/models/account.ts

@@ -14,4 +14,10 @@ export namespace Account {
 
   // tslint:disable-next-line: no-empty-interface
   export interface TenantBoxComponentOutputs {}
+
+  // tslint:disable-next-line: no-empty-interface
+  export interface PersonalSettingsComponentInputs {}
+
+  // tslint:disable-next-line: no-empty-interface
+  export interface PersonalSettingsComponentOutputs {}
 }