Add show/hide button to password prompt (#1034)

bitwarden_license/src/app/providers/clients/clients.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef
@@ -15,18 +14,17 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { SearchService } from 'jslib-common/abstractions/search.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+import { ValidationService } from 'jslib-angular/services/validation.service';
+
 import { PlanType } from 'jslib-common/enums/planType';
 import { ProviderUserType } from 'jslib-common/enums/providerUserType';
 
-import { ValidationService } from 'jslib-angular/services/validation.service';
-
 import { Organization } from 'jslib-common/models/domain/organization';
 import {
     ProviderOrganizationOrganizationDetailsResponse
 } from 'jslib-common/models/response/provider/providerOrganizationResponse';
 
-import { ModalComponent } from 'src/app/modal.component';
-
 import { ProviderService } from '../services/provider.service';
 
 import { AddOrganizationComponent } from './add-organization.component';
@@ -49,7 +47,6 @@ export class ClientsComponent implements OnInit {
 
     clients: ProviderOrganizationOrganizationDetailsResponse[];
     pagedClients: ProviderOrganizationOrganizationDetailsResponse[];
-    modal: ModalComponent;
 
     protected didScroll = false;
     protected pageSize = 100;
@@ -60,8 +57,8 @@ export class ClientsComponent implements OnInit {
         private apiService: ApiService, private searchService: SearchService,
         private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
         private toasterService: ToasterService, private validationService: ValidationService,
-        private providerService: ProviderService, private componentFactoryResolver: ComponentFactoryResolver,
+        private providerService: ProviderService, private logService: LogService,
-        private logService: LogService) { }
+        private modalService: ModalService) { }
 
     async ngOnInit() {
         this.route.parent.params.subscribe(async params => {
@@ -126,24 +123,18 @@ export class ClientsComponent implements OnInit {
         this.didScroll = this.pagedClients.length > this.pageSize;
     }
 
-    addExistingOrganization() {
+    async addExistingOrganization() {
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const [modal, childComponent] = await this.modalService.openViewRef(AddOrganizationComponent, this.addModalRef, comp => {
-        this.modal = this.addModalRef.createComponent(factory).instance;
+            comp.providerId = this.providerId;
-        const childComponent = this.modal.show<AddOrganizationComponent>(AddOrganizationComponent, this.addModalRef);
+            comp.organizations = this.addableOrganizations;
-
+            comp.onAddedOrganization.subscribe(async () => {
-        childComponent.providerId = this.providerId;
-        childComponent.organizations = this.addableOrganizations;
-        childComponent.onAddedOrganization.subscribe(async () => {
                 try {
                     await this.load();
-                this.modal.close();
+                    modal.close();
                 } catch (e) {
                     this.logService.error(`Handled exception: ${e}`);
                 }
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 

bitwarden_license/src/app/providers/manage/people.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef
@@ -17,6 +16,7 @@ import { SearchService } from 'jslib-common/abstractions/search.service';
 import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
 import { ValidationService } from 'jslib-angular/services/validation.service';
 
 import { ProviderUserStatusType } from 'jslib-common/enums/providerUserStatusType';
@@ -33,7 +33,6 @@ import { ProviderUserConfirmRequest } from 'jslib-common/models/request/provider
 import { ProviderUserBulkResponse } from 'jslib-common/models/response/provider/providerUserBulkResponse';
 
 import { BasePeopleComponent } from 'src/app/common/base.people.component';
-import { ModalComponent } from 'src/app/modal.component';
 import { BulkStatusComponent } from 'src/app/organizations/manage/bulk/bulk-status.component';
 import { EntityEventsComponent } from 'src/app/organizations/manage/entity-events.component';
 import { BulkConfirmComponent } from './bulk/bulk-confirm.component';
@@ -59,13 +58,13 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
     accessEvents = false;
 
     constructor(apiService: ApiService, private route: ActivatedRoute,
-        i18nService: I18nService, componentFactoryResolver: ComponentFactoryResolver,
+        i18nService: I18nService, modalService: ModalService,
         platformUtilsService: PlatformUtilsService, toasterService: ToasterService,
         cryptoService: CryptoService, private userService: UserService, private router: Router,
         storageService: StorageService, searchService: SearchService, validationService: ValidationService,
         logService: LogService, searchPipe: SearchPipe, userNamePipe: UserNamePipe) {
         super(apiService, searchService, i18nService, platformUtilsService, toasterService, cryptoService,
-            storageService, validationService, componentFactoryResolver, logService, searchPipe, userNamePipe);
+            storageService, validationService, modalService, logService, searchPipe, userNamePipe);
     }
 
     ngOnInit() {
@@ -117,51 +116,29 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
         await this.apiService.postProviderUserConfirm(this.providerId, user.id, request);
     }
 
-    edit(user: ProviderUserUserDetailsResponse) {
+    async edit(user: ProviderUserUserDetailsResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(UserAddEditComponent, this.addEditModalRef, comp => {
-            this.modal.close();
+            comp.name = this.userNamePipe.transform(user);
-        }
+            comp.providerId = this.providerId;
-
+            comp.providerUserId = user != null ? user.id : null;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onSavedUser.subscribe(() => {
-        this.modal = this.addEditModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<UserAddEditComponent>(
-            UserAddEditComponent, this.addEditModalRef);
-
-        childComponent.name = this.userNamePipe.transform(user);
-        childComponent.providerId = this.providerId;
-        childComponent.providerUserId = user != null ? user.id : null;
-        childComponent.onSavedUser.subscribe(() => {
-            this.modal.close();
                 this.load();
             });
-        childComponent.onDeletedUser.subscribe(() => {
+            comp.onDeletedUser.subscribe(() => {
-            this.modal.close();
+                modal.close();
                 this.removeUser(user);
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
     async events(user: ProviderUserUserDetailsResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
-            this.modal.close();
+            comp.name = this.userNamePipe.transform(user);
-        }
+            comp.providerId = this.providerId;
-
+            comp.entityId = user.id;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.showUser = false;
-        this.modal = this.eventsModalRef.createComponent(factory).instance;
+            comp.entity = 'user';
-        const childComponent = this.modal.show<EntityEventsComponent>(
-            EntityEventsComponent, this.eventsModalRef);
-
-        childComponent.name = this.userNamePipe.transform(user);
-        childComponent.providerId = this.providerId;
-        childComponent.entityId = user.id;
-        childComponent.showUser = false;
-        childComponent.entity = 'user';
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
@@ -170,21 +147,13 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             return;
         }
 
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
-            this.modal.close();
+            comp.providerId = this.providerId;
-        }
+            comp.users = this.getCheckedUsers();
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.bulkRemoveModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show(BulkRemoveComponent, this.bulkRemoveModalRef);
-
-        childComponent.providerId = this.providerId;
-        childComponent.users = this.getCheckedUsers();
-
-        this.modal.onClosed.subscribe(async () => {
-            await this.load();
-            this.modal = null;
         });
+
+        await modal.onClosedPromise();
+        await this.load();
     }
 
     async bulkReinvite() {
@@ -216,49 +185,34 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             return;
         }
 
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
-            this.modal.close();
+            comp.providerId = this.providerId;
-        }
+            comp.users = this.getCheckedUsers();
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.bulkConfirmModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show(BulkConfirmComponent, this.bulkConfirmModalRef);
-
-        childComponent.providerId = this.providerId;
-        childComponent.users = this.getCheckedUsers();
-
-        this.modal.onClosed.subscribe(async () => {
-            await this.load();
-            this.modal = null;
         });
+
+        await modal.onClosedPromise();
+        await this.load();
     }
 
     private async showBulkStatus(users: ProviderUserUserDetailsResponse[], filteredUsers: ProviderUserUserDetailsResponse[],
         request: Promise<ListResponse<ProviderUserBulkResponse>>, successfullMessage: string) {
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
-        this.modal = this.bulkStatusModalRef.createComponent(factory).instance;
+            comp.loading = true;
-        const childComponent = this.modal.show<BulkStatusComponent>(
+        });
-            BulkStatusComponent, this.bulkStatusModalRef);
-
-        childComponent.loading = true;
 
         // Workaround to handle closing the modal shortly after it has been opened
         let close = false;
-        this.modal.onShown.subscribe(() => {
+        modal.onShown.subscribe(() => {
             if (close) {
-                this.modal.close();
+                modal.close();
             }
         });
 
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
         try {
             const response = await request;
 
-            if (this.modal) {
+            if (modal) {
                 const keyedErrors: any = response.data.filter(r => r.error !== '').reduce((a, x) => ({ ...a, [x.id]: x.error }), {});
                 const keyedFilteredUsers: any = filteredUsers.reduce((a, x) => ({ ...a, [x.id]: x }), {});
 
@@ -278,9 +232,7 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             }
         } catch {
             close = true;
-            if (this.modal) {
+            modal.close();
-                this.modal.close();
-            }
         }
     }
 }

src/app/accounts/two-factor.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
@@ -10,12 +9,6 @@ import {
     Router,
 } from '@angular/router';
 
-import { TwoFactorOptionsComponent } from './two-factor-options.component';
-
-import { ModalComponent } from '../modal.component';
-
-import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
-
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
@@ -24,8 +17,14 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { StorageService } from 'jslib-common/abstractions/storage.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
+import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
+
 import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib-angular/components/two-factor.component';
 
+import { TwoFactorOptionsComponent } from './two-factor-options.component';
+
 @Component({
     selector: 'app-two-factor',
     templateUrl: 'two-factor.component.html',
@@ -36,27 +35,24 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, apiService: ApiService,
         platformUtilsService: PlatformUtilsService, stateService: StateService,
-        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver,
+        environmentService: EnvironmentService, private modalService: ModalService,
         storageService: StorageService, route: ActivatedRoute) {
         super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
             stateService, storageService, route);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 
-    anotherMethod() {
+    async anotherMethod() {
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const [modal] = await this.modalService.openViewRef(TwoFactorOptionsComponent, this.twoFactorOptionsModal, comp => {
-        const modal = this.twoFactorOptionsModal.createComponent(factory).instance;
+            comp.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
-        const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent,
-            this.twoFactorOptionsModal);
-
-        childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
                 modal.close();
                 this.selectedProviderType = provider;
                 await this.init();
             });
-        childComponent.onRecoverSelected.subscribe(() => {
+            comp.onRecoverSelected.subscribe(() => {
                 modal.close();
             });
+        });
     }
 
     async goAfterLogIn() {

src/app/common/base.people.component.ts

@@ -1,5 +1,4 @@
 import {
-    ComponentFactoryResolver,
     Directive,
     ViewChild,
     ViewContainerRef
@@ -17,6 +16,8 @@ import { StorageService } from 'jslib-common/abstractions/storage.service';
 
 import { ConstantsService } from 'jslib-common/services/constants.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
 import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
 
@@ -31,7 +32,6 @@ import { ProviderUserUserDetailsResponse } from 'jslib-common/models/response/pr
 
 import { Utils } from 'jslib-common/misc/utils';
 
-import { ModalComponent } from '../modal.component';
 import { UserConfirmComponent } from '../organizations/manage/user-confirm.component';
 
 type StatusType = OrganizationUserStatusType | ProviderUserStatusType;
@@ -86,7 +86,6 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
 
     protected didScroll = false;
     protected pageSize = 100;
-    protected modal: ModalComponent = null;
 
     private pagedUsersCount = 0;
 
@@ -94,7 +93,7 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
         protected i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
         protected toasterService: ToasterService, protected cryptoService: CryptoService,
         private storageService: StorageService, protected validationService: ValidationService,
-        protected componentFactoryResolver: ComponentFactoryResolver, private logService: LogService,
+        protected modalService: ModalService, private logService: LogService,
         private searchPipe: SearchPipe, protected userNamePipe: UserNamePipe) { }
 
     abstract edit(user: UserType): void;
@@ -248,29 +247,18 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
 
             const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
             if (autoConfirm == null || !autoConfirm) {
-                if (this.modal != null) {
+                const [modal] = await this.modalService.openViewRef(UserConfirmComponent, this.confirmModalRef, comp => {
-                    this.modal.close();
+                    comp.name = this.userNamePipe.transform(user);
-                }
+                    comp.userId = user != null ? user.userId : null;
-
+                    comp.publicKey = publicKey;
-                const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+                    comp.onConfirmedUser.subscribe(async () => {
-                this.modal = this.confirmModalRef.createComponent(factory).instance;
-                const childComponent = this.modal.show<UserConfirmComponent>(
-                    UserConfirmComponent, this.confirmModalRef);
-
-                childComponent.name = this.userNamePipe.transform(user);
-                childComponent.userId = user != null ? user.userId : null;
-                childComponent.publicKey = publicKey;
-                childComponent.onConfirmedUser.subscribe(async () => {
                         try {
                             await confirmUser(publicKey);
-                        this.modal.close();
+                            modal.close();
                         } catch (e) {
                             this.logService.error(`Handled exception: ${e}`);
                         }
                     });
-
-                this.modal.onClosed.subscribe(() => {
-                    this.modal = null;
                 });
                 return;
             }

src/app/components/password-reprompt.component.html

@@ -0,0 +1,39 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()">
+            <div class="modal-header">
+                <h2 class="modal-title" id="confirmUserTitle">
+                    {{'passwordConfirmation' | i18n}}
+                </h2>
+                <button type="button" class="close" data-dismiss="modal">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                {{'passwordConfirmationDesc' | i18n}}
+
+                <div class="form-group">
+                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                    <div class="d-flex">
+                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                            name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
+                            required appAutofocus appInputVerbatim>
+                        <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                            (click)="togglePassword()">
+                            <i class="fa fa-lg" aria-hidden="true"
+                                [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
+                    <span>{{'ok' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+                    {{'cancel' | i18n}}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/components/password-reprompt.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+import { PasswordRepromptComponent as BasePasswordRepromptComponent } from 'jslib-angular/components/password-reprompt.component';
+
+@Component({
+    templateUrl: 'password-reprompt.component.html',
+})
+export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

src/app/modal.component.ts

@@ -1,76 +0,0 @@
-import * as jq from 'jquery';
-
-import {
-    Component,
-    ComponentFactoryResolver,
-    Type,
-    ViewContainerRef,
-} from '@angular/core';
-
-import { ModalComponent as BaseModalComponent } from 'jslib-angular/components/modal.component';
-import { Utils } from 'jslib-common/misc/utils';
-
-import { MessagingService } from 'jslib-common/abstractions/messaging.service';
-
-@Component({
-    selector: 'app-modal',
-    template: `<ng-template #container></ng-template>`,
-})
-export class ModalComponent extends BaseModalComponent {
-    el: any = null;
-
-    constructor(componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService) {
-        super(componentFactoryResolver, messagingService);
-    }
-
-    ngOnDestroy() { /* Nothing */ }
-
-    show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true,
-        setComponentParameters: (component: T) => void = null): T {
-        this.parentContainer = parentContainer;
-        this.fade = fade;
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
-        const componentRef = this.container.createComponent<T>(factory);
-        if (setComponentParameters != null) {
-            setComponentParameters(componentRef.instance);
-        }
-
-        const modals = Array.from(document.querySelectorAll('.modal'));
-        if (modals.length > 0) {
-            this.el = jq(modals[0]);
-            this.el.modal('show');
-
-            this.el.on('show.bs.modal', () => {
-                this.onShow.emit();
-                this.messagingService.send('modalShow');
-            });
-            this.el.on('shown.bs.modal', () => {
-                this.onShown.emit();
-                this.messagingService.send('modalShown');
-                if (!Utils.isMobileBrowser) {
-                    this.el.find('*[appAutoFocus]').focus();
-                }
-            });
-            this.el.on('hide.bs.modal', () => {
-                this.onClose.emit();
-                this.messagingService.send('modalClose');
-            });
-            this.el.on('hidden.bs.modal', () => {
-                this.onClosed.emit();
-                this.messagingService.send('modalClosed');
-                if (this.parentContainer != null) {
-                    this.parentContainer.clear();
-                }
-            });
-        }
-
-        return componentRef.instance;
-    }
-
-    close() {
-        if (this.el != null) {
-            this.el.modal('hide');
-        }
-    }
-}

src/app/organizations/manage/collections.component.ts

@@ -1,12 +1,10 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -16,6 +14,8 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { SearchService } from 'jslib-common/abstractions/search.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { CollectionData } from 'jslib-common/models/data/collectionData';
 import { Collection } from 'jslib-common/models/domain/collection';
 import {
@@ -25,7 +25,6 @@ import {
 import { ListResponse } from 'jslib-common/models/response/listResponse';
 import { CollectionView } from 'jslib-common/models/view/collectionView';
 
-import { ModalComponent } from '../../modal.component';
 import { CollectionAddEditComponent } from './collection-add-edit.component';
 import { EntityUsersComponent } from './entity-users.component';
 
@@ -47,10 +46,9 @@ export class CollectionsComponent implements OnInit {
     protected pageSize = 100;
 
     private pagedCollectionsCount = 0;
-    private modal: ModalComponent = null;
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
-        private collectionService: CollectionService, private componentFactoryResolver: ComponentFactoryResolver,
+        private collectionService: CollectionService, private modalService: ModalService,
         private toasterService: ToasterService, private i18nService: I18nService,
         private platformUtilsService: PlatformUtilsService, private userService: UserService,
         private searchService: SearchService) { }
@@ -100,29 +98,18 @@ export class CollectionsComponent implements OnInit {
         this.didScroll = this.pagedCollections.length > this.pageSize;
     }
 
-    edit(collection: CollectionView) {
+    async edit(collection: CollectionView) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(CollectionAddEditComponent, this.addEditModalRef, comp => {
-            this.modal.close();
+            comp.organizationId = this.organizationId;
-        }
+            comp.collectionId = collection != null ? collection.id : null;
-
+            comp.onSavedCollection.subscribe(() => {
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+                modal.close();
-        this.modal = this.addEditModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<CollectionAddEditComponent>(
-            CollectionAddEditComponent, this.addEditModalRef);
-
-        childComponent.organizationId = this.organizationId;
-        childComponent.collectionId = collection != null ? collection.id : null;
-        childComponent.onSavedCollection.subscribe(() => {
-            this.modal.close();
                 this.load();
             });
-        childComponent.onDeletedCollection.subscribe(() => {
+            comp.onDeletedCollection.subscribe(() => {
-            this.modal.close();
+                modal.close();
                 this.removeCollection(collection);
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
@@ -145,27 +132,17 @@ export class CollectionsComponent implements OnInit {
         } catch { }
     }
 
-    users(collection: CollectionView) {
+    async users(collection: CollectionView) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(EntityUsersComponent, this.usersModalRef, comp => {
-            this.modal.close();
+            comp.organizationId = this.organizationId;
-        }
+            comp.entity = 'collection';
+            comp.entityId = collection.id;
+            comp.entityName = collection.name;
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onEditedUsers.subscribe(() => {
-        this.modal = this.usersModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<EntityUsersComponent>(
-            EntityUsersComponent, this.usersModalRef);
-
-        childComponent.organizationId = this.organizationId;
-        childComponent.entity = 'collection';
-        childComponent.entityId = collection.id;
-        childComponent.entityName = collection.name;
-
-        childComponent.onEditedUsers.subscribe(() => {
                 this.load();
-            this.modal.close();
+                modal.close();
             });
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 

src/app/organizations/manage/groups.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -18,11 +17,12 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { SearchService } from 'jslib-common/abstractions/search.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { GroupResponse } from 'jslib-common/models/response/groupResponse';
 
 import { Utils } from 'jslib-common/misc/utils';
 
-import { ModalComponent } from '../../modal.component';
 import { EntityUsersComponent } from './entity-users.component';
 import { GroupAddEditComponent } from './group-add-edit.component';
 
@@ -44,10 +44,9 @@ export class GroupsComponent implements OnInit {
     protected pageSize = 100;
 
     private pagedGroupsCount = 0;
-    private modal: ModalComponent = null;
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
-        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private i18nService: I18nService, private modalService: ModalService,
         private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
         private userService: UserService, private router: Router,
         private searchService: SearchService) { }
@@ -95,29 +94,18 @@ export class GroupsComponent implements OnInit {
         this.didScroll = this.pagedGroups.length > this.pageSize;
     }
 
-    edit(group: GroupResponse) {
+    async edit(group: GroupResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(GroupAddEditComponent, this.addEditModalRef, comp => {
-            this.modal.close();
+            comp.organizationId = this.organizationId;
-        }
+            comp.groupId = group != null ? group.id : null;
-
+            comp.onSavedGroup.subscribe(() => {
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+                modal.close();
-        this.modal = this.addEditModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<GroupAddEditComponent>(
-            GroupAddEditComponent, this.addEditModalRef);
-
-        childComponent.organizationId = this.organizationId;
-        childComponent.groupId = group != null ? group.id : null;
-        childComponent.onSavedGroup.subscribe(() => {
-            this.modal.close();
                 this.load();
             });
-        childComponent.onDeletedGroup.subscribe(() => {
+            comp.onDeletedGroup.subscribe(() => {
-            this.modal.close();
+                modal.close();
                 this.removeGroup(group);
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
@@ -140,26 +128,16 @@ export class GroupsComponent implements OnInit {
         } catch { }
     }
 
-    users(group: GroupResponse) {
+    async users(group: GroupResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(EntityUsersComponent, this.usersModalRef, comp => {
-            this.modal.close();
+            comp.organizationId = this.organizationId;
-        }
+            comp.entity = 'group';
+            comp.entityId = group.id;
+            comp.entityName = group.name;
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onEditedUsers.subscribe(() => {
-        this.modal = this.usersModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<EntityUsersComponent>(
-            EntityUsersComponent, this.usersModalRef);
-
-        childComponent.organizationId = this.organizationId;
-        childComponent.entity = 'group';
-        childComponent.entityId = group.id;
-        childComponent.entityName = group.name;
-
-        childComponent.onEditedUsers.subscribe(() => {
-            this.modal.close();
             });
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 

src/app/organizations/manage/people.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -26,6 +25,8 @@ import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { OrganizationKeysRequest } from 'jslib-common/models/request/organizationKeysRequest';
 import { OrganizationUserBulkRequest } from 'jslib-common/models/request/organizationUserBulkRequest';
 import { OrganizationUserConfirmRequest } from 'jslib-common/models/request/organizationUserConfirmRequest';
@@ -37,13 +38,11 @@ import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/respons
 import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
 import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
 import { PolicyType } from 'jslib-common/enums/policyType';
-import { ProviderUserType } from 'jslib-common/enums/providerUserType';
 
 import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
 import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
 
 import { BasePeopleComponent } from '../../common/base.people.component';
-import { ModalComponent } from '../../modal.component';
 import { BulkConfirmComponent } from './bulk/bulk-confirm.component';
 import { BulkRemoveComponent } from './bulk/bulk-remove.component';
 import { BulkStatusComponent } from './bulk/bulk-status.component';
@@ -80,14 +79,14 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
     callingUserType: OrganizationUserType = null;
 
     constructor(apiService: ApiService, private route: ActivatedRoute,
-        i18nService: I18nService, componentFactoryResolver: ComponentFactoryResolver,
+        i18nService: I18nService, modalService: ModalService,
         platformUtilsService: PlatformUtilsService, toasterService: ToasterService,
         cryptoService: CryptoService, private userService: UserService, private router: Router,
         storageService: StorageService, searchService: SearchService,
         validationService: ValidationService, private policyService: PolicyService,
         logService: LogService, searchPipe: SearchPipe, userNamePipe: UserNamePipe, private syncService: SyncService) {
             super(apiService, searchService, i18nService, platformUtilsService, toasterService, cryptoService,
-                storageService, validationService, componentFactoryResolver, logService, searchPipe, userNamePipe);
+                storageService, validationService, modalService, logService, searchPipe, userNamePipe);
         }
 
     async ngOnInit() {
@@ -189,52 +188,30 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
         return this.orgUseResetPassword && orgUser.resetPasswordEnrolled && this.orgResetPasswordPolicyEnabled;
     }
 
-    edit(user: OrganizationUserUserDetailsResponse) {
+    async edit(user: OrganizationUserUserDetailsResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(UserAddEditComponent, this.addEditModalRef, comp => {
-            this.modal.close();
+            comp.name = this.userNamePipe.transform(user);
-        }
+            comp.organizationId = this.organizationId;
-
+            comp.organizationUserId = user != null ? user.id : null;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onSavedUser.subscribe(() => {
-        this.modal = this.addEditModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<UserAddEditComponent>(
-            UserAddEditComponent, this.addEditModalRef);
-
-        childComponent.name = this.userNamePipe.transform(user);
-        childComponent.organizationId = this.organizationId;
-        childComponent.organizationUserId = user != null ? user.id : null;
-        childComponent.onSavedUser.subscribe(() => {
-            this.modal.close();
                 this.load();
             });
-        childComponent.onDeletedUser.subscribe(() => {
+            comp.onDeletedUser.subscribe(() => {
-            this.modal.close();
+                modal.close();
                 this.removeUser(user);
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
-    groups(user: OrganizationUserUserDetailsResponse) {
+    async groups(user: OrganizationUserUserDetailsResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(UserGroupsComponent, this.groupsModalRef, comp => {
-            this.modal.close();
+            comp.name = this.userNamePipe.transform(user);
-        }
+            comp.organizationId = this.organizationId;
-
+            comp.organizationUserId = user != null ? user.id : null;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onSavedUser.subscribe(() => {
-        this.modal = this.groupsModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<UserGroupsComponent>(
-            UserGroupsComponent, this.groupsModalRef);
-
-        childComponent.name = this.userNamePipe.transform(user);
-        childComponent.organizationId = this.organizationId;
-        childComponent.organizationUserId = user != null ? user.id : null;
-        childComponent.onSavedUser.subscribe(() => {
-            this.modal.close();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
@@ -243,21 +220,13 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             return;
         }
 
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
-            this.modal.close();
+            comp.organizationId = this.organizationId;
-        }
+            comp.users = this.getCheckedUsers();
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.bulkRemoveModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show(BulkRemoveComponent, this.bulkRemoveModalRef);
-
-        childComponent.organizationId = this.organizationId;
-        childComponent.users = this.getCheckedUsers();
-
-        this.modal.onClosed.subscribe(async () => {
-            await this.load();
-            this.modal = null;
         });
+
+        await modal.onClosedPromise();
+        await this.load();
     }
 
     async bulkReinvite() {
@@ -274,7 +243,6 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             return;
         }
 
-
         try {
             const request = new OrganizationUserBulkRequest(filteredUsers.map(user => user.id));
             const response = this.apiService.postManyOrganizationUserReinvite(this.organizationId, request);
@@ -290,95 +258,58 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             return;
         }
 
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
-            this.modal.close();
+            comp.organizationId = this.organizationId;
-        }
+            comp.users = this.getCheckedUsers();
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.bulkConfirmModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show(BulkConfirmComponent, this.bulkConfirmModalRef);
-
-        childComponent.organizationId = this.organizationId;
-        childComponent.users = this.getCheckedUsers();
-
-        this.modal.onClosed.subscribe(async () => {
-            await this.load();
-            this.modal = null;
         });
+
+        await modal.onClosedPromise();
+        await this.load();
     }
 
     async events(user: OrganizationUserUserDetailsResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
-            this.modal.close();
+            comp.name = this.userNamePipe.transform(user);
-        }
+            comp.organizationId = this.organizationId;
-
+            comp.entityId = user.id;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.showUser = false;
-        this.modal = this.eventsModalRef.createComponent(factory).instance;
+            comp.entity = 'user';
-        const childComponent = this.modal.show<EntityEventsComponent>(
-            EntityEventsComponent, this.eventsModalRef);
-
-        childComponent.name = this.userNamePipe.transform(user);
-        childComponent.organizationId = this.organizationId;
-        childComponent.entityId = user.id;
-        childComponent.showUser = false;
-        childComponent.entity = 'user';
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
     async resetPassword(user: OrganizationUserUserDetailsResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(ResetPasswordComponent, this.resetPasswordModalRef, comp => {
-            this.modal.close();
+            comp.name = this.userNamePipe.transform(user);
-        }
+            comp.email = user != null ? user.email : null;
+            comp.organizationId = this.organizationId;
+            comp.id = user != null ? user.id : null;
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onPasswordReset.subscribe(() => {
-        this.modal = this.resetPasswordModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<ResetPasswordComponent>(
-            ResetPasswordComponent, this.resetPasswordModalRef);
-
-        childComponent.name = this.userNamePipe.transform(user);
-        childComponent.email = user != null ? user.email : null;
-        childComponent.organizationId = this.organizationId;
-        childComponent.id = user != null ? user.id : null;
-
-        childComponent.onPasswordReset.subscribe(() => {
-            this.modal.close();
                 this.load();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
     private async showBulkStatus(users: OrganizationUserUserDetailsResponse[], filteredUsers: OrganizationUserUserDetailsResponse[],
         request: Promise<ListResponse<OrganizationUserBulkResponse>>, successfullMessage: string) {
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
-        this.modal = this.bulkStatusModalRef.createComponent(factory).instance;
+            comp.loading = true;
-        const childComponent = this.modal.show<BulkStatusComponent>(
+        });
-            BulkStatusComponent, this.bulkStatusModalRef);
-
-        childComponent.loading = true;
 
         // Workaround to handle closing the modal shortly after it has been opened
         let close = false;
-        this.modal.onShown.subscribe(() => {
+        modal.onShown.subscribe(() => {
             if (close) {
-                this.modal.close();
+                modal.close();
             }
         });
 
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
         try {
             const response = await request;
 
-            if (this.modal) {
+            if (modal) {
                 const keyedErrors: any = response.data.filter(r => r.error !== '').reduce((a, x) => ({ ...a, [x.id]: x.error }), {});
                 const keyedFilteredUsers: any = filteredUsers.reduce((a, x) => ({ ...a, [x.id]: x }), {});
 
@@ -398,9 +329,7 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             }
         } catch {
             close = true;
-            if (this.modal) {
+            modal.close();
-                this.modal.close();
-            }
         }
     }
 }

src/app/organizations/manage/policies.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -18,9 +17,9 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { PolicyResponse } from 'jslib-common/models/response/policyResponse';
+import { ModalService } from 'jslib-angular/services/modal.service';
 
-import { ModalComponent } from '../../modal.component';
+import { PolicyResponse } from 'jslib-common/models/response/policyResponse';
 
 import { Organization } from 'jslib-common/models/domain/organization';
 
@@ -46,12 +45,11 @@ export class PoliciesComponent implements OnInit {
 
     private enterpriseUrl: string;
 
-    private modal: ModalComponent = null;
     private orgPolicies: PolicyResponse[];
     private policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
-        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private i18nService: I18nService, private modalService: ModalService,
         private platformUtilsService: PlatformUtilsService, private userService: UserService,
         private policyListService: PolicyListService, private router: Router,
         private environmentService: EnvironmentService) { }
@@ -106,30 +104,18 @@ export class PoliciesComponent implements OnInit {
         this.loading = false;
     }
 
-    edit(policy: BasePolicy) {
+    async edit(policy: BasePolicy) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(PolicyEditComponent, this.editModalRef, comp => {
-            this.modal.close();
+            comp.policy = policy;
-        }
+            comp.organizationId = this.organizationId;
-
+            comp.policiesEnabledMap = this.policiesEnabledMap;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onSavedPolicy.subscribe(() => {
-        this.modal = this.editModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<PolicyEditComponent>(
-            PolicyEditComponent, this.editModalRef);
-
-        childComponent.policy = policy;
-        childComponent.organizationId = this.organizationId;
-        childComponent.policiesEnabledMap = this.policiesEnabledMap;
-        childComponent.onSavedPolicy.subscribe(() => {
-            this.modal.close();
                 this.load();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
-
     // Remove when removing deprecation warning
     async goToEnterprisePortal() {
         if (this.enterpriseTokenPromise != null) {

src/app/organizations/settings/account.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
@@ -8,6 +7,7 @@ import {
 import { ActivatedRoute } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
+import { ModalService } from 'jslib-angular/services/modal.service';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
@@ -20,8 +20,6 @@ import { OrganizationUpdateRequest } from 'jslib-common/models/request/organizat
 
 import { OrganizationResponse } from 'jslib-common/models/response/organizationResponse';
 
-import { ModalComponent } from '../../modal.component';
-
 import { ApiKeyComponent } from '../../settings/api-key.component';
 import { PurgeVaultComponent } from '../../settings/purge-vault.component';
 import { TaxInfoComponent } from '../../settings/tax-info.component';
@@ -47,9 +45,8 @@ export class AccountComponent {
     taxFormPromise: Promise<any>;
 
     private organizationId: string;
-    private modal: ModalComponent = null;
 
-    constructor(private componentFactoryResolver: ComponentFactoryResolver,
+    constructor(private modalService: ModalService,
         private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private route: ActivatedRoute,
         private syncService: SyncService, private platformUtilsService: PlatformUtilsService,
@@ -96,79 +93,42 @@ export class AccountComponent {
         this.toasterService.popAsync('success', null, this.i18nService.t('taxInfoUpdated'));
     }
 
-    deleteOrganization() {
+    async deleteOrganization() {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(DeleteOrganizationComponent, this.deleteModalRef, comp => {
-            this.modal.close();
+            comp.organizationId = this.organizationId;
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.deleteModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<DeleteOrganizationComponent>(
-            DeleteOrganizationComponent, this.deleteModalRef);
-        childComponent.organizationId = this.organizationId;
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 
-    purgeVault() {
+    async purgeVault() {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(PurgeVaultComponent, this.purgeModalRef, comp => {
-            this.modal.close();
+            comp.organizationId = this.organizationId;
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.purgeModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<PurgeVaultComponent>(PurgeVaultComponent, this.purgeModalRef);
-        childComponent.organizationId = this.organizationId;
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 
-    viewApiKey() {
+    async viewApiKey() {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(ApiKeyComponent, this.apiKeyModalRef, comp => {
-            this.modal.close();
+            comp.keyType = 'organization';
-        }
+            comp.entityId = this.organizationId;
-
+            comp.postKey = this.apiService.postOrganizationApiKey.bind(this.apiService);
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.scope = 'api.organization';
-        this.modal = this.apiKeyModalRef.createComponent(factory).instance;
+            comp.grantType = 'client_credentials';
-        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.apiKeyModalRef);
+            comp.apiKeyTitle = 'apiKey';
-        childComponent.keyType = 'organization';
+            comp.apiKeyWarning = 'apiKeyWarning';
-        childComponent.entityId = this.organizationId;
+            comp.apiKeyDescription = 'apiKeyDesc';
-        childComponent.postKey = this.apiService.postOrganizationApiKey.bind(this.apiService);
-        childComponent.scope = 'api.organization';
-        childComponent.grantType = 'client_credentials';
-        childComponent.apiKeyTitle = 'apiKey';
-        childComponent.apiKeyWarning = 'apiKeyWarning';
-        childComponent.apiKeyDescription = 'apiKeyDesc';
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 
-    rotateApiKey() {
+    async rotateApiKey() {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(ApiKeyComponent, this.rotateApiKeyModalRef, comp => {
-            this.modal.close();
+            comp.keyType = 'organization';
-        }
+            comp.isRotation = true;
-
+            comp.entityId = this.organizationId;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.postKey = this.apiService.postOrganizationRotateApiKey.bind(this.apiService);
-        this.modal = this.rotateApiKeyModalRef.createComponent(factory).instance;
+            comp.scope = 'api.organization';
-        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateApiKeyModalRef);
+            comp.grantType = 'client_credentials';
-        childComponent.keyType = 'organization';
+            comp.apiKeyTitle = 'apiKey';
-        childComponent.isRotation = true;
+            comp.apiKeyWarning = 'apiKeyWarning';
-        childComponent.entityId = this.organizationId;
+            comp.apiKeyDescription = 'apiKeyRotateDesc';
-        childComponent.postKey = this.apiService.postOrganizationRotateApiKey.bind(this.apiService);
-        childComponent.scope = 'api.organization';
-        childComponent.grantType = 'client_credentials';
-        childComponent.apiKeyTitle = 'apiKey';
-        childComponent.apiKeyWarning = 'apiKeyWarning';
-        childComponent.apiKeyDescription = 'apiKeyRotateDesc';
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 }

src/app/organizations/settings/two-factor-setup.component.ts

@@ -1,7 +1,4 @@
-import {
+import { Component } from '@angular/core';
-    Component,
-    ComponentFactoryResolver,
-} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -9,6 +6,8 @@ import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
 
 import { TwoFactorDuoComponent } from '../../settings/two-factor-duo.component';
@@ -20,9 +19,9 @@ import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from '../../se
 })
 export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
     constructor(apiService: ApiService, userService: UserService,
-        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
+        modalService: ModalService, messagingService: MessagingService,
         policyService: PolicyService, private route: ActivatedRoute) {
-        super(apiService, userService, componentFactoryResolver, messagingService, policyService);
+        super(apiService, userService, modalService, messagingService, policyService);
     }
 
     async ngOnInit() {
@@ -32,10 +31,10 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
         });
     }
 
-    manage(type: TwoFactorProviderType) {
+    async manage(type: TwoFactorProviderType) {
         switch (type) {
             case TwoFactorProviderType.OrganizationDuo:
-                const duoComp = this.openModal(this.duoModalRef, TwoFactorDuoComponent);
+                const duoComp = await this.openModal(this.duoModalRef, TwoFactorDuoComponent);
                 duoComp.type = TwoFactorProviderType.OrganizationDuo;
                 duoComp.organizationId = this.organizationId;
                 duoComp.onUpdated.subscribe((enabled: boolean) => {

src/app/organizations/tools/exposed-passwords-report.component.ts

@@ -1,7 +1,4 @@
-import {
+import { Component } from '@angular/core';
-    Component,
-    ComponentFactoryResolver,
-} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { AuditService } from 'jslib-common/abstractions/audit.service';
@@ -9,6 +6,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import {
     ExposedPasswordsReportComponent as BaseExposedPasswordsReportComponent,
 } from '../../tools/exposed-passwords-report.component';
@@ -24,9 +23,9 @@ export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportC
     manageableCiphers: Cipher[];
 
     constructor(cipherService: CipherService, auditService: AuditService,
-        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
+        modalService: ModalService, messagingService: MessagingService,
         userService: UserService, private route: ActivatedRoute) {
-        super(cipherService, auditService, componentFactoryResolver, messagingService, userService);
+        super(cipherService, auditService, modalService, messagingService, userService);
     }
 
     ngOnInit() {

src/app/organizations/tools/inactive-two-factor-report.component.ts

@@ -1,13 +1,12 @@
-import {
+import { Component } from '@angular/core';
-    Component,
-    ComponentFactoryResolver,
-} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import {
     InactiveTwoFactorReportComponent as BaseInactiveTwoFactorReportComponent,
 } from '../../tools/inactive-two-factor-report.component';
@@ -19,10 +18,10 @@ import { CipherView } from 'jslib-common/models/view/cipherView';
     templateUrl: '../../tools/inactive-two-factor-report.component.html',
 })
 export class InactiveTwoFactorReportComponent extends BaseInactiveTwoFactorReportComponent {
-    constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+    constructor(cipherService: CipherService, modalService: ModalService,
         messagingService: MessagingService, userService: UserService,
         private route: ActivatedRoute) {
-        super(cipherService, componentFactoryResolver, messagingService, userService);
+        super(cipherService, modalService, messagingService, userService);
     }
 
     async ngOnInit() {

src/app/organizations/tools/reused-passwords-report.component.ts

@@ -1,13 +1,12 @@
-import {
+import { Component } from '@angular/core';
-    Component,
-    ComponentFactoryResolver,
-} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { Cipher } from 'jslib-common/models/domain/cipher';
 
 import { CipherView } from 'jslib-common/models/view/cipherView';
@@ -23,10 +22,10 @@ import {
 export class ReusedPasswordsReportComponent extends BaseReusedPasswordsReportComponent {
     manageableCiphers: Cipher[];
 
-    constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+    constructor(cipherService: CipherService, modalService: ModalService,
         messagingService: MessagingService, userService: UserService,
         private route: ActivatedRoute) {
-        super(cipherService, componentFactoryResolver, messagingService, userService);
+        super(cipherService, modalService, messagingService, userService);
     }
 
     async ngOnInit() {

src/app/organizations/tools/unsecured-websites-report.component.ts

@@ -1,13 +1,12 @@
-import {
+import { Component } from '@angular/core';
-    Component,
-    ComponentFactoryResolver,
-} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import {
     UnsecuredWebsitesReportComponent as BaseUnsecuredWebsitesReportComponent,
 } from '../../tools/unsecured-websites-report.component';
@@ -19,10 +18,10 @@ import { CipherView } from 'jslib-common/models/view/cipherView';
     templateUrl: '../../tools/unsecured-websites-report.component.html',
 })
 export class UnsecuredWebsitesReportComponent extends BaseUnsecuredWebsitesReportComponent {
-    constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+    constructor(cipherService: CipherService, modalService: ModalService,
         messagingService: MessagingService, userService: UserService,
         private route: ActivatedRoute) {
-        super(cipherService, componentFactoryResolver, messagingService, userService);
+        super(cipherService, modalService, messagingService, userService);
     }
 
     async ngOnInit() {

src/app/organizations/tools/weak-passwords-report.component.ts

@@ -1,7 +1,4 @@
-import {
+import { Component } from '@angular/core';
-    Component,
-    ComponentFactoryResolver,
-} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
@@ -9,6 +6,8 @@ import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { Cipher } from 'jslib-common/models/domain/cipher';
 
 import { CipherView } from 'jslib-common/models/view/cipherView';
@@ -25,9 +24,9 @@ export class WeakPasswordsReportComponent extends BaseWeakPasswordsReportCompone
     manageableCiphers: Cipher[];
 
     constructor(cipherService: CipherService, passwordGenerationService: PasswordGenerationService,
-        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
+        modalService: ModalService, messagingService: MessagingService,
         userService: UserService, private route: ActivatedRoute) {
-        super(cipherService, passwordGenerationService, componentFactoryResolver, messagingService, userService);
+        super(cipherService, passwordGenerationService, modalService, messagingService, userService);
     }
 
     async ngOnInit() {

src/app/organizations/vault/vault.component.html

@@ -20,7 +20,7 @@
                     </small>
                 </h1>
                 <div class="ml-auto d-flex">
-                    <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [modal]="modal" [deleted]="deleted"
+                    <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [deleted]="deleted"
                         [organization]="organization">
                     </app-vault-bulk-actions>
                     <button type="button" class="btn btn-outline-primary btn-sm ml-auto" (click)="addCipher()"

src/app/organizations/vault/vault.component.ts

@@ -1,7 +1,6 @@
 import {
     ChangeDetectorRef,
     Component,
-    ComponentFactoryResolver,
     NgZone,
     OnDestroy,
     OnInit,
@@ -20,14 +19,13 @@ import { SyncService } from 'jslib-common/abstractions/sync.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
+import { ModalService } from 'jslib-angular/services/modal.service';
 
 import { Organization } from 'jslib-common/models/domain/organization';
 import { CipherView } from 'jslib-common/models/view/cipherView';
 
 import { CipherType } from 'jslib-common/enums/cipherType';
 
-import { ModalComponent } from '../../modal.component';
-
 import { EntityEventsComponent } from '../manage/entity-events.component';
 import { AddEditComponent } from './add-edit.component';
 import { AttachmentsComponent } from './attachments.component';
@@ -55,12 +53,10 @@ export class VaultComponent implements OnInit, OnDestroy {
     deleted: boolean = false;
     trashCleanupWarning: string = null;
 
-    modal: ModalComponent = null;
-
     constructor(private route: ActivatedRoute, private userService: UserService,
         private router: Router, private changeDetectorRef: ChangeDetectorRef,
         private syncService: SyncService, private i18nService: I18nService,
-        private componentFactoryResolver: ComponentFactoryResolver, private messagingService: MessagingService,
+        private modalService: ModalService, private messagingService: MessagingService,
         private broadcasterService: BroadcasterService, private ngZone: NgZone,
         private platformUtilsService: PlatformUtilsService) { }
 
@@ -202,28 +198,22 @@ export class VaultComponent implements OnInit, OnDestroy {
         this.ciphersComponent.search(200);
     }
 
-    editCipherAttachments(cipher: CipherView) {
+    async editCipherAttachments(cipher: CipherView) {
         if (this.organization.maxStorageGb == null || this.organization.maxStorageGb === 0) {
             this.messagingService.send('upgradeOrganization', { organizationId: cipher.organizationId });
             return;
         }
 
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.attachmentsModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModalRef);
-
-        childComponent.organization = this.organization;
-        childComponent.cipherId = cipher.id;
         let madeAttachmentChanges = false;
-        childComponent.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
-        childComponent.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
 
-        this.modal.onClosed.subscribe(async () => {
+        const [modal] = await this.modalService.openViewRef(AttachmentsComponent, this.attachmentsModalRef, comp => {
-            this.modal = null;
+            comp.organization = this.organization;
+            comp.cipherId = cipher.id;
+            comp.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
+            comp.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
+        });
+
+        modal.onClosed.subscribe(async () => {
             if (madeAttachmentChanges) {
                 await this.ciphersComponent.refresh();
             }
@@ -231,33 +221,23 @@ export class VaultComponent implements OnInit, OnDestroy {
         });
     }
 
-    editCipherCollections(cipher: CipherView) {
+    async editCipherCollections(cipher: CipherView) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(CollectionsComponent, this.collectionsModalRef, comp => {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.collectionsModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<CollectionsComponent>(CollectionsComponent, this.collectionsModalRef);
-
             if (this.organization.canManageAllCollections) {
-            childComponent.collectionIds = cipher.collectionIds;
+                comp.collectionIds = cipher.collectionIds;
-            childComponent.collections = this.groupingsComponent.collections.filter(c => !c.readOnly);
+                comp.collections = this.groupingsComponent.collections.filter(c => !c.readOnly);
             }
-        childComponent.organization = this.organization;
+            comp.organization = this.organization;
-        childComponent.cipherId = cipher.id;
+            comp.cipherId = cipher.id;
-        childComponent.onSavedCollections.subscribe(async () => {
+            comp.onSavedCollections.subscribe(async () => {
-            this.modal.close();
+                modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 
-    addCipher() {
+    async addCipher() {
-        const component = this.editCipher(null);
+        const component = await this.editCipher(null);
         component.organizationId = this.organization.id;
         component.type = this.type;
         if (this.organization.canManageAllCollections) {
@@ -268,39 +248,29 @@ export class VaultComponent implements OnInit, OnDestroy {
         }
     }
 
-    editCipher(cipher: CipherView) {
+    async editCipher(cipher: CipherView) {
-        if (this.modal != null) {
+        const [modal, childComponent] = await this.modalService.openViewRef(AddEditComponent, this.cipherAddEditModalRef, comp => {
-            this.modal.close();
+            comp.organization = this.organization;
-        }
+            comp.cipherId = cipher == null ? null : cipher.id;
-
+            comp.onSavedCipher.subscribe(async (c: CipherView) => {
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+                modal.close();
-        this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<AddEditComponent>(AddEditComponent, this.cipherAddEditModalRef);
-
-        childComponent.organization = this.organization;
-        childComponent.cipherId = cipher == null ? null : cipher.id;
-        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
                 await this.ciphersComponent.refresh();
             });
-        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
+            comp.onDeletedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
+                modal.close();
                 await this.ciphersComponent.refresh();
             });
-        childComponent.onRestoredCipher.subscribe(async (c: CipherView) => {
+            comp.onRestoredCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
+                modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
 
         return childComponent;
     }
 
-    cloneCipher(cipher: CipherView) {
+    async cloneCipher(cipher: CipherView) {
-        const component = this.editCipher(cipher);
+        const component = await this.editCipher(cipher);
         component.cloneMode = true;
         component.organizationId = this.organization.id;
         if (this.organization.canManageAllCollections) {
@@ -312,23 +282,12 @@ export class VaultComponent implements OnInit, OnDestroy {
     }
 
     async viewEvents(cipher: CipherView) {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
-            this.modal.close();
+            comp.name = cipher.name;
-        }
+            comp.organizationId = this.organization.id;
-
+            comp.entityId = cipher.id;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.showUser = true;
-        this.modal = this.eventsModalRef.createComponent(factory).instance;
+            comp.entity = 'cipher';
-        const childComponent = this.modal.show<EntityEventsComponent>(
-            EntityEventsComponent, this.eventsModalRef);
-
-        childComponent.name = cipher.name;
-        childComponent.organizationId = this.organization.id;
-        childComponent.entityId = cipher.id;
-        childComponent.showUser = true;
-        childComponent.entity = 'cipher';
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 

src/app/oss.module.ts

@@ -12,9 +12,9 @@ import { ToasterModule } from 'angular2-toaster';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { AppComponent } from './app.component';
-import { ModalComponent } from './modal.component';
 
 import { AvatarComponent } from './components/avatar.component';
+import { PasswordRepromptComponent } from './components/password-reprompt.component';
 import { PasswordStrengthComponent } from './components/password-strength.component';
 
 import { FooterComponent } from './layouts/footer.component';
@@ -356,7 +356,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
         LinkSsoComponent,
         LockComponent,
         LoginComponent,
-        ModalComponent,
         NavbarComponent,
         OptionsComponent,
         OrgAccountComponent,
@@ -402,6 +401,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
         PasswordStrengthComponent,
+        PasswordRepromptComponent,
         PaymentComponent,
         PremiumComponent,
         ProfileComponent,
@@ -468,7 +468,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
         I18nPipe,
         SearchPipe,
         UserNamePipe,
-        ModalComponent,
         NavbarComponent,
         FooterComponent,
         OrganizationPlansComponent,

src/app/send/send.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     NgZone,
     ViewChild,
     ViewContainerRef,
@@ -12,8 +11,6 @@ import { SendComponent as BaseSendComponent } from 'jslib-angular/components/sen
 
 import { AddEditComponent } from './add-edit.component';
 
-import { ModalComponent } from '../modal.component';
-
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -23,6 +20,7 @@ import { SendService } from 'jslib-common/abstractions/send.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
+import { ModalService } from 'jslib-angular/services/modal.service';
 
 const BroadcasterSubscriptionId = 'SendComponent';
 
@@ -33,12 +31,10 @@ const BroadcasterSubscriptionId = 'SendComponent';
 export class SendComponent extends BaseSendComponent {
     @ViewChild('sendAddEdit', { read: ViewContainerRef, static: true }) sendAddEditModalRef: ViewContainerRef;
 
-    modal: ModalComponent = null;
-
     constructor(sendService: SendService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
         ngZone: NgZone, searchService: SearchService, policyService: PolicyService, userService: UserService,
-        private componentFactoryResolver: ComponentFactoryResolver, private broadcasterService: BroadcasterService) {
+        private modalService: ModalService, private broadcasterService: BroadcasterService) {
         super(sendService, i18nService, platformUtilsService, environmentService, ngZone, searchService,
             policyService, userService);
     }
@@ -65,37 +61,26 @@ export class SendComponent extends BaseSendComponent {
         this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
     }
 
-    addSend() {
+    async addSend() {
         if (this.disableSend) {
             return;
         }
 
-        const component = this.editSend(null);
+        const component = await this.editSend(null);
         component.type = this.type;
     }
 
-    editSend(send: SendView) {
+    async editSend(send: SendView) {
-        if (this.modal != null) {
+        const [modal, childComponent] = await this.modalService.openViewRef(AddEditComponent, this.sendAddEditModalRef, comp => {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.sendAddEditModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<AddEditComponent>(
-            AddEditComponent, this.sendAddEditModalRef);
-
             childComponent.sendId = send == null ? null : send.id;
-        childComponent.onSavedSend.subscribe(async (s: SendView) => {
+            comp.onSavedSend.subscribe(async (s: SendView) => {
-            this.modal.close();
+                modal.close();
                 await this.load();
             });
-        childComponent.onDeletedSend.subscribe(async (s: SendView) => {
+            comp.onDeletedSend.subscribe(async (s: SendView) => {
-            this.modal.close();
+                modal.close();
                 await this.load();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
 
         return childComponent;

src/app/services/modal.service.ts

@@ -0,0 +1,61 @@
+import {
+    ApplicationRef,
+    ComponentFactoryResolver,
+    Injectable,
+    Injector,
+} from '@angular/core';
+import * as jq from 'jquery';
+import { first } from 'rxjs/operators';
+
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+
+import { ModalRef } from 'jslib-angular/components/modal/modal.ref';
+import { ModalService as BaseModalService } from 'jslib-angular/services/modal.service';
+
+import { Utils } from 'jslib-common/misc/utils';
+
+@Injectable()
+export class ModalService extends BaseModalService {
+    el: any = null;
+    modalOpen: boolean = false;
+
+    constructor(componentFactoryResolver: ComponentFactoryResolver, applicationRef: ApplicationRef,
+        injector: Injector, private messagingService: MessagingService) {
+        super(componentFactoryResolver, applicationRef, injector);
+    }
+
+    protected setupHandlers(modalRef: ModalRef) {
+        modalRef.onCreated.pipe(first()).subscribe(() => {
+            const modals = Array.from(document.querySelectorAll('.modal'));
+            if (modals.length > 0) {
+                this.el = jq(modals[0]);
+                this.el.modal('show');
+
+                this.el.on('show.bs.modal', () => {
+                    modalRef.show();
+                    this.messagingService.send('modalShow');
+                });
+                this.el.on('shown.bs.modal', () => {
+                    modalRef.shown();
+                    this.messagingService.send('modalShown');
+                    if (!Utils.isMobileBrowser) {
+                        this.el.find('*[appAutoFocus]').focus();
+                    }
+                });
+                this.el.on('hide.bs.modal', () => {
+                    this.messagingService.send('modalClose');
+                });
+                this.el.on('hidden.bs.modal', () => {
+                    modalRef.closed();
+                    this.messagingService.send('modalClosed');
+                });
+            }
+        });
+
+        modalRef.onClose.pipe(first()).subscribe(() => {
+            if (this.el != null) {
+                this.el.modal('hide');
+            }
+        });
+    }
+}

src/app/services/services.module.ts

@@ -10,6 +10,7 @@ import { BroadcasterMessagingService } from '../../services/broadcasterMessaging
 import { HtmlStorageService } from '../../services/htmlStorage.service';
 import { I18nService } from '../../services/i18n.service';
 import { MemoryStorageService } from '../../services/memoryStorage.service';
+import { PasswordRepromptService } from '../../services/passwordReprompt.service';
 import { WebPlatformUtilsService } from '../../services/webPlatformUtils.service';
 
 import { EventService } from './event.service';
@@ -21,6 +22,7 @@ import { RouterService } from './router.service';
 import { AuthGuardService } from 'jslib-angular/services/auth-guard.service';
 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
 import { LockGuardService } from 'jslib-angular/services/lock-guard.service';
+import { ModalService as ModalServiceAbstraction } from 'jslib-angular/services/modal.service';
 import { UnauthGuardService } from 'jslib-angular/services/unauth-guard.service';
 import { ValidationService } from 'jslib-angular/services/validation.service';
 
@@ -42,7 +44,6 @@ import { FolderService } from 'jslib-common/services/folder.service';
 import { ImportService } from 'jslib-common/services/import.service';
 import { NotificationsService } from 'jslib-common/services/notifications.service';
 import { PasswordGenerationService } from 'jslib-common/services/passwordGeneration.service';
-import { PasswordRepromptService } from 'jslib-common/services/passwordReprompt.service';
 import { PolicyService } from 'jslib-common/services/policy.service';
 import { SearchService } from 'jslib-common/services/search.service';
 import { SendService } from 'jslib-common/services/send.service';
@@ -88,6 +89,7 @@ import { TokenService as TokenServiceAbstraction } from 'jslib-common/abstractio
 import { TotpService as TotpServiceAbstraction } from 'jslib-common/abstractions/totp.service';
 import { UserService as UserServiceAbstraction } from 'jslib-common/abstractions/user.service';
 import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from 'jslib-common/abstractions/vaultTimeout.service';
+import { ModalService } from './modal.service';
 
 const i18nService = new I18nService(window.navigator.language, 'locales');
 const stateService = new StateService();
@@ -139,7 +141,6 @@ const notificationsService = new NotificationsService(userService, syncService,
     environmentService, async () => messagingService.send('logout', { expired: true }), consoleLogService);
 const auditService = new AuditService(cryptoFunctionService, apiService);
 const eventLoggingService = new EventLoggingService(storageService, apiService, userService, cipherService);
-const passwordRepromptService = new PasswordRepromptService(i18nService, cryptoService, platformUtilsService);
 
 containerService.attachToWindow(window);
 
@@ -186,6 +187,7 @@ export function initFactory(): Function {
         EventService,
         LockGuardService,
         PolicyListService,
+        { provide: ModalServiceAbstraction, useClass: ModalService },
         { provide: AuditServiceAbstraction, useValue: auditService },
         { provide: AuthServiceAbstraction, useValue: authService },
         { provide: CipherServiceAbstraction, useValue: cipherService },
@@ -217,7 +219,7 @@ export function initFactory(): Function {
         { provide: EventLoggingServiceAbstraction, useValue: eventLoggingService },
         { provide: PolicyServiceAbstraction, useValue: policyService },
         { provide: SendServiceAbstraction, useValue: sendService },
-        { provide: PasswordRepromptServiceAbstraction, useValue: passwordRepromptService },
+        { provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService },
         { provide: LogService, useValue: consoleLogService },
         {
             provide: APP_INITIALIZER,

src/app/settings/account.component.ts

@@ -1,11 +1,9 @@
 import {
     Component,
-    ComponentFactoryResolver,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
 
-import { ModalComponent } from '../modal.component';
 import { ApiKeyComponent } from './api-key.component';
 import { DeauthorizeSessionsComponent } from './deauthorize-sessions.component';
 import { DeleteAccountComponent } from './delete-account.component';
@@ -14,6 +12,8 @@ import { PurgeVaultComponent } from './purge-vault.component';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 @Component({
     selector: 'app-account',
     templateUrl: 'account.component.html',
@@ -25,95 +25,47 @@ export class AccountComponent {
     @ViewChild('viewUserApiKeyTemplate', { read: ViewContainerRef, static: true }) viewUserApiKeyModalRef: ViewContainerRef;
     @ViewChild('rotateUserApiKeyTemplate', { read: ViewContainerRef, static: true }) rotateUserApiKeyModalRef: ViewContainerRef;
 
-    private modal: ModalComponent = null;
+    constructor(private modalService: ModalService, private apiService: ApiService,
-
-    constructor(private componentFactoryResolver: ComponentFactoryResolver, private apiService: ApiService,
         private userService: UserService) { }
 
-    deauthorizeSessions() {
+    async deauthorizeSessions() {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(DeauthorizeSessionsComponent, this.deauthModalRef);
-            this.modal.close();
     }
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+    async purgeVault() {
-        this.modal = this.deauthModalRef.createComponent(factory).instance;
+        await this.modalService.openViewRef(PurgeVaultComponent, this.purgeModalRef);
-        this.modal.show<DeauthorizeSessionsComponent>(DeauthorizeSessionsComponent, this.deauthModalRef);
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
-        });
     }
 
-    purgeVault() {
+    async deleteAccount() {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(DeleteAccountComponent, this.deleteModalRef);
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.purgeModalRef.createComponent(factory).instance;
-        this.modal.show<PurgeVaultComponent>(PurgeVaultComponent, this.purgeModalRef);
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
-        });
-    }
-
-    deleteAccount() {
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.deleteModalRef.createComponent(factory).instance;
-        this.modal.show<DeleteAccountComponent>(DeleteAccountComponent, this.deleteModalRef);
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
-        });
     }
 
     async viewUserApiKey() {
-        if (this.modal != null) {
+        const entityId = await this.userService.getUserId();
-            this.modal.close();
+        await this.modalService.openViewRef(ApiKeyComponent, this.viewUserApiKeyModalRef, comp => {
-        }
+            comp.keyType = 'user';
-
+            comp.entityId = entityId;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.postKey = this.apiService.postUserApiKey.bind(this.apiService);
-        this.modal = this.viewUserApiKeyModalRef.createComponent(factory).instance;
+            comp.scope = 'api';
-        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.viewUserApiKeyModalRef);
+            comp.grantType = 'client_credentials';
-        childComponent.keyType = 'user';
+            comp.apiKeyTitle = 'apiKey';
-        childComponent.entityId = await this.userService.getUserId();
+            comp.apiKeyWarning = 'userApiKeyWarning';
-        childComponent.postKey = this.apiService.postUserApiKey.bind(this.apiService);
+            comp.apiKeyDescription = 'userApiKeyDesc';
-        childComponent.scope = 'api';
-        childComponent.grantType = 'client_credentials';
-        childComponent.apiKeyTitle = 'apiKey';
-        childComponent.apiKeyWarning = 'userApiKeyWarning';
-        childComponent.apiKeyDescription = 'userApiKeyDesc';
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 
     async rotateUserApiKey() {
-        if (this.modal != null) {
+        const entityId = await this.userService.getUserId();
-            this.modal.close();
+        await this.modalService.openViewRef(ApiKeyComponent, this.rotateUserApiKeyModalRef, comp => {
-        }
+            comp.keyType = 'user';
-
+            comp.isRotation = true;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.entityId = entityId;
-        this.modal = this.rotateUserApiKeyModalRef.createComponent(factory).instance;
+            comp.postKey = this.apiService.postUserRotateApiKey.bind(this.apiService);
-        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateUserApiKeyModalRef);
+            comp.scope = 'api';
-        childComponent.keyType = 'user';
+            comp.grantType = 'client_credentials';
-        childComponent.isRotation = true;
+            comp.apiKeyTitle = 'apiKey';
-        childComponent.entityId = await this.userService.getUserId();
+            comp.apiKeyWarning = 'userApiKeyWarning';
-        childComponent.postKey = this.apiService.postUserRotateApiKey.bind(this.apiService);
+            comp.apiKeyDescription = 'apiKeyRotateDesc';
-        childComponent.scope = 'api';
-        childComponent.grantType = 'client_credentials';
-        childComponent.apiKeyTitle = 'apiKey';
-        childComponent.apiKeyWarning = 'userApiKeyWarning';
-        childComponent.apiKeyDescription = 'apiKeyRotateDesc';
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 }

src/app/settings/emergency-access-view.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -11,13 +10,13 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { CipherData } from 'jslib-common/models/data';
 import { Cipher, SymmetricCryptoKey } from 'jslib-common/models/domain';
 import { EmergencyAccessViewResponse } from 'jslib-common/models/response/emergencyAccessResponse';
 import { CipherView } from 'jslib-common/models/view/cipherView';
 
-import { ModalComponent } from '../modal.component';
-
 import { EmergencyAccessAttachmentsComponent } from './emergency-access-attachments.component';
 import { EmergencyAddEditComponent } from './emergency-add-edit.component';
 
@@ -32,10 +31,8 @@ export class EmergencyAccessViewComponent implements OnInit {
     id: string;
     ciphers: CipherView[] = [];
 
-    private modal: ModalComponent = null;
-
     constructor(private cipherService: CipherService, private cryptoService: CryptoService,
-        private componentFactoryResolver: ComponentFactoryResolver, private router: Router,
+        private modalService: ModalService, private router: Router,
         private route: ActivatedRoute, private apiService: ApiService) { }
 
     ngOnInit() {
@@ -50,20 +47,10 @@ export class EmergencyAccessViewComponent implements OnInit {
         });
     }
 
-    selectCipher(cipher: CipherView) {
+    async selectCipher(cipher: CipherView) {
-        if (this.modal != null) {
+        const [_, childComponent] = await this.modalService.openViewRef(EmergencyAddEditComponent, this.cipherAddEditModalRef, comp => {
-            this.modal.close();
+            comp.cipherId = cipher == null ? null : cipher.id;
-        }
+            comp.cipher = cipher;
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<EmergencyAddEditComponent>(EmergencyAddEditComponent, this.cipherAddEditModalRef);
-
-        childComponent.cipherId = cipher == null ? null : cipher.id;
-        childComponent.cipher = cipher;
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
 
         return childComponent;
@@ -75,19 +62,9 @@ export class EmergencyAccessViewComponent implements OnInit {
     }
 
     async viewAttachments(cipher: CipherView) {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(EmergencyAccessAttachmentsComponent, this.attachmentsModalRef, comp => {
-            this.modal.close();
+            comp.cipher = cipher;
-        }
+            comp.emergencyAccessId = this.id;
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.attachmentsModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<EmergencyAccessAttachmentsComponent>(EmergencyAccessAttachmentsComponent, this.attachmentsModalRef);
-
-        childComponent.cipher = cipher;
-        childComponent.emergencyAccessId = this.id;
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 

src/app/settings/emergency-access.component.ts

@@ -1,4 +1,9 @@
-import { Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+    Component,
+    OnInit,
+    ViewChild,
+    ViewContainerRef
+} from '@angular/core';
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -18,11 +23,12 @@ import { ConstantsService } from 'jslib-common/services/constants.service';
 
 import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
 
-import { ModalComponent } from '../modal.component';
 import { EmergencyAccessAddEditComponent } from './emergency-access-add-edit.component';
 import { EmergencyAccessConfirmComponent } from './emergency-access-confirm.component';
 import { EmergencyAccessTakeoverComponent } from './emergency-access-takeover.component';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 @Component({
     selector: 'emergency-access',
     templateUrl: 'emergency-access.component.html',
@@ -40,11 +46,8 @@ export class EmergencyAccessComponent implements OnInit {
     actionPromise: Promise<any>;
     isOrganizationOwner: boolean;
 
-    private modal: ModalComponent = null;
-
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private componentFactoryResolver: ComponentFactoryResolver,
+        private modalService: ModalService, private platformUtilsService: PlatformUtilsService,
-        private platformUtilsService: PlatformUtilsService,
         private toasterService: ToasterService, private cryptoService: CryptoService,
         private storageService: StorageService, private userService: UserService,
         private messagingService: MessagingService, private userNamePipe: UserNamePipe) { }
@@ -68,30 +71,19 @@ export class EmergencyAccessComponent implements OnInit {
         }
     }
 
-    edit(details: EmergencyAccessGranteeDetailsResponse) {
+    async edit(details: EmergencyAccessGranteeDetailsResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(EmergencyAccessAddEditComponent, this.addEditModalRef, comp => {
-            this.modal.close();
+            comp.name = this.userNamePipe.transform(details);
-        }
+            comp.emergencyAccessId = details?.id;
-
+            comp.readOnly = !this.canAccessPremium;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onSaved.subscribe(() => {
-        this.modal = this.addEditModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<EmergencyAccessAddEditComponent>(
-            EmergencyAccessAddEditComponent, this.addEditModalRef);
-
-        childComponent.name = this.userNamePipe.transform(details);
-        childComponent.emergencyAccessId = details?.id;
-        childComponent.readOnly = !this.canAccessPremium;
-        childComponent.onSaved.subscribe(() => {
-            this.modal.close();
                 this.load();
             });
-        childComponent.onDeleted.subscribe(() => {
+            comp.onDeleted.subscribe(() => {
-            this.modal.close();
+                modal.close();
                 this.remove(details);
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
@@ -120,30 +112,19 @@ export class EmergencyAccessComponent implements OnInit {
 
         const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
         if (autoConfirm == null || !autoConfirm) {
-            if (this.modal != null) {
+            const [modal] = await this.modalService.openViewRef(EmergencyAccessConfirmComponent, this.confirmModalRef, comp => {
-                this.modal.close();
+                comp.name = this.userNamePipe.transform(contact);
-            }
+                comp.emergencyAccessId = contact.id;
+                comp.userId = contact?.granteeId;
+                comp.onConfirmed.subscribe(async () => {
+                    modal.close();
 
-            const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+                    comp.formPromise = this.doConfirmation(contact);
-            this.modal = this.confirmModalRef.createComponent(factory).instance;
+                    await comp.formPromise;
-            const childComponent = this.modal.show<EmergencyAccessConfirmComponent>(
-                EmergencyAccessConfirmComponent, this.confirmModalRef);
-
-            childComponent.name = this.userNamePipe.transform(contact);
-            childComponent.emergencyAccessId = contact.id;
-            childComponent.userId = contact?.granteeId;
-            childComponent.onConfirmed.subscribe(async () => {
-                this.modal.close();
-
-                childComponent.formPromise = this.doConfirmation(contact);
-                await childComponent.formPromise;
 
                     updateUser();
                     this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.userNamePipe.transform(contact)));
                 });
-
-            this.modal.onClosed.subscribe(() => {
-                this.modal = null;
             });
             return;
         }
@@ -224,26 +205,15 @@ export class EmergencyAccessComponent implements OnInit {
     }
 
     async takeover(details: EmergencyAccessGrantorDetailsResponse) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(EmergencyAccessTakeoverComponent, this.takeoverModalRef, comp => {
-            this.modal.close();
+            comp.name = this.userNamePipe.transform(details);
-        }
+            comp.email = details.email;
+            comp.emergencyAccessId = details != null ? details.id : null;
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onDone.subscribe(() => {
-        this.modal = this.addEditModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<EmergencyAccessTakeoverComponent>(
-            EmergencyAccessTakeoverComponent, this.takeoverModalRef);
-
-        childComponent.name = this.userNamePipe.transform(details);
-        childComponent.email = details.email;
-        childComponent.emergencyAccessId = details != null ? details.id : null;
-
-        childComponent.onDone.subscribe(() => {
-            this.modal.close();
                 this.toasterService.popAsync('success', null, this.i18nService.t('passwordResetFor', this.userNamePipe.transform(details)));
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 

src/app/settings/two-factor-setup.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     Type,
     ViewChild,
@@ -14,11 +13,13 @@ import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { TwoFactorProviders } from 'jslib-common/services/auth.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
+import { ModalRef } from 'jslib-angular/components/modal/modal.ref';
+
 import { PolicyType } from 'jslib-common/enums/policyType';
 import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
 
-import { ModalComponent } from '../modal.component';
-
 import { TwoFactorAuthenticatorComponent } from './two-factor-authenticator.component';
 import { TwoFactorDuoComponent } from './two-factor-duo.component';
 import { TwoFactorEmailComponent } from './two-factor-email.component';
@@ -43,11 +44,10 @@ export class TwoFactorSetupComponent implements OnInit {
     canAccessPremium: boolean;
     showPolicyWarning = false;
     loading = true;
-
+    modal: ModalRef;
-    private modal: ModalComponent = null;
 
     constructor(protected apiService: ApiService, protected userService: UserService,
-        protected componentFactoryResolver: ComponentFactoryResolver, protected messagingService: MessagingService,
+        protected modalService: ModalService, protected messagingService: MessagingService,
         protected policyService: PolicyService) { }
 
     async ngOnInit() {
@@ -91,34 +91,34 @@ export class TwoFactorSetupComponent implements OnInit {
         this.loading = false;
     }
 
-    manage(type: TwoFactorProviderType) {
+    async manage(type: TwoFactorProviderType) {
         switch (type) {
             case TwoFactorProviderType.Authenticator:
-                const authComp = this.openModal(this.authenticatorModalRef, TwoFactorAuthenticatorComponent);
+                const authComp = await this.openModal(this.authenticatorModalRef, TwoFactorAuthenticatorComponent);
                 authComp.onUpdated.subscribe((enabled: boolean) => {
                     this.updateStatus(enabled, TwoFactorProviderType.Authenticator);
                 });
                 break;
             case TwoFactorProviderType.Yubikey:
-                const yubiComp = this.openModal(this.yubikeyModalRef, TwoFactorYubiKeyComponent);
+                const yubiComp = await this.openModal(this.yubikeyModalRef, TwoFactorYubiKeyComponent);
                 yubiComp.onUpdated.subscribe((enabled: boolean) => {
                     this.updateStatus(enabled, TwoFactorProviderType.Yubikey);
                 });
                 break;
             case TwoFactorProviderType.Duo:
-                const duoComp = this.openModal(this.duoModalRef, TwoFactorDuoComponent);
+                const duoComp = await this.openModal(this.duoModalRef, TwoFactorDuoComponent);
                 duoComp.onUpdated.subscribe((enabled: boolean) => {
                     this.updateStatus(enabled, TwoFactorProviderType.Duo);
                 });
                 break;
             case TwoFactorProviderType.Email:
-                const emailComp = this.openModal(this.emailModalRef, TwoFactorEmailComponent);
+                const emailComp = await this.openModal(this.emailModalRef, TwoFactorEmailComponent);
                 emailComp.onUpdated.subscribe((enabled: boolean) => {
                     this.updateStatus(enabled, TwoFactorProviderType.Email);
                 });
                 break;
             case TwoFactorProviderType.WebAuthn:
-                const webAuthnComp = this.openModal(this.webAuthnModalRef, TwoFactorWebAuthnComponent);
+                const webAuthnComp = await this.openModal(this.webAuthnModalRef, TwoFactorWebAuthnComponent);
                 webAuthnComp.onUpdated.subscribe((enabled: boolean) => {
                     this.updateStatus(enabled, TwoFactorProviderType.WebAuthn);
                 });
@@ -147,18 +147,10 @@ export class TwoFactorSetupComponent implements OnInit {
         return type === TwoFactorProviderType.OrganizationDuo;
     }
 
-    protected openModal<T>(ref: ViewContainerRef, type: Type<T>): T {
+    protected async openModal<T>(ref: ViewContainerRef, type: Type<T>): Promise<T> {
-        if (this.modal != null) {
+        const [modal, childComponent] = await this.modalService.openViewRef(type, ref);
-            this.modal.close();
+        this.modal = modal;
-        }
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = ref.createComponent(factory).instance;
-        const childComponent = this.modal.show<T>(type, ref);
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
         return childComponent;
     }
 

src/app/tools/cipher-report.component.ts

@@ -1,5 +1,4 @@
 import {
-    ComponentFactoryResolver,
     Directive,
     ViewChild,
     ViewContainerRef,
@@ -9,13 +8,14 @@ import { CipherView } from 'jslib-common/models/view/cipherView';
 
 import { Organization } from 'jslib-common/models/domain/organization';
 
-import { ModalComponent } from '../modal.component';
 import { AddEditComponent as OrgAddEditComponent } from '../organizations/vault/add-edit.component';
 import { AddEditComponent } from '../vault/add-edit.component';
 
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 @Directive()
 export class CipherReportComponent {
     @ViewChild('cipherAddEdit', { read: ViewContainerRef, static: true }) cipherAddEditModalRef: ViewContainerRef;
@@ -25,9 +25,7 @@ export class CipherReportComponent {
     ciphers: CipherView[] = [];
     organization: Organization;
 
-    private modal: ModalComponent = null;
+    constructor(private modalService: ModalService, protected userService: UserService,
-
-    constructor(private componentFactoryResolver: ComponentFactoryResolver, protected userService: UserService,
         protected messagingService: MessagingService, public requiresPaid: boolean) { }
 
     async load() {
@@ -37,40 +35,29 @@ export class CipherReportComponent {
         this.hasLoaded = true;
     }
 
-    selectCipher(cipher: CipherView) {
+    async selectCipher(cipher: CipherView) {
-        if (this.modal != null) {
+        const type = this.organization != null ? OrgAddEditComponent : AddEditComponent;
-            this.modal.close();
-        }
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const [modal, childComponent] = await this.modalService.openViewRef(type, this.cipherAddEditModalRef, (comp: OrgAddEditComponent | AddEditComponent) => {
-        this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
-        let childComponent: OrgAddEditComponent | AddEditComponent;
             if (this.organization != null) {
-            childComponent = this.modal.show<OrgAddEditComponent>(OrgAddEditComponent, this.cipherAddEditModalRef);
+                (comp as OrgAddEditComponent).organization = this.organization;
-            (childComponent as OrgAddEditComponent).organization = this.organization;
+                comp.organizationId = this.organization.id;
-        } else {
-            childComponent = this.modal.show<AddEditComponent>(AddEditComponent, this.cipherAddEditModalRef);
             }
 
-        childComponent.cipherId = cipher == null ? null : cipher.id;
+            comp.cipherId = cipher == null ? null : cipher.id;
-        if (this.organization != null) {
+            comp.onSavedCipher.subscribe(async (c: CipherView) => {
-            childComponent.organizationId = this.organization.id;
+                modal.close();
-        }
-        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
                 await this.load();
             });
-        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
+            comp.onDeletedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
+                modal.close();
                 await this.load();
             });
-        childComponent.onRestoredCipher.subscribe(async (c: CipherView) => {
+            comp.onRestoredCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
+                modal.close();
                 await this.load();
             });
 
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
 
         return childComponent;

src/app/tools/exposed-passwords-report.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
 } from '@angular/core';
 
@@ -9,6 +8,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { CipherView } from 'jslib-common/models/view/cipherView';
 
 import { CipherType } from 'jslib-common/enums/cipherType';
@@ -23,9 +24,9 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
     exposedPasswordMap = new Map<string, number>();
 
     constructor(protected cipherService: CipherService, protected auditService: AuditService,
-        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
+        modalService: ModalService, messagingService: MessagingService,
         userService: UserService) {
-        super(componentFactoryResolver, userService, messagingService, true);
+        super(modalService, userService, messagingService, true);
     }
 
     ngOnInit() {

src/app/tools/inactive-two-factor-report.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
 } from '@angular/core';
 
@@ -8,6 +7,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { CipherView } from 'jslib-common/models/view/cipherView';
 
 import { CipherType } from 'jslib-common/enums/cipherType';
@@ -24,9 +25,9 @@ export class InactiveTwoFactorReportComponent extends CipherReportComponent impl
     services = new Map<string, string>();
     cipherDocs = new Map<string, string>();
 
-    constructor(protected cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+    constructor(protected cipherService: CipherService, modalService: ModalService,
         messagingService: MessagingService, userService: UserService) {
-        super(componentFactoryResolver, userService, messagingService, true);
+        super(modalService, userService, messagingService, true);
     }
 
     async ngOnInit() {

src/app/tools/password-generator.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
@@ -13,7 +12,7 @@ import {
     PasswordGeneratorComponent as BasePasswordGeneratorComponent,
 } from 'jslib-angular/components/password-generator.component';
 
-import { ModalComponent } from '../modal.component';
+import { ModalService } from 'jslib-angular/services/modal.service';
 import { PasswordGeneratorHistoryComponent } from './password-generator-history.component';
 
 @Component({
@@ -23,25 +22,13 @@ import { PasswordGeneratorHistoryComponent } from './password-generator-history.
 export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
     @ViewChild('historyTemplate', { read: ViewContainerRef, static: true }) historyModalRef: ViewContainerRef;
 
-    private modal: ModalComponent = null;
-
     constructor(passwordGenerationService: PasswordGenerationService, platformUtilsService: PlatformUtilsService,
-        i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver) {
+        i18nService: I18nService, private modalService: ModalService) {
         super(passwordGenerationService, platformUtilsService, i18nService, window);
     }
 
-    history() {
+    async history() {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(PasswordGeneratorHistoryComponent, this.historyModalRef);
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.historyModalRef.createComponent(factory).instance;
-        this.modal.show<PasswordGeneratorHistoryComponent>(PasswordGeneratorHistoryComponent, this.historyModalRef);
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
-        });
     }
 
     lengthChanged() {

src/app/tools/reused-passwords-report.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
 } from '@angular/core';
 
@@ -8,6 +7,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { CipherView } from 'jslib-common/models/view/cipherView';
 
 import { CipherType } from 'jslib-common/enums/cipherType';
@@ -21,9 +22,9 @@ import { CipherReportComponent } from './cipher-report.component';
 export class ReusedPasswordsReportComponent extends CipherReportComponent implements OnInit {
     passwordUseMap: Map<string, number>;
 
-    constructor(protected cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+    constructor(protected cipherService: CipherService, modalService: ModalService,
         messagingService: MessagingService, userService: UserService) {
-        super(componentFactoryResolver, userService, messagingService, true);
+        super(modalService, userService, messagingService, true);
     }
 
     async ngOnInit() {

src/app/tools/unsecured-websites-report.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
 } from '@angular/core';
 
@@ -8,6 +7,8 @@ import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { CipherType } from 'jslib-common/enums/cipherType';
 
 import { CipherView } from 'jslib-common/models/view/cipherView';
@@ -19,9 +20,9 @@ import { CipherReportComponent } from './cipher-report.component';
     templateUrl: 'unsecured-websites-report.component.html',
 })
 export class UnsecuredWebsitesReportComponent extends CipherReportComponent implements OnInit {
-    constructor(protected cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+    constructor(protected cipherService: CipherService, modalService: ModalService,
         messagingService: MessagingService, userService: UserService) {
-        super(componentFactoryResolver, userService, messagingService, true);
+        super(modalService, userService, messagingService, true);
     }
 
     async ngOnInit() {

src/app/tools/weak-passwords-report.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
 } from '@angular/core';
 
@@ -9,6 +8,8 @@ import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
+import { ModalService } from 'jslib-angular/services/modal.service';
+
 import { CipherView } from 'jslib-common/models/view/cipherView';
 
 import { CipherType } from 'jslib-common/enums/cipherType';
@@ -26,9 +27,9 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
     private passwordStrengthCache = new Map<string, number>();
 
     constructor(protected cipherService: CipherService, protected passwordGenerationService: PasswordGenerationService,
-        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
+        modalService: ModalService, messagingService: MessagingService,
         userService: UserService) {
-        super(componentFactoryResolver, userService, messagingService, true);
+        super(modalService, userService, messagingService, true);
     }
 
     async ngOnInit() {

src/app/vault/bulk-actions.component.ts

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     Input,
     ViewChild,
     ViewContainerRef,
@@ -11,9 +10,9 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
 import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
 
-import { Organization } from 'jslib-common/models/domain/organization';
+import { ModalService } from 'jslib-angular/services/modal.service';
 
-import { ModalComponent } from '../modal.component';
+import { Organization } from 'jslib-common/models/domain/organization';
 
 import { BulkDeleteComponent } from './bulk-delete.component';
 import { BulkMoveComponent } from './bulk-move.component';
@@ -27,7 +26,6 @@ import { CiphersComponent } from './ciphers.component';
 })
 export class BulkActionsComponent {
     @Input() ciphersComponent: CiphersComponent;
-    @Input() modal: ModalComponent;
     @Input() deleted: boolean;
     @Input() organization: Organization;
 
@@ -36,10 +34,8 @@ export class BulkActionsComponent {
     @ViewChild('bulkMoveTemplate', { read: ViewContainerRef, static: true }) bulkMoveModalRef: ViewContainerRef;
     @ViewChild('bulkShareTemplate', { read: ViewContainerRef, static: true }) bulkShareModalRef: ViewContainerRef;
 
-    constructor(private toasterService: ToasterService,
+    constructor(private toasterService: ToasterService, private i18nService: I18nService,
-        private i18nService: I18nService,
+        private modalService: ModalService, private passwordRepromptService: PasswordRepromptService) { }
-        private componentFactoryResolver: ComponentFactoryResolver,
-        private passwordRepromptService: PasswordRepromptService) { }
 
     async bulkDelete() {
         if (!await this.promptPassword()) {
@@ -53,24 +49,14 @@ export class BulkActionsComponent {
             return;
         }
 
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(BulkDeleteComponent, this.bulkDeleteModalRef, comp => {
-            this.modal.close();
+            comp.permanent = this.deleted;
-        }
+            comp.cipherIds = selectedIds;
-
+            comp.organization = this.organization;
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            comp.onDeleted.subscribe(async () => {
-        this.modal = this.bulkDeleteModalRef.createComponent(factory).instance;
+                modal.close();
-        const childComponent = this.modal.show<BulkDeleteComponent>(BulkDeleteComponent, this.bulkDeleteModalRef);
-
-        childComponent.permanent = this.deleted;
-        childComponent.cipherIds = selectedIds;
-        childComponent.organization = this.organization;
-        childComponent.onDeleted.subscribe(async () => {
-            this.modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
@@ -86,22 +72,12 @@ export class BulkActionsComponent {
             return;
         }
 
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(BulkRestoreComponent, this.bulkRestoreModalRef, comp => {
-            this.modal.close();
+            comp.cipherIds = selectedIds;
-        }
+            comp.onRestored.subscribe(async () => {
-
+                modal.close();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.bulkRestoreModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<BulkRestoreComponent>(BulkRestoreComponent, this.bulkRestoreModalRef);
-
-        childComponent.cipherIds = selectedIds;
-        childComponent.onRestored.subscribe(async () => {
-            this.modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
@@ -117,22 +93,12 @@ export class BulkActionsComponent {
             return;
         }
 
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(BulkShareComponent, this.bulkShareModalRef, comp => {
-            this.modal.close();
+            comp.ciphers = selectedCiphers;
-        }
+            comp.onShared.subscribe(async () => {
-
+                modal.close();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.bulkShareModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<BulkShareComponent>(BulkShareComponent, this.bulkShareModalRef);
-
-        childComponent.ciphers = selectedCiphers;
-        childComponent.onShared.subscribe(async () => {
-            this.modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 
@@ -148,22 +114,12 @@ export class BulkActionsComponent {
             return;
         }
 
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(BulkMoveComponent, this.bulkMoveModalRef, comp => {
-            this.modal.close();
+            comp.cipherIds = selectedIds;
-        }
+            comp.onMoved.subscribe(async () => {
-
+                modal.close();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.bulkMoveModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<BulkMoveComponent>(BulkMoveComponent, this.bulkMoveModalRef);
-
-        childComponent.cipherIds = selectedIds;
-        childComponent.onMoved.subscribe(async () => {
-            this.modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 

src/app/vault/vault.component.html

@@ -21,7 +21,7 @@
                     </small>
                 </h1>
                 <div class="ml-auto d-flex">
-                    <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [modal]="modal" [deleted]="deleted">
+                    <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [deleted]="deleted">
                     </app-vault-bulk-actions>
                     <button type="button" class="btn btn-outline-primary btn-sm" (click)="addCipher()" *ngIf="!deleted">
                         <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{'addItem' | i18n}}

src/app/vault/vault.component.ts

@@ -1,7 +1,6 @@
 import {
     ChangeDetectorRef,
     Component,
-    ComponentFactoryResolver,
     NgZone,
     OnDestroy,
     OnInit,
@@ -17,8 +16,6 @@ import { CipherType } from 'jslib-common/enums/cipherType';
 
 import { CipherView } from 'jslib-common/models/view/cipherView';
 
-import { ModalComponent } from '../modal.component';
-
 import { OrganizationsComponent } from '../settings/organizations.component';
 import { UpdateKeyComponent } from '../settings/update-key.component';
 import { AddEditComponent } from './add-edit.component';
@@ -38,6 +35,7 @@ import { TokenService } from 'jslib-common/abstractions/token.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
+import { ModalService } from 'jslib-angular/services/modal.service';
 
 const BroadcasterSubscriptionId = 'VaultComponent';
 
@@ -68,11 +66,9 @@ export class VaultComponent implements OnInit, OnDestroy {
     deleted: boolean = false;
     trashCleanupWarning: string = null;
 
-    modal: ModalComponent = null;
-
     constructor(private syncService: SyncService, private route: ActivatedRoute,
         private router: Router, private changeDetectorRef: ChangeDetectorRef,
-        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private i18nService: I18nService, private modalService: ModalService,
         private tokenService: TokenService, private cryptoService: CryptoService,
         private messagingService: MessagingService, private userService: UserService,
         private platformUtilsService: PlatformUtilsService, private broadcasterService: BroadcasterService,
@@ -232,22 +228,15 @@ export class VaultComponent implements OnInit, OnDestroy {
             }
         }
 
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.attachmentsModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModalRef);
-
-        childComponent.cipherId = cipher.id;
         let madeAttachmentChanges = false;
-        childComponent.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
+        const [modal] = await this.modalService.openViewRef(AttachmentsComponent, this.attachmentsModalRef, comp => {
-        childComponent.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
+            comp.cipherId = cipher.id;
-        childComponent.onReuploadedAttachment.subscribe(() => madeAttachmentChanges = true);
+            comp.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
+            comp.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
+            comp.onReuploadedAttachment.subscribe(() => madeAttachmentChanges = true);
+        });
 
-        this.modal.onClosed.subscribe(async () => {
+        modal.onClosed.subscribe(async () => {
-            this.modal = null;
             if (madeAttachmentChanges) {
                 await this.ciphersComponent.refresh();
             }
@@ -255,96 +244,54 @@ export class VaultComponent implements OnInit, OnDestroy {
         });
     }
 
-    shareCipher(cipher: CipherView) {
+    async shareCipher(cipher: CipherView) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(ShareComponent, this.shareModalRef, comp => {
-            this.modal.close();
+            comp.cipherId = cipher.id;
-        }
+            comp.onSharedCipher.subscribe(async () => {
-
+                modal.close();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.shareModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<ShareComponent>(ShareComponent, this.shareModalRef);
-
-        childComponent.cipherId = cipher.id;
-        childComponent.onSharedCipher.subscribe(async () => {
-            this.modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 
-    editCipherCollections(cipher: CipherView) {
+    async editCipherCollections(cipher: CipherView) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(CollectionsComponent, this.collectionsModalRef, comp => {
-            this.modal.close();
+            comp.cipherId = cipher.id;
-        }
+            comp.onSavedCollections.subscribe(async () => {
-
+                modal.close();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.collectionsModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<CollectionsComponent>(CollectionsComponent, this.collectionsModalRef);
-
-        childComponent.cipherId = cipher.id;
-        childComponent.onSavedCollections.subscribe(async () => {
-            this.modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
         });
     }
 
     async addFolder() {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(FolderAddEditComponent, this.folderAddEditModalRef, comp => {
-            this.modal.close();
+            comp.folderId = null;
-        }
+            comp.onSavedFolder.subscribe(async () => {
-
+                modal.close();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.folderAddEditModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<FolderAddEditComponent>(
-            FolderAddEditComponent, this.folderAddEditModalRef);
-
-        childComponent.folderId = null;
-        childComponent.onSavedFolder.subscribe(async () => {
-            this.modal.close();
                 await this.groupingsComponent.loadFolders();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
     async editFolder(folderId: string) {
-        if (this.modal != null) {
+        const [modal] = await this.modalService.openViewRef(FolderAddEditComponent, this.folderAddEditModalRef, comp => {
-            this.modal.close();
+            comp.folderId = folderId;
-        }
+            comp.onSavedFolder.subscribe(async () => {
-
+                modal.close();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.folderAddEditModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<FolderAddEditComponent>(
-            FolderAddEditComponent, this.folderAddEditModalRef);
-
-        childComponent.folderId = folderId;
-        childComponent.onSavedFolder.subscribe(async () => {
-            this.modal.close();
                 await this.groupingsComponent.loadFolders();
             });
-        childComponent.onDeletedFolder.subscribe(async () => {
+            comp.onDeletedFolder.subscribe(async () => {
-            this.modal.close();
+                modal.close();
                 await this.groupingsComponent.loadFolders();
                 await this.filterFolder('none');
                 this.groupingsComponent.selectedFolderId = null;
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
     }
 
-    addCipher() {
+    async addCipher() {
-        const component = this.editCipher(null);
+        const component = await this.editCipher(null);
         component.type = this.type;
         component.folderId = this.folderId === 'none' ? null : this.folderId;
         if (this.collectionId != null) {
@@ -356,54 +303,33 @@ export class VaultComponent implements OnInit, OnDestroy {
         }
     }
 
-    editCipher(cipher: CipherView) {
+    async editCipher(cipher: CipherView) {
-        if (this.modal != null) {
+        const [modal, childComponent] = await this.modalService.openViewRef(AddEditComponent, this.cipherAddEditModalRef, comp => {
-            this.modal.close();
+            comp.cipherId = cipher == null ? null : cipher.id;
-        }
+            comp.onSavedCipher.subscribe(async (c: CipherView) => {
-
+                modal.close();
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<AddEditComponent>(
-            AddEditComponent, this.cipherAddEditModalRef);
-
-        childComponent.cipherId = cipher == null ? null : cipher.id;
-        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
                 await this.ciphersComponent.refresh();
             });
-        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
+            comp.onDeletedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
+                modal.close();
                 await this.ciphersComponent.refresh();
             });
-        childComponent.onRestoredCipher.subscribe(async (c: CipherView) => {
+            comp.onRestoredCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
+                modal.close();
                 await this.ciphersComponent.refresh();
             });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
         });
 
         return childComponent;
     }
 
-    cloneCipher(cipher: CipherView) {
+    async cloneCipher(cipher: CipherView) {
-        const component = this.editCipher(cipher);
+        const component = await this.editCipher(cipher);
         component.cloneMode = true;
     }
 
-    updateKey() {
+    async updateKey() {
-        if (this.modal != null) {
+        await this.modalService.openViewRef(UpdateKeyComponent, this.updateKeyModalRef);
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.updateKeyModalRef.createComponent(factory).instance;
-        this.modal.show<UpdateKeyComponent>(UpdateKeyComponent, this.updateKeyModalRef);
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
     }
 
     private clearFilters() {

src/services/passwordReprompt.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+import { PasswordRepromptService as BasePasswordRepromptService } from 'jslib-angular/services/passwordReprompt.service';
+import { PasswordRepromptComponent } from '../app/components/password-reprompt.component';
+
+@Injectable()
+export class PasswordRepromptService extends BasePasswordRepromptService {
+    component = PasswordRepromptComponent;
+}

src/services/webPlatformUtils.service.ts

@@ -222,32 +222,6 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
         return confirmed.value;
     }
 
-    async showPasswordDialog(title: string, body: string, passwordValidation: (value: string) => Promise<boolean>):
-        Promise<boolean> {
-        const result = await Swal.fire({
-            heightAuto: false,
-            titleText: title,
-            input: 'password',
-            text: body,
-            confirmButtonText: this.i18nService.t('ok'),
-            showCancelButton: true,
-            cancelButtonText: this.i18nService.t('cancel'),
-            inputAttributes: {
-                autocapitalize: 'off',
-                autocorrect: 'off',
-            },
-            inputValidator: async (value: string): Promise<any> => {
-                if (await passwordValidation(value)) {
-                    return false;
-                }
-
-                return this.i18nService.t('invalidMasterPassword');
-            },
-        });
-
-        return result.isConfirmed;
-    }
-
     isDev(): boolean {
         return process.env.NODE_ENV === 'development';
     }