diff --git a/src/popup2/components/action-buttons.component.html b/src/popup2/components/action-buttons.component.html index 411c1588a44..8b51af44c27 100644 --- a/src/popup2/components/action-buttons.component.html +++ b/src/popup2/components/action-buttons.component.html @@ -1,36 +1,36 @@ - + - - - - - - diff --git a/src/popup2/components/action-buttons.component.ts b/src/popup2/components/action-buttons.component.ts index 73303e144c4..4593525d72d 100644 --- a/src/popup2/components/action-buttons.component.ts +++ b/src/popup2/components/action-buttons.component.ts @@ -26,7 +26,7 @@ import { PopupUtilsService } from '../services/popup-utils.service'; export class ActionButtonsComponent { @Output() onView = new EventEmitter(); @Input() cipher: CipherView; - @Input() showView: boolean = false; + @Input() showView = false; cipherType = CipherType; diff --git a/src/popup2/components/ciphers-list.component.html b/src/popup2/components/ciphers-list.component.html index 1dce61e2b5c..9cb80ac204c 100644 --- a/src/popup2/components/ciphers-list.component.html +++ b/src/popup2/components/ciphers-list.component.html @@ -9,5 +9,6 @@ {{c.subTitle}} - + diff --git a/src/popup2/components/ciphers-list.component.ts b/src/popup2/components/ciphers-list.component.ts index 0a0b63f31fb..0dfc0699c8d 100644 --- a/src/popup2/components/ciphers-list.component.ts +++ b/src/popup2/components/ciphers-list.component.ts @@ -25,8 +25,9 @@ import { PopupUtilsService } from '../services/popup-utils.service'; }) export class CiphersListComponent { @Output() onSelected = new EventEmitter(); + @Output() onView = new EventEmitter(); @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); + } } diff --git a/src/popup2/vault/current-tab.component.html b/src/popup2/vault/current-tab.component.html new file mode 100644 index 00000000000..4e3eb6add08 --- /dev/null +++ b/src/popup2/vault/current-tab.component.html @@ -0,0 +1,48 @@ +
+
+ +
+
+ {{'currentTab' | i18n}} +
+
+ +
+
+ +

{{'loading' | i18n}}

+ +
+
+ {{'typeLogins' | i18n}} + {{loginCiphers.length}} +
+
+ +
+
+
+
+ {{'cards' | i18n}} + {{cardCiphers.length}} +
+
+ +
+
+
+
+ {{'identities' | i18n}} + {{identityCiphers.length}} +
+
+ +
+
+
+
diff --git a/src/popup2/vault/current-tab.component.ts b/src/popup2/vault/current-tab.component.ts index 8dd0ae8ce47..1b5e314b25f 100644 --- a/src/popup2/vault/current-tab.component.ts +++ b/src/popup2/vault/current-tab.component.ts @@ -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; + } + }