[PM-1214] device management screen

apps/browser/src/background/main.background.ts

@@ -770,7 +770,10 @@
       this.configService,
     );
 
-    this.devicesService = new DevicesServiceImplementation(this.devicesApiService);
+    this.devicesService = new DevicesServiceImplementation(
+      this.devicesApiService,
+      this.appIdService,
+    );
 
     this.authRequestService = new AuthRequestService(
       this.appIdService,

apps/web/src/app/auth/settings/security/device-management.component.html

@@ -0,0 +1,79 @@
+<div class="tabbed-content">
+  <div class="tw-flex tw-items-center tw-gap-2">
+    <h2 class="tw-m-0">{{ "devices" | i18n }}</h2>
+    <i
+      class="bwi bwi-question-circle tw-flex tw-items-center tw-h-4 tw-w-4 bwi-color-primary"
+      aria-hidden="true"
+    ></i>
+    <i
+      *ngIf="asyncActionLoading"
+      class="bwi bwi-spinner bwi-spin tw-flex tw-items-center tw-h-4 tw-w-4"
+      aria-hidden="true"
+    ></i>
+  </div>
+
+  <p>{{ "deviceListDescription" | i18n }}</p>
+
+  <div *ngIf="loading" class="tw-flex tw-justify-center tw-items-center tw-p-4">
+    <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
+  </div>
+
+  <bit-table-scroll *ngIf="!loading" [dataSource]="dataSource" [rowSize]="50">
+    <ng-container header>
+      <th
+        *ngFor="let col of columnConfig"
+        [class]="col.headerClass"
+        bitCell
+        [bitSortable]="col.sortable ? col.name : null"
+        [default]="col.name === 'displayName' ? 'desc' : null"
+        scope="col"
+        role="columnheader"
+      >
+        {{ col.title }}
+      </th>
+      <th bitCell scope="col" role="columnheader"></th>
+    </ng-container>
+    <ng-template bitRowDef let-row>
+      <td bitCell class="tw-flex tw-gap-2">
+        <div class="tw-flex tw-items-center tw-justify-center tw-w-10">
+          <i [class]="getDeviceIcon(row.type)" class="bwi-lg" aria-hidden="true"></i>
+        </div>
+        <div>
+          {{ row.displayName }}
+          <span *ngIf="row.trusted" class="tw-text-sm tw-text-muted tw-block">
+            {{ "trusted" | i18n }}
+          </span>
+        </div>
+      </td>
+      <td bitCell>
+        <span *ngIf="isCurrentDevice(row)" bitBadge variant="primary">{{
+          "currentSession" | i18n
+        }}</span>
+        <span *ngIf="hasPendingAuthRequest(row)" bitBadge variant="warning">{{
+          "requestPending" | i18n
+        }}</span>
+      </td>
+      <td bitCell>{{ row.firstLogin | date: "medium" }}</td>
+      <td bitCell>
+        <button
+          type="button"
+          bitIconButton="bwi-ellipsis-v"
+          [bitMenuTriggerFor]="optionsMenu"
+        ></button>
+        <bit-menu #optionsMenu>
+          <button
+            type="button"
+            bitMenuItem
+            (click)="removeDevice(row)"
+            [disabled]="isCurrentDevice(row)"
+          >
+            <span [class]="isCurrentDevice(row) ? 'tw-text-muted' : 'tw-text-danger'">
+              <i class="bwi bwi-trash" aria-hidden="true"></i>
+              {{ "removeDevice" | i18n }}
+            </span>
+          </button>
+        </bit-menu>
+      </td>
+    </ng-template>
+  </bit-table-scroll>
+</div>

apps/web/src/app/auth/settings/security/device-management.component.ts

@@ -0,0 +1,214 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { firstValueFrom } from "rxjs";
+import { switchMap } from "rxjs/operators";
+
+import { DevicesServiceAbstraction } from "@bitwarden/common/auth/abstractions/devices/devices.service.abstraction";
+import { DeviceView } from "@bitwarden/common/auth/abstractions/devices/views/device.view";
+import { DeviceType, DeviceTypeMetadata } from "@bitwarden/common/enums";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { DialogService, ToastService, TableDataSource, TableModule } from "@bitwarden/components";
+
+import { SharedModule } from "../../../shared";
+
+interface DeviceTableData {
+  id: string;
+  type: DeviceType;
+  displayName: string;
+  loginStatus: string;
+  firstLogin: Date;
+  trusted: boolean;
+  devicePendingAuthRequest: object | null;
+}
+
+/**
+ * Provides a table of devices and allows the user to log out, approve or remove a device
+ */
+@Component({
+  selector: "app-device-management",
+  templateUrl: "./device-management.component.html",
+  standalone: true,
+  imports: [CommonModule, SharedModule, TableModule],
+})
+export class DeviceManagementComponent {
+  protected readonly tableId = "device-management-table";
+  protected dataSource = new TableDataSource<DeviceTableData>();
+  protected currentDevice: DeviceView | undefined;
+  protected loading = true;
+  protected asyncActionLoading = false;
+
+  constructor(
+    private i18nService: I18nService,
+    private devicesService: DevicesServiceAbstraction,
+    private dialogService: DialogService,
+    private toastService: ToastService,
+    private validationService: ValidationService,
+  ) {
+    this.devicesService
+      .getCurrentDevice$()
+      .pipe(
+        takeUntilDestroyed(),
+        switchMap((currentDevice) => {
+          this.currentDevice = new DeviceView(currentDevice);
+          return this.devicesService.getDevices$();
+        }),
+      )
+      .subscribe({
+        next: (devices) => {
+          this.dataSource.data = devices.map((device) => {
+            return {
+              id: device.id,
+              type: device.type,
+              displayName: this.getHumanReadableDeviceType(device.type),
+              loginStatus: this.getLoginStatus(device),
+              devicePendingAuthRequest: device.response.devicePendingAuthRequest,
+              firstLogin: new Date(device.creationDate),
+              trusted: device.response.isTrusted,
+            };
+          });
+          this.loading = false;
+        },
+        error: () => {
+          this.loading = false;
+        },
+      });
+  }
+
+  /**
+   * Column configuration for the table
+   */
+  protected readonly columnConfig = [
+    {
+      name: "displayName",
+      title: this.i18nService.t("device"),
+      headerClass: "tw-w-1/3",
+      sortable: true,
+    },
+    {
+      name: "loginStatus",
+      title: this.i18nService.t("loginStatus"),
+      headerClass: "tw-w-1/3",
+      sortable: true,
+    },
+    {
+      name: "firstLogin",
+      title: this.i18nService.t("firstLogin"),
+      headerClass: "tw-w-1/3",
+      sortable: true,
+    },
+  ];
+
+  /**
+   * Get the icon for a device type
+   * @param type - The device type
+   * @returns The icon for the device type
+   */
+  getDeviceIcon(type: DeviceType): string {
+    const defaultIcon = "bwi bwi-desktop";
+    const categoryIconMap: Record<string, string> = {
+      webVault: "bwi bwi-browser",
+      desktop: "bwi bwi-desktop",
+      mobile: "bwi bwi-mobile",
+      cli: "bwi bwi-cli",
+      extension: "bwi bwi-puzzle",
+      sdk: "bwi bwi-desktop",
+    };
+
+    const metadata = DeviceTypeMetadata[type];
+    return metadata ? (categoryIconMap[metadata.category] ?? defaultIcon) : defaultIcon;
+  }
+
+  /**
+   * Get the login status of a device
+   * It will return the current session if the device is the current device
+   * It will return the date of the pending auth request when available
+   * @param device - The device
+   * @returns The login status
+   */
+  private getLoginStatus(device: DeviceView): string {
+    if (this.isCurrentDevice(device)) {
+      return this.i18nService.t("currentSession");
+    }
+
+    if (device.response.devicePendingAuthRequest?.creationDate) {
+      return this.i18nService.t("requestPending");
+    }
+
+    return "";
+  }
+
+  /**
+   * Get a human readable device type from the DeviceType enum
+   * @param type - The device type
+   * @returns The human readable device type
+   */
+  private getHumanReadableDeviceType(type: DeviceType): string {
+    const metadata = DeviceTypeMetadata[type];
+    if (!metadata) {
+      return this.i18nService.t("unknownDevice");
+    }
+
+    // If the platform is "Unknown" translate it since it is not a proper noun
+    const platform =
+      metadata.platform === "Unknown" ? this.i18nService.t("unknown") : metadata.platform;
+    const category = this.i18nService.t(metadata.category);
+    return platform ? `${category} - ${platform}` : category;
+  }
+
+  /**
+   * Check if a device is the current device
+   * @param device - The device or device table data
+   * @returns True if the device is the current device, false otherwise
+   */
+  protected isCurrentDevice(device: DeviceView | DeviceTableData): boolean {
+    return "response" in device
+      ? device.id === this.currentDevice?.id
+      : device.id === this.currentDevice?.id;
+  }
+
+  /**
+   * Check if a device has a pending auth request
+   * @param device - The device
+   * @returns True if the device has a pending auth request, false otherwise
+   */
+  protected hasPendingAuthRequest(device: DeviceTableData): boolean {
+    return (
+      device.devicePendingAuthRequest !== undefined && device.devicePendingAuthRequest !== null
+    );
+  }
+
+  /**
+   * Remove a device
+   * @param device - The device
+   */
+  protected async removeDevice(device: DeviceTableData) {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "removeDevice" },
+      content: { key: "removeDeviceConfirmation" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      this.asyncActionLoading = true;
+      await firstValueFrom(this.devicesService.deactivateDevice$(device.id));
+      this.asyncActionLoading = false;
+
+      // Remove the device from the data source
+      this.dataSource.data = this.dataSource.data.filter((d) => d.id !== device.id);
+
+      this.toastService.showToast({
+        title: "",
+        message: this.i18nService.t("deviceRemoved"),
+        variant: "success",
+      });
+    } catch (error) {
+      this.validationService.showError(error);
+    }
+  }
+}

