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

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 componentFactoryResolver: ComponentFactoryResolver, private apiService: ApiService,
+    constructor(private modalService: ModalService, private apiService: ApiService,
         private userService: UserService) { }
 
-    deauthorizeSessions() {
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.deauthModalRef.createComponent(factory).instance;
-        this.modal.show<DeauthorizeSessionsComponent>(DeauthorizeSessionsComponent, this.deauthModalRef);
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
-        });
+    async deauthorizeSessions() {
+        await this.modalService.openViewRef(DeauthorizeSessionsComponent, this.deauthModalRef);
     }
 
-    purgeVault() {
-        if (this.modal != null) {
-            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;
-        });
+    async purgeVault() {
+        await this.modalService.openViewRef(PurgeVaultComponent, this.purgeModalRef);
     }
 
-    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 deleteAccount() {
+        await this.modalService.openViewRef(DeleteAccountComponent, this.deleteModalRef);
     }
 
     async viewUserApiKey() {
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.viewUserApiKeyModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.viewUserApiKeyModalRef);
-        childComponent.keyType = 'user';
-        childComponent.entityId = await this.userService.getUserId();
-        childComponent.postKey = this.apiService.postUserApiKey.bind(this.apiService);
-        childComponent.scope = 'api';
-        childComponent.grantType = 'client_credentials';
-        childComponent.apiKeyTitle = 'apiKey';
-        childComponent.apiKeyWarning = 'userApiKeyWarning';
-        childComponent.apiKeyDescription = 'userApiKeyDesc';
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
+        const entityId = await this.userService.getUserId();
+        await this.modalService.openViewRef(ApiKeyComponent, this.viewUserApiKeyModalRef, comp => {
+            comp.keyType = 'user';
+            comp.entityId = entityId;
+            comp.postKey = this.apiService.postUserApiKey.bind(this.apiService);
+            comp.scope = 'api';
+            comp.grantType = 'client_credentials';
+            comp.apiKeyTitle = 'apiKey';
+            comp.apiKeyWarning = 'userApiKeyWarning';
+            comp.apiKeyDescription = 'userApiKeyDesc';
         });
     }
 
     async rotateUserApiKey() {
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.rotateUserApiKeyModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateUserApiKeyModalRef);
-        childComponent.keyType = 'user';
-        childComponent.isRotation = true;
-        childComponent.entityId = await this.userService.getUserId();
-        childComponent.postKey = this.apiService.postUserRotateApiKey.bind(this.apiService);
-        childComponent.scope = 'api';
-        childComponent.grantType = 'client_credentials';
-        childComponent.apiKeyTitle = 'apiKey';
-        childComponent.apiKeyWarning = 'userApiKeyWarning';
-        childComponent.apiKeyDescription = 'apiKeyRotateDesc';
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
+        const entityId = await this.userService.getUserId();
+        await this.modalService.openViewRef(ApiKeyComponent, this.rotateUserApiKeyModalRef, comp => {
+            comp.keyType = 'user';
+            comp.isRotation = true;
+            comp.entityId = entityId;
+            comp.postKey = this.apiService.postUserRotateApiKey.bind(this.apiService);
+            comp.scope = 'api';
+            comp.grantType = 'client_credentials';
+            comp.apiKeyTitle = 'apiKey';
+            comp.apiKeyWarning = 'userApiKeyWarning';
+            comp.apiKeyDescription = 'apiKeyRotateDesc';
         });
     }
 }

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) {
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        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;
+    async selectCipher(cipher: CipherView) {
+        const [_, childComponent] = await this.modalService.openViewRef(EmergencyAddEditComponent, this.cipherAddEditModalRef, comp => {
+            comp.cipherId = cipher == null ? null : cipher.id;
+            comp.cipher = cipher;
         });
 
         return childComponent;
@@ -75,19 +62,9 @@ export class EmergencyAccessViewComponent implements OnInit {
     }
 
     async viewAttachments(cipher: CipherView) {
-        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<EmergencyAccessAttachmentsComponent>(EmergencyAccessAttachmentsComponent, this.attachmentsModalRef);
-
-        childComponent.cipher = cipher;
-        childComponent.emergencyAccessId = this.id;
-
-        this.modal.onClosed.subscribe(async () => {
-            this.modal = null;
+        await this.modalService.openViewRef(EmergencyAccessAttachmentsComponent, this.attachmentsModalRef, comp => {
+            comp.cipher = cipher;
+            comp.emergencyAccessId = this.id;
         });
     }
 

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 platformUtilsService: PlatformUtilsService,
+        private modalService: ModalService, 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) {
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.addEditModalRef.createComponent(factory).instance;
-        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(() => {
-            this.modal.close();
-            this.remove(details);
-        });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
+    async edit(details: EmergencyAccessGranteeDetailsResponse) {
+        const [modal] = await this.modalService.openViewRef(EmergencyAccessAddEditComponent, this.addEditModalRef, comp => {
+            comp.name = this.userNamePipe.transform(details);
+            comp.emergencyAccessId = details?.id;
+            comp.readOnly = !this.canAccessPremium;
+            comp.onSaved.subscribe(() => {
+                modal.close();
+                this.load();
+            });
+            comp.onDeleted.subscribe(() => {
+                modal.close();
+                this.remove(details);
+            });
         });
     }
 
@@ -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) {
-                this.modal.close();
-            }
+            const [modal] = await this.modalService.openViewRef(EmergencyAccessConfirmComponent, this.confirmModalRef, comp => {
+                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);
-            this.modal = this.confirmModalRef.createComponent(factory).instance;
-            const childComponent = this.modal.show<EmergencyAccessConfirmComponent>(
-                EmergencyAccessConfirmComponent, this.confirmModalRef);
+                    comp.formPromise = this.doConfirmation(contact);
+                    await comp.formPromise;
 
-            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;
+                    updateUser();
+                    this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.userNamePipe.transform(contact)));
+                });
             });
             return;
         }
@@ -224,26 +205,15 @@ export class EmergencyAccessComponent implements OnInit {
     }
 
     async takeover(details: EmergencyAccessGrantorDetailsResponse) {
-        if (this.modal != null) {
-            this.modal.close();
-        }
+        const [modal] = await this.modalService.openViewRef(EmergencyAccessTakeoverComponent, this.takeoverModalRef, comp => {
+            comp.name = this.userNamePipe.transform(details);
+            comp.email = details.email;
+            comp.emergencyAccessId = details != null ? details.id : null;
 
-        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.addEditModalRef.createComponent(factory).instance;
-        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;
+            comp.onDone.subscribe(() => {
+                modal.close();
+                this.toasterService.popAsync('success', null, this.i18nService.t('passwordResetFor', this.userNamePipe.transform(details)));
+            });
         });
     }
 

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;
-
-    private modal: ModalComponent = null;
+    modal: ModalRef;
 
     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 {
-        if (this.modal != null) {
-            this.modal.close();
-        }
+    protected async openModal<T>(ref: ViewContainerRef, type: Type<T>): Promise<T> {
+        const [modal, childComponent] = await this.modalService.openViewRef(type, ref);
+        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;
     }