Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-27 12:36:14 +01:00
Code Issues Projects Releases Wiki Activity

add/edit components setup

Browse Source
This commit is contained in:
Kyle Spearrin 2018-01-24 17:41:57 -05:00
parent 4f62792bda
commit 18a45886d1
11 changed files with 187 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -7,8 +7,10 @@ import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { ServicesModule } from './services/services.module';
import { AddComponent } from './vault/add.component';
import { AppComponent } from './app.component';
import { CiphersComponent } from './vault/ciphers.component';
import { EditComponent } from './vault/edit.component';
import { FallbackSrcDirective } from './directives/fallback-src.directive';
import { GroupingsComponent } from './vault/groupings.component';
import { I18nPipe } from './pipes/i18n.pipe';
@ -27,8 +29,10 @@ import { ViewComponent } from './vault/view.component';
ServicesModule,
],
declarations: [
AddComponent,
AppComponent,
CiphersComponent,
EditComponent,
FallbackSrcDirective,
GroupingsComponent,
I18nPipe,

35
src/app/vault/add.component.html Normal file
View File

@ -0,0 +1,35 @@
<div class="content">
<div class="inner-content">
<div class="box">
<div class="box-header">
{{'itemInformation' | i18n}}
</div>
<div class="box-content" *ngIf="cipher">
<div class="box-content-row">
<span class="row-label">{{'name' | i18n}}</span>
{{cipher.name}}
</div>
<div *ngIf="cipher.login">
<div class="box-content-row">
<span class="row-label">{{'uri' | i18n}}</span>
{{cipher.login.uri}}
</div>
<div class="box-content-row">
<span class="row-label">{{'username' | i18n}}</span>
{{cipher.login.username}}
</div>
<div class="box-content-row">
<span class="row-label">{{'password' | i18n}}</span>
{{cipher.login.password}}
</div>
</div>
</div>
<div class="box-footer">
Some footer information for add.
</div>
</div>
</div>
</div>
<div class="footer">
{{'editItem' | i18n}}
</div>

27
src/app/vault/add.component.ts Normal file
View File

@ -0,0 +1,27 @@
import * as template from './add.component.html';
import {
Component,
Input,
OnChanges,
} from '@angular/core';
import { CipherService } from 'jslib/abstractions/cipher.service';
import { CipherView } from 'jslib/models/view/cipherView';
@Component({
selector: 'app-vault-add',
template: template,
})
export class AddComponent implements OnChanges {
@Input() folderId: string;
cipher: CipherView;
constructor(private cipherService: CipherService) {
}
async ngOnChanges() {
this.cipher = new CipherView();
}
}

6
src/app/vault/ciphers.component.html
View File

@ -4,7 +4,9 @@
<i class="fa fa-search"></i>
</div>
<div class="right">
<a href="" title="{{'addItem' | i18n}}"><i class="fa fa-plus fa-lg"></i></a>
<a href="" title="{{'addItem' | i18n}}" appStopClick (click)="addCipher()">
<i class="fa fa-plus fa-lg"></i>
</a>
</div>
</div>
<div class="content">
@ -26,5 +28,5 @@
</div>
</div>
<div class="footer">
{{'addItem' | i18n}}
<button (click)="addCipher()">{{'addItem' | i18n}}</button>
</div>

9
src/app/vault/ciphers.component.ts
View File

@ -15,9 +15,14 @@ import { CipherView } from 'jslib/models/view/cipherView';
})
export class CiphersComponent {
@Input() ciphers: CipherView[];
@Output() onCipherClicked = new EventEmitter<CipherView>();
@Output() onCipherClicked = new EventEmitter<string>();
@Output() onAddCipher = new EventEmitter();
cipherClicked(cipher: CipherView) {
this.onCipherClicked.emit(cipher);
this.onCipherClicked.emit(cipher.id);
}
addCipher() {
this.onAddCipher.emit();
}
}

35
src/app/vault/edit.component.html Normal file
View File

