mirror of
https://github.com/bitwarden/browser
synced 2025-12-19 09:43:23 +00:00
split vault into components
This commit is contained in:
Kyle Spearrin
28
src/app/vault/ciphers.component.html
Normal file
28
src/app/vault/ciphers.component.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<div class="header header-search">
|
||||
<div class="search">
|
||||
<input type="search" placeholder="Search vault" id="search" />
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a href="" title="Add Item"><i class="fa fa-plus fa-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="list">
|
||||
<div class="list-section" style="padding-top: 0; padding-bottom: 0;">
|
||||
<a *ngFor="let cipher of ciphers"
|
||||
href="#" class="list-section-item condensed" title="View Item">
|
||||
<app-vault-icon [cipher]="cipher"></app-vault-icon>
|
||||
<span class="text">
|
||||
{{cipher.name}}
|
||||
<i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"></i>
|
||||
<i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"></i>
|
||||
</span>
|
||||
<span class="detail">{{cipher.subTitle}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
Add Item
|
||||
</div>
|
||||
23
src/app/vault/ciphers.component.ts
Normal file
23
src/app/vault/ciphers.component.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import * as template from './ciphers.component.html';
|
||||
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
OnChanges,
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vault-ciphers',
|
||||
template: template,
|
||||
})
|
||||
export class CiphersComponent implements OnChanges {
|
||||
@Input() ciphers: any[];
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
|
||||
}
|
||||
}
|
||||
27
src/app/vault/groupings.component.html
Normal file
27
src/app/vault/groupings.component.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<div class="content">
|
||||
<div class="inner-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-fw fa-spinner"></i> All Items</a></li>
|
||||
<li><a href="#"><i class="fa fa-fw fa-star"></i> Favorites</a></li>
|
||||
</ul>
|
||||
<h2><i class="fa fa-tags"></i> Types</h2>
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-fw fa-globe"></i> Login</a></li>
|
||||
<li><a href="#"><i class="fa fa-fw fa-credit-card"></i> Card</a></li>
|
||||
<li><a href="#"><i class="fa fa-fw fa-id-card-o"></i> Identity</a></li>
|
||||
<li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> Secure Note</a></li>
|
||||
</ul>
|
||||
<h2><i class="fa fa-folder"></i> Folders</h2>
|
||||
<ul class="fa-ul">
|
||||
<li *ngFor="let folder of folders">
|
||||
<a href="#"><i class="fa-li fa fa-caret-right"></i> {{folder.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2><i class="fa fa-cubes"></i> Collections</h2>
|
||||
<ul class="fa-ul">
|
||||
<li *ngFor="let collection of collections">
|
||||
<a href="#"><i class="fa-li fa fa-caret-right"></i> {{collection.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
28
src/app/vault/groupings.component.ts
Normal file
28
src/app/vault/groupings.component.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import * as template from './groupings.component.html';
|
||||
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
|
||||
import { CollectionService } from 'jslib/abstractions/collection.service';
|
||||
import { FolderService } from 'jslib/abstractions/folder.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vault-groupings',
|
||||
template: template,
|
||||
})
|
||||
export class GroupingsComponent implements OnInit {
|
||||
folders: any[];
|
||||
collections: any[];
|
||||
|
||||
constructor(private collectionService: CollectionService, private folderService: FolderService) {
|
||||
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.folders = await this.folderService.getAllDecrypted();
|
||||
this.collections = await this.collectionService.getAllDecrypted();
|
||||
}
|
||||
}
|
||||
@@ -1,93 +1,5 @@
|
||||
<div id="vault">
|
||||
<!--
|
||||
<div id="nav">
|
||||
<ul class="top">
|
||||
<li><a href="#"><i class="fa fa-lg fa-lock"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-lg fa-undo-alt fa-flip-horizontal"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-lg fa-cog"></i></a></li>
|
||||
</ul>
|
||||
<ul class="bottom">
|
||||
<li><a href="#"><i class="fa fa-lg fa-user"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
-->
|
||||
<div id="categories">
|
||||
<div class="content">
|
||||
<div class="inner-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-fw fa-spinner"></i> All Items</a></li>
|
||||
<li><a href="#"><i class="fa fa-fw fa-star"></i> Favorites</a></li>
|
||||
</ul>
|
||||
<h2><i class="fa fa-tags"></i> Types</h2>
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-fw fa-globe"></i> Login</a></li>
|
||||
<li><a href="#"><i class="fa fa-fw fa-credit-card"></i> Card</a></li>
|
||||
<li><a href="#"><i class="fa fa-fw fa-id-card-o"></i> Identity</a></li>
|
||||
<li><a href="#"><i class="fa fa-fw fa-sticky-note-o"></i> Secure Note</a></li>
|
||||
</ul>
|
||||
<h2><i class="fa fa-folder"></i> Folders</h2>
|
||||
<ul class="fa-ul">
|
||||
<li *ngFor="let folder of vaultFolders">
|
||||
<a href="#"><i class="fa-li fa fa-caret-right"></i> {{folder.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2><i class="fa fa-cubes"></i> Collections</h2>
|
||||
<ul class="fa-ul">
|
||||
<li *ngFor="let collection of vaultCollections">
|
||||
<a href="#"><i class="fa-li fa fa-caret-right"></i> {{collection.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="items">
|
||||
<div class="header header-search">
|
||||
<div class="search">
|
||||
<input type="search" placeholder="Search vault" id="search" />
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a href="" title="Add Item"><i class="fa fa-plus fa-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="list">
|
||||
<div class="list-section" style="padding-top: 0; padding-bottom: 0;">
|
||||
<a *ngFor="let cipher of vaultCiphers"
|
||||
href="#" class="list-section-item condensed" title="View Item">
|
||||
<app-vault-icon [cipher]="cipher"></app-vault-icon>
|
||||
<span class="text">
|
||||
{{cipher.name}}
|
||||
<i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"></i>
|
||||
<i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"></i>
|
||||
</span>
|
||||
<span class="detail">{{cipher.subTitle}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
Add Item
|
||||
</div>
|
||||
</div>
|
||||
<div id="details">
|
||||
<div class="content">
|
||||
<div>Something Something Something Something Something Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
Edit
|
||||
</div>
|
||||
</div>
|
||||
<app-vault-groupings id="categories"></app-vault-groupings>
|
||||
<app-vault-ciphers id="items" [ciphers]="vaultCiphers"></app-vault-ciphers>
|
||||
<app-vault-view id="details" [cipherId]="null"></app-vault-view>
|
||||
</div>
|
||||
|
||||
@@ -6,28 +6,19 @@ import {
|
||||
} from '@angular/core';
|
||||
|
||||
import { CipherService } from 'jslib/abstractions/cipher.service';
|
||||
import { CollectionService } from 'jslib/abstractions/collection.service';
|
||||
import { FolderService } from 'jslib/abstractions/folder.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vault',
|
||||
template: template,
|
||||
})
|
||||
export class VaultComponent implements OnInit {
|
||||
vaultFolders: any[];
|
||||
vaultCiphers: any[];
|
||||
vaultCollections: any[];
|
||||
|
||||
constructor(private cipherService: CipherService, private collectionService: CollectionService,
|
||||
private folderService: FolderService) {
|
||||
constructor(private cipherService: CipherService) {
|
||||
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
// TODO?
|
||||
|
||||
this.vaultFolders = await this.folderService.getAllDecrypted();
|
||||
this.vaultCollections = await this.collectionService.getAllDecrypted();
|
||||
this.vaultCiphers = await this.cipherService.getAllDecrypted();
|
||||
}
|
||||
}
|
||||
|
||||
18
src/app/vault/view.component.html
Normal file
18
src/app/vault/view.component.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<div class="content">
|
||||
<div>Something Something Something Something Something Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
Edit
|
||||
</div>
|
||||
23
src/app/vault/view.component.ts
Normal file
23
src/app/vault/view.component.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import * as template from './view.component.html';
|
||||
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
OnChanges,
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vault-view',
|
||||
template: template,
|
||||
})
|
||||
export class ViewComponent implements OnChanges {
|
||||
@Input() cipherId: string;
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user