2018-06-06 23:25:57 +02:00
|
|
|
import { Location } from '@angular/common';
|
2018-06-05 05:10:41 +02:00
|
|
|
import {
|
|
|
|
Component,
|
2018-06-06 23:25:57 +02:00
|
|
|
ComponentFactoryResolver,
|
|
|
|
OnInit,
|
|
|
|
ViewChild,
|
|
|
|
ViewContainerRef,
|
2018-06-05 05:10:41 +02:00
|
|
|
} from '@angular/core';
|
2018-06-06 23:25:57 +02:00
|
|
|
import {
|
|
|
|
ActivatedRoute,
|
|
|
|
Router,
|
|
|
|
} from '@angular/router';
|
2018-06-05 05:10:41 +02:00
|
|
|
|
2018-06-05 19:31:25 +02:00
|
|
|
import { CipherType } from 'jslib/enums/cipherType';
|
|
|
|
|
2018-06-06 23:25:57 +02:00
|
|
|
import { CipherView } from 'jslib/models/view/cipherView';
|
|
|
|
|
|
|
|
import { ModalComponent } from '../modal.component';
|
|
|
|
|
2018-06-07 05:23:14 +02:00
|
|
|
import { AddEditComponent } from './add-edit.component';
|
2018-06-06 23:25:57 +02:00
|
|
|
import { AttachmentsComponent } from './attachments.component';
|
2018-06-12 23:11:24 +02:00
|
|
|
import { BulkDeleteComponent } from './bulk-delete.component';
|
2018-06-06 23:25:57 +02:00
|
|
|
import { CiphersComponent } from './ciphers.component';
|
2018-06-12 19:08:47 +02:00
|
|
|
import { CollectionsComponent } from './collections.component';
|
2018-06-06 23:25:57 +02:00
|
|
|
import { FolderAddEditComponent } from './folder-add-edit.component';
|
|
|
|
import { GroupingsComponent } from './groupings.component';
|
2018-06-12 19:08:47 +02:00
|
|
|
import { ShareComponent } from './share.component';
|
2018-06-06 23:25:57 +02:00
|
|
|
|
|
|
|
import { I18nService } from 'jslib/abstractions/i18n.service';
|
|
|
|
import { SyncService } from 'jslib/abstractions/sync.service';
|
2018-06-12 23:33:08 +02:00
|
|
|
import { BulkMoveComponent } from './bulk-move.component';
|
2018-06-13 06:03:48 +02:00
|
|
|
import { BulkShareComponent } from './bulk-share.component';
|
2018-06-06 23:25:57 +02:00
|
|
|
|
2018-06-05 05:10:41 +02:00
|
|
|
@Component({
|
|
|
|
selector: 'app-vault',
|
|
|
|
templateUrl: 'vault.component.html',
|
|
|
|
})
|
2018-06-06 23:25:57 +02:00
|
|
|
export class VaultComponent implements OnInit {
|
|
|
|
@ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
|
|
|
|
@ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
|
|
|
|
@ViewChild('attachments', { read: ViewContainerRef }) attachmentsModalRef: ViewContainerRef;
|
|
|
|
@ViewChild('folderAddEdit', { read: ViewContainerRef }) folderAddEditModalRef: ViewContainerRef;
|
2018-06-12 17:46:11 +02:00
|
|
|
@ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
|
|
|
|
@ViewChild('share', { read: ViewContainerRef }) shareModalRef: ViewContainerRef;
|
|
|
|
@ViewChild('collections', { read: ViewContainerRef }) collectionsModalRef: ViewContainerRef;
|
2018-06-12 23:11:24 +02:00
|
|
|
@ViewChild('bulkDeleteTemplate', { read: ViewContainerRef }) bulkDeleteModalRef: ViewContainerRef;
|
2018-06-12 23:33:08 +02:00
|
|
|
@ViewChild('bulkMoveTemplate', { read: ViewContainerRef }) bulkMoveModalRef: ViewContainerRef;
|
2018-06-13 06:03:48 +02:00
|
|
|
@ViewChild('bulkShareTemplate', { read: ViewContainerRef }) bulkShareModalRef: ViewContainerRef;
|
2018-06-06 23:25:57 +02:00
|
|
|
|
|
|
|
favorites: boolean = false;
|
|
|
|
type: CipherType = null;
|
|
|
|
folderId: string = null;
|
|
|
|
collectionId: string = null;
|
|
|
|
|
|
|
|
private modal: ModalComponent = null;
|
|
|
|
|
|
|
|
constructor(private syncService: SyncService, private route: ActivatedRoute,
|
|
|
|
private router: Router, private location: Location,
|
|
|
|
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver) { }
|
|
|
|
|
|
|
|
async ngOnInit() {
|
|
|
|
this.route.queryParams.subscribe(async (params) => {
|
2018-06-26 18:03:11 +02:00
|
|
|
await this.syncService.fullSync(false);
|
2018-07-04 05:33:12 +02:00
|
|
|
await this.groupingsComponent.load();
|
2018-06-06 23:25:57 +02:00
|
|
|
|
|
|
|
if (params == null) {
|
|
|
|
this.groupingsComponent.selectedAll = true;
|
|
|
|
await this.ciphersComponent.load();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (params.favorites) {
|
|
|
|
this.groupingsComponent.selectedFavorites = true;
|
|
|
|
await this.filterFavorites();
|
|
|
|
} else if (params.type) {
|
|
|
|
const t = parseInt(params.type, null);
|
|
|
|
this.groupingsComponent.selectedType = t;
|
|
|
|
await this.filterCipherType(t);
|
|
|
|
} else if (params.folderId) {
|
|
|
|
this.groupingsComponent.selectedFolder = true;
|
|
|
|
this.groupingsComponent.selectedFolderId = params.folderId;
|
|
|
|
await this.filterFolder(params.folderId);
|
|
|
|
} else if (params.collectionId) {
|
|
|
|
this.groupingsComponent.selectedCollectionId = params.collectionId;
|
|
|
|
await this.filterCollection(params.collectionId);
|
|
|
|
} else {
|
|
|
|
this.groupingsComponent.selectedAll = true;
|
|
|
|
await this.ciphersComponent.load();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
async clearGroupingFilters() {
|
2018-07-04 15:55:52 +02:00
|
|
|
this.ciphersComponent.showAddNew = true;
|
2018-06-07 15:05:25 +02:00
|
|
|
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchVault');
|
2018-06-06 23:25:57 +02:00
|
|
|
await this.ciphersComponent.load();
|
|
|
|
this.clearFilters();
|
|
|
|
this.go();
|
|
|
|
}
|
|
|
|
|
|
|
|
async filterFavorites() {
|
2018-07-04 15:55:52 +02:00
|
|
|
this.ciphersComponent.showAddNew = true;
|
2018-06-07 15:05:25 +02:00
|
|
|
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
|
2018-06-06 23:25:57 +02:00
|
|
|
await this.ciphersComponent.load((c) => c.favorite);
|
|
|
|
this.clearFilters();
|
|
|
|
this.favorites = true;
|
|
|
|
this.go();
|
|
|
|
}
|
|
|
|
|
|
|
|
async filterCipherType(type: CipherType) {
|
2018-07-04 15:55:52 +02:00
|
|
|
this.ciphersComponent.showAddNew = true;
|
2018-06-07 15:05:25 +02:00
|
|
|
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchType');
|
2018-06-06 23:25:57 +02:00
|
|
|
await this.ciphersComponent.load((c) => c.type === type);
|
|
|
|
this.clearFilters();
|
|
|
|
this.type = type;
|
|
|
|
this.go();
|
|
|
|
}
|
|
|
|
|
|
|
|
async filterFolder(folderId: string) {
|
2018-07-04 15:55:52 +02:00
|
|
|
this.ciphersComponent.showAddNew = true;
|
2018-06-06 23:25:57 +02:00
|
|
|
folderId = folderId === 'none' ? null : folderId;
|
2018-06-07 15:05:25 +02:00
|
|
|
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchFolder');
|
2018-06-06 23:25:57 +02:00
|
|
|
await this.ciphersComponent.load((c) => c.folderId === folderId);
|
|
|
|
this.clearFilters();
|
|
|
|
this.folderId = folderId == null ? 'none' : folderId;
|
|
|
|
this.go();
|
|
|
|
}
|
|
|
|
|
|
|
|
async filterCollection(collectionId: string) {
|
2018-07-04 15:55:52 +02:00
|
|
|
this.ciphersComponent.showAddNew = false;
|
2018-06-07 15:05:25 +02:00
|
|
|
this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchCollection');
|
2018-06-06 23:25:57 +02:00
|
|
|
await this.ciphersComponent.load((c) => c.collectionIds.indexOf(collectionId) > -1);
|
|
|
|
this.clearFilters();
|
|
|
|
this.collectionId = collectionId;
|
|
|
|
this.go();
|
|
|
|
}
|
|
|
|
|
2018-06-07 05:00:57 +02:00
|
|
|
filterSearchText(searchText: string) {
|
|
|
|
this.ciphersComponent.searchText = searchText;
|
|
|
|
}
|
|
|
|
|
2018-06-06 23:25:57 +02:00
|
|
|
editCipherAttachments(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<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModalRef);
|
|
|
|
|
|
|
|
childComponent.cipherId = cipher.id;
|
2018-06-09 19:29:30 +02:00
|
|
|
let madeAttachmentChanges = false;
|
|
|
|
childComponent.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
|
|
|
|
childComponent.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
|
2018-06-06 23:25:57 +02:00
|
|
|
|
2018-06-09 19:29:30 +02:00
|
|
|
this.modal.onClosed.subscribe(async () => {
|
2018-06-06 23:25:57 +02:00
|
|
|
this.modal = null;
|
2018-06-09 19:29:30 +02:00
|
|
|
if (madeAttachmentChanges) {
|
|
|
|
await this.ciphersComponent.refresh();
|
|
|
|
}
|
|
|
|
madeAttachmentChanges = false;
|
2018-06-06 23:25:57 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-06-12 17:46:11 +02:00
|
|
|
shareCipher(cipher: CipherView) {
|
|
|
|
if (this.modal != null) {
|
|
|
|
this.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;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-06-12 19:08:47 +02:00
|
|
|
editCipherCollections(cipher: CipherView) {
|
|
|
|
if (this.modal != null) {
|
|
|
|
this.modal.close();
|
|
|
|
}
|
|
|
|
|
|
|
|
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
2018-06-20 22:28:56 +02:00
|
|
|
this.modal = this.collectionsModalRef.createComponent(factory).instance;
|
2018-06-12 19:08:47 +02:00
|
|
|
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;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-06-06 23:25:57 +02:00
|
|
|
async addFolder() {
|
|
|
|
if (this.modal != null) {
|
|
|
|
this.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;
|
2018-06-25 21:20:45 +02:00
|
|
|
childComponent.onSavedFolder.subscribe(async () => {
|
2018-06-06 23:25:57 +02:00
|
|
|
this.modal.close();
|
|
|
|
await this.groupingsComponent.loadFolders();
|
|
|
|
});
|
|
|
|
|
|
|
|
this.modal.onClosed.subscribe(() => {
|
|
|
|
this.modal = null;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
async editFolder(folderId: string) {
|
|
|
|
if (this.modal != null) {
|
|
|
|
this.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;
|
2018-06-25 21:20:45 +02:00
|
|
|
childComponent.onSavedFolder.subscribe(async () => {
|
2018-06-06 23:25:57 +02:00
|
|
|
this.modal.close();
|
|
|
|
await this.groupingsComponent.loadFolders();
|
|
|
|
});
|
2018-06-25 21:20:45 +02:00
|
|
|
childComponent.onDeletedFolder.subscribe(async () => {
|
2018-06-06 23:25:57 +02:00
|
|
|
this.modal.close();
|
|
|
|
await this.groupingsComponent.loadFolders();
|
2018-06-25 21:20:45 +02:00
|
|
|
await this.filterFolder('none');
|
|
|
|
this.groupingsComponent.selectedFolderId = null;
|
2018-06-06 23:25:57 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
this.modal.onClosed.subscribe(() => {
|
|
|
|
this.modal = null;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-06-07 05:23:14 +02:00
|
|
|
addCipher() {
|
|
|
|
const component = this.editCipher(null);
|
|
|
|
component.type = this.type;
|
|
|
|
component.folderId = this.folderId === 'none' ? null : this.folderId;
|
|
|
|
}
|
|
|
|
|
|
|
|
editCipher(cipher: CipherView) {
|
|
|
|
if (this.modal != null) {
|
|
|
|
this.modal.close();
|
|
|
|
}
|
|
|
|
|
|
|
|
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
2018-06-12 17:46:11 +02:00
|
|
|
this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
|
2018-06-07 05:23:14 +02:00
|
|
|
const childComponent = this.modal.show<AddEditComponent>(
|
2018-06-12 17:46:11 +02:00
|
|
|
AddEditComponent, this.cipherAddEditModalRef);
|
2018-06-07 05:23:14 +02:00
|
|
|
|
|
|
|
childComponent.cipherId = cipher == null ? null : cipher.id;
|
2018-06-08 18:04:03 +02:00
|
|
|
childComponent.onSavedCipher.subscribe(async (c: CipherView) => {
|
2018-06-07 05:23:14 +02:00
|
|
|
this.modal.close();
|
2018-06-08 20:56:26 +02:00
|
|
|
await this.ciphersComponent.refresh();
|
2018-06-07 05:23:14 +02:00
|
|
|
});
|
2018-06-08 18:04:03 +02:00
|
|
|
childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
|
2018-06-07 05:23:14 +02:00
|
|
|
this.modal.close();
|
2018-06-08 20:56:26 +02:00
|
|
|
await this.ciphersComponent.refresh();
|
2018-06-07 05:23:14 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
this.modal.onClosed.subscribe(() => {
|
|
|
|
this.modal = null;
|
|
|
|
});
|
|
|
|
|
|
|
|
return childComponent;
|
|
|
|
}
|
|
|
|
|
2018-06-12 23:11:24 +02:00
|
|
|
bulkDelete() {
|
|
|
|
if (this.modal != null) {
|
|
|
|
this.modal.close();
|
|
|
|
}
|
|
|
|
|
|
|
|
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
|
|
|
this.modal = this.bulkDeleteModalRef.createComponent(factory).instance;
|
2018-06-12 23:33:08 +02:00
|
|
|
const childComponent = this.modal.show<BulkDeleteComponent>(BulkDeleteComponent, this.bulkDeleteModalRef);
|
2018-06-12 23:11:24 +02:00
|
|
|
|
2018-06-13 06:03:48 +02:00
|
|
|
childComponent.cipherIds = this.ciphersComponent.getSelectedIds();
|
2018-06-12 23:11:24 +02:00
|
|
|
childComponent.onDeleted.subscribe(async () => {
|
|
|
|
this.modal.close();
|
|
|
|
await this.ciphersComponent.refresh();
|
|
|
|
});
|
|
|
|
|
|
|
|
this.modal.onClosed.subscribe(() => {
|
|
|
|
this.modal = null;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
bulkShare() {
|
2018-06-13 06:03:48 +02:00
|
|
|
if (this.modal != null) {
|
|
|
|
this.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 = this.ciphersComponent.getSelected();
|
|
|
|
childComponent.onShared.subscribe(async () => {
|
|
|
|
this.modal.close();
|
|
|
|
await this.ciphersComponent.refresh();
|
|
|
|
});
|
|
|
|
|
|
|
|
this.modal.onClosed.subscribe(async () => {
|
|
|
|
this.modal = null;
|
|
|
|
});
|
2018-06-12 23:11:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
bulkMove() {
|
2018-06-12 23:33:08 +02:00
|
|
|
if (this.modal != null) {
|
|
|
|
this.modal.close();
|
|
|
|
}
|
|
|
|
|
|
|
|
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
|
|
|
this.modal = this.bulkMoveModalRef.createComponent(factory).instance;
|
|
|
|
const childComponent = this.modal.show<BulkMoveComponent>(BulkMoveComponent, this.bulkMoveModalRef);
|
|
|
|
|
2018-06-13 06:03:48 +02:00
|
|
|
childComponent.cipherIds = this.ciphersComponent.getSelectedIds();
|
2018-06-12 23:33:08 +02:00
|
|
|
childComponent.onMoved.subscribe(async () => {
|
|
|
|
this.modal.close();
|
|
|
|
await this.ciphersComponent.refresh();
|
|
|
|
});
|
|
|
|
|
|
|
|
this.modal.onClosed.subscribe(() => {
|
|
|
|
this.modal = null;
|
|
|
|
});
|
2018-06-12 23:11:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
selectAll(select: boolean) {
|
|
|
|
this.ciphersComponent.selectAll(select);
|
|
|
|
}
|
|
|
|
|
2018-06-06 23:25:57 +02:00
|
|
|
private clearFilters() {
|
|
|
|
this.folderId = null;
|
|
|
|
this.collectionId = null;
|
|
|
|
this.favorites = false;
|
|
|
|
this.type = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
private go(queryParams: any = null) {
|
|
|
|
if (queryParams == null) {
|
|
|
|
queryParams = {
|
|
|
|
favorites: this.favorites ? true : null,
|
|
|
|
type: this.type,
|
|
|
|
folderId: this.folderId,
|
|
|
|
collectionId: this.collectionId,
|
|
|
|
};
|
|
|
|
}
|
2018-06-05 05:10:41 +02:00
|
|
|
|
2018-06-06 23:25:57 +02:00
|
|
|
const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString();
|
|
|
|
this.location.go(url);
|
|
|
|
}
|
2018-06-05 05:10:41 +02:00
|
|
|
}
|