mirror of
https://github.com/bitwarden/browser
synced 2025-12-19 09:43:23 +00:00
modal component
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
150
src/app/vault/password-generator.component.html
Normal file
150
src/app/vault/password-generator.component.html
Normal 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>
|
||||
31
src/app/vault/password-generator.component.ts
Normal file
31
src/app/vault/password-generator.component.ts
Normal 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);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user