feat(account): implement manage-profile htmls

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

@@ -13,7 +13,11 @@
     ><span> * </span
     ><input type="password" id="confirm-new-password" class="form-control" formControlName="repeatNewPassword" />
   </div>
-  <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" buttonType="submit">{{
-    'AbpIdentity::Save' | abpLocalization
-  }}</abp-button>
+  <abp-button
+    iconClass="fa fa-check"
+    buttonClass="btn btn-primary color-white"
+    buttonType="submit"
+    [loading]="inProgress"
+    >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
+  >
 </form>

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

@@ -5,6 +5,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { comparePasswords, Validation } from '@ngx-validate/core';
 import { Store } from '@ngxs/store';
 import snq from 'snq';
+import { finalize } from 'rxjs/operators';
 
 const { minLength, required } = Validators;
 
@@ -17,11 +18,13 @@ const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
 export class ChangePasswordComponent implements OnInit {
   form: FormGroup;
 
+  inProgress: boolean;
+
   mapErrorsFn: Validation.MapErrorsFn = (errors, groupErrors, control) => {
     if (PASSWORD_FIELDS.indexOf(control.name) < 0) return errors;
 
     return errors.concat(groupErrors.filter(({ key }) => key === 'passwordMismatch'));
-  }
+  };
 
   constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
 
@@ -40,7 +43,7 @@ export class ChangePasswordComponent implements OnInit {
 
   onSubmit() {
     if (this.form.invalid) return;
-
+    this.inProgress = true;
     this.store
       .dispatch(
         new ChangePassword({
@@ -48,6 +51,7 @@ export class ChangePasswordComponent implements OnInit {
           newPassword: this.form.get('newPassword').value,
         }),
       )
+      .pipe(finalize(() => (this.inProgress = false)))
       .subscribe({
         next: () => {
           this.form.reset();

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

@@ -1,34 +1,40 @@
-<div class="row entry-row">
-  <div class="col-auto"></div>
-  <div id="breadcrumb" class="col-md-auto pl-md-0"></div>
-  <div class="col"></div>
-</div>
+<div id="AbpContentToolbar"></div>
 
-<div id="ManageProfileWrapper">
-  <div class="row">
-    <div class="col-3">
-      <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-        <li class="nav-item pointer" (click)="selectedTab = 0">
-          <a class="nav-link" [ngClass]="{ active: selectedTab === 0 }" role="tab">{{
-            'AbpUi::ChangePassword' | abpLocalization
-          }}</a>
-        </li>
-        <li class="nav-item pointer" (click)="selectedTab = 1">
-          <a class="nav-link" [ngClass]="{ active: selectedTab === 1 }" role="tab">{{
-            'AbpAccount::PersonalSettings' | abpLocalization
-          }}</a>
-        </li>
-      </ul>
-    </div>
-    <div class="col-9">
-      <div class="tab-content" *ngIf="selectedTab === 0" [@fadeIn]>
-        <div class="tab-pane active" role="tabpanel">
-          <abp-change-password-form></abp-change-password-form>
-        </div>
+<div class="card border-0 shadow-sm">
+  <div class="card-body">
+    <div class="row">
+      <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>
+          </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>
+          </li>
+        </ul>
       </div>
-      <div class="tab-content" *ngIf="selectedTab === 1" [@fadeIn]>
-        <div class="tab-pane active" role="tabpanel">
-          <abp-personal-settings-form></abp-personal-settings-form>
+      <div class="col-9">
+        <div class="tab-content" *ngIf="selectedTab === 0" [@fadeIn]>
+          <div class="tab-pane active" role="tabpanel">
+            <h4>
+              {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
+              <hr />
+            </h4>
+            <abp-change-password-form></abp-change-password-form>
+          </div>
+        </div>
+        <div class="tab-content" *ngIf="selectedTab === 1" [@fadeIn]>
+          <div class="tab-pane active" role="tabpanel">
+            <h4>
+              {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
+              <hr />
+            </h4>
+            <abp-personal-settings-form></abp-personal-settings-form>
+          </div>
         </div>
       </div>
     </div>

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

@@ -25,7 +25,12 @@
     <label for="phone-number">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label
     ><input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
   </div>
-  <abp-button buttonType="submit" iconClass="fa fa-check" buttonClass="btn btn-primary color-white">
+  <abp-button
+    buttonType="submit"
+    iconClass="fa fa-check"
+    buttonClass="btn btn-primary color-white"
+    [loading]="inProgress"
+  >
     {{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
   >
 </form>

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

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
-import { take, withLatestFrom } from 'rxjs/operators';
+import { take, withLatestFrom, finalize } from 'rxjs/operators';
 import { ToasterService } from '@abp/ng.theme.shared';
 
 const { maxLength, required, email } = Validators;
@@ -18,8 +18,14 @@ export class PersonalSettingsComponent implements OnInit {
 
   form: FormGroup;
 
+  inProgress: boolean;
+
   constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
 
+  ngOnInit() {
+    this.buildForm();
+  }
+
   buildForm() {
     this.store
       .dispatch(new GetProfile())
@@ -40,13 +46,12 @@ export class PersonalSettingsComponent implements OnInit {
 
   submit() {
     if (this.form.invalid) return;
-
-    this.store.dispatch(new UpdateProfile(this.form.value)).subscribe(() => {
-      this.toasterService.success('AbpAccount::PersonalSettingsSaved', 'Success', { life: 5000 });
-    });
-  }
-
-  ngOnInit() {
-    this.buildForm();
+    this.inProgress = true;
+    this.store
+      .dispatch(new UpdateProfile(this.form.value))
+      .pipe(finalize(() => (this.inProgress = false)))
+      .subscribe(() => {
+        this.toasterService.success('AbpAccount::PersonalSettingsSaved', 'Success', { life: 5000 });
+      });
   }
 }