refactor(theme-basic): profile

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

@@ -1,9 +1,9 @@
-<abp-modal [(visible)]="visible">
+<abp-modal [(visible)]="visible" [busy]="modalBusy">
   <ng-template #abpHeader>
     <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>
   </ng-template>
   <ng-template #abpBody>
-    <form *ngIf="form" [formGroup]="form" novalidate>
+    <form novalidate *ngIf="form" [formGroup]="form" (ngSubmit)="onSubmit()">
       <div class="form-group">
         <label for="username">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label
         ><span> * </span><input type="text" id="username" class="form-control" formControlName="userName" autofocus />
@@ -36,12 +36,6 @@
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button
+    <abp-button iconClass="fa fa-check" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
-      [requestType]="['PUT']"
-      requestURLContainSearchValue="my-profile"
-      iconClass="fa fa-check"
-      (click)="onSubmit()"
-      >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-    >
   </ng-template>
 </abp-modal>

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

@@ -32,6 +32,8 @@ export class ProfileComponent implements OnChanges {
 
   form: FormGroup;
 
+  modalBusy: boolean = false;
+
   constructor(private fb: FormBuilder, private store: Store) {}
 
   buildForm() {
@@ -54,8 +56,10 @@ export class ProfileComponent implements OnChanges {
 
   onSubmit() {
     if (this.form.invalid) return;
+    this.modalBusy = true;
 
     this.store.dispatch(new UpdateProfile(this.form.value)).subscribe(() => {
+      this.modalBusy = false;
       this.visible = false;
       this.form.reset();
     });