feat(theme-basic): change modal

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

@@ -1,12 +1,9 @@
-<ng-template #modalContent let-modal>
-  <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
-    <div class="modal-body">
+<abp-modal *ngIf="visible" [(visible)]="visible">
+  <ng-template #abpHeader>
+    <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>
+  </ng-template>
+  <ng-template #abpBody>
+    <form [formGroup]="form" novalidate>
       <div class="form-group">
         <label for="current-password">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label
         ><span> * </span><input type="password" id="current-password" class="form-control" formControlName="password" />
@@ -23,15 +20,14 @@
           {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}
         </div>
       </div>
-    </div>
-
-    <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modal.close()">
-        {{ 'AbpIdentity::Cancel' | abpLocalization }}
-      </button>
-      <button type="submit" class="btn btn-primary">
-        <i class="fa fa-check mr-1"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>
-      </button>
-    </div>
-  </form>
-</ng-template>
+    </form>
+  </ng-template>
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-secondary" #abpClose>
+      {{ 'AbpIdentity::Cancel' | abpLocalization }}
+    </button>
+    <button type="button" class="btn btn-primary" (click)="onSubmit()">
+      <i class="fa fa-check mr-1"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>
+    </button>
+  </ng-template>
+</abp-modal>

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

@@ -11,11 +11,8 @@ import {
   ViewChild,
 } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { NgbActiveModal, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { comparePasswords, validatePassword } from '@ngx-validate/core';
 import { Store } from '@ngxs/store';
-import { from } from 'rxjs';
-import { take } from 'rxjs/operators';
 
 const { minLength, required } = Validators;
 
@@ -24,8 +21,17 @@ const { minLength, required } = Validators;
   templateUrl: './change-password.component.html',
 })
 export class ChangePasswordComponent implements OnInit, OnChanges {
+  protected _visible;
+
   @Input()
-  visible: boolean;
+  get visible(): boolean {
+    return this._visible;
+  }
+
+  set visible(value: boolean) {
+    this._visible = value;
+    this.visibleChange.emit(value);
+  }
 
   @Output()
   visibleChange = new EventEmitter<boolean>();
@@ -35,9 +41,7 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
 
   form: FormGroup;
 
-  modalRef: NgbModalRef;
-
-  constructor(private fb: FormBuilder, private modalService: NgbModal, private store: Store) {}
+  constructor(private fb: FormBuilder, private store: Store) {}
 
   ngOnInit(): void {
     this.form = this.fb.group(
@@ -62,28 +66,13 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
           newPassword: this.form.get('newPassword').value,
         }),
       )
-      .subscribe(() => this.modalRef.close());
+      .subscribe(() => {
+        this.visible = false;
+      });
   }
 
   openModal() {
-    this.modalRef = this.modalService.open(this.modalContent);
-    this.visibleChange.emit(true);
-
-    from(this.modalRef.result)
-      .pipe(take(1))
-      .subscribe(
-        data => {
-          this.setVisible(false);
-        },
-        reason => {
-          this.setVisible(false);
-        },
-      );
-  }
-
-  setVisible(value: boolean) {
-    this.visible = value;
-    this.visibleChange.emit(value);
+    this.visible = true;
   }
 
   ngOnChanges({ visible }: SimpleChanges): void {
@@ -91,8 +80,8 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
 
     if (visible.currentValue) {
       this.openModal();
-    } else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-      this.modalRef.close();
+    } else if (visible.currentValue === false && this.visible) {
+      this.visible = false;
     }
   }
 }