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

* Add totp copy to clipboard button to cipher view

* Hide quick-copy rather than disable if no totp

* Revert to disabled TOTP button

* Enforce premium access to TOTPs

* Update jslib reference

jslib

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

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

@@ -16,6 +16,11 @@
         [ngClass]="{disabled: (!cipher.login.password || !cipher.viewPassword)}">
         <i class="fa fa-lg fa-key" aria-hidden="true"></i>
     </span>
+    <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyVerificationCode' | i18n}}"
+        (click)="copy(cipher, cipher.login.totp, 'verificationCodeTotp', 'TOTP')"
+        [ngClass]="{disabled: (!displayTotpCopyButton(cipher))}">
+        <i class="fa fa-lg fa-clock-o" aria-hidden="true"></i>
+    </span>
 </ng-container>
 <ng-container *ngIf="cipher.type === cipherType.Card">
     <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyNumber' | i18n}}"

src/popup/components/action-buttons.component.ts

@@ -18,6 +18,8 @@ import { CipherView } from 'jslib/models/view/cipherView';
 import { EventService } from 'jslib/abstractions/event.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { TotpService } from 'jslib/abstractions/totp.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 import { PopupUtilsService } from '../services/popup-utils.service';
 
@@ -31,11 +33,17 @@ export class ActionButtonsComponent {
     @Input() showView = false;
 
     cipherType = CipherType;
+    userHasPremiumAccess = false;
 
     constructor(private analytics: Angulartics2, private toasterService: ToasterService,
         private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
-        private popupUtilsService: PopupUtilsService, private eventService: EventService) { }
+        private popupUtilsService: PopupUtilsService, private eventService: EventService,
+        private totpService: TotpService, private userService: UserService) { }
 
+    async ngOnInit() {
+        this.userHasPremiumAccess = await this.userService.canAccessPremium();
+    }
+    
     launch() {
         if (this.cipher.type !== CipherType.Login || !this.cipher.login.canLaunch) {
             return;
@@ -48,9 +56,11 @@ export class ActionButtonsComponent {
         }
     }
 
-    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);
         }
 
         if (!cipher.viewPassword) {
@@ -62,13 +72,18 @@ export class ActionButtonsComponent {
         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);
         }
     }
 
+    displayTotpCopyButton(cipher: CipherView) {
+        return (cipher?.login?.hasTotp ?? false) &&
+            (cipher.organizationUseTotp || this.userHasPremiumAccess);
+    }
+
     view() {
         this.onView.emit(this.cipher);
     }