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

<bit-section>
  <bit-section-header>
    <h2 bitTypography="h6">{{ "loginCredentials" | i18n }}</h2>
  </bit-section-header>
  <bit-card class="[&_bit-form-field:last-of-type]:tw-mb-0">
    <bit-form-field *ngIf="cipher.login.username">
      <bit-label>
        {{ "username" | i18n }}
      </bit-label>
      <input
        readonly
        bitInput
        type="text"
        [value]="cipher.login.username"
        aria-readonly="true"
        data-testid="login-username"
      />
      <button
        bitIconButton="bwi-clone"
        bitSuffix
        type="button"
        [appCopyClick]="cipher.login.username"
        [valueLabel]="'username' | i18n"
        showToast
        [appA11yTitle]="'copyValue' | i18n"
        data-testid="toggle-username"
      ></button>
    </bit-form-field>
    <bit-form-field *ngIf="cipher.login.password">
      <bit-label>{{ "password" | i18n }}</bit-label>
      <input
        readonly
        bitInput
        type="password"
        [value]="cipher.login.password"
        aria-readonly="true"
        data-testid="login-password"
      />
      <button
        bitSuffix
        type="button"
        bitIconButton
        bitPasswordInputToggle
        data-testid="toggle-password"
        (toggledChange)="pwToggleValue($event)"
      ></button>
      <button
        *ngIf="cipher.viewPassword && passwordRevealed"
        bitIconButton="bwi-numbered-list"
        bitSuffix
        type="button"
        data-testid="toggle-password-count"
        [appA11yTitle]="'toggleCharacterCount' | i18n"
        appStopClick
        (click)="togglePasswordCount()"
      ></button>
      <button
        bitIconButton="bwi-clone"
        bitSuffix
        type="button"
        [appCopyClick]="cipher.login.password"
        [valueLabel]="'password' | i18n"
        showToast
        [appA11yTitle]="'copyValue' | i18n"
        data-testid="copy-password"
      ></button>
    </bit-form-field>
    <div
      *ngIf="showPasswordCount && passwordRevealed"
      [ngClass]="{ 'tw-mt-3': !cipher.login.totp }"
    >
      <bit-color-password
        [password]="cipher.login.password"
        [showCount]="true"
      ></bit-color-password>
    </div>
    <bit-form-field *ngIf="cipher.login.totp">
      <bit-label
        >{{ "verificationCodeTotp" | i18n }}
        <span
          *ngIf="!(isPremium$ | async)"
          bitBadge
          variant="success"
          class="tw-ml-2"
          (click)="getPremium()"
          slot="end"
        >
          {{ "premium" | i18n }}
        </span>
      </bit-label>
      <input
        readonly
        bitInput
        [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]="totpCopyCode"
        [valueLabel]="'verificationCodeTotp' | i18n"
        showToast
        [appA11yTitle]="'copyValue' | i18n"
        data-testid="copy-totp"
        [disabled]="!(isPremium$ | async)"
      ></button>
    </bit-form-field>
  </bit-card>
</bit-section>