apps/web/src/app/auth/settings/security/security-routing.module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
+import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+
 import { ChangePasswordComponent } from "../change-password.component";
 import { TwoFactorSetupComponent } from "../two-factor/two-factor-setup.component";
 
+import { DeviceManagementComponent } from "./device-management.component";
 import { SecurityKeysComponent } from "./security-keys.component";
 import { SecurityComponent } from "./security.component";
 
@@ -29,6 +33,12 @@
         component: SecurityKeysComponent,
         data: { titleId: "keys" },
       },
+      {
+        path: "device-management",
+        component: DeviceManagementComponent,
+        data: { titleId: "devices" },
+        canActivate: [canAccessFeature(FeatureFlag.DeviceManagement)],
+      },
     ],
   },
 ];

apps/web/src/app/auth/settings/security/security.component.html

@@ -4,6 +4,9 @@
       <bit-tab-link route="change-password">{{ "masterPassword" | i18n }}</bit-tab-link>
     </ng-container>
     <bit-tab-link route="two-factor">{{ "twoStepLogin" | i18n }}</bit-tab-link>
+    <ng-container *ngIf="deviceManagementAvailable$ | async">
+      <bit-tab-link route="device-management">{{ "devices" | i18n }}</bit-tab-link>
+    </ng-container>
     <bit-tab-link route="security-keys">{{ "keys" | i18n }}</bit-tab-link>
   </bit-tab-nav-bar>
 </app-header>

apps/web/src/app/auth/settings/security/security.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from "@angular/core";
 
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 
 @Component({
   selector: "app-security",
   templateUrl: "security.component.html",
 })
 export class SecurityComponent implements OnInit {
   showChangePassword = true;
+  deviceManagementAvailable$ = this.configService.getFeatureFlag$(FeatureFlag.DeviceManagement);
 
-  constructor(private userVerificationService: UserVerificationService) {}
+  constructor(
+    private userVerificationService: UserVerificationService,
+    private configService: ConfigService,
+  ) {}
 
   async ngOnInit() {
     this.showChangePassword = await this.userVerificationService.hasMasterPassword();