current tab component
This commit is contained in:
Kyle Spearrin
parent
844fef9588
commit
6d29d288f8
|
|
@ -1,36 +1,36 @@
|
|||
<span class="row-btn" (click)="view()" appStopClick appBlurClick title="{{'view' | i18n}}" *ngIf="showView">
|
||||
<span class="row-btn" (click)="view()" appStopClick appStopProp title="{{'view' | i18n}}" *ngIf="showView">
|
||||
<i class="fa fa-lg fa-eye"></i>
|
||||
</span>
|
||||
<ng-container *ngIf="cipher.type === cipherType.Login">
|
||||
<span class="row-btn" appStopClick appBlurClick title="{{'launch' | i18n}}" (click)="launch()"
|
||||
<span class="row-btn" appStopClick appStopProp title="{{'launch' | i18n}}" (click)="launch()"
|
||||
*ngIf="!showView" [ngClass]="{disabled: !cipher.login.canLaunch}">
|
||||
<i class="fa fa-lg fa-share-square-o"></i>
|
||||
</span>
|
||||
<span class="row-btn" appStopClick appBlurClick title="{{'copyUsername' | i18n}}"
|
||||
<span class="row-btn" appStopClick appStopProp title="{{'copyUsername' | i18n}}"
|
||||
(click)="copy(cipher.login.username, 'username', 'Username')"
|
||||
[ngClass]="{disabled: !cipher.login.username}">
|
||||
<i class="fa fa-lg fa-user"></i>
|
||||
</span>
|
||||
<span class="row-btn" appStopClick appBlurClick title="{{'copyPassword' | i18n}}"
|
||||
<span class="row-btn" appStopClick appStopProp title="{{'copyPassword' | i18n}}"
|
||||
(click)="copy(cipher.login.password, 'password', 'Password')"
|
||||
[ngClass]="{disabled: !cipher.login.password}">
|
||||
<i class="fa fa-lg fa-key"></i>
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="cipher.type === cipherType.Card">
|
||||
<span class="row-btn" appStopClick appBlurClick title="{{'copyNumber' | i18n}}"
|
||||
<span class="row-btn" appStopClick appStopProp title="{{'copyNumber' | i18n}}"
|
||||
(click)="copy(cipher.card.number, 'number', 'Card Number')"
|
||||
[ngClass]="{disabled: !cipher.card.number}">
|
||||
<i class="fa fa-lg fa-hashtag"></i>
|
||||
</span>
|
||||
<span class="row-btn" appStopClick appBlurClick title="{{'copySecurityCode' | i18n}}"
|
||||
<span class="row-btn" appStopClick appStopProp title="{{'copySecurityCode' | i18n}}"
|
||||
(click)="copy(cipher.card.code, 'securityCode', 'Security Code')"
|
||||
[ngClass]="{disabled: !cipher.card.code}">
|
||||
<i class="fa fa-lg fa-key"></i>
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="cipher.type === cipherType.SecureNote">
|
||||
<span class="row-btn" appStopClick appBlurClick title="{{'copyNote' | i18n}}"
|
||||
<span class="row-btn" appStopClick appStopProp title="{{'copyNote' | i18n}}"
|
||||
(click)="copy(cipher.notes, 'note', 'Note')" [ngClass]="{disabled: !cipher.notes}">
|
||||
<i class="fa fa-lg fa-clipboard"></i>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import { PopupUtilsService } from '../services/popup-utils.service';
|
|||
export class ActionButtonsComponent {
|
||||
@Output() onView = new EventEmitter<CipherView>();
|
||||
@Input() cipher: CipherView;
|
||||
@Input() showView: boolean = false;
|
||||
@Input() showView = false;
|
||||
|
||||
cipherType = CipherType;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,5 +9,6 @@
|
|||
</span>
|
||||
<span class="detail">{{c.subTitle}}</span>
|
||||
</div>
|
||||
<app-action-buttons [cipher]="c" class="action-buttons"></app-action-buttons>
|
||||
<app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)"
|
||||
class="action-buttons"></app-action-buttons>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,9 @@ import { PopupUtilsService } from '../services/popup-utils.service';
|
|||
})
|
||||
export class CiphersListComponent {
|
||||
@Output() onSelected = new EventEmitter<CipherView>();
|
||||
@Output() onView = new EventEmitter<CipherView>();
|
||||
@Input() ciphers: CipherView[];
|
||||
@Input() showView: boolean = false;
|
||||
@Input() showView = false;
|
||||
@Input() title: string;
|
||||
|
||||
cipherType = CipherType;
|
||||
|
|
@ -36,4 +37,8 @@ export class CiphersListComponent {
|
|||
selectCipher(c: CipherView) {
|
||||
this.onSelected.emit(c);
|
||||
}
|
||||
|
||||
viewCipher(c: CipherView) {
|
||||
this.onView.emit(c);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<header>
|
||||
<div class="left">
|
||||
<app-pop-out></app-pop-out>
|
||||
</div>
|
||||
<div class="center">
|
||||
<span class="title">{{'currentTab' | i18n}}</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
|
||||
<i class="fa fa-plus fa-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<content>
|
||||
<p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
|
||||
<ng-container *ngIf="loaded">
|
||||
<div class="box list" *ngIf="loginCiphers">
|
||||
<div class="box-header">
|
||||
{{'typeLogins' | i18n}}
|
||||
<span class="flex-right">{{loginCiphers.length}}</span>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<app-ciphers-list [ciphers]="loginCiphers" title="{{'autoFill' | i18n}}" [showView]="true"
|
||||
(onSelected)="fillCipher($event)" (onView)="viewCipher($event)"></app-ciphers-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box list" *ngIf="cardCiphers">
|
||||
<div class="box-header">
|
||||
{{'cards' | i18n}}
|
||||
<span class="flex-right">{{cardCiphers.length}}</span>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<app-ciphers-list [ciphers]="cardCiphers" title="{{'autoFill' | i18n}}" [showView]="true"
|
||||
(onSelected)="fillCipher($event)" (onView)="viewCipher($event)"></app-ciphers-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box list" *ngIf="identityCiphers">
|
||||
<div class="box-header">
|
||||
{{'identities' | i18n}}
|
||||
<span class="flex-right">{{identityCiphers.length}}</span>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<app-ciphers-list [ciphers]="identityCiphers" title="{{'autoFill' | i18n}}" [showView]="true"
|
||||
(onSelected)="fillCipher($event)" (onView)="viewCipher($event)"></app-ciphers-list>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</content>
|
||||
|
|
@ -10,13 +10,140 @@ import {
|
|||
} from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
|
||||
import { BrowserApi } from '../../browser/browserApi';
|
||||
|
||||
import { CipherType } from 'jslib/enums/cipherType';
|
||||
|
||||
import { CipherView } from 'jslib/models/view/cipherView';
|
||||
|
||||
import { CipherService } from 'jslib/abstractions/cipher.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||
|
||||
import { AutofillService } from '../../services/abstractions/autofill.service';
|
||||
|
||||
import { PopupUtilsService } from '../services/popup-utils.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vault-tab',
|
||||
styles: [],
|
||||
template: `Current Tab`,
|
||||
selector: 'app-current-tab',
|
||||
templateUrl: 'current-tab.component.html',
|
||||
})
|
||||
export class CurrentTabComponent {
|
||||
constructor() {
|
||||
export class CurrentTabComponent implements OnInit {
|
||||
pageDetails: any[] = [];
|
||||
cardCiphers: CipherView[] = [];
|
||||
identityCiphers: CipherView[] = [];
|
||||
loginCiphers: CipherView[] = [];
|
||||
url: string;
|
||||
domain: string;
|
||||
canAutofill = false;
|
||||
searchText: string = null;
|
||||
inSidebar = false;
|
||||
showPopout = true;
|
||||
disableSearch = false;
|
||||
loaded = false;
|
||||
|
||||
constructor(private platformUtilsService: PlatformUtilsService, private cipherService: CipherService,
|
||||
private popupUtilsService: PopupUtilsService, private autofillService: AutofillService,
|
||||
private analytics: Angulartics2, private toasterService: ToasterService,
|
||||
private i18nService: I18nService, private router: Router) {
|
||||
this.inSidebar = popupUtilsService.inSidebar(window);
|
||||
this.showPopout = !this.inSidebar && !platformUtilsService.isSafari();
|
||||
this.disableSearch = platformUtilsService.isEdge();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.load();
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
await this.load();
|
||||
}
|
||||
|
||||
addCipher() {
|
||||
|
||||
}
|
||||
|
||||
viewCipher(cipher: CipherView) {
|
||||
this.router.navigate(['/view-cipher'], { queryParams: { cipherId: cipher.id } });
|
||||
}
|
||||
|
||||
async fillCipher(cipher: CipherView) {
|
||||
if (!this.canAutofill) {
|
||||
this.analytics.eventTrack.next({ action: 'Autofilled Error' });
|
||||
this.toasterService.popAsync('error', null, this.i18nService.t('autofillError'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const totpCode = await this.autofillService.doAutoFill({
|
||||
cipher: cipher,
|
||||
pageDetails: this.pageDetails,
|
||||
fromBackground: false,
|
||||
doc: window.document,
|
||||
});
|
||||
|
||||
this.analytics.eventTrack.next({ action: 'Autofilled' });
|
||||
if (totpCode != null && this.platformUtilsService.isFirefox()) {
|
||||
this.platformUtilsService.copyToClipboard(totpCode, { doc: window.document });
|
||||
}
|
||||
|
||||
if (this.popupUtilsService.inPopup(window)) {
|
||||
BrowserApi.closePopup(window);
|
||||
}
|
||||
} catch {
|
||||
this.analytics.eventTrack.next({ action: 'Autofilled Error' });
|
||||
this.toasterService.popAsync('error', null, this.i18nService.t('autofillError'));
|
||||
}
|
||||
}
|
||||
|
||||
searchVault() {
|
||||
|
||||
}
|
||||
|
||||
private async load() {
|
||||
const tab = await BrowserApi.getTabFromCurrentWindow();
|
||||
if (tab) {
|
||||
this.url = tab.url;
|
||||
} else {
|
||||
this.loaded = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.domain = this.platformUtilsService.getDomain(this.url);
|
||||
|
||||
BrowserApi.tabSendMessage(tab, {
|
||||
command: 'collectPageDetails',
|
||||
tab: tab,
|
||||
sender: 'currentController',
|
||||
}).then(() => {
|
||||
this.canAutofill = true;
|
||||
});
|
||||
|
||||
const ciphers = await this.cipherService.getAllDecryptedForUrl(this.url, [
|
||||
CipherType.Card,
|
||||
CipherType.Identity,
|
||||
]);
|
||||
|
||||
ciphers.forEach((c) => {
|
||||
switch (c.type) {
|
||||
case CipherType.Login:
|
||||
this.loginCiphers.push(c);
|
||||
break;
|
||||
case CipherType.Card:
|
||||
this.cardCiphers.push(c);
|
||||
break;
|
||||
case CipherType.Identity:
|
||||
this.identityCiphers.push(c);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue