refactor(theme-basic): change-password

npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html

@@ -1,9 +1,9 @@
-<abp-modal [(visible)]="visible">
+<abp-modal [(visible)]="visible" [busy]="modalBusy">
   <ng-template #abpHeader>
     <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>
   </ng-template>
   <ng-template #abpBody>
-    <form [formGroup]="form" novalidate>
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
       <div class="form-group">
         <label for="current-password">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label
         ><span> * </span
@@ -27,12 +27,6 @@
     <button type="button" class="btn btn-secondary" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button
-      [requestType]="['POST']"
-      requestURLContainSearchValue="change-password"
-      iconClass="fa fa-check"
-      (click)="onSubmit()"
-      >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-    >
+    <abp-button iconClass="fa fa-check" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
   </ng-template>
 </abp-modal>

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

@@ -15,6 +15,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { comparePasswords } from '@ngx-validate/core';
 import { Store } from '@ngxs/store';
 import snq from 'snq';
+import { finalize } from 'rxjs/operators';
 
 const { minLength, required } = Validators;
 
@@ -43,6 +44,8 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
 
   form: FormGroup;
 
+  modalBusy: boolean = false;
+
   constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
 
   ngOnInit(): void {
@@ -60,6 +63,7 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
 
   onSubmit() {
     if (this.form.invalid) return;
+    this.modalBusy = true;
 
     this.store
       .dispatch(
@@ -68,6 +72,11 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
           newPassword: this.form.get('newPassword').value,
         }),
       )
+      .pipe(
+        finalize(() => {
+          this.modalBusy = false;
+        }),
+      )
       .subscribe({
         next: () => {
           this.visible = false;