clients/apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html

<td bitCell [ngClass]="RowHeightClass" class="tw-min-w-fit">
  <input
    *ngIf="showCheckbox"
    type="checkbox"
    bitCheckbox
    appStopProp
    [disabled]="disabled || decryptionFailure"
    [checked]="checked"
    (change)="$event ? this.checkedToggled.next() : null"
    [attr.aria-label]="'vaultItemSelect' | i18n"
  />
</td>
<td bitCell [ngClass]="RowHeightClass" class="tw-min-w-fit">
  <app-vault-icon [cipher]="cipher"></app-vault-icon>
</td>
<td bitCell [ngClass]="RowHeightClass" class="tw-truncate">
  <div class="tw-inline-flex tw-w-full">
    <button
      bitLink
      class="tw-overflow-hidden tw-text-ellipsis tw-text-start tw-leading-snug"
      [disabled]="disabled"
      [routerLink]="[]"
      [queryParams]="{ itemId: cipher.id, action: clickAction }"
      queryParamsHandling="merge"
      [replaceUrl]="true"
      title="{{ 'editItemWithName' | i18n: cipher.name }}"
      type="button"
      appStopProp
      aria-haspopup="dialog"
    >
      {{ cipher.name }}
    </button>
    <ng-container *ngIf="hasAttachments">
      <i
        class="bwi bwi-paperclip tw-ml-2 tw-leading-normal"
        appStopProp
        title="{{ 'attachments' | i18n }}"
        aria-hidden="true"
      ></i>
      <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
      <ng-container *ngIf="showFixOldAttachments">
        <i
          class="bwi bwi-exclamation-triangle tw-ml-2 tw-leading-normal tw-text-warning"
          appStopProp
          title="{{ 'attachmentsNeedFix' | i18n }}"
          aria-hidden="true"
        ></i>
        <span class="tw-sr-only">{{ "attachmentsNeedFix" | i18n }}</span>
      </ng-container>
    </ng-container>
  </div>
  <br />
  <span class="tw-text-sm tw-text-muted" appStopProp>{{ subtitle }}</span>
</td>
<td bitCell [ngClass]="RowHeightClass" *ngIf="showOwner" class="tw-hidden lg:tw-table-cell">
  <app-org-badge
    [disabled]="disabled"
    [organizationId]="cipher.organizationId"
    [organizationName]="cipher.organizationId | orgNameFromId: organizations"
    appStopProp
  >
  </app-org-badge>
</td>
<td bitCell [ngClass]="RowHeightClass" *ngIf="showCollections">
  <app-collection-badge
    *ngIf="cipher.collectionIds"
    [collectionIds]="cipher.collectionIds"
    [collections]="collections"
  ></app-collection-badge>
</td>
<td bitCell [ngClass]="RowHeightClass" *ngIf="showGroups"></td>
<td bitCell [ngClass]="RowHeightClass" *ngIf="viewingOrgVault">
  <p class="tw-mb-0 tw-text-muted">
    {{ permissionText }}
  </p>
