browser/apps/web/src/app/vault/vault-items.component.html

<ng-container>
  <bit-table
    *ngIf="filteredCiphers.length || filteredCollections.length"
    infiniteScroll
    [infiniteScrollDistance]="1"
    [infiniteScrollDisabled]="!isPaging()"
    (scrolled)="loadMore()"
  >
    <ng-container header>
      <tr>
        <th bitCell class="tw-min-w-fit" colspan="2">
          <input
            class="tw-mr-2"
            type="checkbox"
            id="checkAll"
            (change)="checkAll($any($event.target).checked)"
            [(ngModel)]="isAllChecked"
          />
          <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="checkAll">{{
            "all" | i18n
          }}</label>
        </th>
        <th bitCell class="tw-w-1/2">{{ "name" | i18n }}</th>
        <th bitCell class="tw-w-1/2">
          <ng-container *ngIf="!organization">{{ "owner" | i18n }}</ng-container>
          <ng-container *ngIf="organization">
            {{ (activeFilter.selectedCollectionNode ? "groups" : "collections") | i18n }}
          </ng-container>
        </th>
        <th bitCell class="tw-min-w-fit">
          <button
            [bitMenuTriggerFor]="headerMenu"
            bitIconButton="bwi-ellipsis-v"
            size="small"
            type="button"
            appA11yTitle="{{ 'options' | i18n }}"
          ></button>
          <bit-menu #headerMenu>
            <ng-container>
              <button
                class="dropdown-item"
                appStopClick
                (click)="bulkMove()"
                *ngIf="!activeFilter.isDeleted && !organization"
              >
                <i class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
                {{ "moveSelected" | i18n }}
              </button>
              <button
                class="dropdown-item"
                appStopClick
                (click)="bulkShare()"
                *ngIf="!activeFilter.isDeleted && !organization"
              >
                <i class="bwi bwi-fw bwi-arrow-circle-right" aria-hidden="true"></i>
                {{ "moveSelectedToOrg" | i18n }}
              </button>
              <button class="dropdown-item" (click)="bulkRestore()" *ngIf="activeFilter.isDeleted">
                <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
                {{ "restoreSelected" | i18n }}
              </button>
              <button class="dropdown-item text-danger" (click)="bulkDelete()">
                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                {{
                  (activeFilter.isDeleted ? "permanentlyDeleteSelected" : "deleteSelected") | i18n
                }}
              </button>
            </ng-container>
          </bit-menu>
        </th>
      </tr>
    </ng-container>
    <ng-container body>
      <tr bitRow *ngFor="let col of filteredCollections">
        <td bitCell (click)="selectRow(col)">
          <input
            *ngIf="organization && col.node.id !== null"
            class="tw-cursor-pointer"
            type="checkbox"
            [(ngModel)]="$any(col).checked"
            appStopProp
          />
        </td>
        <td bitCell (click)="selectRow(col)">
          <div class="icon" aria-hidden="true">
            <i class="bwi bwi-fw bwi-lg bwi-collection"></i>
          </div>
        </td>
        <td bitCell class="tw-font-bold" (click)="selectRow(col)">
          <button bitLink linkType="secondary" (click)="navigateCollection(col)">
            {{ col.node.name }}
          </button>
        </td>
        <td bitCell (click)="selectRow(col)">
          <ng-container *ngIf="!organization">
            <app-org-badge
              organizationName="{{ col.node.organizationId | orgNameFromId: organizations }}"
              [profileName]="profileName"
              (onOrganizationClicked)="onOrganizationClicked(col.node.organizationId)"
            >
            </app-org-badge>
          </ng-container>
          <ng-container *ngIf="organization && activeFilter.selectedCollectionNode">
            <app-group-badge
              *ngIf="col.node.groups"
              [selectedGroups]="col.node.groups"
              [allGroups]="groups"
            ></app-group-badge>
          </ng-container>
        </td>
        <td bitCell>
          <button
            *ngIf="organization && col.node.id !== null"
            [bitMenuTriggerFor]="collectionOptions"
            size="small"
            bitIconButton="bwi-ellipsis-v"
            type="button"
            appA11yTitle="{{ 'options' | i18n }}"
          ></button>
          <bit-menu #collectionOptions>
            <button
              *ngIf="organization?.canEditAssignedCollections || organization?.canEditAnyCollection"
              bitMenuItem
              (click)="editCollection(col.node, 'info')"
            >
              <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
              {{ "editInfo" | i18n }}
            </button>
            <button
              *ngIf="organization?.canEditAssignedCollections || organization?.canEditAnyCollection"
              bitMenuItem
              (click)="editCollection(col.node, 'access')"
            >
              <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
              {{ "access" | i18n }}
            </button>
            <button
              *ngIf="
                organization?.canDeleteAssignedCollections || organization?.canDeleteAnyCollection
              "
              bitMenuItem
              (click)="deleteCollection(col.node)"
            >
              <span class="tw-text-danger">
                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                {{ "delete" | i18n }}
              </span>
            </button>
          </bit-menu>
        </td>
      </tr>
      <tr bitRow *ngFor="let c of filteredCiphers">
        <td bitCell (click)="selectRow(c)">
          <input type="checkbox" [(ngModel)]="$any(c).checked" appStopProp />
        </td>
        <td bitCell (click)="selectRow(c)">
          <app-vault-icon [cipher]="c"></app-vault-icon>
        </td>
        <td bitCell (click)="selectRow(c)">
          <a
            appStopProp
            [routerLink]="[]"
            [queryParams]="{ itemId: c.id }"
            queryParamsHandling="merge"
            title="{{ 'editItem' | i18n }}"
            >{{ c.name }}</a
          >
          <ng-container *ngIf="c.hasAttachments">
            <i
              class="bwi bwi-paperclip"
              appStopProp
              title="{{ 'attachments' | i18n }}"
              aria-hidden="true"
            ></i>
            <span class="sr-only">{{ "attachments" | i18n }}</span>
            <ng-container *ngIf="showFixOldAttachments(c)">
              <i
                class="bwi bwi-exclamation-triangle text-warning"
                appStopProp
                title="{{ 'attachmentsNeedFix' | i18n }}"
                aria-hidden="true"
              ></i>
              <span class="sr-only">{{ "attachmentsNeedFix" | i18n }}</span>
            </ng-container>
          </ng-container>
          <br />
          <small appStopProp>{{ c.subTitle }}</small>
        </td>
        <td bitCell>
          <ng-container *ngIf="!organization">
            <app-org-badge
              organizationName="{{ c.organizationId | orgNameFromId: organizations }}"
              profileName="{{ profileName }}"
              (onOrganizationClicked)="onOrganizationClicked(c.organizationId)"
            >
            </app-org-badge>
          </ng-container>
          <ng-container *ngIf="organization && !activeFilter.selectedCollectionNode">
            <app-collection-badge
              *ngIf="c.collectionIds"
              [collectionIds]="c.collectionIds"
              [collections]="vaultFilterService.filteredCollections$ | async"
            ></app-collection-badge>
          </ng-container>
        </td>
        <td bitCell>
          <button
            [bitMenuTriggerFor]="cipherOptions"
            size="small"
            bitIconButton="bwi-ellipsis-v"
            type="button"
            appA11yTitle="{{ 'options' | i18n }}"
          ></button>
          <bit-menu #cipherOptions>
            <ng-container *ngIf="c.type === cipherType.Login && !c.isDeleted">
              <button bitMenuItem (click)="copy(c, c.login.username, 'username', 'Username')">
                <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                {{ "copyUsername" | i18n }}
              </button>
              <button
                bitMenuItem
                (click)="copy(c, c.login.password, 'password', 'Password')"
                *ngIf="c.viewPassword"
              >
                <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                {{ "copyPassword" | i18n }}
              </button>
              <button
                bitMenuItem
                (click)="copy(c, c.login.totp, 'verificationCodeTotp', 'TOTP')"
                *ngIf="displayTotpCopyButton(c)"
              >
                <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                {{ "copyVerificationCode" | i18n }}
              </button>
              <button bitMenuItem *ngIf="c.login.canLaunch" (click)="launch(c.login.launchUri)">
                <i class="bwi bwi-fw bwi-share-square" aria-hidden="true"></i>
                {{ "launch" | i18n }}
              </button>
            </ng-container>
            <button bitMenuItem (click)="attachments(c)">
              <i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
              {{ "attachments" | i18n }}
            </button>
            <button
              bitMenuItem
              *ngIf="((!organization && !c.organizationId) || organization) && !c.isDeleted"
              (click)="clone(c)"
            >
              <i class="bwi bwi-fw bwi-files" aria-hidden="true"></i>
              {{ "clone" | i18n }}
            </button>
            <button
              bitMenuItem
              *ngIf="!organization && !c.organizationId && !c.isDeleted"
              (click)="share(c)"
            >
              <i class="bwi bwi-fw bwi-arrow-circle-right" aria-hidden="true"></i>
              {{ "moveToOrganization" | i18n }}
            </button>
            <button
              bitMenuItem
              *ngIf="c.organizationId && !c.isDeleted"
              (click)="editCipherCollections(c)"
            >
              <i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
              {{ "collections" | i18n }}
            </button>
            <button bitMenuItem *ngIf="c.organizationId && accessEvents" (click)="events(c)">
              <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
              {{ "eventLogs" | i18n }}
            </button>
            <button bitMenuItem (click)="restore(c)" *ngIf="c.isDeleted">
              <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
              {{ "restore" | i18n }}
            </button>
            <button bitMenuItem (click)="deleteCipher(c)">
              <span class="tw-text-danger">
                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                {{ (c.isDeleted ? "permanentlyDelete" : "delete") | i18n }}
              </span>
            </button>
          </bit-menu>
        </td>
      </tr>
    </ng-container>
  </bit-table>
  <div class="no-items" *ngIf="!filteredCiphers.length && !filteredCollections.length">
    <ng-container *ngIf="!loaded">
      <i
        class="bwi bwi-spinner bwi-spin text-muted"
        title="{{ 'loading' | i18n }}"
        aria-hidden="true"
      ></i>
      <span class="sr-only">{{ "loading" | i18n }}</span>
    </ng-container>
    <ng-container *ngIf="loaded">
      <bit-icon [icon]="noItemIcon" aria-hidden="true"></bit-icon>
      <p>{{ "noItemsInList" | i18n }}</p>
      <button (click)="addCipher()" class="btn btn-outline-primary" *ngIf="showAddNew">
        <i class="bwi bwi-plus bwi-fw"></i>{{ "addItem" | i18n }}
      </button>
    </ng-container>
  </div>
</ng-container>