diff --git a/package-lock.json b/package-lock.json index bac47810..85f3155a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -165,6 +165,12 @@ "debug": "2.6.9" } }, + "@types/jquery": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.2.tgz", + "integrity": "sha512-ByZwKSEqteAta4VrIalqGJZmMq9lWPD3H3f5Xs6RR8B7zQRDPGUtjoKBYNtKTz/7LgBEQMdlxVbbjQfUaEIItA==", + "dev": true + }, "@types/lunr": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@types/lunr/-/lunr-2.1.5.tgz", diff --git a/package.json b/package.json index 1c85e2bf..7f9c5c67 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "devDependencies": { "@angular/compiler-cli": "5.2.0", "@ngtools/webpack": "1.10.2", + "@types/jquery": "^3.3.2", "@types/lunr": "2.1.5", "@types/node": "8.0.19", "@types/node-forge": "0.6.10", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 92bbea49..31021126 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ServicesModule } from './services.module'; import { AppComponent } from './app.component'; +import { ModalComponent } from './modal.component'; import { HintComponent } from './accounts/hint.component'; import { LoginComponent } from './accounts/login.component'; @@ -22,6 +23,10 @@ import { RegisterComponent } from './accounts/register.component'; import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component'; import { TwoFactorComponent } from './accounts/two-factor.component'; +import { AttachmentsComponent } from './vault/attachments.component'; +import { CiphersComponent } from './vault/ciphers.component'; +import { FolderAddEditComponent } from './vault/folder-add-edit.component'; +import { GroupingsComponent } from './vault/groupings.component'; import { VaultComponent } from './vault/vault.component'; import { IconComponent } from 'jslib/angular/components/icon.component'; @@ -37,6 +42,7 @@ import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive' import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe'; import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; +import { Folder } from 'jslib/models/domain'; @NgModule({ imports: [ @@ -55,15 +61,20 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; declarations: [ ApiActionDirective, AppComponent, + AttachmentsComponent, AutofocusDirective, BlurClickDirective, BoxRowDirective, + CiphersComponent, FallbackSrcDirective, + FolderAddEditComponent, + GroupingsComponent, HintComponent, IconComponent, I18nPipe, InputVerbatimDirective, LoginComponent, + ModalComponent, RegisterComponent, SearchCiphersPipe, StopClickDirective, @@ -73,7 +84,9 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe'; VaultComponent, ], entryComponents: [ - + AttachmentsComponent, + FolderAddEditComponent, + ModalComponent, ], providers: [], bootstrap: [AppComponent], diff --git a/src/app/modal.component.ts b/src/app/modal.component.ts new file mode 100644 index 00000000..51d040ad --- /dev/null +++ b/src/app/modal.component.ts @@ -0,0 +1,62 @@ +import * as jq from 'jquery'; + +import { + Component, + ComponentFactoryResolver, + Type, + ViewContainerRef, +} from '@angular/core'; + +import { ModalComponent as BaseModalComponent } from 'jslib/angular/components/modal.component'; + +@Component({ + selector: 'app-modal', + template: ``, +}) +export class ModalComponent extends BaseModalComponent { + el: any = null; + + constructor(componentFactoryResolver: ComponentFactoryResolver) { + super(componentFactoryResolver); + } + + ngOnDestroy() { /* Nothing */ } + + show(type: Type, parentContainer: ViewContainerRef, fade: boolean = true): T { + this.parentContainer = parentContainer; + this.fade = fade; + + const factory = this.componentFactoryResolver.resolveComponentFactory(type); + const componentRef = this.container.createComponent(factory); + + const modals = Array.from(document.querySelectorAll('.modal')); + if (modals.length > 0) { + this.el = jq(modals[0]); + this.el.modal('show'); + + this.el.on('show.bs.modal', () => { + this.onShow.emit(); + }); + this.el.on('shown.bs.modal', () => { + this.onShown.emit(); + }); + this.el.on('hide.bs.modal', () => { + this.onClose.emit(); + }); + this.el.on('hidden.bs.modal', () => { + this.onClosed.emit(); + if (this.parentContainer != null) { + this.parentContainer.clear(); + } + }); + } + + return componentRef.instance; + } + + close() { + if (this.el != null) { + this.el.modal('hide'); + } + } +} diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html new file mode 100644 index 00000000..4a619fb8 --- /dev/null +++ b/src/app/vault/add-edit.component.html @@ -0,0 +1,309 @@ +
+
+
+
+
+ {{title}} +
+
+
+ + +
+
+ + +
+ +
+
+ + +
+
+
+ + +
+
+ + + + + + + +
+
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+ + + +
+ + + + +
+
+ + + +
+
+ + + {{'newUri' | i18n}} + +
+
+
+
+
+ + +
+
+ + +
+ +
{{'attachments' | i18n}}
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ {{'customFields' | i18n}} +
+
+ +
+ + + + + +
+ + + +
+ +
+ + + +
+
+ +
+ + {{'newCustomField' | i18n}} + + + +
+
+
+
+
+
+ + +
+ +
+
+
diff --git a/src/app/vault/add-edit.component.ts b/src/app/vault/add-edit.component.ts new file mode 100644 index 00000000..132f94d2 --- /dev/null +++ b/src/app/vault/add-edit.component.ts @@ -0,0 +1,34 @@ +import { + Component, + OnChanges, +} from '@angular/core'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { AuditService } from 'jslib/abstractions/audit.service'; +import { CipherService } from 'jslib/abstractions/cipher.service'; +import { FolderService } from 'jslib/abstractions/folder.service'; +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; +import { StateService } from 'jslib/abstractions/state.service'; + +import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/components/add-edit.component'; + +@Component({ + selector: 'app-vault-add-edit', + templateUrl: 'add-edit.component.html', +}) +export class AddEditComponent extends BaseAddEditComponent implements OnChanges { + constructor(cipherService: CipherService, folderService: FolderService, + i18nService: I18nService, platformUtilsService: PlatformUtilsService, + analytics: Angulartics2, toasterService: ToasterService, + auditService: AuditService, stateService: StateService) { + super(cipherService, folderService, i18nService, platformUtilsService, analytics, + toasterService, auditService, stateService); + } + + async ngOnChanges() { + await super.load(); + } +} diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html new file mode 100644 index 00000000..86394e86 --- /dev/null +++ b/src/app/vault/attachments.component.html @@ -0,0 +1,50 @@ +
+
+
+
+
+
+ {{'attachments' | i18n}} +
+
+
+
+ {{a.fileName}} +
+ {{a.sizeName}} +
+ +
+
+
+
+
+
+ {{'newAttachment' | i18n}} +
+
+
+ + +
+
+
+ {{'maxFileSize' | i18n}} +
+
+
+
+ + +
+
+
+
diff --git a/src/app/vault/attachments.component.ts b/src/app/vault/attachments.component.ts new file mode 100644 index 00000000..279b1623 --- /dev/null +++ b/src/app/vault/attachments.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { CipherService } from 'jslib/abstractions/cipher.service'; +import { CryptoService } from 'jslib/abstractions/crypto.service'; +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; +import { TokenService } from 'jslib/abstractions/token.service'; + +import { AttachmentsComponent as BaseAttachmentsComponent } from 'jslib/angular/components/attachments.component'; + +@Component({ + selector: 'app-vault-attachments', + templateUrl: 'attachments.component.html', +}) +export class AttachmentsComponent extends BaseAttachmentsComponent { + constructor(cipherService: CipherService, analytics: Angulartics2, + toasterService: ToasterService, i18nService: I18nService, + cryptoService: CryptoService, tokenService: TokenService, + platformUtilsService: PlatformUtilsService) { + super(cipherService, analytics, toasterService, i18nService, cryptoService, tokenService, + platformUtilsService); + } +} diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html new file mode 100644 index 00000000..734ebaf1 --- /dev/null +++ b/src/app/vault/ciphers.component.html @@ -0,0 +1,43 @@ + + + + + + + + + + +
+
+ +
+ Action + Another action + Something else here +
+
+ 		+ + + + + + {{c.name}} + + + + {{c.subTitle}} +
+
+ + + +