</td>
<td bitCell [ngClass]="RowHeightClass" class="tw-text-right">
  <button
    *ngIf="decryptionFailure"
    [disabled]="disabled || !canManageCollection"
    [bitMenuTriggerFor]="corruptedCipherOptions"
    size="small"
    bitIconButton="bwi-ellipsis-v"
    type="button"
    label="{{ 'options' | i18n }}"
    appStopProp
  ></button>
  <bit-menu #corruptedCipherOptions>
    <button bitMenuItem *ngIf="canDeleteCipher" (click)="deleteCipher()" type="button">
      <span class="tw-text-danger">
        <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
        {{ (isDeleted ? "permanentlyDelete" : "delete") | i18n }}
      </span>
    </button>
  </bit-menu>
  @if (!decryptionFailure) {
    <button
      [bitMenuTriggerFor]="cipherOptions"
      [disabled]="disabled"
      size="small"
      bitIconButton="bwi-ellipsis-v"
      type="button"
      appStopProp
      label="{{ 'options' | i18n }}"
    ></button>
    <bit-menu #cipherOptions>
      <ng-container *ngIf="isLoginCipher">
        <button type="button" bitMenuItem appCopyField="username" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copyUsername" | i18n }}
        </button>
        @if (cipher.viewPassword) {
          <button bitMenuItem type="button" appCopyField="password" [cipher]="cipher">
            <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
            {{ "copyPassword" | i18n }}
          </button>
        }
        <button bitMenuItem type="button" appCopyField="totp" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copyVerificationCode" | i18n }}
        </button>
        <a
          bitMenuItem
          *ngIf="canLaunch"
          type="button"
          [href]="launchUri"
          target="_blank"
          rel="noreferrer"
        >
          <i class="bwi bwi-fw bwi-external-link" aria-hidden="true"></i>
          {{ "launch" | i18n }}
        </a>
      </ng-container>

      <ng-container *ngIf="isCardCipher">
        <button type="button" bitMenuItem appCopyField="cardNumber" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copyNumber" | i18n }}
        </button>
        <button type="button" bitMenuItem appCopyField="securityCode" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copySecurityCode" | i18n }}
        </button>
      </ng-container>

      <ng-container *ngIf="isIdentityCipher">
        <button type="button" bitMenuItem appCopyField="username" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copyUsername" | i18n }}
        </button>
        <button type="button" bitMenuItem appCopyField="email" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copyEmail" | i18n }}
        </button>
        <button type="button" bitMenuItem appCopyField="phone" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copyPhone" | i18n }}
        </button>
        <button type="button" bitMenuItem appCopyField="address" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copyAddress" | i18n }}
        </button>
      </ng-container>

      <ng-container *ngIf="isSecureNoteCipher">
        <button type="button" bitMenuItem appCopyField="secureNote" [cipher]="cipher">
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copyNote" | i18n }}
        </button>
      </ng-container>

      <bit-menu-divider *ngIf="showMenuDivider"></bit-menu-divider>

      @if (showFavorite) {
        <button bitMenuItem type="button" (click)="toggleFavorite()">
          <i class="bwi bwi-fw bwi-star" aria-hidden="true"></i>
          {{ (cipher.favorite ? "unfavorite" : "favorite") | i18n }}
        </button>
      }
      @if (!isDeleted && canEditCipher) {
        <button bitMenuItem type="button" (click)="editCipher()">
          <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
          {{ "edit" | i18n }}
        </button>
      }
      @if (showAttachments) {
        <button bitMenuItem type="button" (click)="attachments()">
          <i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
          {{ "attachments" | i18n }}
        </button>
      }
      @if (showClone) {
        <button bitMenuItem type="button" (click)="clone()">
          <i class="bwi bwi-fw bwi-files" aria-hidden="true"></i>
          {{ "clone" | i18n }}
        </button>
      }
      @if (showAssignToCollections) {
        <button
          bitMenuItem
          *ngIf="showAssignToCollections"
          type="button"
          (click)="assignToCollections()"
        >
          <i class="bwi bwi-fw bwi-collection-shared" aria-hidden="true"></i>
          {{ "assignToCollections" | i18n }}
        </button>
      }
      @if (showEventLogs) {
        <button bitMenuItem type="button" (click)="events()">
          <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
          {{ "eventLogs" | i18n }}
        </button>
      }
      @if (showArchiveButton) {
        @if (userCanArchive) {
          <button bitMenuItem (click)="archive()" type="button">
            <i class="bwi bwi-fw bwi-archive" aria-hidden="true"></i>
            {{ "archiveVerb" | i18n }}
          </button>
        }
        @if (!userCanArchive) {
          <button bitMenuItem (click)="badge.promptForPremium($event)" type="button">
            <i class="bwi bwi-fw bwi-archive" aria-hidden="true"></i>
            {{ "archiveVerb" | i18n }}
            <!-- Hide app-premium badge from accessibility tools as it results in a button within a button -->
            <div slot="end" class="-tw-mt-0.5" aria-hidden>
              <app-premium-badge #badge></app-premium-badge>
            </div>
          </button>
        }
      }

      @if (showUnArchiveButton) {
        <button bitMenuItem (click)="unarchive()" type="button">
          <i class="bwi bwi-fw bwi-unarchive" aria-hidden="true"></i>
          {{ "unArchive" | i18n }}
        </button>
      }

      <button bitMenuItem (click)="restore()" type="button" *ngIf="isDeleted && canRestoreCipher">
        <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
        {{ "restore" | i18n }}
      </button>
      <button bitMenuItem *ngIf="canDeleteCipher" (click)="deleteCipher()" type="button">
        <span class="tw-text-danger">
          <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
          {{ (isDeleted ? "permanentlyDelete" : "delete") | i18n }}
        </span>
      </button>
    </bit-menu>
  }
</td>