base cipher report component class

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

@@ -0,0 +1,60 @@
+import {
+    ComponentFactoryResolver,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+import { ModalComponent } from '../modal.component';
+import { AddEditComponent } from '../vault/add-edit.component';
+
+export class CipherReportComponent {
+    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
+
+    loading = false;
+    hasLoaded = false;
+    ciphers: CipherView[] = [];
+
+    private modal: ModalComponent = null;
+
+    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
+
+    async load() {
+        this.loading = true;
+        await this.setCiphers();
+        this.loading = false;
+        this.hasLoaded = true;
+    }
+
+    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<AddEditComponent>(
+            AddEditComponent, this.cipherAddEditModalRef);
+
+        childComponent.cipherId = cipher == null ? null : cipher.id;
+        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
+            this.modal.close();
+            await this.load();
+        });
+        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
+            this.modal.close();
+            await this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+
+        return childComponent;
+    }
+
+    protected async setCiphers() {
+        this.ciphers = [];
+    }
+}

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

@@ -1,8 +1,6 @@
 import {
     Component,
     ComponentFactoryResolver,
-    ViewChild,
-    ViewContainerRef,
 } from '@angular/core';
 
 import { AuditService } from 'jslib/abstractions/audit.service';
@@ -12,28 +10,21 @@ import { CipherView } from 'jslib/models/view/cipherView';
 
 import { CipherType } from 'jslib/enums/cipherType';
 
-import { ModalComponent } from '../modal.component';
+import { CipherReportComponent } from './cipher-report.component';
-import { AddEditComponent } from '../vault/add-edit.component';
 
 @Component({
     selector: 'app-exposed-passwords-report',
     templateUrl: 'exposed-passwords-report.component.html',
 })
-export class ExposedPasswordsReportComponent {
+export class ExposedPasswordsReportComponent extends CipherReportComponent {
-    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
-
-    loading = false;
-    hasLoaded = false;
-    ciphers: CipherView[] = [];
     exposedPasswordMap = new Map<string, number>();
 
-    private modal: ModalComponent = null;
-
     constructor(private ciphersService: CipherService, private auditService: AuditService,
-        private componentFactoryResolver: ComponentFactoryResolver) { }
+        componentFactoryResolver: ComponentFactoryResolver) {
+        super(componentFactoryResolver);
+    }
 
-    async load() {
+    async setCiphers() {
-        this.loading = true;
         const allCiphers = await this.ciphersService.getAllDecrypted();
         const exposedPasswordCiphers: CipherView[] = [];
         const promises: Array<Promise<void>> = [];
@@ -51,34 +42,5 @@ export class ExposedPasswordsReportComponent {
         });
         await Promise.all(promises);
         this.ciphers = exposedPasswordCiphers;
-        this.loading = false;
-        this.hasLoaded = true;
-    }
-
-    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<AddEditComponent>(
-            AddEditComponent, this.cipherAddEditModalRef);
-
-        childComponent.cipherId = cipher == null ? null : cipher.id;
-        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
-        return childComponent;
     }
 }

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

@@ -2,8 +2,6 @@ import {
     Component,
     ComponentFactoryResolver,
     OnInit,
-    ViewChild,
-    ViewContainerRef,
 } from '@angular/core';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
@@ -12,34 +10,27 @@ import { CipherView } from 'jslib/models/view/cipherView';
 
 import { CipherType } from 'jslib/enums/cipherType';
 
-import { ModalComponent } from '../modal.component';
-import { AddEditComponent } from '../vault/add-edit.component';
-
 import { Utils } from 'jslib/misc/utils';
 
+import { CipherReportComponent } from './cipher-report.component';
+
 @Component({
     selector: 'app-inactive-two-factor-report',
     templateUrl: 'inactive-two-factor-report.component.html',
 })