{{'noItemsInList' | i18n}}

+ + +
+ diff --git a/src/app/vault/ciphers.component.ts b/src/app/vault/ciphers.component.ts new file mode 100644 index 00000000..83bf1eef --- /dev/null +++ b/src/app/vault/ciphers.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +import { CipherService } from 'jslib/abstractions/cipher.service'; + +import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/components/ciphers.component'; + +@Component({ + selector: 'app-vault-ciphers', + templateUrl: 'ciphers.component.html', +}) +export class CiphersComponent extends BaseCiphersComponent { + constructor(cipherService: CipherService) { + super(cipherService); + } +} diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html new file mode 100644 index 00000000..b6dce984 --- /dev/null +++ b/src/app/vault/folder-add-edit.component.html @@ -0,0 +1,35 @@ +
+
+
+
+
+
+ {{title}} +
+
+
+ + +
+
+
+
+
+ + +
+ +
+
+
+
+
diff --git a/src/app/vault/folder-add-edit.component.ts b/src/app/vault/folder-add-edit.component.ts new file mode 100644 index 00000000..685a8d09 --- /dev/null +++ b/src/app/vault/folder-add-edit.component.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { FolderService } from 'jslib/abstractions/folder.service'; +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; + +import { + FolderAddEditComponent as BaseFolderAddEditComponent, +} from 'jslib/angular/components/folder-add-edit.component'; + +@Component({ + selector: 'app-folder-add-edit', + templateUrl: 'folder-add-edit.component.html', +}) +export class FolderAddEditComponent extends BaseFolderAddEditComponent { + constructor(folderService: FolderService, i18nService: I18nService, + analytics: Angulartics2, toasterService: ToasterService, + platformUtilsService: PlatformUtilsService) { + super(folderService, i18nService, analytics, toasterService, platformUtilsService); + } +} diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html new file mode 100644 index 00000000..5fbc44ff --- /dev/null +++ b/src/app/vault/groupings.component.html @@ -0,0 +1,72 @@ +
+
+ Filters +
+
+ + +

