bitwarden/web
1
0
Fork 0
mirror of https://github.com/bitwarden/web synced 2026-01-03 00:53:34 +00:00
Code Issues Releases Wiki Activity

Add show/hide button to password prompt (#1034)

Browse Source
This commit is contained in:
Oscar Hinton
2021-08-27 14:50:58 +02:00
committed by GitHub
parent 7c8e95d408
commit fa4e5250b9
41 changed files with 697 additions and 1234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/app/vault/bulk-actions.component.ts
View File

@@ -1,6 +1,5 @@
import {
Component,
ComponentFactoryResolver,
Input,
ViewChild,
ViewContainerRef,
@@ -11,9 +10,9 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
import { Organization } from 'jslib-common/models/domain/organization';
import { ModalService } from 'jslib-angular/services/modal.service';
import { ModalComponent } from '../modal.component';
import { Organization } from 'jslib-common/models/domain/organization';
import { BulkDeleteComponent } from './bulk-delete.component';
import { BulkMoveComponent } from './bulk-move.component';
@@ -27,7 +26,6 @@ import { CiphersComponent } from './ciphers.component';
})
export class BulkActionsComponent {
@Input() ciphersComponent: CiphersComponent;
@Input() modal: ModalComponent;
@Input() deleted: boolean;
@Input() organization: Organization;
@@ -36,10 +34,8 @@ export class BulkActionsComponent {
@ViewChild('bulkMoveTemplate', { read: ViewContainerRef, static: true }) bulkMoveModalRef: ViewContainerRef;
@ViewChild('bulkShareTemplate', { read: ViewContainerRef, static: true }) bulkShareModalRef: ViewContainerRef;
constructor(private toasterService: ToasterService,
private i18nService: I18nService,
private componentFactoryResolver: ComponentFactoryResolver,
private passwordRepromptService: PasswordRepromptService) { }
constructor(private toasterService: ToasterService, private i18nService: I18nService,
private modalService: ModalService, private passwordRepromptService: PasswordRepromptService) { }
async bulkDelete() {
if (!await this.promptPassword()) {
@@ -53,24 +49,14 @@ export class BulkActionsComponent {
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkDeleteModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<BulkDeleteComponent>(BulkDeleteComponent, this.bulkDeleteModalRef);
childComponent.permanent = this.deleted;
childComponent.cipherIds = selectedIds;
childComponent.organization = this.organization;
childComponent.onDeleted.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkDeleteComponent, this.bulkDeleteModalRef, comp => {
comp.permanent = this.deleted;
comp.cipherIds = selectedIds;
comp.organization = this.organization;
comp.onDeleted.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
@@ -86,22 +72,12 @@ export class BulkActionsComponent {
return;
}
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.bulkRestoreModalRef.createComponent(factory).instance;
const childComponent = this.modal.show<BulkRestoreComponent>(BulkRestoreComponent, this.bulkRestoreModalRef);
childComponent.cipherIds = selectedIds;
childComponent.onRestored.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkRestoreComponent, this.bulkRestoreModalRef, comp => {
comp.cipherIds = selectedIds;
comp.onRestored.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
@@ -117,22 +93,12 @@ export class BulkActionsComponent {
return;
}
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 = selectedCiphers;
childComponent.onShared.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(async () => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkShareComponent, this.bulkShareModalRef, comp => {
comp.ciphers = selectedCiphers;
comp.onShared.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
@@ -148,22 +114,12 @@ export class BulkActionsComponent {
return;
}
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);
childComponent.cipherIds = selectedIds;
childComponent.onMoved.subscribe(async () => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(BulkMoveComponent, this.bulkMoveModalRef, comp => {
comp.cipherIds = selectedIds;
comp.onMoved.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}

2
src/app/vault/vault.component.html
View File

@@ -21,7 +21,7 @@
</small>
</h1>
<div class="ml-auto d-flex">
<app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [modal]="modal" [deleted]="deleted">
<app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [deleted]="deleted">
</app-vault-bulk-actions>
<button type="button" class="btn btn-outline-primary btn-sm" (click)="addCipher()" *ngIf="!deleted">
<i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{'addItem' | i18n}}

198
src/app/vault/vault.component.ts
View File

@@ -1,7 +1,6 @@
import {
ChangeDetectorRef,
Component,
ComponentFactoryResolver,
NgZone,
OnDestroy,
OnInit,
@@ -17,8 +16,6 @@ import { CipherType } from 'jslib-common/enums/cipherType';
import { CipherView } from 'jslib-common/models/view/cipherView';
import { ModalComponent } from '../modal.component';
import { OrganizationsComponent } from '../settings/organizations.component';
import { UpdateKeyComponent } from '../settings/update-key.component';
import { AddEditComponent } from './add-edit.component';
@@ -38,6 +35,7 @@ import { TokenService } from 'jslib-common/abstractions/token.service';
import { UserService } from 'jslib-common/abstractions/user.service';
import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
import { ModalService } from 'jslib-angular/services/modal.service';
const BroadcasterSubscriptionId = 'VaultComponent';
@@ -68,11 +66,9 @@ export class VaultComponent implements OnInit, OnDestroy {
deleted: boolean = false;
trashCleanupWarning: string = null;
modal: ModalComponent = null;
constructor(private syncService: SyncService, private route: ActivatedRoute,
private router: Router, private changeDetectorRef: ChangeDetectorRef,
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
private i18nService: I18nService, private modalService: ModalService,
private tokenService: TokenService, private cryptoService: CryptoService,
private messagingService: MessagingService, private userService: UserService,
private platformUtilsService: PlatformUtilsService, private broadcasterService: BroadcasterService,
@@ -232,22 +228,15 @@ export class VaultComponent implements OnInit, OnDestroy {
}
}
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;
let madeAttachmentChanges = false;
childComponent.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
childComponent.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
childComponent.onReuploadedAttachment.subscribe(() => madeAttachmentChanges = true);
const [modal] = await this.modalService.openViewRef(AttachmentsComponent, this.attachmentsModalRef, comp => {
comp.cipherId = cipher.id;
comp.onUploadedAttachment.subscribe(() => madeAttachmentChanges = true);
comp.onDeletedAttachment.subscribe(() => madeAttachmentChanges = true);
comp.onReuploadedAttachment.subscribe(() => madeAttachmentChanges = true);
});
this.modal.onClosed.subscribe(async () => {
this.modal = null;
modal.onClosed.subscribe(async () => {
if (madeAttachmentChanges) {
await this.ciphersComponent.refresh();
}
@@ -255,96 +244,54 @@ export class VaultComponent implements OnInit, OnDestroy {
});
}
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;
async shareCipher(cipher: CipherView) {
const [modal] = await this.modalService.openViewRef(ShareComponent, this.shareModalRef, comp => {
comp.cipherId = cipher.id;
comp.onSharedCipher.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
editCipherCollections(cipher: CipherView) {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.collectionsModalRef.createComponent(factory).instance;
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;
async editCipherCollections(cipher: CipherView) {
const [modal] = await this.modalService.openViewRef(CollectionsComponent, this.collectionsModalRef, comp => {
comp.cipherId = cipher.id;
comp.onSavedCollections.subscribe(async () => {
modal.close();
await this.ciphersComponent.refresh();
});
});
}
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 () => {
this.modal.close();
await this.groupingsComponent.loadFolders();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(FolderAddEditComponent, this.folderAddEditModalRef, comp => {
comp.folderId = null;
comp.onSavedFolder.subscribe(async () => {
modal.close();
await this.groupingsComponent.loadFolders();
});
});
}
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 () => {
this.modal.close();
await this.groupingsComponent.loadFolders();
});
childComponent.onDeletedFolder.subscribe(async () => {
this.modal.close();
await this.groupingsComponent.loadFolders();
await this.filterFolder('none');
this.groupingsComponent.selectedFolderId = null;
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
const [modal] = await this.modalService.openViewRef(FolderAddEditComponent, this.folderAddEditModalRef, comp => {
comp.folderId = folderId;
comp.onSavedFolder.subscribe(async () => {
modal.close();
await this.groupingsComponent.loadFolders();
});
comp.onDeletedFolder.subscribe(async () => {
modal.close();
await this.groupingsComponent.loadFolders();
await this.filterFolder('none');
this.groupingsComponent.selectedFolderId = null;
});
});
}
addCipher() {
const component = this.editCipher(null);
async addCipher() {
const component = await this.editCipher(null);
component.type = this.type;
component.folderId = this.folderId === 'none' ? null : this.folderId;
if (this.collectionId != null) {
@@ -356,54 +303,33 @@ export class VaultComponent implements OnInit, OnDestroy {
}
}
editCipher(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.ciphersComponent.refresh();
});
childComponent.onDeletedCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.ciphersComponent.refresh();
});
childComponent.onRestoredCipher.subscribe(async (c: CipherView) => {
this.modal.close();
await this.ciphersComponent.refresh();
});
this.modal.onClosed.subscribe(() => {
this.modal = null;
async editCipher(cipher: CipherView) {
const [modal, childComponent] = await this.modalService.openViewRef(AddEditComponent, this.cipherAddEditModalRef, comp => {
comp.cipherId = cipher == null ? null : cipher.id;
comp.onSavedCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
comp.onDeletedCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
comp.onRestoredCipher.subscribe(async (c: CipherView) => {
modal.close();
await this.ciphersComponent.refresh();
});
});
return childComponent;
}
cloneCipher(cipher: CipherView) {
const component = this.editCipher(cipher);
async cloneCipher(cipher: CipherView) {
const component = await this.editCipher(cipher);
component.cloneMode = true;
}
updateKey() {
if (this.modal != null) {
this.modal.close();
}
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
this.modal = this.updateKeyModalRef.createComponent(factory).instance;
this.modal.show<UpdateKeyComponent>(UpdateKeyComponent, this.updateKeyModalRef);
this.modal.onClosed.subscribe(() => {
this.modal = null;
});
async updateKey() {
await this.modalService.openViewRef(UpdateKeyComponent, this.updateKeyModalRef);
}
private clearFilters() {