feat(account): make change password component replaceable

#2404

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts

@@ -6,6 +6,7 @@ import { comparePasswords, Validation, PasswordRules, validatePassword } from '@
 import { Store } from '@ngxs/store';
 import snq from 'snq';
 import { finalize } from 'rxjs/operators';
+import { Account } from '../../models/account';
 
 const { minLength, required, maxLength } = Validators;
 
@@ -14,8 +15,10 @@ const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
 @Component({
   selector: 'abp-change-password-form',
   templateUrl: './change-password.component.html',
+  exportAs: 'abpChangePasswordForm',
 })
-export class ChangePasswordComponent implements OnInit {
+export class ChangePasswordComponent
+  implements OnInit, Account.ChangePasswordComponentInputs, Account.ChangePasswordComponentOutputs {
   form: FormGroup;
 
   inProgress: boolean;
@@ -26,7 +29,11 @@ export class ChangePasswordComponent implements OnInit {
     return errors.concat(groupErrors.filter(({ key }) => key === 'passwordMismatch'));
   };
 
-  constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
+  constructor(
+    private fb: FormBuilder,
+    private store: Store,
+    private toasterService: ToasterService,
+  ) {}
 
   ngOnInit(): void {
     const passwordRules: ABP.Dictionary<string> = this.store.selectSnapshot(
@@ -61,12 +68,24 @@ export class ChangePasswordComponent implements OnInit {
         newPassword: [
           '',
           {
-            validators: [required, validatePassword(passwordRulesArr), minLength(requiredLength), maxLength(32)],
+            validators: [
+              required,
+              validatePassword(passwordRulesArr),
+              minLength(requiredLength),
+              maxLength(32),
+            ],
           },
         ],
         repeatNewPassword: [
           '',
-          { validators: [required, validatePassword(passwordRulesArr), minLength(requiredLength), maxLength(32)] },
+          {
+            validators: [
+              required,
+              validatePassword(passwordRulesArr),
+              minLength(requiredLength),
+              maxLength(32),
+            ],
+          },
         ],
       },
       {
@@ -89,12 +108,18 @@ export class ChangePasswordComponent implements OnInit {
       .subscribe({
         next: () => {
           this.form.reset();
-          this.toasterService.success('AbpAccount::PasswordChangedMessage', 'Success', { life: 5000 });
+          this.toasterService.success('AbpAccount::PasswordChangedMessage', 'Success', {
+            life: 5000,
+          });
         },
         error: err => {
-          this.toasterService.error(snq(() => err.error.error.message, 'AbpAccount::DefaultErrorMessage'), 'Error', {
-            life: 7000,
-          });
+          this.toasterService.error(
+            snq(() => err.error.error.message, 'AbpAccount::DefaultErrorMessage'),
+            'Error',
+            {
+              life: 7000,
+            },
+          );
         },
       });
   }

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

@@ -6,14 +6,22 @@
       <div class="col-3">
         <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
           <li class="nav-item" (click)="selectedTab = 0">
-            <a class="nav-link" [ngClass]="{ active: selectedTab === 0 }" role="tab" href="javascript:void(0)">{{
-              'AbpUi::ChangePassword' | abpLocalization
-            }}</a>
+            <a
+              class="nav-link"
+              [ngClass]="{ active: selectedTab === 0 }"
+              role="tab"
+              href="javascript:void(0)"
+              >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
+            >
           </li>
           <li class="nav-item" (click)="selectedTab = 1">
-            <a class="nav-link" [ngClass]="{ active: selectedTab === 1 }" role="tab" href="javascript:void(0)">{{
-              'AbpAccount::PersonalSettings' | abpLocalization
-            }}</a>
+            <a
+              class="nav-link"
+              [ngClass]="{ active: selectedTab === 1 }"
+              role="tab"
+              href="javascript:void(0)"
+              >{{ 'AbpAccount::PersonalSettings' | abpLocalization }}</a
+            >
           </li>
         </ul>
       </div>
@@ -24,7 +32,9 @@
               {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
               <hr />
             </h4>
-            <abp-change-password-form></abp-change-password-form>
+            <abp-change-password-form
+              *abpReplaceableTemplate="{ componentKey: 'Account.ChangePasswordComponent' }"
+            ></abp-change-password-form>
           </div>
         </div>
         <div class="tab-content" *ngIf="selectedTab === 1" [@fadeIn]>

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

@@ -20,4 +20,10 @@ export namespace Account {
 
   // tslint:disable-next-line: no-empty-interface
   export interface PersonalSettingsComponentOutputs {}
+
+  // tslint:disable-next-line: no-empty-interface
+  export interface ChangePasswordComponentInputs {}
+
+  // tslint:disable-next-line: no-empty-interface
+  export interface ChangePasswordComponentOutputs {}
 }