@ -0,0 +1,35 @@
<div class="content">
<div class="inner-content">
<div class="box">
<div class="box-header">
{{'itemInformation' | i18n}}
</div>
<div class="box-content" *ngIf="cipher">
<div class="box-content-row">
<span class="row-label">{{'name' | i18n}}</span>
{{cipher.name}}
</div>
<div *ngIf="cipher.login">
<div class="box-content-row">
<span class="row-label">{{'uri' | i18n}}</span>
{{cipher.login.uri}}
</div>
<div class="box-content-row">
<span class="row-label">{{'username' | i18n}}</span>
{{cipher.login.username}}
</div>
<div class="box-content-row">
<span class="row-label">{{'password' | i18n}}</span>
{{cipher.login.password}}
</div>
</div>
</div>
<div class="box-footer">
Some footer information for edit.
</div>
</div>
</div>
</div>
<div class="footer">
{{'editItem' | i18n}}
</div>

35
src/app/vault/edit.component.ts Normal file
View File

@ -0,0 +1,35 @@
import * as template from './edit.component.html';
import {
Component,
EventEmitter,
Input,
OnChanges,
Output,
} from '@angular/core';
import { CipherService } from 'jslib/abstractions/cipher.service';
import { CipherView } from 'jslib/models/view/cipherView';
@Component({
selector: 'app-vault-edit',
template: template,
})
export class EditComponent implements OnChanges {
@Input() cipherId: string;
@Output() onEditCipherClicked = new EventEmitter<string>();
cipher: CipherView;
constructor(private cipherService: CipherService) {
}
async ngOnChanges() {
const cipher = await this.cipherService.get(this.cipherId);
this.cipher = await cipher.decrypt();
}
editCipherClicked(id: string) {
this.onEditCipherClicked.emit(id);
}
}

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

@ -1,5 +1,22 @@
<div id="vault">
<app-vault-groupings id="groupings"></app-vault-groupings>
<app-vault-ciphers id="items" [ciphers]="ciphers" (onCipherClicked)="viewCipher($event)"></app-vault-ciphers>
<app-vault-view id="details" *ngIf="cipher && details === 'view'" [cipherId]="cipher.id"></app-vault-view>
<app-vault-groupings id="groupings">
</app-vault-groupings>
<app-vault-ciphers id="items"
[ciphers]="ciphers"
(onCipherClicked)="viewCipher($event)"
(onAddCipher)="addCipher($event)">
</app-vault-ciphers>
<app-vault-view id="details"
*ngIf="cipherId && details === 'view'"
[cipherId]="cipherId"
(onEditCipher)="editCipher($event)">
</app-vault-view>
<app-vault-edit id="details"
*ngIf="cipherId && details === 'edit'"
[cipherId]="cipherId">
</app-vault-edit>
<app-vault-add id="details"
*ngIf="details === 'add'"
[folderId]="null">
</app-vault-add>
</div>

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

@ -15,7 +15,7 @@ import { CipherView } from 'jslib/models/view/cipherView';
})
export class VaultComponent implements OnInit {
ciphers: CipherView[];
cipher: CipherView;
cipherId: string;
details: string;
constructor(private cipherService: CipherService) {
@ -25,8 +25,17 @@ export class VaultComponent implements OnInit {
this.ciphers = await this.cipherService.getAllDecrypted();
}
viewCipher(cipher: CipherView) {
this.cipher = cipher;
viewCipher(id: string) {
this.cipherId = id;
this.details = 'view';
}
editCipher(id: string) {
this.cipherId = id;
this.details = 'edit';
}
addCipher() {
this.details = 'add';
}
}

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

@ -31,5 +31,5 @@
</div>
</div>
<div class="footer">
{{'editItem' | i18n}}
<button (click)="edit()">{{'editItem' | i18n}}</button>
</div>

7
src/app/vault/view.component.ts
View File

@ -2,8 +2,10 @@ import * as template from './view.component.html';
import {
Component,
EventEmitter,
Input,
OnChanges,
Output,
} from '@angular/core';
import { CipherService } from 'jslib/abstractions/cipher.service';
@ -16,6 +18,7 @@ import { CipherView } from 'jslib/models/view/cipherView';
})
export class ViewComponent implements OnChanges {
@Input() cipherId: string;
@Output() onEditCipher = new EventEmitter<string>();
cipher: CipherView;
constructor(private cipherService: CipherService) {
@ -25,4 +28,8 @@ export class ViewComponent implements OnChanges {
const cipher = await this.cipherService.get(this.cipherId);
this.cipher = await cipher.decrypt();
}
edit() {
this.onEditCipher.emit(this.cipher.id);
}
}