From 2407d85851daea7cffafd99274861cf1413d7b42 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Tue, 26 Jul 2022 16:21:09 -0700
Subject: [PATCH] Fix member and group page container

---
 .../manage/groups.component.html              | 148 ++---
 .../organizations/manage/groups.component.ts  |   2 +-
 .../manage/people.component.html              | 568 +++++++++---------
 3 files changed, 361 insertions(+), 357 deletions(-)

diff --git a/apps/web/src/app/organizations/manage/groups.component.html b/apps/web/src/app/organizations/manage/groups.component.html
index 050307b8539..72c6c2ee115 100644
--- a/apps/web/src/app/organizations/manage/groups.component.html
+++ b/apps/web/src/app/organizations/manage/groups.component.html
@@ -1,77 +1,79 @@
-<div class="page-header d-flex">
-  <h1>{{ "groups" | i18n }}</h1>
-  <div class="ml-auto d-flex">
-    <div>
-      <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-      <input
-        type="search"
-        class="form-control form-control-sm"
-        id="search"
-        placeholder="{{ 'search' | i18n }}"
-        [(ngModel)]="searchText"
-      />
+<div class="container page-content">
+  <div class="page-header d-flex">
+    <h1>{{ "groups" | i18n }}</h1>
+    <div class="ml-auto d-flex">
+      <div>
+        <label class="sr-only" for="search">{{ "search" | i18n }}</label>
+        <input
+          type="search"
+          class="form-control form-control-sm"
+          id="search"
+          placeholder="{{ 'search' | i18n }}"
+          [(ngModel)]="searchText"
+        />
+      </div>
+      <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
+        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        {{ "newGroup" | i18n }}
+      </button>
     </div>
-    <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
-      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-      {{ "newGroup" | i18n }}
-    </button>
   </div>
-</div>
-<ng-container *ngIf="loading">
-  <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="
-    !loading &&
-    (isPaging() ? pagedGroups : (groups | search: searchText:'name':'id')) as searchedGroups
-  "
->
-  <p *ngIf="!searchedGroups.length">{{ "noGroupsInList" | i18n }}</p>
-  <table
-    class="table table-hover table-list"
-    *ngIf="searchedGroups.length"
-    infiniteScroll
-    [infiniteScrollDistance]="1"
-    [infiniteScrollDisabled]="!isPaging()"
-    (scrolled)="loadMore()"
+  <ng-container *ngIf="loading">
+    <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="
+      !loading &&
+      (isPaging() ? pagedGroups : (groups | search: searchText:'name':'id')) as searchedGroups
+    "
   >
-    <tbody>
-      <tr *ngFor="let g of searchedGroups">
-        <td>
-          <a href="#" appStopClick (click)="edit(g)">{{ g.name }}</a>
-        </td>
-        <td class="table-list-options">
-          <div class="dropdown" appListDropdown>
-            <button
-              class="btn btn-outline-secondary dropdown-toggle"
-              type="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-              appA11yTitle="{{ 'options' | i18n }}"
-            >
-              <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
-            </button>
-            <div class="dropdown-menu dropdown-menu-right">
-              <a class="dropdown-item" href="#" appStopClick (click)="users(g)">
-                <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
-                {{ "users" | i18n }}
-              </a>
-              <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
-                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
-                {{ "delete" | i18n }}
-              </a>
+    <p *ngIf="!searchedGroups.length">{{ "noGroupsInList" | i18n }}</p>
+    <table
+      class="table table-hover table-list"
+      *ngIf="searchedGroups.length"
+      infiniteScroll
+      [infiniteScrollDistance]="1"
+      [infiniteScrollDisabled]="!isPaging()"
+      (scrolled)="loadMore()"
+    >
+      <tbody>
+        <tr *ngFor="let g of searchedGroups">
+          <td>
+            <a href="#" appStopClick (click)="edit(g)">{{ g.name }}</a>
+          </td>
+          <td class="table-list-options">
+            <div class="dropdown" appListDropdown>
+              <button
+                class="btn btn-outline-secondary dropdown-toggle"
+                type="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                appA11yTitle="{{ 'options' | i18n }}"
+              >
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#" appStopClick (click)="users(g)">
+                  <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
+                  {{ "users" | i18n }}
+                </a>
+                <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
+                  <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
+                  {{ "delete" | i18n }}
+                </a>
+              </div>
             </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</ng-container>
