2018-01-16 22:12:26 +01:00
|
|
|
import * as template from './vault.component.html';
|
|
|
|
|
|
|
|
import {
|
|
|
|
Component,
|
2018-01-29 15:33:43 +01:00
|
|
|
ComponentFactoryResolver,
|
2018-01-16 22:12:26 +01:00
|
|
|
OnInit,
|
2018-01-26 21:44:02 +01:00
|
|
|
ViewChild,
|
2018-01-29 15:33:43 +01:00
|
|
|
ViewContainerRef,
|
2018-01-16 22:12:26 +01:00
|
|
|
} from '@angular/core';
|
|
|
|
|
2018-01-25 17:21:08 +01:00
|
|
|
import {
|
|
|
|
ActivatedRoute,
|
|
|
|
Router,
|
|
|
|
} from '@angular/router';
|
|
|
|
|
|
|
|
import { Location } from '@angular/common';
|
|
|
|
|
2018-01-30 05:19:55 +01:00
|
|
|
import { AttachmentsComponent } from './attachments.component';
|
2018-01-29 22:33:38 +01:00
|
|
|
import { AddEditComponent } from './add-edit.component';
|
2018-01-26 21:44:02 +01:00
|
|
|
import { CiphersComponent } from './ciphers.component';
|
2018-01-30 21:40:06 +01:00
|
|
|
import { FolderAddEditComponent } from './folder-add-edit.component';
|
2018-01-27 14:52:39 +01:00
|
|
|
import { GroupingsComponent } from './groupings.component';
|
2018-01-29 15:33:43 +01:00
|
|
|
import { PasswordGeneratorComponent } from './password-generator.component';
|
|
|
|
import { ModalComponent } from '../modal.component';
|
2018-01-23 22:58:32 +01:00
|
|
|
|
2018-01-27 05:32:03 +01:00
|
|
|
import { CipherType } from 'jslib/enums/cipherType';
|
|
|
|
|
2018-01-24 18:20:01 +01:00
|
|
|
import { CipherView } from 'jslib/models/view/cipherView';
|
2018-01-27 05:32:03 +01:00
|
|
|
import { CollectionView } from 'jslib/models/view/collectionView';
|
|
|
|
import { FolderView } from 'jslib/models/view/folderView';
|
2018-01-24 18:20:01 +01:00
|
|
|
|
2018-01-30 03:54:39 +01:00
|
|
|
import { I18nService } from 'jslib/abstractions/i18n.service';
|
|
|
|
|
2018-01-16 22:12:26 +01:00
|
|
|
@Component({
|
|
|
|
selector: 'app-vault',
|
|
|
|
template: template,
|
|
|
|
})
|
|
|
|
export class VaultComponent implements OnInit {
|
2018-01-29 22:33:38 +01:00
|
|
|
@ViewChild(AddEditComponent) addEditComponent: AddEditComponent;
|
2018-01-26 21:44:02 +01:00
|
|
|
@ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
|
2018-01-27 14:52:39 +01:00
|
|
|
@ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
|
2018-01-29 15:33:43 +01:00
|
|
|
@ViewChild('passwordGenerator', { read: ViewContainerRef }) passwordGeneratorModal: ViewContainerRef;
|
2018-01-30 05:19:55 +01:00
|
|
|
@ViewChild('attachments', { read: ViewContainerRef }) attachmentsModal: ViewContainerRef;
|
2018-01-30 21:40:06 +01:00
|
|
|
@ViewChild('folderAddEdit', { read: ViewContainerRef }) folderAddEditModal: ViewContainerRef;
|
2018-01-26 21:44:02 +01:00
|
|
|
|
2018-01-25 17:21:08 +01:00
|
|
|
action: string;
|
2018-01-27 05:56:43 +01:00
|
|
|
cipherId: string = null;
|
|
|
|
favorites: boolean = false;
|
|
|
|
type: CipherType = null;
|
|
|
|
folderId: string = null;
|
|
|
|
collectionId: string = null;
|
2018-01-23 22:58:32 +01:00
|
|
|
|
2018-01-29 15:33:43 +01:00
|
|
|
constructor(private route: ActivatedRoute, private router: Router, private location: Location,
|
2018-01-30 03:54:39 +01:00
|
|
|
private componentFactoryResolver: ComponentFactoryResolver, private i18nService: I18nService) {
|
2018-01-23 22:58:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
async ngOnInit() {
|
2018-01-27 05:56:43 +01:00
|
|
|
this.route.queryParams.subscribe(async (params) => {
|
2018-01-25 17:21:08 +01:00
|
|
|
if (params['cipherId']) {
|
2018-01-26 20:56:54 +01:00
|
|
|
const cipherView = new CipherView();
|
|
|
|
cipherView.id = params['cipherId'];
|
2018-01-25 17:21:08 +01:00
|
|
|
if (params['action'] === 'edit') {
|
2018-01-26 20:56:54 +01:00
|
|
|
this.editCipher(cipherView);
|
2018-01-25 17:21:08 +01:00
|
|
|
} else {
|
2018-01-26 20:56:54 +01:00
|
|
|
this.viewCipher(cipherView);
|
2018-01-25 17:21:08 +01:00
|
|
|
}
|
|
|
|
} else if (params['action'] === 'add') {
|
|
|
|
this.addCipher();
|
|
|
|
}
|
2018-01-27 05:56:43 +01:00
|
|
|
|
|
|
|
if (params['favorites']) {
|
2018-01-27 14:52:39 +01:00
|
|
|
this.groupingsComponent.selectedFavorites = true;
|
2018-01-27 05:56:43 +01:00
|
|
|
await this.filterFavorites();
|
|
|
|
} else if (params['type']) {
|
2018-01-27 14:52:39 +01:00
|
|
|
const t = parseInt(params['type']);
|
|
|
|
this.groupingsComponent.selectedType = t;
|
|
|
|
await this.filterCipherType(t);
|
2018-01-27 05:56:43 +01:00
|
|
|
} else if (params['folderId']) {
|
2018-01-27 14:52:39 +01:00
|
|
|
this.groupingsComponent.selectedFolder = true;
|
|
|
|
this.groupingsComponent.selectedFolderId = params['folderId'];
|
2018-01-27 05:56:43 +01:00
|
|
|
await this.filterFolder(params['folderId']);
|
|
|
|
} else if (params['collectionId']) {
|
2018-01-27 14:52:39 +01:00
|
|
|
this.groupingsComponent.selectedCollectionId = params['collectionId'];
|
2018-01-27 05:56:43 +01:00
|
|
|
await this.filterCollection(params['collectionId']);
|
|
|
|
} else {
|
2018-01-27 14:52:39 +01:00
|
|
|
this.groupingsComponent.selectedAll = true;
|
2018-01-27 05:56:43 +01:00
|
|
|
await this.ciphersComponent.load();
|
|
|
|
}
|
2018-01-25 17:21:08 +01:00
|
|
|
});
|
2018-01-16 22:12:26 +01:00
|
|
|
}
|
2018-01-24 06:06:05 +01:00
|
|
|
|
2018-01-26 20:56:54 +01:00
|
|
|
viewCipher(cipher: CipherView) {
|
|
|
|
if (this.action === 'view' && this.cipherId === cipher.id) {
|
2018-01-25 17:28:52 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-01-26 20:56:54 +01:00
|
|
|
this.cipherId = cipher.id;
|
2018-01-25 17:21:08 +01:00
|
|
|
this.action = 'view';
|
2018-01-27 14:52:39 +01:00
|
|
|
this.go();
|
2018-01-24 06:06:05 +01:00
|
|
|
}
|
2018-01-24 23:41:57 +01:00
|
|
|
|
2018-01-26 20:56:54 +01:00
|
|
|
editCipher(cipher: CipherView) {
|
|
|
|
if (this.action === 'edit' && this.cipherId === cipher.id) {
|
2018-01-25 17:28:52 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-01-26 20:56:54 +01:00
|
|
|
this.cipherId = cipher.id;
|
2018-01-25 17:21:08 +01:00
|
|
|
this.action = 'edit';
|
2018-01-27 14:52:39 +01:00
|
|
|
this.go();
|
2018-01-24 23:41:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
addCipher() {
|
2018-01-25 17:28:52 +01:00
|
|
|
if (this.action === 'add') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-01-25 17:21:08 +01:00
|
|
|
this.action = 'add';
|
2018-01-26 20:56:54 +01:00
|
|
|
this.cipherId = null;
|
2018-01-27 14:52:39 +01:00
|
|
|
this.go();
|
2018-01-26 20:56:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
savedCipher(cipher: CipherView) {
|
|
|
|
this.cipherId = cipher.id;
|
|
|
|
this.action = 'view';
|
2018-01-27 14:52:39 +01:00
|
|
|
this.go();
|
2018-01-26 21:44:02 +01:00
|
|
|
this.ciphersComponent.updateCipher(cipher);
|
2018-01-26 20:56:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
deletedCipher(cipher: CipherView) {
|
2018-01-26 21:44:02 +01:00
|
|
|
this.cipherId = null;
|
|
|
|
this.action = null;
|
2018-01-27 14:52:39 +01:00
|
|
|
this.go();
|
2018-01-26 21:44:02 +01:00
|
|
|
this.ciphersComponent.removeCipher(cipher.id);
|
2018-01-26 20:56:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
editCipherAttachments(cipher: CipherView) {
|
2018-01-30 05:19:55 +01:00
|
|
|
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
|
|
|
const modal = this.attachmentsModal.createComponent(factory).instance;
|
|
|
|
const childComponent = modal.show<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModal);
|
2018-01-26 20:56:54 +01:00
|
|
|
|
2018-01-30 05:19:55 +01:00
|
|
|
childComponent.cipherId = cipher.id;
|
2018-01-26 20:56:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
cancelledAddEdit(cipher: CipherView) {
|
|
|
|
this.cipherId = cipher.id;
|
|
|
|
this.action = this.cipherId != null ? 'view' : null;
|
2018-01-27 14:52:39 +01:00
|
|
|
this.go();
|
2018-01-25 17:21:08 +01:00
|
|
|
}
|
|
|
|
|
2018-01-27 05:32:03 +01:00
|
|
|
async clearGroupingFilters() {
|
2018-01-30 03:54:39 +01:00
|
|
|
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchVault');
|
2018-01-27 05:32:03 +01:00
|
|
|
await this.ciphersComponent.load();
|
2018-01-27 05:56:43 +01:00
|
|
|
this.clearFilters();
|
|
|
|
this.go();
|
2018-01-27 05:32:03 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
async filterFavorites() {
|
2018-01-30 03:54:39 +01:00
|
|
|
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
|
2018-01-27 05:32:03 +01:00
|
|
|
await this.ciphersComponent.load((c) => c.favorite);
|
2018-01-27 05:56:43 +01:00
|
|
|
this.clearFilters();
|
|
|
|
this.favorites = true;
|
|
|
|
this.go();
|
2018-01-27 05:32:03 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
async filterCipherType(type: CipherType) {
|
2018-01-30 03:54:39 +01:00
|
|
|
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchType');
|
2018-01-27 05:32:03 +01:00
|
|
|
await this.ciphersComponent.load((c) => c.type === type);
|
2018-01-27 05:56:43 +01:00
|
|
|
this.clearFilters();
|
|
|
|
this.type = type;
|
|
|
|
this.go();
|
|
|
|
}
|
|
|
|
|
|
|
|
async filterFolder(folderId: string) {
|
|
|
|
folderId = folderId === 'none' ? null : folderId;
|
2018-01-30 03:54:39 +01:00
|
|
|
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchFolder');
|
2018-01-27 05:56:43 +01:00
|
|
|
await this.ciphersComponent.load((c) => c.folderId === folderId);
|
|
|
|
this.clearFilters();
|
|
|
|
this.folderId = folderId == null ? 'none' : folderId;
|
|
|
|
this.go();
|
2018-01-27 05:32:03 +01:00
|
|
|
}
|
|
|
|
|
2018-01-27 05:56:43 +01:00
|
|
|
async filterCollection(collectionId: string) {
|
2018-01-30 03:54:39 +01:00
|
|
|
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchCollection');
|
2018-01-27 05:56:43 +01:00
|
|
|
await this.ciphersComponent.load((c) => c.collectionIds.indexOf(collectionId) > -1);
|
|
|
|
this.clearFilters();
|
|
|
|
this.collectionId = collectionId;
|
|
|
|
this.go();
|
2018-01-27 05:32:03 +01:00
|
|
|
}
|
|
|
|
|
2018-01-29 15:33:43 +01:00
|
|
|
async openPasswordGenerator() {
|
2018-01-30 05:19:55 +01:00
|
|
|
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
|
|
|
const modal = this.passwordGeneratorModal.createComponent(factory).instance;
|
|
|
|
const childComponent = modal.show<PasswordGeneratorComponent>(PasswordGeneratorComponent,
|
2018-01-29 15:33:43 +01:00
|
|
|
this.passwordGeneratorModal);
|
2018-01-29 22:33:38 +01:00
|
|
|
|
2018-01-29 22:13:37 +01:00
|
|
|
childComponent.showSelect = true;
|
2018-01-29 22:33:38 +01:00
|
|
|
childComponent.onSelected.subscribe((password: string) => {
|
|
|
|
modal.close();
|
|
|
|
if (this.addEditComponent != null && this.addEditComponent.cipher != null &&
|
|
|
|
this.addEditComponent.cipher.login != null) {
|
|
|
|
this.addEditComponent.cipher.login.password = password;
|
|
|
|
}
|
|
|
|
});
|
2018-01-29 15:33:43 +01:00
|
|
|
}
|
|
|
|
|
2018-01-30 21:40:06 +01:00
|
|
|
async addFolder() {
|
|
|
|
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
|
|
|
const modal = this.folderAddEditModal.createComponent(factory).instance;
|
|
|
|
const childComponent = modal.show<FolderAddEditComponent>(FolderAddEditComponent, this.folderAddEditModal);
|
|
|
|
|
|
|
|
childComponent.folderId = null;
|
|
|
|
childComponent.onSavedFolder.subscribe(async (folder: FolderView) => {
|
|
|
|
modal.close();
|
|
|
|
await this.groupingsComponent.loadFolders();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
async editFolder(folderId: string) {
|
|
|
|
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
|
|
|
const modal = this.folderAddEditModal.createComponent(factory).instance;
|
|
|
|
const childComponent = modal.show<FolderAddEditComponent>(FolderAddEditComponent, this.folderAddEditModal);
|
|
|
|
|
|
|
|
childComponent.folderId = folderId;
|
|
|
|
childComponent.onSavedFolder.subscribe(async (folder: FolderView) => {
|
|
|
|
modal.close();
|
|
|
|
await this.groupingsComponent.loadFolders();
|
|
|
|
});
|
|
|
|
childComponent.onDeletedFolder.subscribe(async (folder: FolderView) => {
|
|
|
|
modal.close();
|
|
|
|
await this.groupingsComponent.loadFolders();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-01-27 05:56:43 +01:00
|
|
|
private clearFilters() {
|
|
|
|
this.folderId = null;
|
|
|
|
this.collectionId = null;
|
|
|
|
this.favorites = false;
|
|
|
|
this.type = null;
|
2018-01-27 05:32:03 +01:00
|
|
|
}
|
|
|
|
|
2018-01-27 05:56:43 +01:00
|
|
|
private go(queryParams: any = null) {
|
|
|
|
if (queryParams == null) {
|
|
|
|
queryParams = {
|
|
|
|
action: this.action,
|
|
|
|
cipherId: this.cipherId,
|
|
|
|
favorites: this.favorites ? true : null,
|
|
|
|
type: this.type,
|
|
|
|
folderId: this.folderId,
|
|
|
|
collectionId: this.collectionId,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-01-25 17:21:08 +01:00
|
|
|
const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString();
|
|
|
|
this.location.go(url);
|
2018-01-24 23:41:57 +01:00
|
|
|
}
|
2018-01-16 22:12:26 +01:00
|
|
|
}
|