current tab component

src/popup2/components/action-buttons.component.html

@@ -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>

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<CipherView>();
     @Input() cipher: CipherView;
-    @Input() showView: boolean = false;
+    @Input() showView = false;
 
     cipherType = CipherType;
 

src/popup2/components/ciphers-list.component.html

@@ -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>

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<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);
+    }
 }

src/popup2/vault/current-tab.component.html

@@ -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>

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;
+    }
+
 }