[PM-1214] device management screen

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

@@ -0,0 +1,66 @@
+<div class="tabbed-content">
+  <h2>
+    {{ "devices" | i18n }}
+    <i class="bwi bwi-question-circle tw-h-5 tw-w-5 bwi-color-primary" aria-hidden="true"></i>
+  </h2>
+  <p>{{ "deviceListDescription" | i18n }}</p>
+
+  <bit-table-scroll [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>
+              {{ "remove" | 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,207 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { firstValueFrom } from "rxjs";
+
+import { DeviceTrustServiceAbstraction } from "@bitwarden/common/auth/abstractions/device-trust.service.abstraction";
+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 { 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;
+
+  constructor(
+    private i18nService: I18nService,
+    private devicesService: DevicesServiceAbstraction,
+    private deviceTrustService: DeviceTrustServiceAbstraction,
+    private dialogService: DialogService,
+    private toastService: ToastService,
+  ) {
+    // Get current device
+    this.deviceTrustService
+      .getCurrentDevice$()
+      .pipe(takeUntilDestroyed())
+      .subscribe((device) => {
+        this.currentDevice = new DeviceView(device);
+      });
+
+    // Get all devices and map them for the table
+    this.devicesService
+      .getDevices$()
+      .pipe(takeUntilDestroyed())
+      .subscribe((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,
+          };
+        });
+      });
+  }
+
+  /**
+   * 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");
+    }
+
+    const category = this.i18nService.t(metadata.category);
+    return metadata.platform ? `${category} - ${metadata.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 {
+      await firstValueFrom(this.devicesService.deactivateDevice$(device.id));
+
+      // 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 (e) {
+      this.toastService.showToast({
+        title: "",
+        message: this.i18nService.t("errorOccurred"),
+        variant: "warning",
+      });
+    }
+  }
+}

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

@@ -4,6 +4,7 @@
 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 +30,11 @@
         component: SecurityKeysComponent,
         data: { titleId: "keys" },
       },
+      {
+        path: "device-management",
+        component: DeviceManagementComponent,
+        data: { titleId: "devices" },
+      },
     ],
   },
 ];

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

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

apps/web/src/locales/en/messages.json

@@ -1715,6 +1715,12 @@
   "logBackIn": {
     "message": "Please log back in."
   },
+  "currentSession": {
+    "message": "Current session"
+  },
+  "requestPending": {
+    "message": "Request pending"
+  },  
   "logBackInOthersToo": {
     "message": "Please log back in. If you are using other Bitwarden applications log out and back in to those as well."
   },
@@ -3765,6 +3771,15 @@
   "device": {
     "message": "Device"
   },
+  "loginStatus": {
+    "message": "Login status"
+  },
+  "firstLogin": {
+    "message": "First login"
+  },
+  "trusted": {
+    "message": "Trusted"
+  },
   "creatingAccountOn": {
     "message": "Creating account on"
   },
@@ -8236,6 +8251,15 @@
   "approveRequest": {
     "message": "Approve request"
   },
+  "deviceApproved": {
+    "message": "Device approved"
+  },
+  "deviceRemoved": {
+    "message": "Device removed"
+  },
+  "removeDeviceConfirmation": {
+    "message": "Are you sure you want to remove this device?"
+  },
   "noDeviceRequests": {
     "message": "No device requests"
   },
@@ -9927,6 +9951,12 @@
   "removeMembers": {
     "message": "Remove members"
   },
+  "devices": {
+    "message": "Devices"
+  },
+  "deviceListDescription": {
+    "message": "Your account was logged in to each of the devices below. If you do not recognize a device, remove it now."
+  },
   "claimedDomains": {
     "message": "Claimed domains"
   },

libs/common/src/auth/abstractions/device-trust.service.abstraction.ts

@@ -39,4 +39,8 @@ export abstract class DeviceTrustServiceAbstraction {
    * Note: For debugging purposes only.
    */
   recordDeviceTrustLoss: () => Promise<void>;
+  /**
+   * Retrieves the current device
+   */
+  getCurrentDevice$: () => Observable<DeviceResponse>;
 }

libs/common/src/auth/abstractions/devices-api.service.abstraction.ts

@@ -36,4 +36,10 @@ export abstract class DevicesApiServiceAbstraction {
    * @param deviceIdentifier - current device identifier
    */
   postDeviceTrustLoss: (deviceIdentifier: string) => Promise<void>;
+
+  /**
+   * Deactivates a device
+   * @param deviceId - The device ID
+   */
+  deactivateDevice: (deviceId: string) => Promise<void>;
 }