[AC-2828] Add provider portal members page behind FF (#9949)

* Add provider portal members page behind a FF

* Fix reinvite issue

* Import scrolling module

* Add deprecations to old classes

* Move members.component init to constructor

* Rename new-base.people.component to base.members.component

* Hide bulk reinvite when no users can be re-invited on AC members page

* Rename events() to openEventsDialog()

* Fix return type for members component getUsers()

* Make table headers sortable

* Extract row height class to ts file

* Convert open methods to static methods for bulk dialogs

* Rename and refactor member-dialog.component

* Prevent event emission for searchControl and set filter in members component constructor

* use featureFlaggedRoute rather than using FF in components

* Add BaseBulkConfirmComponent for use in both web and bit-web

* Add BaseBulkRemoveComponent for use in both web and bit-web

* Thomas' feedback on base confirm/remove

* Remaining feedback

bitwarden_license/bit-web/src/app/admin-console/providers/manage/bulk/bulk-confirm.component.ts

@@ -7,6 +7,9 @@ import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/sym
 import { BulkConfirmComponent as OrganizationBulkConfirmComponent } from "@bitwarden/web-vault/app/admin-console/organizations/members/components/bulk/bulk-confirm.component";
 import { BulkUserDetails } from "@bitwarden/web-vault/app/admin-console/organizations/members/components/bulk/bulk-status.component";
 
+/**
+ * @deprecated Please use the {@link BulkConfirmDialogComponent} instead.
+ */
 @Component({
   templateUrl:
     "../../../../../../../../apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.html",

bitwarden_license/bit-web/src/app/admin-console/providers/manage/bulk/bulk-remove.component.ts

@@ -3,6 +3,9 @@ import { Component, Input } from "@angular/core";
 import { ProviderUserBulkRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-bulk.request";
 import { BulkRemoveComponent as OrganizationBulkRemoveComponent } from "@bitwarden/web-vault/app/admin-console/organizations/members/components/bulk/bulk-remove.component";
 
+/**
+ * @deprecated Please use the {@link BulkRemoveDialogComponent} instead.
+ */
 @Component({
   templateUrl:
     "../../../../../../../../apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html",

bitwarden_license/bit-web/src/app/admin-console/providers/manage/dialogs/add-edit-member-dialog.component.html

@@ -0,0 +1,68 @@
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog dialogSize="large" [loading]="loading">
+    <span bitDialogTitle>
+      {{ title | uppercase }}
+      <small class="tw-text-muted" *ngIf="dialogParams.user">{{ dialogParams.user.name }}</small>
+    </span>
+    <div bitDialogContent>
+      <ng-container *ngIf="!editing">
+        <p>{{ "providerInviteUserDesc" | i18n }}</p>
+        <div class="tw-mb-4">
+          <bit-form-field>
+            <bit-label>
+              {{ "email" | i18n }}
+            </bit-label>
+            <input type="text" bitInput formControlName="emails" />
+            <bit-hint>{{ "inviteMultipleEmailDesc" | i18n: "20" }}</bit-hint>
+          </bit-form-field>
+        </div>
+      </ng-container>
+      <ng-container>
+        <h3>
+          {{ "userType" | i18n | uppercase }}
+          <a
+            target="_blank"
+            rel="noreferrer"
+            appA11yTitle="{{ 'learnMore' | i18n }}"
+            href="https://bitwarden.com/help/provider-users/"
+          >
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+          </a>
+        </h3>
+        <bit-radio-group formControlName="type">
+          <bit-radio-button [value]="UserType.ServiceUser">
+            <bit-label>
+              {{ "serviceUser" | i18n }}
+            </bit-label>
+            <bit-hint>{{ "serviceUserDesc" | i18n }}</bit-hint>
+          </bit-radio-button>
+          <bit-radio-button [value]="UserType.ProviderAdmin">
+            <bit-label>
+              {{ "providerAdmin" | i18n }}
+            </bit-label>
+            <bit-hint>{{ "providerAdminDesc" | i18n }}</bit-hint>
+          </bit-radio-button>
+        </bit-radio-group>
+      </ng-container>
+    </div>
+    <ng-container bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary" [disabled]="loading">
+        {{ "save" | i18n }}
+      </button>
+      <button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Closed">
+        {{ "cancel" | i18n }}
+      </button>
+      <div class="tw-ml-auto" *ngIf="editing">
+        <button
+          type="button"
+          bitIconButton="bwi-trash"
+          buttonType="danger"
+          bitFormButton
+          [appA11yTitle]="'delete' | i18n"
+          [bitAction]="delete"
+          [disabled]="loading"
+        ></button>
+      </div>
+    </ng-container>
+  </bit-dialog>
+</form>

bitwarden_license/bit-web/src/app/admin-console/providers/manage/dialogs/add-edit-member-dialog.component.ts

@@ -0,0 +1,127 @@
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { ProviderUserType } from "@bitwarden/common/admin-console/enums";
+import { ProviderUserInviteRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-invite.request";
+import { ProviderUserUpdateRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-update.request";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogService, ToastService } from "@bitwarden/components";
+
+export type AddEditMemberDialogParams = {
+  providerId: string;
+  user?: {
+    id: string;
+    name: string;
+    type: ProviderUserType;
+  };
+};
+
+export enum AddEditMemberDialogResultType {
+  Closed = "closed",
+  Deleted = "deleted",
+  Saved = "saved",
+}
+
+@Component({
+  templateUrl: "add-edit-member-dialog.component.html",
+})
+export class AddEditMemberDialogComponent {
+  editing = false;
+  loading = true;
+  title: string;
+
+  protected ResultType = AddEditMemberDialogResultType;
+  protected UserType = ProviderUserType;
+
+  protected formGroup = new FormGroup({
+    emails: new FormControl<string>("", [Validators.required]),
+    type: new FormControl(this.dialogParams.user?.type ?? ProviderUserType.ServiceUser),
+  });
+
+  constructor(
+    private apiService: ApiService,
+    @Inject(DIALOG_DATA) protected dialogParams: AddEditMemberDialogParams,
+    private dialogRef: DialogRef<AddEditMemberDialogResultType>,
+    private dialogService: DialogService,
+    private i18nService: I18nService,
+    private toastService: ToastService,
+  ) {
+    this.editing = this.loading = this.dialogParams.user != null;
+    if (this.editing) {
+      this.title = this.i18nService.t("editMember");
+      const emailControl = this.formGroup.controls.emails;
+      emailControl.removeValidators(Validators.required);
+      emailControl.disable();
+    } else {
+      this.title = this.i18nService.t("inviteMember");
+    }
+
+    this.loading = false;
+  }
+
+  delete = async (): Promise<void> => {
+    if (!this.editing) {
+      return;
+    }
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: this.dialogParams.user.name,
+      content: { key: "removeUserConfirmation" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    await this.apiService.deleteProviderUser(
+      this.dialogParams.providerId,
+      this.dialogParams.user.id,
+    );
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("removedUserId", this.dialogParams.user.name),
+    });
+
+    this.dialogRef.close(AddEditMemberDialogResultType.Deleted);
+  };
+
+  submit = async (): Promise<void> => {
+    if (this.editing) {
+      const request = new ProviderUserUpdateRequest();
+      request.type = this.formGroup.value.type;
+      await this.apiService.putProviderUser(
+        this.dialogParams.providerId,
+        this.dialogParams.user.id,
+        request,
+      );
+    } else {
+      const request = new ProviderUserInviteRequest();
+      request.emails = this.formGroup.value.emails.trim().split(/\s*,\s*/);
+      request.type = this.formGroup.value.type;
+      await this.apiService.postProviderUserInvite(this.dialogParams.providerId, request);
+    }
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t(
+        this.editing ? "editedUserId" : "invitedUsers",
+        this.dialogParams.user?.name,
+      ),
+    });
+
+    this.dialogRef.close(AddEditMemberDialogResultType.Saved);
+  };
+
+  static open(dialogService: DialogService, dialogConfig: DialogConfig<AddEditMemberDialogParams>) {
+    return dialogService.open<AddEditMemberDialogResultType, AddEditMemberDialogParams>(
+      AddEditMemberDialogComponent,
+      dialogConfig,
+    );
+  }
+}

bitwarden_license/bit-web/src/app/admin-console/providers/manage/dialogs/bulk-confirm-dialog.component.ts

@@ -0,0 +1,69 @@
+import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import {
+  OrganizationUserBulkPublicKeyResponse,
+  OrganizationUserBulkResponse,
+} from "@bitwarden/common/admin-console/abstractions/organization-user/responses";
+import { ProviderUserStatusType } from "@bitwarden/common/admin-console/enums";
+import { ProviderUserBulkConfirmRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-bulk-confirm.request";
+import { ProviderUserBulkRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-bulk.request";
+import { ProviderUserBulkPublicKeyResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-user-bulk-public-key.response";
+import { ProviderUserBulkResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-user-bulk.response";
+import { ListResponse } from "@bitwarden/common/models/response/list.response";
+import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
+import { DialogService } from "@bitwarden/components";
+import { BaseBulkConfirmComponent } from "@bitwarden/web-vault/app/admin-console/organizations/members/components/bulk/base-bulk-confirm.component";
+import { BulkUserDetails } from "@bitwarden/web-vault/app/admin-console/organizations/members/components/bulk/bulk-status.component";
+
+type BulkConfirmDialogParams = {
+  providerId: string;
+  users: BulkUserDetails[];
+};
+
+@Component({
+  templateUrl:
+    "../../../../../../../../apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.html",
+})
+export class BulkConfirmDialogComponent extends BaseBulkConfirmComponent {
+  providerId: string;
+
+  constructor(
+    private apiService: ApiService,
+    protected cryptoService: CryptoService,
+    @Inject(DIALOG_DATA) protected dialogParams: BulkConfirmDialogParams,
+    protected i18nService: I18nService,
+  ) {
+    super(cryptoService, i18nService);
+
+    this.providerId = dialogParams.providerId;
+    this.users = dialogParams.users;
+  }
+
+  protected getCryptoKey = (): Promise<SymmetricCryptoKey> =>
+    this.cryptoService.getProviderKey(this.providerId);
+
+  protected getPublicKeys = async (): Promise<
+    ListResponse<OrganizationUserBulkPublicKeyResponse | ProviderUserBulkPublicKeyResponse>
+  > => {
+    const request = new ProviderUserBulkRequest(this.filteredUsers.map((user) => user.id));
+    return await this.apiService.postProviderUsersPublicKey(this.providerId, request);
+  };
+
+  protected isAccepted = (user: BulkUserDetails): boolean =>
+    user.status === ProviderUserStatusType.Accepted;
+
+  protected postConfirmRequest = async (
+    userIdsWithKeys: { id: string; key: string }[],
+  ): Promise<ListResponse<OrganizationUserBulkResponse | ProviderUserBulkResponse>> => {
+    const request = new ProviderUserBulkConfirmRequest(userIdsWithKeys);
+    return await this.apiService.postProviderUserBulkConfirm(this.providerId, request);
+  };
+
+  static open(dialogService: DialogService, dialogConfig: DialogConfig<BulkConfirmDialogParams>) {
+    return dialogService.open(BulkConfirmDialogComponent, dialogConfig);
+  }
+}

bitwarden_license/bit-web/src/app/admin-console/providers/manage/dialogs/bulk-remove-dialog.component.ts

@@ -0,0 +1,49 @@
+import { DIALOG_DATA, DialogConfig } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { ProviderUserBulkRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-bulk.request";
+import { ProviderUserBulkResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-user-bulk.response";
+import { ListResponse } from "@bitwarden/common/models/response/list.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogService } from "@bitwarden/components";
+import { BaseBulkRemoveComponent } from "@bitwarden/web-vault/app/admin-console/organizations/members/components/bulk/base-bulk-remove.component";
+import { BulkUserDetails } from "@bitwarden/web-vault/app/admin-console/organizations/members/components/bulk/bulk-status.component";
+
+type BulkRemoveDialogParams = {
+  providerId: string;
+  users: BulkUserDetails[];
+};
+
+@Component({
+  templateUrl:
+    "../../../../../../../../apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html",
+})
+export class BulkRemoveDialogComponent extends BaseBulkRemoveComponent {
+  providerId: string;
+  users: BulkUserDetails[];
+
+  constructor(
+    private apiService: ApiService,
+    @Inject(DIALOG_DATA) dialogParams: BulkRemoveDialogParams,
+    protected i18nService: I18nService,
+  ) {
+    super(i18nService);
+
+    this.providerId = dialogParams.providerId;
+    this.users = dialogParams.users;
+  }
+
+  protected deleteUsers = (): Promise<ListResponse<ProviderUserBulkResponse>> => {
+    const request = new ProviderUserBulkRequest(this.users.map((user) => user.id));
+    return this.apiService.deleteManyProviderUsers(this.providerId, request);
+  };
+
+  protected get removeUsersWarning() {
+    return this.i18nService.t("removeOrgUsersConfirmation");
+  }
+
+  static open(dialogService: DialogService, dialogConfig: DialogConfig<BulkRemoveDialogParams>) {
+    return dialogService.open(BulkRemoveDialogComponent, dialogConfig);
+  }
+}

bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.html

@@ -0,0 +1,225 @@
+<app-header>
+  <bit-search class="tw-grow" [formControl]="searchControl" [placeholder]="'searchMembers' | i18n">
+  </bit-search>
+  <button type="button" bitButton buttonType="primary" (click)="invite()">
+    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+    {{ "inviteMember" | i18n }}
+  </button>
+</app-header>
+
+<div class="tw-mb-4 tw-flex tw-flex-col tw-space-y-4">
+  <bit-toggle-group
+    [selected]="status"
+    (selectedChange)="statusToggle.next($event)"
+    [attr.aria-label]="'memberStatusFilter' | i18n"
+  >
+    <bit-toggle [value]="null">
+      {{ "all" | i18n }}
+      <span bitBadge variant="info" *ngIf="dataSource.activeUserCount as allCount">
+        {{ allCount }}
+      </span>
+    </bit-toggle>
+    <bit-toggle [value]="userStatusType.Invited">
+      {{ "invited" | i18n }}
+      <span bitBadge variant="info" *ngIf="dataSource.invitedUserCount as invitedCount">
+        {{ invitedCount }}
+      </span>
+    </bit-toggle>
+    <bit-toggle [value]="userStatusType.Accepted">
+      {{ "needsConfirmation" | i18n }}
+      <span bitBadge variant="info" *ngIf="dataSource.acceptedUserCount as acceptedCount">
+        {{ acceptedCount }}
+      </span>
+    </bit-toggle>
+  </bit-toggle-group>
+</div>
+
+<ng-container *ngIf="!firstLoaded">
+  <i
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  >
+  </i>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+</ng-container>
+
+<ng-container *ngIf="firstLoaded">
+  <p *ngIf="!dataSource.filteredData.length">{{ "noMembersInList" | i18n }}</p>
+  <ng-container *ngIf="dataSource.filteredData.length">
+    <bit-callout
+      type="info"
+      title="{{ 'confirmUsers' | i18n }}"
+      icon="bwi-check-circle"
+      *ngIf="showConfirmUsers"
+    >
+      {{ "providerUsersNeedConfirmed" | i18n }}
+    </bit-callout>
+    <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
+      <bit-table [dataSource]="dataSource">
+        <ng-container header>
+          <tr>
+            <th bitCell class="tw-w-20">
+              <input
+                type="checkbox"
+                bitCheckbox
+                class="tw-mr-1"
+                (change)="dataSource.checkAllFilteredUsers($any($event.target).checked)"
+                id="selectAll"
+              />
+              <label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">
+                {{ "all" | i18n }}
+              </label>
+            </th>
+            <th bitCell bitSortable="email" default>{{ "name" | i18n }}</th>
+            <th bitCell bitSortable="type">{{ "role" | i18n }}</th>
+            <th bitCell class="tw-w-10">
+              <button
+                [bitMenuTriggerFor]="headerMenu"
+                type="button"
+                bitIconButton="bwi-ellipsis-v"
+                size="small"
+                appA11yTitle="{{ 'options' | i18n }}"
+              ></button>
+              <bit-menu #headerMenu>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="bulkReinvite()"
+                  *ngIf="showBulkReinviteUsers"
+                >
+                  <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                  {{ "reinviteSelected" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="bulkConfirm()"
+                  *ngIf="showBulkConfirmUsers"
+                >
+                  <span class="tw-text-success">
+                    <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                    {{ "confirmSelected" | i18n }}
+                  </span>
+                </button>
+                <button type="button" bitMenuItem (click)="bulkRemove()">
+                  <span class="tw-text-danger">
+                    <i aria-hidden="true" class="bwi bwi-close"></i>
+                    {{ "remove" | i18n }}
+                  </span>
+                </button>
+              </bit-menu>
+            </th>
+          </tr>
+        </ng-container>
+        <ng-template body let-rows$>
+          <tr
+            bitRow
+            *cdkVirtualFor="let user of rows$"
+            alignContent="middle"
+            [ngClass]="rowHeightClass"
+          >
+            <td bitCell (click)="dataSource.checkUser(user)">
+              <input type="checkbox" bitCheckbox [(ngModel)]="$any(user).checked" />
+            </td>
+            <td bitCell (click)="edit(user)" class="tw-cursor-pointer">
+              <div class="tw-flex tw-items-center">
+                <bit-avatar
+                  size="small"
+                  [text]="user | userName"
+                  [id]="user.userId"
+                  [color]="user.avatarColor"
+                  class="tw-mr-3"
+                ></bit-avatar>
+                <div class="tw-flex tw-flex-col">
+                  <div>
+                    <button type="button" bitLink>
+                      {{ user.name ?? user.email }}
+                    </button>
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="secondary"
+                      *ngIf="user.status === userStatusType.Invited"
+                    >
+                      {{ "invited" | i18n }}
+                    </span>
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="warning"
+                      *ngIf="user.status === userStatusType.Accepted"
+                    >
+                      {{ "needsConfirmation" | i18n }}
+                    </span>
+                    <span
+                      bitBadge
+                      class="tw-text-xs"
+                      variant="secondary"
+                      *ngIf="user.status === userStatusType.Revoked"
+                    >
+                      {{ "revoked" | i18n }}
+                    </span>
+                  </div>
+                  <div class="tw-text-sm tw-text-muted" *ngIf="user.name">
+                    {{ user.email }}
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td bitCell class="tw-text-muted">
+              <span *ngIf="user.type === userType.ProviderAdmin">{{ "providerAdmin" | i18n }}</span>
+              <span *ngIf="user.type === userType.ServiceUser">{{ "serviceUser" | i18n }}</span>
+            </td>
+            <td bitCell>
+              <button
+                [bitMenuTriggerFor]="rowMenu"
+                type="button"
+                bitIconButton="bwi-ellipsis-v"
+                size="small"
+                appA11yTitle="{{ 'options' | i18n }}"
+              ></button>
+              <bit-menu #rowMenu>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="reinvite(user)"
+                  *ngIf="user.status === userStatusType.Invited"
+                >
+                  <i aria-hidden="true" class="bwi bwi-envelope"></i>
+                  {{ "resendInvitation" | i18n }}
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="confirm(user)"
+                  *ngIf="user.status === userStatusType.Accepted"
+                >
+                  <span class="tw-text-success">
+                    <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                    {{ "confirm" | i18n }}
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  bitMenuItem
+                  (click)="openEventsDialog(user)"
+                  *ngIf="user.status === userStatusType.Confirmed"
+                >
+                  <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
+                  {{ "eventLogs" | i18n }}
+                </button>
+                <button type="button" bitMenuItem (click)="remove(user)">
+                  <span class="tw-text-danger">
+                    <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                    {{ "remove" | i18n }}
+                  </span>
+                </button>
+              </bit-menu>
+            </td>
+          </tr>
+        </ng-template>
+      </bit-table>
+    </cdk-virtual-scroll-viewport>
+  </ng-container>
+</ng-container>

bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts

@@ -0,0 +1,243 @@
+import { DialogRef } from "@angular/cdk/dialog";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ActivatedRoute, Router } from "@angular/router";
+import { combineLatest, lastValueFrom, switchMap } from "rxjs";
+import { first } from "rxjs/operators";
+
+import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { OrganizationManagementPreferencesService } from "@bitwarden/common/admin-console/abstractions/organization-management-preferences/organization-management-preferences.service";
+import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
+import {
+  OrganizationUserStatusType,
+  ProviderUserStatusType,
+  ProviderUserType,
+} from "@bitwarden/common/admin-console/enums";
+import { ProviderUserBulkRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-bulk.request";
+import { ProviderUserConfirmRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-confirm.request";
+import { ProviderUserUserDetailsResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-user.response";
+import { ListResponse } from "@bitwarden/common/models/response/list.response";
+import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { DialogService, ToastService } from "@bitwarden/components";
+import { BaseMembersComponent } from "@bitwarden/web-vault/app/admin-console/common/base-members.component";
+import {
+  peopleFilter,
+  PeopleTableDataSource,
+} from "@bitwarden/web-vault/app/admin-console/common/people-table-data-source";
+import { openEntityEventsDialog } from "@bitwarden/web-vault/app/admin-console/organizations/manage/entity-events.component";
+import { BulkStatusComponent } from "@bitwarden/web-vault/app/admin-console/organizations/members/components/bulk/bulk-status.component";
+
+import {
+  AddEditMemberDialogComponent,
+  AddEditMemberDialogParams,
+  AddEditMemberDialogResultType,
+} from "./dialogs/add-edit-member-dialog.component";
+import { BulkConfirmDialogComponent } from "./dialogs/bulk-confirm-dialog.component";
+import { BulkRemoveDialogComponent } from "./dialogs/bulk-remove-dialog.component";
+
+type ProviderUser = ProviderUserUserDetailsResponse;
+
+class MembersTableDataSource extends PeopleTableDataSource<ProviderUser> {
+  protected statusType = OrganizationUserStatusType;
+}
+
+@Component({
+  templateUrl: "members.component.html",
+})
+export class MembersComponent extends BaseMembersComponent<ProviderUser> {
+  accessEvents = false;
+  dataSource = new MembersTableDataSource();
+  loading = true;
+  providerId: string;
+  rowHeight = 62;
+  rowHeightClass = `tw-h-[62px]`;
+  status: ProviderUserStatusType = null;
+
+  userStatusType = ProviderUserStatusType;
+  userType = ProviderUserType;
+
+  constructor(
+    apiService: ApiService,
+    cryptoService: CryptoService,
+    dialogService: DialogService,
+    i18nService: I18nService,
+    logService: LogService,
+    organizationManagementPreferencesService: OrganizationManagementPreferencesService,
+    toastService: ToastService,
+    userNamePipe: UserNamePipe,
+    validationService: ValidationService,
+    private activatedRoute: ActivatedRoute,
+    private providerService: ProviderService,
+    private router: Router,
+  ) {
+    super(
+      apiService,
+      i18nService,
+      cryptoService,
+      validationService,
+      logService,
+      userNamePipe,
+      dialogService,
+      organizationManagementPreferencesService,
+      toastService,
+    );
+
+    combineLatest([
+      this.activatedRoute.parent.params,
+      this.activatedRoute.queryParams.pipe(first()),
+    ])
+      .pipe(
+        switchMap(async ([urlParams, queryParams]) => {
+          this.searchControl.setValue(queryParams.search, { emitEvent: false });
+          this.dataSource.filter = peopleFilter(queryParams.search, null);
+
+          this.providerId = urlParams.providerId;
+          const provider = await this.providerService.get(this.providerId);
+          if (!provider || !provider.canManageUsers) {
+            return await this.router.navigate(["../"], { relativeTo: this.activatedRoute });
+          }
+          this.accessEvents = provider.useEvents;
+          await this.load();
+
+          if (queryParams.viewEvents != null) {
+            const user = this.dataSource.data.find((user) => user.id === queryParams.viewEvents);
+            if (user && user.status === ProviderUserStatusType.Confirmed) {
+              this.openEventsDialog(user);
+            }
+          }
+        }),
+        takeUntilDestroyed(),
+      )
+      .subscribe();
+  }
+
+  async bulkConfirm(): Promise<void> {
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    const dialogRef = BulkConfirmDialogComponent.open(this.dialogService, {
+      data: {
+        providerId: this.providerId,
+        users: this.dataSource.getCheckedUsers(),
+      },
+    });
+
+    await lastValueFrom(dialogRef.closed);
+    await this.load();
+  }
+
+  async bulkReinvite(): Promise<void> {
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    const checkedUsers = this.dataSource.getCheckedUsers();
+    const checkedInvitedUsers = checkedUsers.filter(
+      (user) => user.status === ProviderUserStatusType.Invited,
+    );
+
+    if (checkedInvitedUsers.length <= 0) {
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("noSelectedUsersApplicable"),
+      });
+      return;
+    }
+
+    try {
+      const request = this.apiService.postManyProviderUserReinvite(
+        this.providerId,
+        new ProviderUserBulkRequest(checkedInvitedUsers.map((user) => user.id)),
+      );
+
+      const dialogRef = BulkStatusComponent.open(this.dialogService, {
+        data: {
+          users: checkedUsers,
+          filteredUsers: checkedInvitedUsers,
+          request,
+          successfulMessage: this.i18nService.t("bulkReinviteMessage"),
+        },
+      });
+      await lastValueFrom(dialogRef.closed);
+    } catch (error) {
+      this.validationService.showError(error);
+    }
+  }
+
+  async bulkRemove(): Promise<void> {
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    const dialogRef = BulkRemoveDialogComponent.open(this.dialogService, {
+      data: {
+        providerId: this.providerId,
+        users: this.dataSource.getCheckedUsers(),
+      },
+    });
+
+    await lastValueFrom(dialogRef.closed);
+    await this.load();
+  }
+
+  async confirmUser(user: ProviderUser, publicKey: Uint8Array): Promise<void> {
+    const providerKey = await this.cryptoService.getProviderKey(this.providerId);
+    const key = await this.cryptoService.rsaEncrypt(providerKey.key, publicKey);
+    const request = new ProviderUserConfirmRequest();
+    request.key = key.encryptedString;
+    await this.apiService.postProviderUserConfirm(this.providerId, user.id, request);
+  }
+
+  deleteUser = (id: string): Promise<void> =>
+    this.apiService.deleteProviderUser(this.providerId, id);
+
+  edit = async (user: ProviderUser | null): Promise<void> => {
+    const data: AddEditMemberDialogParams = {
+      providerId: this.providerId,
+    };
+
+    if (user != null) {
+      data.user = {
+        id: user.id,
+        name: this.userNamePipe.transform(user),
+        type: user.type,
+      };
+    }
+
+    const dialogRef = AddEditMemberDialogComponent.open(this.dialogService, {
+      data,
+    });
+
+    const result = await lastValueFrom(dialogRef.closed);
+
+    switch (result) {
+      case AddEditMemberDialogResultType.Saved:
+      case AddEditMemberDialogResultType.Deleted:
+        await this.load();
+        break;
+    }
+  };
+
+  openEventsDialog = (user: ProviderUser): DialogRef<void> =>
+    openEntityEventsDialog(this.dialogService, {
+      data: {
+        name: this.userNamePipe.transform(user),
+        providerId: this.providerId,
+        entityId: user.id,
+        showUser: false,
+        entity: "user",
+      },
+    });
+
+  getUsers = (): Promise<ListResponse<ProviderUser>> =>
+    this.apiService.getProviderUsers(this.providerId);
+
+  reinviteUser = (id: string): Promise<void> =>
+    this.apiService.postProviderUserReinvite(this.providerId, id);
+}

bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.ts

@@ -15,6 +15,7 @@ import { ProviderUserBulkRequest } from "@bitwarden/common/admin-console/models/
 import { ProviderUserConfirmRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-user-confirm.request";
 import { ProviderUserUserDetailsResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-user.response";
 import { ListResponse } from "@bitwarden/common/models/response/list.response";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -29,6 +30,9 @@ import { BulkConfirmComponent } from "./bulk/bulk-confirm.component";
 import { BulkRemoveComponent } from "./bulk/bulk-remove.component";
 import { UserAddEditComponent } from "./user-add-edit.component";
 
+/**
+ * @deprecated Please use the {@link MembersComponent} instead.
+ */
 @Component({
   selector: "provider-people",
   templateUrl: "people.component.html",
@@ -70,6 +74,7 @@ export class PeopleComponent
     private providerService: ProviderService,
     dialogService: DialogService,
     organizationManagementPreferencesService: OrganizationManagementPreferencesService,
+    private configService: ConfigService,
   ) {
     super(
       apiService,
@@ -228,7 +233,7 @@ export class PeopleComponent
           users: users,
           filteredUsers: filteredUsers,
           request: response,
-          successfullMessage: this.i18nService.t("bulkReinviteMessage"),
+          successfulMessage: this.i18nService.t("bulkReinviteMessage"),
         },
       });
       await lastValueFrom(dialogRef.closed);

bitwarden_license/bit-web/src/app/admin-console/providers/manage/user-add-edit.component.ts

@@ -10,6 +10,9 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService } from "@bitwarden/components";
 
+/**
+ * @deprecated Please use the {@link MembersDialogComponent} instead.
+ */
 @Component({
   selector: "provider-user-add-edit",
   templateUrl: "user-add-edit.component.html",

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html

@@ -13,11 +13,7 @@
       route="manage"
       *ngIf="showManageTab(provider)"
     >
-      <bit-nav-item
-        [text]="'people' | i18n"
-        route="manage/people"
-        *ngIf="provider.canManageUsers"
-      ></bit-nav-item>
+      <bit-nav-item [text]="'people' | i18n" route="manage/people"></bit-nav-item>
       <bit-nav-item
         [text]="'eventLogs' | i18n"
         route="manage/events"

bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts

@@ -2,8 +2,10 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { AuthGuard } from "@bitwarden/angular/auth/guards";
+import { featureFlaggedRoute } from "@bitwarden/angular/platform/utils/feature-flagged-route";
 import { AnonLayoutWrapperComponent } from "@bitwarden/auth/angular";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ProvidersComponent } from "@bitwarden/web-vault/app/admin-console/providers/providers.component";
 import { FrontendLayoutComponent } from "@bitwarden/web-vault/app/layouts/frontend-layout.component";
 import { UserLayoutComponent } from "@bitwarden/web-vault/app/layouts/user-layout.component";
@@ -20,6 +22,7 @@ import { CreateOrganizationComponent } from "./clients/create-organization.compo
 import { providerPermissionsGuard } from "./guards/provider-permissions.guard";
 import { AcceptProviderComponent } from "./manage/accept-provider.component";
 import { EventsComponent } from "./manage/events.component";
+import { MembersComponent } from "./manage/members.component";
 import { PeopleComponent } from "./manage/people.component";
 import { ProvidersLayoutComponent } from "./providers-layout.component";
 import { AccountComponent } from "./settings/account.component";
@@ -95,16 +98,20 @@ const routes: Routes = [
                 pathMatch: "full",
                 redirectTo: "people",
               },
-              {
-                path: "people",
-                component: PeopleComponent,
-                canActivate: [
-                  providerPermissionsGuard((provider: Provider) => provider.canManageUsers),
-                ],
-                data: {
-                  titleId: "people",
+              ...featureFlaggedRoute({
+                defaultComponent: PeopleComponent,
+                flaggedComponent: MembersComponent,
+                featureFlag: FeatureFlag.AC2828_ProviderPortalMembersPage,
+                routeOptions: {
+                  path: "people",
+                  canActivate: [
+                    providerPermissionsGuard((provider: Provider) => provider.canManageUsers),
+                  ],
+                  data: {
+                    titleId: "people",
+                  },
                 },
-              },
+              }),
               {
                 path: "events",
                 component: EventsComponent,

bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts

@@ -1,3 +1,4 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
@@ -28,7 +29,11 @@ import { CreateOrganizationComponent } from "./clients/create-organization.compo
 import { AcceptProviderComponent } from "./manage/accept-provider.component";
 import { BulkConfirmComponent } from "./manage/bulk/bulk-confirm.component";
 import { BulkRemoveComponent } from "./manage/bulk/bulk-remove.component";
+import { AddEditMemberDialogComponent } from "./manage/dialogs/add-edit-member-dialog.component";
+import { BulkConfirmDialogComponent } from "./manage/dialogs/bulk-confirm-dialog.component";
+import { BulkRemoveDialogComponent } from "./manage/dialogs/bulk-remove-dialog.component";
 import { EventsComponent } from "./manage/events.component";
+import { MembersComponent } from "./manage/members.component";
 import { PeopleComponent } from "./manage/people.component";
 import { UserAddEditComponent } from "./manage/user-add-edit.component";
 import { ProvidersLayoutComponent } from "./providers-layout.component";
@@ -51,20 +56,25 @@ import { SetupComponent } from "./setup/setup.component";
     PaymentMethodWarningsModule,
     TaxInfoComponent,
     DangerZoneComponent,
+    ScrollingModule,
   ],
   declarations: [
     AcceptProviderComponent,
     AccountComponent,
     AddOrganizationComponent,
     BulkConfirmComponent,
+    BulkConfirmDialogComponent,
     BulkRemoveComponent,
+    BulkRemoveDialogComponent,
     ClientsComponent,
     CreateOrganizationComponent,
     EventsComponent,
     PeopleComponent,
+    MembersComponent,
     SetupComponent,
     SetupProviderComponent,
     UserAddEditComponent,
+    AddEditMemberDialogComponent,
     CreateClientDialogComponent,
     NoClientsComponent,
     ManageClientsComponent,