bitwarden-estensione-browser/src/app/vault/vault.component.ts

244 lines
8.5 KiB
TypeScript
Raw Normal View History

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 { FolderView } from 'jslib/models/view/folderView';
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';
import { CiphersComponent } from './ciphers.component';
import { FolderAddEditComponent } from './folder-add-edit.component';
import { GroupingsComponent } from './groupings.component';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { SyncService } from 'jslib/abstractions/sync.service';
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-07 05:23:14 +02:00
@ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditRef: ViewContainerRef;
2018-06-06 23:25:57 +02:00
cipherId: string = null;
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) => {
await this.syncService.fullSync(true);
await this.groupingsComponent.load();
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() {
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchVault');
await this.ciphersComponent.load();
this.clearFilters();
this.go();
}
async filterFavorites() {
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchFavorites');
await this.ciphersComponent.load((c) => c.favorite);
this.clearFilters();
this.favorites = true;
this.go();
}
async filterCipherType(type: CipherType) {
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchType');
await this.ciphersComponent.load((c) => c.type === type);
this.clearFilters();
this.type = type;
this.go();
}
async filterFolder(folderId: string) {
folderId = folderId === 'none' ? null : folderId;
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchFolder');
await this.ciphersComponent.load((c) => c.folderId === folderId);
this.clearFilters();
this.folderId = folderId == null ? 'none' : folderId;
this.go();
}
async filterCollection(collectionId: string) {
this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchCollection');
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;
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
}
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;
childComponent.onSavedFolder.subscribe(async (folder: FolderView) => {
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;
childComponent.onSavedFolder.subscribe(async (folder: FolderView) => {
this.modal.close();
await this.groupingsComponent.loadFolders();
});
childComponent.onDeletedFolder.subscribe(async (folder: FolderView) => {
this.modal.close();
await this.groupingsComponent.loadFolders();
});
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);
this.modal = this.cipherAddEditRef.createComponent(factory).instance;
const childComponent = this.modal.show<AddEditComponent>(
AddEditComponent, this.cipherAddEditRef);
childComponent.cipherId = cipher == null ? null : cipher.id;
childComponent.onSavedCipher.subscribe(async (cipher: CipherView) => {
this.modal.close();
});
childComponent.onDeletedCipher.subscribe(async (cipher: CipherView) => {
this.modal.close();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
return childComponent;
}
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 = {
cipherId: this.cipherId,
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
}