1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 09:43:23 +00:00

modal component

This commit is contained in:
Kyle Spearrin
2018-01-29 09:33:43 -05:00
parent 752e9a726a
commit c50b478a4d
9 changed files with 550 additions and 2 deletions

View File

@@ -39,6 +39,7 @@ export class AddEditComponent implements OnChanges {
@Output() onDeletedCipher = new EventEmitter<CipherView>();
@Output() onCancelled = new EventEmitter<CipherView>();
@Output() onEditAttachments = new EventEmitter<CipherView>();
@Output() onGeneratePassword = new EventEmitter();
editMode: boolean = false;
cipher: CipherView;
@@ -172,4 +173,8 @@ export class AddEditComponent implements OnChanges {
this.toasterService.popAsync('success', null, this.i18nService.t('deletedItem'));
this.onDeletedCipher.emit(this.cipher);
}
generatePassword() {
this.onGeneratePassword.emit();
}
}

View File

@@ -0,0 +1,150 @@
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
Some content<br />
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,31 @@
import * as template from './password-generator.component.html';
import {
Component,
EventEmitter,
Input,
OnInit,
Output,
} from '@angular/core';
import { CipherType } from 'jslib/enums/cipherType';
import { CollectionService } from 'jslib/abstractions/collection.service';
@Component({
selector: 'password-generator',
template: template,
})
export class PasswordGeneratorComponent implements OnInit {
@Input() in: string;
@Output() out = new EventEmitter<string>();
constructor() {
// ctor
}
async ngOnInit() {
console.log(this.in);
setTimeout(() => { this.out.emit('world'); }, 2000);
}
}

View File

@@ -22,6 +22,8 @@
(onSavedCipher)="savedCipher($event)"
(onDeletedCipher)="deletedCipher($event)"
(onEditAttachments)="editCipherAttachments($event)"
(onCancelled)="cancelledAddEdit($event)">
(onCancelled)="cancelledAddEdit($event)"
(onGeneratePassword)="openPasswordGenerator()">
</app-vault-add-edit>
<ng-template #passwordGenerator></ng-template>
</div>

View File

@@ -2,8 +2,10 @@ import * as template from './vault.component.html';
import {
Component,
ComponentFactoryResolver,
OnInit,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import {
@@ -15,6 +17,8 @@ import { Location } from '@angular/common';
import { CiphersComponent } from './ciphers.component';
import { GroupingsComponent } from './groupings.component';
import { PasswordGeneratorComponent } from './password-generator.component';
import { ModalComponent } from '../modal.component';
import { CipherType } from 'jslib/enums/cipherType';
@@ -29,6 +33,7 @@ import { FolderView } from 'jslib/models/view/folderView';
export class VaultComponent implements OnInit {
@ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
@ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
@ViewChild('passwordGenerator', { read: ViewContainerRef }) passwordGeneratorModal: ViewContainerRef;
action: string;
cipherId: string = null;
@@ -37,7 +42,8 @@ export class VaultComponent implements OnInit {
folderId: string = null;
collectionId: string = null;
constructor(private route: ActivatedRoute, private router: Router, private location: Location) {
constructor(private route: ActivatedRoute, private router: Router, private location: Location,
private componentFactoryResolver: ComponentFactoryResolver) {
}
async ngOnInit() {
@@ -164,6 +170,19 @@ export class VaultComponent implements OnInit {
this.go();
}
async openPasswordGenerator() {
let factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
let componentRef = this.passwordGeneratorModal.createComponent(factory);
let modal = componentRef.instance as ModalComponent;
let childComponent = modal.show<PasswordGeneratorComponent>(PasswordGeneratorComponent,
this.passwordGeneratorModal);
childComponent.in = 'hello';
childComponent.out.subscribe((i: string) => {
console.log(i);
//modal.close();
});
}
private clearFilters() {
this.folderId = null;
this.collectionId = null;