Add totp copy to clipboard button to cipher view (#737)

* Add totp copy to clipboard button to cipher view

* Align totp copy privs with cipher view

* Enforce TOTP as premium feature

* Update jslib reference

jslib

@@ -1 +1 @@
-Subproject commit 2c414ce27a5c14f6cd7f86cfd07096a192d058ca
+Subproject commit cc801ce0d7e200a365bed02c35b8d97666dbeab4

src/app/organizations/vault/ciphers.component.ts

@@ -13,6 +13,8 @@ import { EventService } from 'jslib/abstractions/event.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SearchService } from 'jslib/abstractions/search.service';
+import { TotpService } from 'jslib/abstractions/totp.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 import { CipherView } from 'jslib/models/view/cipherView';
@@ -34,9 +36,9 @@ export class CiphersComponent extends BaseCiphersComponent {
     constructor(searchService: SearchService, analytics: Angulartics2,
         toasterService: ToasterService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, cipherService: CipherService,
-        private apiService: ApiService, eventService: EventService) {
+        private apiService: ApiService, eventService: EventService, totpService: TotpService, userService: UserService) {
         super(searchService, analytics, toasterService, i18nService, platformUtilsService,
-            cipherService, eventService);
+            cipherService, eventService, totpService, userService);
     }
 
     async load(filter: (cipher: CipherView) => boolean = null) {

src/app/vault/ciphers.component.html

@@ -47,6 +47,11 @@
                                     <i class="fa fa-fw fa-clone" aria-hidden="true"></i>
                                     {{'copyPassword' | i18n}}
                                 </a>
+                                <a class="dropdown-item" href="#" appStopClick (click)="copy(c, c.login.totp, 'verificationCodeTotp', 'TOTP')"
+                                    *ngIf="displayTotpCopyButton(c)">
+                                    <i class="fa fa-fw fa-clone" aria-hidden="true"></i>
+                                    {{'copyVerificationCode' | i18n}}
+                                </a>
                                 <a class="dropdown-item" href="#" appStopClick *ngIf="c.login.canLaunch"
                                     (click)="launch(c.login.launchUri)">
                                     <i class="fa fa-fw fa-share-square-o" aria-hidden="true"></i>

src/app/vault/ciphers.component.ts

@@ -14,6 +14,8 @@ import { EventService } from 'jslib/abstractions/event.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SearchService } from 'jslib/abstractions/search.service';
+import { TotpService } from 'jslib/abstractions/totp.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/components/ciphers.component';
 
@@ -37,15 +39,20 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
 
     cipherType = CipherType;
     actionPromise: Promise<any>;
+    userHasPremiumAccess = false;
 
     constructor(searchService: SearchService, protected analytics: Angulartics2,
         protected toasterService: ToasterService, protected i18nService: I18nService,
         protected platformUtilsService: PlatformUtilsService, protected cipherService: CipherService,
-        protected eventService: EventService) {
+        protected eventService: EventService, protected totpService: TotpService, protected userService: UserService) {
         super(searchService);
         this.pageSize = 200;
     }
 
+    async ngOnInit() {
+        this.userHasPremiumAccess = await this.userService.canAccessPremium();
+    }
+
     ngOnDestroy() {
         this.selectAll(false);
     }
@@ -117,9 +124,11 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
         this.actionPromise = null;
     }
 
-    copy(cipher: CipherView, value: string, typeI18nKey: string, aType: string) {
+    async copy(cipher: CipherView, value: string, typeI18nKey: string, aType: string) {
-        if (value == null) {
+        if (value == null || !this.displayTotpCopyButton(cipher)) {
             return;
+        } else if (value === cipher.login.totp) {
+            value = await this.totpService.getCode(value);
         }
 
         this.analytics.eventTrack.next({ action: 'Copied ' + aType.toLowerCase() + ' from listing.' });
@@ -127,7 +136,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
         this.toasterService.popAsync('info', null,
             this.i18nService.t('valueCopied', this.i18nService.t(typeI18nKey)));
 
-        if (typeI18nKey === 'password') {
+        if (typeI18nKey === 'password' || typeI18nKey === 'verificationCodeTotp') {
             this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, cipher.id);
         } else if (typeI18nKey === 'securityCode') {
             this.eventService.collect(EventType.Cipher_ClientCopiedCardCode, cipher.id);
@@ -161,6 +170,11 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
         return this.getSelected().map((c) => c.id);
     }
 
+    displayTotpCopyButton(cipher: CipherView) {
+        return (cipher?.login?.hasTotp ?? false) &&
+            (cipher.organizationUseTotp || this.userHasPremiumAccess);
+    }
+
     protected deleteCipher(id: string, permanent: boolean) {
         return permanent ? this.cipherService.deleteWithServer(id) : this.cipherService.softDeleteWithServer(id);
     }