-export class InactiveTwoFactorReportComponent implements OnInit {
+export class InactiveTwoFactorReportComponent extends CipherReportComponent implements OnInit {
-    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
-
-    loading = false;
-    hasLoaded = false;
     services = new Map<string, string>();
     cipherDocs = new Map<string, string>();
-    ciphers: CipherView[] = [];
 
-    private modal: ModalComponent = null;
+    constructor(private ciphersService: CipherService, componentFactoryResolver: ComponentFactoryResolver) {
-
+        super(componentFactoryResolver);
-    constructor(private ciphersService: CipherService, private componentFactoryResolver: ComponentFactoryResolver) { }
-
-    async ngOnInit() {
-        await this.load();
     }
 
-    async load() {
+    ngOnInit() {
-        this.loading = true;
+        this.load();
+    }
+
+    async setCiphers() {
         try {
             await this.load2fa();
         } catch { }
@@ -70,35 +61,6 @@ export class InactiveTwoFactorReportComponent implements OnInit {
             this.ciphers = inactive2faCiphers;
             this.cipherDocs = docs;
         }
-        this.loading = false;
-        this.hasLoaded = true;
-    }
-
-    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<AddEditComponent>(
-            AddEditComponent, this.cipherAddEditModalRef);
-
-        childComponent.cipherId = cipher == null ? null : cipher.id;
-        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
-        return childComponent;
     }
 
     private async load2fa() {

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

@@ -2,8 +2,6 @@ import {
     Component,
     ComponentFactoryResolver,
     OnInit,
-    ViewChild,
-    ViewContainerRef,
 } from '@angular/core';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
@@ -12,31 +10,24 @@ import { CipherView } from 'jslib/models/view/cipherView';
 
 import { CipherType } from 'jslib/enums/cipherType';
 
-import { ModalComponent } from '../modal.component';
+import { CipherReportComponent } from './cipher-report.component';
-import { AddEditComponent } from '../vault/add-edit.component';
 
 @Component({
     selector: 'app-reused-passwords-report',
     templateUrl: 'reused-passwords-report.component.html',
 })
-export class ReusedPasswordsReportComponent implements OnInit {
+export class ReusedPasswordsReportComponent extends CipherReportComponent implements OnInit {
-    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
-
-    loading = true;
-    hasLoaded = false;
-    ciphers: CipherView[] = [];
     passwordUseMap: Map<string, number>;
 
-    private modal: ModalComponent = null;
+    constructor(private ciphersService: CipherService, componentFactoryResolver: ComponentFactoryResolver) {
-
+        super(componentFactoryResolver);
-    constructor(private ciphersService: CipherService, private componentFactoryResolver: ComponentFactoryResolver) { }
-
-    async ngOnInit() {
-        await this.load();
     }
 
-    async load() {
+    ngOnInit() {
-        this.loading = true;
+        this.load();
+    }
+
+    async setCiphers() {
         const allCiphers = await this.ciphersService.getAllDecrypted();
         const ciphersWithPasswords: CipherView[] = [];
         this.passwordUseMap = new Map<string, number>();
@@ -54,34 +45,5 @@ export class ReusedPasswordsReportComponent implements OnInit {
         const reusedPasswordCiphers = ciphersWithPasswords.filter((c) =>
             this.passwordUseMap.has(c.login.password) && this.passwordUseMap.get(c.login.password) > 1);
         this.ciphers = reusedPasswordCiphers;
-        this.loading = false;
-        this.hasLoaded = true;
-    }
-
-    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<AddEditComponent>(
-            AddEditComponent, this.cipherAddEditModalRef);
-
-        childComponent.cipherId = cipher == null ? null : cipher.id;
-        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
-        return childComponent;
     }
 }

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

@@ -2,40 +2,28 @@ import {
     Component,
     ComponentFactoryResolver,
     OnInit,
-    ViewChild,
-    ViewContainerRef,
 } from '@angular/core';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
 
-import { CipherView } from 'jslib/models/view/cipherView';
-
 import { CipherType } from 'jslib/enums/cipherType';
 
-import { ModalComponent } from '../modal.component';
+import { CipherReportComponent } from './cipher-report.component';
-import { AddEditComponent } from '../vault/add-edit.component';
 
 @Component({
     selector: 'app-unsecured-websites-report',
     templateUrl: 'unsecured-websites-report.component.html',
 })
-export class UnsecuredWebsitesReportComponent implements OnInit {
+export class UnsecuredWebsitesReportComponent extends CipherReportComponent implements OnInit {
-    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
+    constructor(private ciphersService: CipherService, componentFactoryResolver: ComponentFactoryResolver) {
-
+        super(componentFactoryResolver);
-    loading = true;
-    hasLoaded = false;
-    ciphers: CipherView[] = [];
-
-    private modal: ModalComponent = null;
-
-    constructor(private ciphersService: CipherService, private componentFactoryResolver: ComponentFactoryResolver) { }
-
-    async ngOnInit() {
-        await this.load();
     }
 
-    async load() {
+    ngOnInit() {
-        this.loading = true;
+        this.load();
+    }
+
+    async setCiphers() {
         const allCiphers = await this.ciphersService.getAllDecrypted();
         const unsecuredCiphers = allCiphers.filter((c) => {
             if (c.type !== CipherType.Login || !c.login.hasUris) {
@@ -44,34 +32,5 @@ export class UnsecuredWebsitesReportComponent implements OnInit {
             return c.login.uris.find((u) => u.uri.indexOf('http://') === 0) != null;
         });
         this.ciphers = unsecuredCiphers;
-        this.loading = false;
-        this.hasLoaded = true;
-    }
-
-    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<AddEditComponent>(
-            AddEditComponent, this.cipherAddEditModalRef);
-
-        childComponent.cipherId = cipher == null ? null : cipher.id;
-        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
-        return childComponent;
     }
 }

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

@@ -2,8 +2,6 @@ import {
     Component,
     ComponentFactoryResolver,
     OnInit,
-    ViewChild,
-    ViewContainerRef,
 } from '@angular/core';
 
 import { CipherService } from 'jslib/abstractions/cipher.service';
@@ -13,32 +11,25 @@ import { CipherView } from 'jslib/models/view/cipherView';
 
 import { CipherType } from 'jslib/enums/cipherType';
 
-import { ModalComponent } from '../modal.component';
+import { CipherReportComponent } from './cipher-report.component';
-import { AddEditComponent } from '../vault/add-edit.component';
 
 @Component({
     selector: 'app-weak-passwords-report',
     templateUrl: 'weak-passwords-report.component.html',
 })
-export class WeakPasswordsReportComponent implements OnInit {
+export class WeakPasswordsReportComponent extends CipherReportComponent implements OnInit {
-    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
-
-    loading = true;
-    hasLoaded = false;
-    ciphers: CipherView[] = [];
     passwordStrengthMap = new Map<string, [string, string]>();
 
-    private modal: ModalComponent = null;
-
     constructor(private ciphersService: CipherService, private passwordGenerationService: PasswordGenerationService,
-        private componentFactoryResolver: ComponentFactoryResolver) { }
+        componentFactoryResolver: ComponentFactoryResolver) {
-
+        super(componentFactoryResolver);
-    async ngOnInit() {
-        await this.load();
     }
 
-    async load() {
+    ngOnInit() {
-        this.loading = true;
+        this.load();
+    }
+
+    async setCiphers() {
         const allCiphers = await this.ciphersService.getAllDecrypted();
         const weakPasswordCiphers: CipherView[] = [];
         allCiphers.forEach((c) => {
@@ -52,35 +43,6 @@ export class WeakPasswordsReportComponent implements OnInit {
             }
         });
         this.ciphers = weakPasswordCiphers;
-        this.loading = false;
-        this.hasLoaded = true;
-    }
-
-    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<AddEditComponent>(
-            AddEditComponent, this.cipherAddEditModalRef);
-
-        childComponent.cipherId = cipher == null ? null : cipher.id;
-        childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-        childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
-            this.modal.close();
-            await this.load();
-        });
-
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
-        return childComponent;
     }
 
     private scoreKey(score: number): [string, string] {