[PM-10514] New TOTP Counter Component (#10486)

* new vault totp countdown component

libs/vault/src/cipher-view/cipher-view.component.html

@@ -9,11 +9,7 @@
   </app-item-details-v2>
 
   <!-- LOGIN CREDENTIALS -->
-  <app-login-credentials-view
-    *ngIf="hasLogin"
-    [login]="cipher.login"
-    [viewPassword]="cipher.viewPassword"
-  ></app-login-credentials-view>
+  <app-login-credentials-view *ngIf="hasLogin" [cipher]="cipher"></app-login-credentials-view>
 
   <!-- AUTOFILL OPTIONS -->
   <app-autofill-options-view *ngIf="hasAutofill" [loginUris]="cipher.login.uris">

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -3,7 +3,7 @@
     <h2 bitTypography="h6">{{ "loginCredentials" | i18n }}</h2>
   </bit-section-header>
   <bit-card>
-    <bit-form-field [disableMargin]="!login.password && !login.totp">
+    <bit-form-field [disableMargin]="!cipher.login.password && !cipher.login.totp">
       <bit-label>
         {{ "username" | i18n }}
       </bit-label>
@@ -11,7 +11,7 @@
         readonly
         bitInput
         type="text"
-        [value]="login.username"
+        [value]="cipher.login.username"
         aria-readonly="true"
         data-testid="login-username"
       />
@@ -19,20 +19,20 @@
         bitIconButton="bwi-clone"
         bitSuffix
         type="button"
-        [appCopyClick]="login.username"
+        [appCopyClick]="cipher.login.username"
         [valueLabel]="'username' | i18n"
         showToast
         [appA11yTitle]="'copyValue' | i18n"
         data-testid="toggle-username"
       ></button>
     </bit-form-field>
-    <bit-form-field [disableMargin]="!login.totp">
+    <bit-form-field [disableMargin]="!cipher.login.totp">
       <bit-label>{{ "password" | i18n }}</bit-label>
       <input
         readonly
         bitInput
         type="password"
-        [value]="login.password"
+        [value]="cipher.login.password"
         aria-readonly="true"
         data-testid="login-password"
       />
@@ -45,7 +45,7 @@
         (toggledChange)="pwToggleValue($event)"
       ></button>
       <button
-        *ngIf="viewPassword && passwordRevealed"
+        *ngIf="cipher.viewPassword && passwordRevealed"
         bitIconButton="bwi-numbered-list"
         bitSuffix
         type="button"
@@ -58,7 +58,7 @@
         bitIconButton="bwi-clone"
         bitSuffix
         type="button"
-        [appCopyClick]="login.password"
+        [appCopyClick]="cipher.login.password"
         [valueLabel]="'password' | i18n"
         showToast
         [appA11yTitle]="'copyValue' | i18n"
@@ -66,9 +66,12 @@
       ></button>
     </bit-form-field>
     <ng-container *ngIf="showPasswordCount && passwordRevealed">
-      <bit-color-password [password]="login.password" [showCount]="true"></bit-color-password>
+      <bit-color-password
+        [password]="cipher.login.password"
+        [showCount]="true"
+      ></bit-color-password>
     </ng-container>
-    <bit-form-field disableMargin *ngIf="login.totp">
+    <bit-form-field disableMargin *ngIf="cipher.login.totp">
       <bit-label
         >{{ "verificationCodeTotp" | i18n }}
         <span
@@ -84,17 +87,25 @@
       <input
         readonly
         bitInput
-        type="text"
-        [value]="login.totp"
+        [type]="!(isPremium$ | async) ? 'password' : 'text'"
+        [value]="totpCopyCode || '*** ***'"
         aria-readonly="true"
         data-testid="login-totp"
         [disabled]="!(isPremium$ | async)"
       />
+      <button
+        *ngIf="isPremium$ | async"
+        bitTotpCountdown
+        [cipher]="cipher"
+        bitSuffix
+        type="button"
+        (sendCopyCode)="setTotpCopyCode($event)"
+      ></button>
       <button
         bitIconButton="bwi-clone"
         bitSuffix
         type="button"
-        [appCopyClick]="login.totp"
+        [appCopyClick]="totpCopyCode"
         [valueLabel]="'verificationCodeTotp' | i18n"
         showToast
         [appA11yTitle]="'copyValue' | i18n"

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts

@@ -5,7 +5,7 @@ import { Observable, shareReplay } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
-import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
   CardComponent,
   FormFieldModule,
@@ -17,6 +17,8 @@ import {
   ColorPasswordModule,
 } from "@bitwarden/components";
 
+import { BitTotpCountdownComponent } from "../../components/totp-countdown/totp-countdown.component";
+
 @Component({
   selector: "app-login-credentials-view",
   templateUrl: "login-credentials-view.component.html",
@@ -32,17 +34,19 @@ import {
     IconButtonModule,
     BadgeModule,
     ColorPasswordModule,
+    BitTotpCountdownComponent,
   ],
 })
 export class LoginCredentialsViewComponent {
-  @Input() login: LoginView;
-  @Input() viewPassword: boolean;
+  @Input() cipher: CipherView;
+
   isPremium$: Observable<boolean> =
     this.billingAccountProfileStateService.hasPremiumFromAnySource$.pipe(
       shareReplay({ refCount: true, bufferSize: 1 }),
     );
   showPasswordCount: boolean = false;
   passwordRevealed: boolean = false;
+  totpCopyCode: string;
 
   constructor(
     private billingAccountProfileStateService: BillingAccountProfileStateService,
@@ -60,4 +64,8 @@ export class LoginCredentialsViewComponent {
   togglePasswordCount() {
     this.showPasswordCount = !this.showPasswordCount;
   }
+
+  setTotpCopyCode(e: any) {
+    this.totpCopyCode = e;
+  }
 }