-<ng-template #addEdit></ng-template>
-<ng-template #usersTemplate></ng-template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </ng-container>
+  <ng-template #addEdit></ng-template>
+  <ng-template #usersTemplate></ng-template>
+</div>
diff --git a/apps/web/src/app/organizations/manage/groups.component.ts b/apps/web/src/app/organizations/manage/groups.component.ts
index 2df4c79b183..b9f368ea76e 100644
--- a/apps/web/src/app/organizations/manage/groups.component.ts
+++ b/apps/web/src/app/organizations/manage/groups.component.ts
@@ -49,7 +49,7 @@ export class GroupsComponent implements OnInit {
   ) {}
 
   async ngOnInit() {
-    this.route.parent.parent.params.subscribe(async (params) => {
+    this.route.parent.params.subscribe(async (params) => {
       this.organizationId = params.organizationId;
       const organization = await this.organizationService.get(this.organizationId);
       if (organization == null || !organization.useGroups) {
diff --git a/apps/web/src/app/organizations/manage/people.component.html b/apps/web/src/app/organizations/manage/people.component.html
index ff583bcf36b..9d14e35c9b3 100644
--- a/apps/web/src/app/organizations/manage/people.component.html
+++ b/apps/web/src/app/organizations/manage/people.component.html
@@ -1,293 +1,295 @@
-<div class="page-header">
-  <h1>{{ "people" | i18n }}</h1>
-  <div class="mt-2 d-flex">
-    <div class="btn-group btn-group-sm" role="group">
-      <button
-        type="button"
-        class="btn btn-outline-secondary"
-        [ngClass]="{ active: status == null }"
-        (click)="filter(null)"
-      >
-        {{ "all" | i18n }}
-        <span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary"
-        [ngClass]="{ active: status == userStatusType.Invited }"
-        (click)="filter(userStatusType.Invited)"
-      >
-        {{ "invited" | i18n }}
-        <span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary"
-        [ngClass]="{ active: status == userStatusType.Accepted }"
-        (click)="filter(userStatusType.Accepted)"
-      >
-        {{ "accepted" | i18n }}
-        <span bitBadge badgeType="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
-      </button>
-      <button
-        type="button"
-        class="btn btn-outline-secondary"
-        [ngClass]="{ active: status == userStatusType.Revoked }"
-        (click)="filter(userStatusType.Revoked)"
-      >
-        {{ "revoked" | i18n }}
-        <span bitBadge badgeType="info" *ngIf="revokedCount">{{ revokedCount }}</span>
-      </button>
-    </div>
-    <div class="ml-3">
-      <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-      <input
-        type="search"
-        class="form-control form-control-sm"
-        id="search"
-        placeholder="{{ 'search' | i18n }}"
-        [(ngModel)]="searchText"
-      />
-    </div>
-    <div class="dropdown ml-3" appListDropdown>
-      <button
-        class="btn btn-sm btn-outline-secondary dropdown-toggle"
-        type="button"
-        id="bulkActionsButton"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-        appA11yTitle="{{ 'options' | i18n }}"
-      >
-        <i class="bwi bwi-cog" aria-hidden="true"></i>
-      </button>
-      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
-        <button class="dropdown-item" appStopClick (click)="bulkReinvite()">
-          <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-          {{ "reinviteSelected" | i18n }}
+<div class="container page-content">
+  <div class="page-header d-flex">
+    <h1>{{ "members" | i18n }}</h1>
+    <div class="ml-auto d-flex">
+      <div class="btn-group btn-group-sm" role="group">
+        <button
+          type="button"
+          class="btn btn-outline-secondary"
+          [ngClass]="{ active: status == null }"
+          (click)="filter(null)"
+        >
+          {{ "all" | i18n }}
+          <span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
         </button>
         <button
-          class="dropdown-item text-success"
-          appStopClick
-          (click)="bulkConfirm()"
-          *ngIf="showBulkConfirmUsers"
+          type="button"
+          class="btn btn-outline-secondary"
+          [ngClass]="{ active: status == userStatusType.Invited }"
+          (click)="filter(userStatusType.Invited)"
         >
-          <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
-          {{ "confirmSelected" | i18n }}
+          {{ "invited" | i18n }}
+          <span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
         </button>
-        <button class="dropdown-item" appStopClick (click)="bulkRestore()">
-          <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
-          {{ "restoreAccess" | i18n }}
+        <button
+          type="button"
+          class="btn btn-outline-secondary"
+          [ngClass]="{ active: status == userStatusType.Accepted }"
+          (click)="filter(userStatusType.Accepted)"
+        >
+          {{ "accepted" | i18n }}
+          <span bitBadge badgeType="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
         </button>
-        <button class="dropdown-item" appStopClick (click)="bulkRevoke()">
-          <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
-          {{ "revokeAccess" | i18n }}
-        </button>
-        <button class="dropdown-item text-danger" appStopClick (click)="bulkRemove()">
-          <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-          {{ "remove" | i18n }}
-        </button>
-        <div class="dropdown-divider"></div>
-        <button class="dropdown-item" appStopClick (click)="selectAll(true)">
-          <i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
-          {{ "selectAll" | i18n }}
-        </button>
-        <button class="dropdown-item" appStopClick (click)="selectAll(false)">
-          <i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
-          {{ "unselectAll" | i18n }}
+        <button
+          type="button"
+          class="btn btn-outline-secondary"
+          [ngClass]="{ active: status == userStatusType.Revoked }"
+          (click)="filter(userStatusType.Revoked)"
+        >
+          {{ "revoked" | i18n }}
+          <span bitBadge badgeType="info" *ngIf="revokedCount">{{ revokedCount }}</span>
         </button>
       </div>
+      <div class="ml-3">
+        <label class="sr-only" for="search">{{ "search" | i18n }}</label>
+        <input
+          type="search"
+          class="form-control form-control-sm"
+          id="search"
+          placeholder="{{ 'search' | i18n }}"
+          [(ngModel)]="searchText"
+        />
+      </div>
+      <div class="dropdown ml-3" appListDropdown>
+        <button
+          class="btn btn-sm btn-outline-secondary dropdown-toggle"
+          type="button"
+          id="bulkActionsButton"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          appA11yTitle="{{ 'options' | i18n }}"
+        >
+          <i class="bwi bwi-cog" aria-hidden="true"></i>
+        </button>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
+          <button class="dropdown-item" appStopClick (click)="bulkReinvite()">
+            <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+            {{ "reinviteSelected" | i18n }}
+          </button>
+          <button
+            class="dropdown-item text-success"
+            appStopClick
+            (click)="bulkConfirm()"
+            *ngIf="showBulkConfirmUsers"
+          >
+            <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+            {{ "confirmSelected" | i18n }}
+          </button>
+          <button class="dropdown-item" appStopClick (click)="bulkRestore()">
+            <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+            {{ "restoreAccess" | i18n }}
+          </button>
+          <button class="dropdown-item" appStopClick (click)="bulkRevoke()">
+            <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
+            {{ "revokeAccess" | i18n }}
+          </button>
+          <button class="dropdown-item text-danger" appStopClick (click)="bulkRemove()">
+            <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+            {{ "remove" | i18n }}
+          </button>
+          <div class="dropdown-divider"></div>
+          <button class="dropdown-item" appStopClick (click)="selectAll(true)">
+            <i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
+            {{ "selectAll" | i18n }}
+          </button>
+          <button class="dropdown-item" appStopClick (click)="selectAll(false)">
+            <i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
+            {{ "unselectAll" | i18n }}
+          </button>
+        </div>
+      </div>
+      <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
+        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        {{ "inviteUser" | i18n }}
+      </button>
     </div>
-    <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
-      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-      {{ "inviteUser" | i18n }}
-    </button>
   </div>
-</div>
-<ng-container *ngIf="loading">
-  <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="
-    !loading &&
-    (isPaging() ? pagedUsers : (users | search: searchText:'name':'email':'id')) as searchedUsers
-  "
->
-  <p *ngIf="!searchedUsers.length">{{ "noUsersInList" | i18n }}</p>
-  <ng-container *ngIf="searchedUsers.length">
-    <app-callout
-      type="info"
-      title="{{ 'confirmUsers' | i18n }}"
-      icon="bwi bwi-check-circle"
-      *ngIf="showConfirmUsers"
-    >
-      {{ "usersNeedConfirmed" | i18n }}
-    </app-callout>
-    <table
-      class="table table-hover table-list"
-      infiniteScroll
-      [infiniteScrollDistance]="1"
-      [infiniteScrollDisabled]="!isPaging()"
-      (scrolled)="loadMore()"
-    >
-      <tbody>
-        <tr *ngFor="let u of searchedUsers">
-          <td (click)="checkUser(u)" class="table-list-checkbox">
-            <input type="checkbox" [(ngModel)]="u.checked" appStopProp />
-          </td>
-          <td width="30">
-            <app-avatar
-              [data]="u | userName"
-              [email]="u.email"
-              size="25"
-              [circle]="true"
-              [fontSize]="14"
-            >
-            </app-avatar>
-          </td>
-          <td>
-            <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
-            <span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Invited">{{
-              "invited" | i18n
-            }}</span>
-            <span bitBadge badgeType="warning" *ngIf="u.status === userStatusType.Accepted">{{
-              "accepted" | i18n
-            }}</span>
-            <span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Revoked">{{
-              "revoked" | i18n
-            }}</span>
-            <small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>
-          </td>
-          <td>
-            <ng-container *ngIf="u.twoFactorEnabled">
-              <i
-                class="bwi bwi-lock"
-                title="{{ 'userUsingTwoStep' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
-            </ng-container>
-            <ng-container *ngIf="showEnrolledStatus(u)">
-              <i
-                class="bwi bwi-key"
-                title="{{ 'enrolledPasswordReset' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="sr-only">{{ "enrolledPasswordReset" | i18n }}</span>
-            </ng-container>
-          </td>
-          <td>
-            <span *ngIf="u.type === userType.Owner">{{ "owner" | i18n }}</span>
-            <span *ngIf="u.type === userType.Admin">{{ "admin" | i18n }}</span>
-            <span *ngIf="u.type === userType.Manager">{{ "manager" | i18n }}</span>
-            <span *ngIf="u.type === userType.User">{{ "user" | i18n }}</span>
-            <span *ngIf="u.type === userType.Custom">{{ "custom" | i18n }}</span>
-          </td>
-          <td class="table-list-options">
-            <div class="dropdown" appListDropdown>
-              <button
-                class="btn btn-outline-secondary dropdown-toggle"
-                type="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-                appA11yTitle="{{ 'options' | i18n }}"
-              >
-                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-right">
-                <a
-                  class="dropdown-item"
-                  href="#"
-                  appStopClick
-                  (click)="reinvite(u)"
-                  *ngIf="u.status === userStatusType.Invited"
-                >
-                  <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-                  {{ "resendInvitation" | i18n }}
-                </a>
-                <a
-                  class="dropdown-item text-success"
-                  href="#"
-                  appStopClick
-                  (click)="confirm(u)"
-                  *ngIf="u.status === userStatusType.Accepted"
-                >
-                  <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
-                  {{ "confirm" | i18n }}
-                </a>
-                <a
-                  class="dropdown-item"
-                  href="#"
-                  appStopClick
-                  (click)="groups(u)"
-                  *ngIf="accessGroups"
-                >
-                  <i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
-                  {{ "groups" | i18n }}
-                </a>
-                <a
-                  class="dropdown-item"
-                  href="#"
-                  appStopClick
-                  (click)="events(u)"
-                  *ngIf="accessEvents && u.status === userStatusType.Confirmed"
-                >
-                  <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
-                  {{ "eventLogs" | i18n }}
-                </a>
-                <a
-                  class="dropdown-item"
-                  href="#"
-                  appStopClick
-                  (click)="resetPassword(u)"
-                  *ngIf="allowResetPassword(u)"
-                >
-                  <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
-                  {{ "resetPassword" | i18n }}
-                </a>
-                <a
-                  class="dropdown-item"
-                  href="#"
-                  appStopClick
-                  (click)="restore(u)"
-                  *ngIf="u.status === userStatusType.Revoked"
-                >
-                  <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
-                  {{ "restoreAccess" | i18n }}
-                </a>
-                <a
-                  class="dropdown-item"
-                  href="#"
-                  appStopClick
-                  (click)="revoke(u)"
-                  *ngIf="u.status !== userStatusType.Revoked"
-                >
-                  <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
-                  {{ "revokeAccess" | i18n }}
-                </a>
-                <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-                  {{ "remove" | i18n }}
-                </a>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <ng-container *ngIf="loading">
+    <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>
-<ng-template #addEdit></ng-template>
-<ng-template #groupsTemplate></ng-template>
-<ng-template #eventsTemplate></ng-template>
-<ng-template #confirmTemplate></ng-template>
-<ng-template #resetPasswordTemplate></ng-template>
-<ng-template #bulkStatusTemplate></ng-template>
-<ng-template #bulkConfirmTemplate></ng-template>
-<ng-template #bulkRemoveTemplate></ng-template>
+  <ng-container
+    *ngIf="
+      !loading &&
+      (isPaging() ? pagedUsers : (users | search: searchText:'name':'email':'id')) as searchedUsers
+    "
+  >
+    <p *ngIf="!searchedUsers.length">{{ "noUsersInList" | i18n }}</p>
+    <ng-container *ngIf="searchedUsers.length">
+      <app-callout
+        type="info"
+        title="{{ 'confirmUsers' | i18n }}"
+        icon="bwi bwi-check-circle"
+        *ngIf="showConfirmUsers"
+      >
+        {{ "usersNeedConfirmed" | i18n }}
+      </app-callout>
+      <table
+        class="table table-hover table-list"
+        infiniteScroll
+        [infiniteScrollDistance]="1"
+        [infiniteScrollDisabled]="!isPaging()"
+        (scrolled)="loadMore()"
+      >
+        <tbody>
+          <tr *ngFor="let u of searchedUsers">
+            <td (click)="checkUser(u)" class="table-list-checkbox">
+              <input type="checkbox" [(ngModel)]="u.checked" appStopProp />
+            </td>
+            <td width="30">
+              <app-avatar
+                [data]="u | userName"
+                [email]="u.email"
+                size="25"
+                [circle]="true"
+                [fontSize]="14"
+              >
+              </app-avatar>
+            </td>
+            <td>
+              <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
+              <span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Invited">{{
+                "invited" | i18n
+              }}</span>
+              <span bitBadge badgeType="warning" *ngIf="u.status === userStatusType.Accepted">{{
+                "accepted" | i18n
+              }}</span>
+              <span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Revoked">{{
+                "revoked" | i18n
+              }}</span>
+              <small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>
+            </td>
+            <td>
+              <ng-container *ngIf="u.twoFactorEnabled">
+                <i
+                  class="bwi bwi-lock"
+                  title="{{ 'userUsingTwoStep' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="showEnrolledStatus(u)">
+                <i
+                  class="bwi bwi-key"
+                  title="{{ 'enrolledPasswordReset' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="sr-only">{{ "enrolledPasswordReset" | i18n }}</span>
+              </ng-container>
+            </td>
+            <td>
+              <span *ngIf="u.type === userType.Owner">{{ "owner" | i18n }}</span>
+              <span *ngIf="u.type === userType.Admin">{{ "admin" | i18n }}</span>
+              <span *ngIf="u.type === userType.Manager">{{ "manager" | i18n }}</span>
+              <span *ngIf="u.type === userType.User">{{ "user" | i18n }}</span>
+              <span *ngIf="u.type === userType.Custom">{{ "custom" | i18n }}</span>
+            </td>
+            <td class="table-list-options">
+              <div class="dropdown" appListDropdown>
+                <button
+                  class="btn btn-outline-secondary dropdown-toggle"
+                  type="button"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                  appA11yTitle="{{ 'options' | i18n }}"
+                >
+                  <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
+                </button>
+                <div class="dropdown-menu dropdown-menu-right">
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    appStopClick
+                    (click)="reinvite(u)"
+                    *ngIf="u.status === userStatusType.Invited"
+                  >
+                    <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                    {{ "resendInvitation" | i18n }}
+                  </a>
+                  <a
+                    class="dropdown-item text-success"
+                    href="#"
+                    appStopClick
+                    (click)="confirm(u)"
+                    *ngIf="u.status === userStatusType.Accepted"
+                  >
+                    <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                    {{ "confirm" | i18n }}
+                  </a>
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    appStopClick
+                    (click)="groups(u)"
+                    *ngIf="accessGroups"
+                  >
+                    <i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
+                    {{ "groups" | i18n }}
+                  </a>
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    appStopClick
+                    (click)="events(u)"
+                    *ngIf="accessEvents && u.status === userStatusType.Confirmed"
+                  >
+                    <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
+                    {{ "eventLogs" | i18n }}
+                  </a>
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    appStopClick
+                    (click)="resetPassword(u)"
+                    *ngIf="allowResetPassword(u)"
+                  >
+                    <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
+                    {{ "resetPassword" | i18n }}
+                  </a>
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    appStopClick
+                    (click)="restore(u)"
+                    *ngIf="u.status === userStatusType.Revoked"
+                  >
+                    <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+                    {{ "restoreAccess" | i18n }}
+                  </a>
+                  <a
+                    class="dropdown-item"
+                    href="#"
+                    appStopClick
+                    (click)="revoke(u)"
+                    *ngIf="u.status !== userStatusType.Revoked"
+                  >
+                    <i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
+                    {{ "revokeAccess" | i18n }}
+                  </a>
+                  <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
+                    <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                    {{ "remove" | i18n }}
+                  </a>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </ng-container>
+  </ng-container>
+  <ng-template #addEdit></ng-template>
+  <ng-template #groupsTemplate></ng-template>
+  <ng-template #eventsTemplate></ng-template>
+  <ng-template #confirmTemplate></ng-template>
+  <ng-template #resetPasswordTemplate></ng-template>
+  <ng-template #bulkStatusTemplate></ng-template>
+  <ng-template #bulkConfirmTemplate></ng-template>
+  <ng-template #bulkRemoveTemplate></ng-template>
+</div>