Types

+ +

Loading...

+ +

+ Folders + +

+ +
+

Collections

+ +
+ +
+
diff --git a/src/app/vault/groupings.component.ts b/src/app/vault/groupings.component.ts new file mode 100644 index 00000000..d3ce8961 --- /dev/null +++ b/src/app/vault/groupings.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +import { CollectionService } from 'jslib/abstractions/collection.service'; +import { FolderService } from 'jslib/abstractions/folder.service'; + +import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/components/groupings.component'; + +@Component({ + selector: 'app-vault-groupings', + templateUrl: 'groupings.component.html', +}) +export class GroupingsComponent extends BaseGroupingsComponent { + constructor(collectionService: CollectionService, folderService: FolderService) { + super(collectionService, folderService); + } +} diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html index 22e4d63e..6b34d8d6 100644 --- a/src/app/vault/vault.component.html +++ b/src/app/vault/vault.component.html @@ -11,16 +11,6 @@
  • Settings
    • -
  • - -
    - Action - Another action - Something else here -
    -
      • @@ -39,140 +29,29 @@
      -
      +
      + + +
      +
      + + +
      +
      -
      - Filters -
      - - -

      Types

      - -

      Folders

      - -

      Collections

      - + Some callout
      -
      - - - - - - - - -
      -
      - -
      - Action - Another action - Something else here -
      -
      -       		- - - Google - MyUsername -
      -
      @@ -188,3 +67,5 @@
      + + diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index 3e571526..1c488fb3 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -1,13 +1,214 @@ +import { Location } from '@angular/common'; import { Component, + ComponentFactoryResolver, + OnInit, + ViewChild, + ViewContainerRef, } from '@angular/core'; +import { + ActivatedRoute, + Router, +} from '@angular/router'; import { CipherType } from 'jslib/enums/cipherType'; +import { CipherView } from 'jslib/models/view/cipherView'; +import { FolderView } from 'jslib/models/view/folderView'; + +import { ModalComponent } from '../modal.component'; + +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'; + @Component({ selector: 'app-vault', templateUrl: 'vault.component.html', }) -export class VaultComponent { +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; + 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(); + } + }); + } + + editCipher(cipher: CipherView) { + console.log(cipher); + } + + addCipher(type: CipherType = null) { + // + } + + 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(); + } + + 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, 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, 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, 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; + }); + } + + 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, + }; + } + + const url = this.router.createUrlTree(['vault'], { queryParams: queryParams }).toString(); + this.location.go(url); + } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 2881a85e..2b04f31f 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -63,7 +63,7 @@ body { .footer { margin-top: 40px; - padding: 40px 0 10px 0; + padding: 40px 0 20px 0; border-top: 1px solid $border-color; } @@ -83,6 +83,12 @@ app-vault { } } + tr:hover { + td:first-child { + background-color: $body-bg; + } + } + td { vertical-align: middle; @@ -92,11 +98,22 @@ app-vault { } td:first-child { - width: 80px; + width: 65px; + border: none; } td:nth-child(2) { - width: 40px; + width: 25px; + } + + td:nth-child(3) { + width: 25px; + text-align: center; + + img { + @extend .rounded; + @extend .img-fluid; + } } } } diff --git a/src/services/webStorage.service.ts b/src/services/webStorage.service.ts index 239b0803..f8f49108 100644 --- a/src/services/webStorage.service.ts +++ b/src/services/webStorage.service.ts @@ -1,23 +1,27 @@ import { StorageService } from 'jslib/abstractions/storage.service'; export class WebStorageService implements StorageService { - private store: any = {}; - get(key: string): Promise { - const val = this.store[key]; - if (val == null) { + const json = window.sessionStorage.getItem(key); + if (json == null) { return Promise.resolve(null); } - return Promise.resolve(val as T); + const obj = JSON.parse(json); + return Promise.resolve(obj as T); } save(key: string, obj: any): Promise { - this.store[key] = obj; + if (obj == null) { + this.remove(key); + return; + } + const json = JSON.stringify(obj); + window.sessionStorage.setItem(key, json); return Promise.resolve(); } remove(key: string): Promise { - delete this.store[key]; + window.sessionStorage.removeItem(key); return Promise.resolve(); }