From 79327d8afb26d256adef79d17b22770afcce1d15 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Fri, 6 Dec 2024 21:33:00 -0600
Subject: [PATCH 01/25] Add basic device management screen

---
 .../security/device-management.component.html | 34 +++++++++++++++++++
 .../security/device-management.component.ts   | 25 ++++++++++++++
 .../security/security-routing.module.ts       |  6 ++++
 .../settings/security/security.component.html |  1 +
 .../src/app/shared/loose-components.module.ts |  2 ++
 apps/web/src/locales/en/messages.json         |  3 ++
 6 files changed, 71 insertions(+)
 create mode 100644 apps/web/src/app/auth/settings/security/device-management.component.html
 create mode 100644 apps/web/src/app/auth/settings/security/device-management.component.ts

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
new file mode 100644
index 00000000000..e6cdae6029d
--- /dev/null
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -0,0 +1,34 @@
+<div class="tabbed-content">
+  <h2>{{ "devices" | i18n }}</h2>
+  <h3>test1</h3>
+  <bit-table>
+    <ng-container header>
+      <tr>
+        <th bitCell>{{ "deviceType" | i18n }}</th>
+        <th bitCell>{{ "deviceName" | i18n }}</th>
+        <th bitCell>{{ "lastActive" | i18n }}</th>
+        <th bitCell class="text-right">{{ "action" | i18n }}</th>
+      </tr>
+    </ng-container>
+    <ng-template body>
+      <tr bitRow>
+        <td bitCell>
+          <i class="bwi bwi-desktop" aria-hidden="true"></i>
+          {{ "desktop" | i18n }}
+        </td>
+        <td bitCell>Windows 10 Chrome</td>
+        <td bitCell>{{ "now" | i18n }}</td>
+        <td bitCell class="text-right">
+          <button type="button" bitButton buttonType="danger" [bitMenuTriggerFor]="deviceMenu">
+            <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
+          </button>
+          <bit-menu #deviceMenu>
+            <button type="button" bitMenuItem (click)="revokeDevice()">
+              <span class="tw-text-danger">{{ "revokeAccess" | i18n }}</span>
+            </button>
+          </bit-menu>
+        </td>
+      </tr>
+    </ng-template>
+  </bit-table>
+</div>
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
new file mode 100644
index 00000000000..315e18f5b60
--- /dev/null
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from "@angular/core";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { DialogService } from "@bitwarden/components";
+
+@Component({
+  selector: "app-device-management",
+  templateUrl: "./device-management.component.html",
+})
+export class DeviceManagementComponent implements OnInit {
+  constructor(
+    private accountService: AccountService,
+    private apiService: ApiService,
+    private dialogService: DialogService,
+  ) {}
+
+  async ngOnInit() {
+    // TODO: Load devices
+  }
+
+  async revokeDevice() {
+    // TODO: Implement device revocation using dialogService for confirmation
+  }
+}
diff --git a/apps/web/src/app/auth/settings/security/security-routing.module.ts b/apps/web/src/app/auth/settings/security/security-routing.module.ts
index 8af0499d05a..6ed21605184 100644
--- a/apps/web/src/app/auth/settings/security/security-routing.module.ts
+++ b/apps/web/src/app/auth/settings/security/security-routing.module.ts
@@ -4,6 +4,7 @@ import { RouterModule, Routes } from "@angular/router";
 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 @@ const routes: Routes = [
         component: SecurityKeysComponent,
         data: { titleId: "keys" },
       },
+      {
+        path: "device-management",
+        component: DeviceManagementComponent,
+        data: { titleId: "devices" },
+      },
     ],
   },
 ];
diff --git a/apps/web/src/app/auth/settings/security/security.component.html b/apps/web/src/app/auth/settings/security/security.component.html
index 25459faeacc..6bd7c1daf36 100644
--- a/apps/web/src/app/auth/settings/security/security.component.html
+++ b/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>
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index 15f15e2e317..a7d34424a96 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/apps/web/src/app/shared/loose-components.module.ts
@@ -39,6 +39,7 @@ import { EmergencyAccessViewComponent } from "../auth/settings/emergency-access/
 import { EmergencyAddEditCipherComponent } from "../auth/settings/emergency-access/view/emergency-add-edit-cipher.component";
 import { ApiKeyComponent } from "../auth/settings/security/api-key.component";
 import { ChangeKdfModule } from "../auth/settings/security/change-kdf/change-kdf.module";
+import { DeviceManagementComponent } from "../auth/settings/security/device-management.component";
 import { SecurityKeysComponent } from "../auth/settings/security/security-keys.component";
 import { SecurityComponent } from "../auth/settings/security/security.component";
 import { TwoFactorRecoveryComponent } from "../auth/settings/two-factor/two-factor-recovery.component";
@@ -121,6 +122,7 @@ import { SharedModule } from "./shared.module";
     ChangeEmailComponent,
     DeauthorizeSessionsComponent,
     DeleteAccountDialogComponent,
+    DeviceManagementComponent,
     DomainRulesComponent,
     EmergencyAccessAddEditComponent,
     EmergencyAccessAttachmentsComponent,
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 163c63a6d24..b11b1e1d217 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -9902,5 +9902,8 @@
   },
   "removeMembers": {
     "message": "Remove members"
+  },
+  "devices": {
+    "message": "Devices"
   }
 }

From d4c00910c8e01e1bc4767643829180a7bc7fd44b Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Sun, 8 Dec 2024 21:12:46 -0600
Subject: [PATCH 02/25] Add table styling

---
 .../security/device-management.component.html | 53 ++++++-----
 .../security/device-management.component.ts   | 94 ++++++++++++++++---
 .../src/app/shared/loose-components.module.ts |  2 -
 apps/web/src/locales/en/messages.json         |  9 ++
 4 files changed, 121 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index e6cdae6029d..8b4e1ca192d 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -1,33 +1,42 @@
 <div class="tabbed-content">
-  <h2>{{ "devices" | i18n }}</h2>
-  <h3>test1</h3>
-  <bit-table>
+  <h2>
+    {{ "devices" | i18n }} <i class="bwi bwi-question-circle tw-h-7 tw-w-7" aria-hidden="true"></i>
+  </h2>
+  <p>{{ "deviceListDescription" | i18n }}</p>
+
+  <bit-table [dataSource]="dataSource">
     <ng-container header>
       <tr>
-        <th bitCell>{{ "deviceType" | i18n }}</th>
-        <th bitCell>{{ "deviceName" | i18n }}</th>
-        <th bitCell>{{ "lastActive" | i18n }}</th>
-        <th bitCell class="text-right">{{ "action" | i18n }}</th>
+        <th
+          *ngFor="let col of columnConfig"
+          [class]="col.headerClass"
+          bitCell
+          scope="col"
+          role="columnheader"
+        >
+          {{ col.title }}
+        </th>
       </tr>
     </ng-container>
     <ng-template body>
-      <tr bitRow>
-        <td bitCell>
-          <i class="bwi bwi-desktop" aria-hidden="true"></i>
-          {{ "desktop" | i18n }}
+      <tr bitRow *ngFor="let device of dataSource.data">
+        <td bitCell class="tw-flex tw-gap-2">
+          <div class="tw-flex tw-items-center tw-justify-center tw-w-10">
+            <i [class]="getDeviceIcon(device.type)" class="bwi-lg" aria-hidden="true"></i>
+          </div>
+
+          <div>
+            {{ device.deviceName }}
+            <span *ngIf="device.trusted" class="tw-text-sm tw-text-muted tw-block">
+              {{ "trusted" | i18n }}
+            </span>
+          </div>
         </td>
-        <td bitCell>Windows 10 Chrome</td>
-        <td bitCell>{{ "now" | i18n }}</td>
-        <td bitCell class="text-right">
-          <button type="button" bitButton buttonType="danger" [bitMenuTriggerFor]="deviceMenu">
-            <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
-          </button>
-          <bit-menu #deviceMenu>
-            <button type="button" bitMenuItem (click)="revokeDevice()">
-              <span class="tw-text-danger">{{ "revokeAccess" | i18n }}</span>
-            </button>
-          </bit-menu>
+        <td *ngIf="device.loginStatus !== 'Current session'" bitCell>{{ device.loginStatus }}</td>
+        <td *ngIf="device.loginStatus === 'Current session'" bitCell>
+          <span bitBadge variant="primary">{{ device.loginStatus }} test</span>
         </td>
+        <td bitCell>{{ device.firstLogin | date }}</td>
       </tr>
     </ng-template>
   </bit-table>
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 315e18f5b60..c04155fd150 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -1,25 +1,93 @@
+import { CommonModule } from "@angular/common";
 import { Component, OnInit } from "@angular/core";
 
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { DialogService } from "@bitwarden/components";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { TableDataSource, TableModule } from "@bitwarden/components";
+
+import { SharedModule } from "../../../shared";
+
+interface Device {
+  type: string;
+  deviceName: string;
+  loginStatus: string;
+  firstLogin: Date;
+  trusted: boolean;
+}
 
 @Component({
   selector: "app-device-management",
   templateUrl: "./device-management.component.html",
+  standalone: true,
+  imports: [CommonModule, SharedModule, TableModule],
 })
 export class DeviceManagementComponent implements OnInit {
-  constructor(
-    private accountService: AccountService,
-    private apiService: ApiService,
-    private dialogService: DialogService,
-  ) {}
-
-  async ngOnInit() {
-    // TODO: Load devices
+  protected readonly tableId = "device-management-table";
+  protected dataSource = new TableDataSource<Device>();
+
+  constructor(private i18nService: I18nService) {}
+
+  protected readonly columnConfig = [
+    {
+      name: "deviceName",
+      title: this.i18nService.t("device"),
+      headerClass: "tw-w-1/3",
+    },
+    {
+      name: "loginStatus",
+      title: this.i18nService.t("loginStatus"),
+      headerClass: "tw-w-1/4",
+    },
+    {
+      name: "firstLogin",
+      title: this.i18nService.t("firstLogin"),
+      headerClass: "tw-w-1/4",
+    },
+  ];
+
+  currentDeviceId = "device-1";
+
+  devices: Device[] = [
+    {
+      type: "browser",
+      deviceName: "Web app - Chrome",
+      loginStatus: "Current session",
+      firstLogin: new Date("2026-09-20T09:25:54"),
+      trusted: true,
+    },
+    {
+      type: "extension",
+      deviceName: "Extension - Chrome",
+      loginStatus: "This week",
+      firstLogin: new Date("2026-09-20T09:25:54"),
+      trusted: true,
+    },
+    {
+      type: "cli",
+      deviceName: "CLI - macOS",
+      loginStatus: "This month",
+      firstLogin: new Date("2026-09-20T09:25:54"),
+      trusted: true,
+    },
+    {
+      type: "mobile",
+      deviceName: "Mobile - iOS",
+      loginStatus: "",
+      firstLogin: new Date("2026-09-20T09:25:54"),
+      trusted: true,
+    },
+  ];
+
+  ngOnInit() {
+    this.dataSource.data = this.devices;
   }
 
-  async revokeDevice() {
-    // TODO: Implement device revocation using dialogService for confirmation
+  getDeviceIcon(type: string): string {
+    const iconMap: { [key: string]: string } = {
+      browser: "bwi bwi-browser",
+      extension: "bwi bwi-puzzle",
+      cli: "bwi bwi-cli",
+      mobile: "bwi bwi-mobile",
+    };
+    return iconMap[type] || "bwi bwi-device";
   }
 }
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index a7d34424a96..15f15e2e317 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/apps/web/src/app/shared/loose-components.module.ts
@@ -39,7 +39,6 @@ import { EmergencyAccessViewComponent } from "../auth/settings/emergency-access/
 import { EmergencyAddEditCipherComponent } from "../auth/settings/emergency-access/view/emergency-add-edit-cipher.component";
 import { ApiKeyComponent } from "../auth/settings/security/api-key.component";
 import { ChangeKdfModule } from "../auth/settings/security/change-kdf/change-kdf.module";
-import { DeviceManagementComponent } from "../auth/settings/security/device-management.component";
 import { SecurityKeysComponent } from "../auth/settings/security/security-keys.component";
 import { SecurityComponent } from "../auth/settings/security/security.component";
 import { TwoFactorRecoveryComponent } from "../auth/settings/two-factor/two-factor-recovery.component";
@@ -122,7 +121,6 @@ import { SharedModule } from "./shared.module";
     ChangeEmailComponent,
     DeauthorizeSessionsComponent,
     DeleteAccountDialogComponent,
-    DeviceManagementComponent,
     DomainRulesComponent,
     EmergencyAccessAddEditComponent,
     EmergencyAccessAttachmentsComponent,
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index b11b1e1d217..c3f8641f03b 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -3783,6 +3783,15 @@
   "device": {
     "message": "Device"
   },
+  "loginStatus": {
+    "message": "Login status"
+  },
+  "firstLogin": {
+    "message": "First login"
+  },
+  "trusted": {
+    "message": "Trusted"
+  },
   "creatingAccountOn": {
     "message": "Creating account on"
   },

From efda9ae56eaedf0b11032b2f3c6460ae0947f543 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Mon, 9 Dec 2024 14:12:15 -0600
Subject: [PATCH 03/25] Add options button

---
 .../security/device-management.component.html | 19 ++++++++++++++++++-
 .../security/device-management.component.ts   |  3 ++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index 8b4e1ca192d..14fed1d2aee 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -1,6 +1,7 @@
 <div class="tabbed-content">
   <h2>
-    {{ "devices" | i18n }} <i class="bwi bwi-question-circle tw-h-7 tw-w-7" aria-hidden="true"></i>
+    {{ "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>
 
@@ -13,9 +14,12 @@ <h2>
           bitCell
           scope="col"
           role="columnheader"
+          [bitSortable]="col.name"
+          default
         >
           {{ col.title }}
         </th>
+        <th bitCell scope="col" role="columnheader"></th>
       </tr>
     </ng-container>
     <ng-template body>
@@ -37,6 +41,19 @@ <h2>
           <span bitBadge variant="primary">{{ device.loginStatus }} test</span>
         </td>
         <td bitCell>{{ device.firstLogin | date }}</td>
+        <td bitCell>
+          <button
+            type="button"
+            bitIconButton="bwi-ellipsis-v"
+            [bitMenuTriggerFor]="optionsMenu"
+          ></button>
+          <bit-menu #optionsMenu>
+            <a href="#" bitMenuItem>Anchor link</a>
+            <a href="#" bitMenuItem>Another link</a>
+            <bit-menu-divider></bit-menu-divider>
+            <button type="button" bitMenuItem>Button after divider</button>
+          </bit-menu>
+        </td>
       </tr>
     </ng-template>
   </bit-table>
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index c04155fd150..4828959168e 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -5,6 +5,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { TableDataSource, TableModule } from "@bitwarden/components";
 
 import { SharedModule } from "../../../shared";
+import { TableScrollComponent } from "@bitwarden/components/src/table/table-scroll.component";
 
 interface Device {
   type: string;
@@ -35,7 +36,7 @@ export class DeviceManagementComponent implements OnInit {
     {
       name: "loginStatus",
       title: this.i18nService.t("loginStatus"),
-      headerClass: "tw-w-1/4",
+      headerClass: "tw-w-1/3",
     },
     {
       name: "firstLogin",

From dc2596ea8cfae04277036b8c4b9febaaff135bbe Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Mon, 16 Dec 2024 10:58:02 -0600
Subject: [PATCH 04/25] Fix bad merge

---
 apps/web/src/locales/en/messages.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index e21d512cf70..062cb28f907 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -9981,6 +9981,5 @@
   },
   "domainClaimed": {
     "message": "Domain claimed"
->>>>>>> main
   }
 }

From 5eb99551eba7ecc64b4c8c5f03de5e176e3b5e11 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Mon, 16 Dec 2024 23:46:11 -0600
Subject: [PATCH 05/25] Fix icons, trusted status, login status and last login

---
 .../security/device-management.component.html |  12 +-
 .../security/device-management.component.ts   | 152 ++++++++++++------
 apps/web/src/locales/en/messages.json         |   3 +
 .../device-trust.service.abstraction.ts       |   4 +
 .../devices/responses/device.response.ts      |   5 +
 .../abstractions/devices/views/device.view.ts |   1 +
 .../device-trust.service.implementation.ts    |   9 +-
 libs/common/src/enums/device-type.enum.ts     |  50 ++++--
 8 files changed, 167 insertions(+), 69 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index 14fed1d2aee..d6282de49d4 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -14,7 +14,6 @@ <h2>
           bitCell
           scope="col"
           role="columnheader"
-          [bitSortable]="col.name"
           default
         >
           {{ col.title }}
@@ -28,19 +27,18 @@ <h2>
           <div class="tw-flex tw-items-center tw-justify-center tw-w-10">
             <i [class]="getDeviceIcon(device.type)" class="bwi-lg" aria-hidden="true"></i>
           </div>
-
           <div>
-            {{ device.deviceName }}
+            {{ device.displayName }}
             <span *ngIf="device.trusted" class="tw-text-sm tw-text-muted tw-block">
               {{ "trusted" | i18n }}
             </span>
           </div>
         </td>
-        <td *ngIf="device.loginStatus !== 'Current session'" bitCell>{{ device.loginStatus }}</td>
-        <td *ngIf="device.loginStatus === 'Current session'" bitCell>
-          <span bitBadge variant="primary">{{ device.loginStatus }} test</span>
+        <td *ngIf="!isCurrentDevice(device)" bitCell>{{ device.loginStatus }}</td>
+        <td *ngIf="isCurrentDevice(device)" bitCell>
+          <span bitBadge variant="primary">{{ "currentSession" | i18n }}</span>
         </td>
-        <td bitCell>{{ device.firstLogin | date }}</td>
+        <td bitCell>{{ device.firstLogin | date: "medium" }}</td>
         <td bitCell>
           <button
             type="button"
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 4828959168e..03c32af2601 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -1,15 +1,20 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
+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 { TableDataSource, TableModule } from "@bitwarden/components";
 
 import { SharedModule } from "../../../shared";
-import { TableScrollComponent } from "@bitwarden/components/src/table/table-scroll.component";
 
-interface Device {
-  type: string;
-  deviceName: string;
+interface DeviceTableData {
+  id: string;
+  type: DeviceType;
+  displayName: string;
   loginStatus: string;
   firstLogin: Date;
   trusted: boolean;
@@ -23,9 +28,41 @@ interface Device {
 })
 export class DeviceManagementComponent implements OnInit {
   protected readonly tableId = "device-management-table";
-  protected dataSource = new TableDataSource<Device>();
+  protected dataSource = new TableDataSource<DeviceTableData>();
+  protected currentDevice: DeviceView | undefined;
 
-  constructor(private i18nService: I18nService) {}
+  constructor(
+    private i18nService: I18nService,
+    private devicesService: DevicesServiceAbstraction,
+    private deviceTrustService: DeviceTrustServiceAbstraction,
+  ) {
+    // Get current device
+    this.deviceTrustService
+      .getCurrentDevice$()
+      .pipe(takeUntilDestroyed())
+      .subscribe((device) => {
+        this.currentDevice = new DeviceView(device);
+      });
+
+    // Get all devices and map them
+    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),
+            firstLogin: new Date(device.creationDate),
+            trusted: device.response.isTrusted,
+          };
+        });
+      });
+  }
+
+  ngOnInit(): void {}
 
   protected readonly columnConfig = [
     {
@@ -45,50 +82,71 @@ export class DeviceManagementComponent implements OnInit {
     },
   ];
 
-  currentDeviceId = "device-1";
+  /**
+   * Get the icon for a device type
+   * @param type - The device type
+   * @returns The icon for the device type
+   */
+  getDeviceIcon(type: DeviceType): string {
+    const metadata = DeviceTypeMetadata[type];
+    if (!metadata) {
+      return "bwi bwi-device"; // fallback icon
+    }
+    // Map device categories to their corresponding icons
+    const categoryIconMap: { [key: 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-device",
+    };
 
-  devices: Device[] = [
-    {
-      type: "browser",
-      deviceName: "Web app - Chrome",
-      loginStatus: "Current session",
-      firstLogin: new Date("2026-09-20T09:25:54"),
-      trusted: true,
-    },
-    {
-      type: "extension",
-      deviceName: "Extension - Chrome",
-      loginStatus: "This week",
-      firstLogin: new Date("2026-09-20T09:25:54"),
-      trusted: true,
-    },
-    {
-      type: "cli",
-      deviceName: "CLI - macOS",
-      loginStatus: "This month",
-      firstLogin: new Date("2026-09-20T09:25:54"),
-      trusted: true,
-    },
-    {
-      type: "mobile",
-      deviceName: "Mobile - iOS",
-      loginStatus: "",
-      firstLogin: new Date("2026-09-20T09:25:54"),
-      trusted: true,
-    },
-  ];
+    return categoryIconMap[metadata.category] || "bwi bwi-device";
+  }
 
-  ngOnInit() {
-    this.dataSource.data = this.devices;
+  /**
+   * 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 new Date(device.response.devicePendingAuthRequest.creationDate).toLocaleDateString();
+    }
+
+    return "";
   }
 
-  getDeviceIcon(type: string): string {
-    const iconMap: { [key: string]: string } = {
-      browser: "bwi bwi-browser",
-      extension: "bwi bwi-puzzle",
-      cli: "bwi bwi-cli",
-      mobile: "bwi bwi-mobile",
-    };
-    return iconMap[type] || "bwi bwi-device";
+  /**
+   * 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;
   }
 }
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 062cb28f907..7757efb7d0e 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -1715,6 +1715,9 @@
   "logBackIn": {
     "message": "Please log back in."
   },
+  "currentSession": {
+    "message": "Current session"
+  },
   "logBackInOthersToo": {
     "message": "Please log back in. If you are using other Bitwarden applications log out and back in to those as well."
   },
diff --git a/libs/common/src/auth/abstractions/device-trust.service.abstraction.ts b/libs/common/src/auth/abstractions/device-trust.service.abstraction.ts
index 13963b03bea..966910a17f7 100644
--- a/libs/common/src/auth/abstractions/device-trust.service.abstraction.ts
+++ b/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>;
 }
diff --git a/libs/common/src/auth/abstractions/devices/responses/device.response.ts b/libs/common/src/auth/abstractions/devices/responses/device.response.ts
index a4e40037b05..707616744ad 100644
--- a/libs/common/src/auth/abstractions/devices/responses/device.response.ts
+++ b/libs/common/src/auth/abstractions/devices/responses/device.response.ts
@@ -9,6 +9,9 @@ export class DeviceResponse extends BaseResponse {
   type: DeviceType;
   creationDate: string;
   revisionDate: string;
+  isTrusted: boolean;
+  devicePendingAuthRequest: { id: string; creationDate: string } | null;
+
   constructor(response: any) {
     super(response);
     this.id = this.getResponseProperty("Id");
@@ -18,5 +21,7 @@ export class DeviceResponse extends BaseResponse {
     this.type = this.getResponseProperty("Type");
     this.creationDate = this.getResponseProperty("CreationDate");
     this.revisionDate = this.getResponseProperty("RevisionDate");
+    this.isTrusted = this.getResponseProperty("IsTrusted");
+    this.devicePendingAuthRequest = this.getResponseProperty("DevicePendingAuthRequest");
   }
 }
diff --git a/libs/common/src/auth/abstractions/devices/views/device.view.ts b/libs/common/src/auth/abstractions/devices/views/device.view.ts
index a901eb998b4..22e522b9eb0 100644
--- a/libs/common/src/auth/abstractions/devices/views/device.view.ts
+++ b/libs/common/src/auth/abstractions/devices/views/device.view.ts
@@ -12,6 +12,7 @@ export class DeviceView implements View {
   type: DeviceType;
   creationDate: string;
   revisionDate: string;
+  response: DeviceResponse;
 
   constructor(deviceResponse: DeviceResponse) {
     Object.assign(this, deviceResponse);
diff --git a/libs/common/src/auth/services/device-trust.service.implementation.ts b/libs/common/src/auth/services/device-trust.service.implementation.ts
index 409150552ad..cbad83dbdcf 100644
--- a/libs/common/src/auth/services/device-trust.service.implementation.ts
+++ b/libs/common/src/auth/services/device-trust.service.implementation.ts
@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { firstValueFrom, map, Observable } from "rxjs";
+import { firstValueFrom, map, Observable, defer } from "rxjs";
 
 import { UserDecryptionOptionsServiceAbstraction } from "@bitwarden/auth/common";
 
@@ -356,4 +356,11 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
       userId: userId,
     };
   }
+
+  getCurrentDevice$(): Observable<DeviceResponse> {
+    return defer(async () => {
+      const deviceIdentifier = await this.appIdService.getAppId();
+      return this.devicesApiService.getDeviceByIdentifier(deviceIdentifier);
+    });
+  }
 }
diff --git a/libs/common/src/enums/device-type.enum.ts b/libs/common/src/enums/device-type.enum.ts
index 1b8574a4c49..ff6329b9ac4 100644
--- a/libs/common/src/enums/device-type.enum.ts
+++ b/libs/common/src/enums/device-type.enum.ts
@@ -27,18 +27,40 @@ export enum DeviceType {
   LinuxCLI = 25,
 }
 
-export const MobileDeviceTypes: Set<DeviceType> = new Set([
-  DeviceType.Android,
-  DeviceType.iOS,
-  DeviceType.AndroidAmazon,
-]);
+/**
+ * Device type metadata
+ * Each device type has a category corresponding to the client type and platform (Android, iOS, Chrome, Firefox, etc.)
+ */
+interface DeviceTypeMetadata {
+  category: "mobile" | "extension" | "webVault" | "desktop" | "cli" | "sdk" | "server";
+  platform: string;
+}
 
-export const DesktopDeviceTypes: Set<DeviceType> = new Set([
-  DeviceType.WindowsDesktop,
-  DeviceType.MacOsDesktop,
-  DeviceType.LinuxDesktop,
-  DeviceType.UWP,
-  DeviceType.WindowsCLI,
-  DeviceType.MacOsCLI,
-  DeviceType.LinuxCLI,
-]);
+export const DeviceTypeMetadata: Record<DeviceType, DeviceTypeMetadata> = {
+  [DeviceType.Android]: { category: "mobile", platform: "Android" },
+  [DeviceType.iOS]: { category: "mobile", platform: "iOS" },
+  [DeviceType.AndroidAmazon]: { category: "mobile", platform: "Amazon" },
+  [DeviceType.ChromeExtension]: { category: "extension", platform: "Chrome" },
+  [DeviceType.FirefoxExtension]: { category: "extension", platform: "Firefox" },
+  [DeviceType.OperaExtension]: { category: "extension", platform: "Opera" },
+  [DeviceType.EdgeExtension]: { category: "extension", platform: "Edge" },
+  [DeviceType.VivaldiExtension]: { category: "extension", platform: "Vivaldi" },
+  [DeviceType.SafariExtension]: { category: "extension", platform: "Safari" },
+  [DeviceType.ChromeBrowser]: { category: "webVault", platform: "Chrome" },
+  [DeviceType.FirefoxBrowser]: { category: "webVault", platform: "Firefox" },
+  [DeviceType.OperaBrowser]: { category: "webVault", platform: "Opera" },
+  [DeviceType.EdgeBrowser]: { category: "webVault", platform: "Edge" },
+  [DeviceType.IEBrowser]: { category: "webVault", platform: "IE" },
+  [DeviceType.SafariBrowser]: { category: "webVault", platform: "Safari" },
+  [DeviceType.VivaldiBrowser]: { category: "webVault", platform: "Vivaldi" },
+  [DeviceType.UnknownBrowser]: { category: "webVault", platform: "Unknown" },
+  [DeviceType.WindowsDesktop]: { category: "desktop", platform: "Windows" },
+  [DeviceType.MacOsDesktop]: { category: "desktop", platform: "macOS" },
+  [DeviceType.LinuxDesktop]: { category: "desktop", platform: "Linux" },
+  [DeviceType.UWP]: { category: "desktop", platform: "Windows UWP" },
+  [DeviceType.WindowsCLI]: { category: "cli", platform: "Windows" },
+  [DeviceType.MacOsCLI]: { category: "cli", platform: "macOS" },
+  [DeviceType.LinuxCLI]: { category: "cli", platform: "Linux" },
+  [DeviceType.SDK]: { category: "sdk", platform: "" },
+  [DeviceType.Server]: { category: "server", platform: "" },
+};

From 99f6af0f12f45bed02d78a41fc7447dfc9235c30 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Tue, 17 Dec 2024 10:06:28 -0600
Subject: [PATCH 06/25] Add sorting and table description.

---
 .../auth/settings/security/device-management.component.html  | 3 ++-
 .../auth/settings/security/device-management.component.ts    | 5 ++++-
 apps/web/src/locales/en/messages.json                        | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index d6282de49d4..40992e0940b 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -12,9 +12,10 @@ <h2>
           *ngFor="let col of columnConfig"
           [class]="col.headerClass"
           bitCell
+          [bitSortable]="col.sortable ? col.name : null"
+          [default]="col.name === 'displayName' ? 'asc' : null"
           scope="col"
           role="columnheader"
-          default
         >
           {{ col.title }}
         </th>
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 03c32af2601..6cb5cf0b60d 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -66,19 +66,22 @@ export class DeviceManagementComponent implements OnInit {
 
   protected readonly columnConfig = [
     {
-      name: "deviceName",
+      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/4",
+      sortable: true,
     },
   ];
 
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 7757efb7d0e..816655b1cad 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -9903,6 +9903,9 @@
   "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"
   },

From f1a59e954ff8eaa6d59889379aba463cbcece074 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Tue, 17 Dec 2024 11:58:01 -0600
Subject: [PATCH 07/25] Add table button functionality

---
 .../security/device-management.component.html | 33 ++++++-
 .../security/device-management.component.ts   | 88 ++++++++++++++++++-
 apps/web/src/locales/en/messages.json         |  9 ++
 3 files changed, 125 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index 40992e0940b..b42da9a9540 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -47,10 +47,35 @@ <h2>
             [bitMenuTriggerFor]="optionsMenu"
           ></button>
           <bit-menu #optionsMenu>
-            <a href="#" bitMenuItem>Anchor link</a>
-            <a href="#" bitMenuItem>Another link</a>
-            <bit-menu-divider></bit-menu-divider>
-            <button type="button" bitMenuItem>Button after divider</button>
+            <button
+              type="button"
+              bitMenuItem
+              (click)="approveDevice(device)"
+              *ngIf="device.loginStatus && !isCurrentDevice(device)"
+            >
+              <i class="bwi bwi-check" aria-hidden="true"></i>
+              {{ "approveRequest" | i18n }}
+            </button>
+            <button
+              type="button"
+              bitMenuItem
+              (click)="logOutDevice(device)"
+              [disabled]="isCurrentDevice(device)"
+            >
+              <i aria-hidden="true" class="bwi bwi-fw bwi-sign-out"></i>
+              {{ "logOut" | i18n }}
+            </button>
+            <button
+              type="button"
+              bitMenuItem
+              (click)="removeDevice(device)"
+              [disabled]="isCurrentDevice(device)"
+            >
+              <span class="tw-text-danger">
+                <i class="bwi bwi-trash" aria-hidden="true"></i>
+                {{ "remove" | i18n }}
+              </span>
+            </button>
           </bit-menu>
         </td>
       </tr>
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 6cb5cf0b60d..d193b8a09fc 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -7,7 +7,7 @@ import { DevicesServiceAbstraction } from "@bitwarden/common/auth/abstractions/d
 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 { TableDataSource, TableModule } from "@bitwarden/components";
+import { DialogService , ToastService , TableDataSource, TableModule } from "@bitwarden/components";
 
 import { SharedModule } from "../../../shared";
 
@@ -35,6 +35,8 @@ export class DeviceManagementComponent implements OnInit {
     private i18nService: I18nService,
     private devicesService: DevicesServiceAbstraction,
     private deviceTrustService: DeviceTrustServiceAbstraction,
+    private dialogService: DialogService,
+    private toastService: ToastService,
   ) {
     // Get current device
     this.deviceTrustService
@@ -152,4 +154,88 @@ export class DeviceManagementComponent implements OnInit {
       ? device.id === this.currentDevice?.id
       : device.id === this.currentDevice?.id;
   }
+
+  protected async removeDevice(device: DeviceTableData) {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "removeDevice" },
+      content: { key: "removeDeviceConfirmation" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      // TODO: Implement actual device removal - https://bitwarden.atlassian.net/browse/PM-2133
+      // await this.devicesService.removeDevice(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",
+      });
+    }
+  }
+
+  /**
+   * Log out a device
+   * @param device - The device
+   */
+  protected async logOutDevice(device: DeviceTableData) {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "logOut" },
+      content: { key: "logOutConfirmation" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+    try {
+      // TODO: Implement actual device approval
+      // await this.devicesService.approveDevice(device.id);
+
+      this.toastService.showToast({
+        title: "",
+        message: this.i18nService.t("deviceApproved"),
+        variant: "success",
+      });
+    } catch (e) {
+      this.toastService.showToast({
+        title: "",
+        message: this.i18nService.t("errorOccurred"),
+        variant: "warning",
+      });
+    }
+  }
+
+  /**
+   * Approve a device
+   * @param device - The device
+   */
+  protected async approveDevice(device: DeviceTableData) {
+    try {
+      // TODO: Implement actual device approval
+      // await this.devicesService.approveDevice(device.id);
+
+      this.toastService.showToast({
+        title: "",
+        message: this.i18nService.t("deviceApproved"),
+        variant: "success",
+      });
+    } catch (e) {
+      this.toastService.showToast({
+        title: "",
+        message: this.i18nService.t("errorOccurred"),
+        variant: "warning",
+      });
+    }
+  }
 }
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 816655b1cad..a11afee684a 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -8245,6 +8245,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"
   },

From ebddea032c776d5fccc3fe407f1ea690bf2a9b9b Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Tue, 17 Dec 2024 15:20:53 -0600
Subject: [PATCH 08/25] Add device deactivation

---
 .../security/device-management.component.html     |  2 +-
 .../security/device-management.component.ts       | 15 +++++++++------
 .../devices-api.service.abstraction.ts            |  6 ++++++
 .../devices/devices.service.abstraction.ts        | 13 ++++++-------
 .../devices-api.service.implementation.ts         |  4 ++++
 .../devices/devices.service.implementation.ts     |  7 +++++++
 6 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index b42da9a9540..d72f0cd7ee0 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -13,7 +13,7 @@ <h2>
           [class]="col.headerClass"
           bitCell
           [bitSortable]="col.sortable ? col.name : null"
-          [default]="col.name === 'displayName' ? 'asc' : null"
+          [default]="col.name === 'displayName' ? 'desc' : null"
           scope="col"
           role="columnheader"
         >
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index d193b8a09fc..57736465674 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -1,13 +1,14 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnInit } 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 { DialogService, ToastService, TableDataSource, TableModule } from "@bitwarden/components";
 
 import { SharedModule } from "../../../shared";
 
@@ -20,6 +21,9 @@ interface DeviceTableData {
   trusted: boolean;
 }
 
+/**
+ * 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",
@@ -46,7 +50,7 @@ export class DeviceManagementComponent implements OnInit {
         this.currentDevice = new DeviceView(device);
       });
 
-    // Get all devices and map them
+    // Get all devices and map them for the table
     this.devicesService
       .getDevices$()
       .pipe(takeUntilDestroyed())
@@ -167,8 +171,7 @@ export class DeviceManagementComponent implements OnInit {
     }
 
     try {
-      // TODO: Implement actual device removal - https://bitwarden.atlassian.net/browse/PM-2133
-      // await this.devicesService.removeDevice(device.id);
+      await firstValueFrom(this.devicesService.deactivateDevice$(device.id));
 
       this.toastService.showToast({
         title: "",
@@ -199,8 +202,8 @@ export class DeviceManagementComponent implements OnInit {
       return;
     }
     try {
-      // TODO: Implement actual device approval
-      // await this.devicesService.approveDevice(device.id);
+      // TODO: Implement actual device log out
+      // await this.devicesService.logOutDevice(device.id);
 
       this.toastService.showToast({
         title: "",
diff --git a/libs/common/src/auth/abstractions/devices-api.service.abstraction.ts b/libs/common/src/auth/abstractions/devices-api.service.abstraction.ts
index 0af89928449..92f0ebf1667 100644
--- a/libs/common/src/auth/abstractions/devices-api.service.abstraction.ts
+++ b/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>;
 }
diff --git a/libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts b/libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts
index a02ccc64876..2439046fbc4 100644
--- a/libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts
+++ b/libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts
@@ -1,17 +1,16 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Observable } from "rxjs";
 
 import { DeviceView } from "./views/device.view";
 
 export abstract class DevicesServiceAbstraction {
-  getDevices$: () => Observable<Array<DeviceView>>;
-  getDeviceByIdentifier$: (deviceIdentifier: string) => Observable<DeviceView>;
-  isDeviceKnownForUser$: (email: string, deviceIdentifier: string) => Observable<boolean>;
-  updateTrustedDeviceKeys$: (
+  abstract getDevices$(): Observable<Array<DeviceView>>;
+  abstract getDeviceByIdentifier$(deviceIdentifier: string): Observable<DeviceView>;
+  abstract isDeviceKnownForUser$(email: string, deviceIdentifier: string): Observable<boolean>;
+  abstract updateTrustedDeviceKeys$(
     deviceIdentifier: string,
     devicePublicKeyEncryptedUserKey: string,
     userKeyEncryptedDevicePublicKey: string,
     deviceKeyEncryptedDevicePrivateKey: string,
-  ) => Observable<DeviceView>;
+  ): Observable<DeviceView>;
+  abstract deactivateDevice$(deviceId: string): Observable<void>;
 }
diff --git a/libs/common/src/auth/services/devices-api.service.implementation.ts b/libs/common/src/auth/services/devices-api.service.implementation.ts
index 711f0bb68ec..cf760effbdf 100644
--- a/libs/common/src/auth/services/devices-api.service.implementation.ts
+++ b/libs/common/src/auth/services/devices-api.service.implementation.ts
@@ -117,4 +117,8 @@ export class DevicesApiServiceImplementation implements DevicesApiServiceAbstrac
       },
     );
   }
+
+  async deactivateDevice(deviceId: string): Promise<void> {
+    await this.apiService.send("POST", `/devices/${deviceId}/deactivate`, null, true, false);
+  }
 }
diff --git a/libs/common/src/auth/services/devices/devices.service.implementation.ts b/libs/common/src/auth/services/devices/devices.service.implementation.ts
index 6032ed66a89..052b377a0e2 100644
--- a/libs/common/src/auth/services/devices/devices.service.implementation.ts
+++ b/libs/common/src/auth/services/devices/devices.service.implementation.ts
@@ -65,4 +65,11 @@ export class DevicesServiceImplementation implements DevicesServiceAbstraction {
       ),
     ).pipe(map((deviceResponse: DeviceResponse) => new DeviceView(deviceResponse)));
   }
+
+  /**
+   * @description Deactivates a device
+   */
+  deactivateDevice$(deviceId: string): Observable<void> {
+    return defer(() => this.devicesApiService.deactivateDevice(deviceId));
+  }
 }

From b078c74856c010f49b9b6b7c8207b84dcd2705ad Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Tue, 17 Dec 2024 16:21:45 -0600
Subject: [PATCH 09/25] Add strict typing and other cleanup

---
 .../security/device-management.component.ts   | 26 ++++++++++---------
 .../request/update-devices-trust.request.ts   |  4 +--
 .../device-trust.service.implementation.ts    | 16 ++++++------
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 57736465674..376b5f536ae 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { firstValueFrom } from "rxjs";
 
@@ -30,7 +30,7 @@ interface DeviceTableData {
   standalone: true,
   imports: [CommonModule, SharedModule, TableModule],
 })
-export class DeviceManagementComponent implements OnInit {
+export class DeviceManagementComponent {
   protected readonly tableId = "device-management-table";
   protected dataSource = new TableDataSource<DeviceTableData>();
   protected currentDevice: DeviceView | undefined;
@@ -68,8 +68,9 @@ export class DeviceManagementComponent implements OnInit {
       });
   }
 
-  ngOnInit(): void {}
-
+  /**
+   * Column configuration for the table
+   */
   protected readonly columnConfig = [
     {
       name: "displayName",
@@ -97,21 +98,18 @@ export class DeviceManagementComponent implements OnInit {
    * @returns The icon for the device type
    */
   getDeviceIcon(type: DeviceType): string {
-    const metadata = DeviceTypeMetadata[type];
-    if (!metadata) {
-      return "bwi bwi-device"; // fallback icon
-    }
-    // Map device categories to their corresponding icons
-    const categoryIconMap: { [key: string]: 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-device",
+      sdk: "bwi bwi-desktop",
     };
 
-    return categoryIconMap[metadata.category] || "bwi bwi-device";
+    const metadata = DeviceTypeMetadata[type];
+    return metadata ? (categoryIconMap[metadata.category] ?? defaultIcon) : defaultIcon;
   }
 
   /**
@@ -159,6 +157,10 @@ export class DeviceManagementComponent implements OnInit {
       : device.id === this.currentDevice?.id;
   }
 
+  /**
+   * Remove a device
+   * @param device - The device
+   */
   protected async removeDevice(device: DeviceTableData) {
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "removeDevice" },
diff --git a/libs/common/src/auth/models/request/update-devices-trust.request.ts b/libs/common/src/auth/models/request/update-devices-trust.request.ts
index 8e3ce86c1a9..21fe0f600dc 100644
--- a/libs/common/src/auth/models/request/update-devices-trust.request.ts
+++ b/libs/common/src/auth/models/request/update-devices-trust.request.ts
@@ -8,8 +8,8 @@ export class UpdateDevicesTrustRequest extends SecretVerificationRequest {
 }
 
 export class DeviceKeysUpdateRequest {
-  encryptedPublicKey: string;
-  encryptedUserKey: string;
+  encryptedPublicKey: string | undefined;
+  encryptedUserKey: string | undefined;
 }
 
 export class OtherDeviceKeysUpdateRequest extends DeviceKeysUpdateRequest {
diff --git a/libs/common/src/auth/services/device-trust.service.implementation.ts b/libs/common/src/auth/services/device-trust.service.implementation.ts
index cbad83dbdcf..3bdec71cadc 100644
--- a/libs/common/src/auth/services/device-trust.service.implementation.ts
+++ b/libs/common/src/auth/services/device-trust.service.implementation.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { firstValueFrom, map, Observable, defer } from "rxjs";
 
 import { UserDecryptionOptionsServiceAbstraction } from "@bitwarden/auth/common";
@@ -159,15 +157,15 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
     const deviceIdentifier = await this.appIdService.getAppId();
     const deviceResponse = await this.devicesApiService.updateTrustedDeviceKeys(
       deviceIdentifier,
-      devicePublicKeyEncryptedUserKey.encryptedString,
-      userKeyEncryptedDevicePublicKey.encryptedString,
-      deviceKeyEncryptedDevicePrivateKey.encryptedString,
+      devicePublicKeyEncryptedUserKey.encryptedString!,
+      userKeyEncryptedDevicePublicKey.encryptedString!,
+      deviceKeyEncryptedDevicePrivateKey.encryptedString!,
     );
 
     // store device key in local/secure storage if enc keys posted to server successfully
     await this.setDeviceKey(userId, deviceKey);
 
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("deviceTrusted"));
+    this.platformUtilsService.showToast("success", "", this.i18nService.t("deviceTrusted"));
 
     return deviceResponse;
   }
@@ -266,6 +264,8 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
     } catch (e) {
       this.logService.error("Failed to get device key", e);
     }
+
+    return null;
   }
 
   private async setDeviceKey(userId: UserId, deviceKey: DeviceKey | null): Promise<void> {
@@ -277,7 +277,7 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
       if (this.platformSupportsSecureStorage) {
         await this.secureStorageService.save<DeviceKey>(
           `${userId}${this.deviceKeySecureStorageKey}`,
-          deviceKey,
+          deviceKey as DeviceKey,
           this.getSecureStorageOptions(userId),
         );
         return;
@@ -330,7 +330,7 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
 
       // Attempt to decrypt encryptedUserDataKey with devicePrivateKey
       const userKey = await this.encryptService.rsaDecrypt(
-        new EncString(encryptedUserKey.encryptedString),
+        new EncString(encryptedUserKey.encryptedString!),
         devicePrivateKey,
       );
 

From 660aba2780924a0e5b6b110619c41c3126f6f36e Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Tue, 17 Dec 2024 16:41:29 -0600
Subject: [PATCH 10/25] Type fixes and message update

---
 .../app/auth/settings/security/device-management.component.ts | 2 +-
 .../src/auth/services/device-trust.service.implementation.ts  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 376b5f536ae..7053c81c6ee 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -209,7 +209,7 @@ export class DeviceManagementComponent {
 
       this.toastService.showToast({
         title: "",
-        message: this.i18nService.t("deviceApproved"),
+        message: this.i18nService.t("loggedOut"),
         variant: "success",
       });
     } catch (e) {
diff --git a/libs/common/src/auth/services/device-trust.service.implementation.ts b/libs/common/src/auth/services/device-trust.service.implementation.ts
index 3bdec71cadc..bb28e76eee3 100644
--- a/libs/common/src/auth/services/device-trust.service.implementation.ts
+++ b/libs/common/src/auth/services/device-trust.service.implementation.ts
@@ -94,10 +94,10 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
       this.stateProvider.getUserState$(SHOULD_TRUST_DEVICE, userId),
     );
 
-    return shouldTrustDevice;
+    return shouldTrustDevice ?? false;
   }
 
-  async setShouldTrustDevice(userId: UserId, value: boolean): Promise<void> {
+  async setShouldTrustDevice(userId: UserId, value: boolean | null): Promise<void> {
     if (!userId) {
       throw new Error("UserId is required. Cannot set should trust device.");
     }

From 80760c87729e2515978f6b323714d0b51f725145 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Tue, 17 Dec 2024 21:51:34 -0600
Subject: [PATCH 11/25] Update login status column with pending auth request

---
 .../security/device-management.component.html     | 10 +++++++---
 .../security/device-management.component.ts       | 15 ++++++++++++++-
 apps/web/src/locales/en/messages.json             |  3 +++
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index d72f0cd7ee0..a2f036d27db 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -35,9 +35,13 @@ <h2>
             </span>
           </div>
         </td>
-        <td *ngIf="!isCurrentDevice(device)" bitCell>{{ device.loginStatus }}</td>
-        <td *ngIf="isCurrentDevice(device)" bitCell>
-          <span bitBadge variant="primary">{{ "currentSession" | i18n }}</span>
+        <td bitCell>
+          <span *ngIf="isCurrentDevice(device)" bitBadge variant="primary">{{
+            "currentSession" | i18n
+          }}</span>
+          <span *ngIf="hasPendingAuthRequest(device)" bitBadge variant="warning">{{
+            "requestPending" | i18n
+          }}</span>
         </td>
         <td bitCell>{{ device.firstLogin | date: "medium" }}</td>
         <td bitCell>
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 7053c81c6ee..a0d324506f4 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -19,6 +19,7 @@ interface DeviceTableData {
   loginStatus: string;
   firstLogin: Date;
   trusted: boolean;
+  devicePendingAuthRequest: object | null;
 }
 
 /**
@@ -61,6 +62,7 @@ export class DeviceManagementComponent {
             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,
           };
@@ -125,7 +127,7 @@ export class DeviceManagementComponent {
     }
 
     if (device.response.devicePendingAuthRequest?.creationDate) {
-      return new Date(device.response.devicePendingAuthRequest.creationDate).toLocaleDateString();
+      return this.i18nService.t("requestPending");
     }
 
     return "";
@@ -157,6 +159,17 @@ export class DeviceManagementComponent {
       : 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
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index a11afee684a..6eaa2a9e1c3 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -1718,6 +1718,9 @@
   "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."
   },

From 278fa9b6aba5c6d758b6684431099d9970c46d60 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Tue, 17 Dec 2024 21:59:32 -0600
Subject: [PATCH 12/25] Update table styling

---
 .../app/auth/settings/security/device-management.component.html | 2 +-
 .../app/auth/settings/security/device-management.component.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index a2f036d27db..a5512cedcc1 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -75,7 +75,7 @@ <h2>
               (click)="removeDevice(device)"
               [disabled]="isCurrentDevice(device)"
             >
-              <span class="tw-text-danger">
+              <span [class]="isCurrentDevice(device) ? 'tw-text-muted' : 'tw-text-danger'">
                 <i class="bwi bwi-trash" aria-hidden="true"></i>
                 {{ "remove" | i18n }}
               </span>
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index a0d324506f4..fb1eeadce63 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -89,7 +89,7 @@ export class DeviceManagementComponent {
     {
       name: "firstLogin",
       title: this.i18nService.t("firstLogin"),
-      headerClass: "tw-w-1/4",
+      headerClass: "tw-w-1/3",
       sortable: true,
     },
   ];

From bcd847db2b10d0fa5f9cedbe243aae7f78232d79 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Wed, 18 Dec 2024 21:59:17 -0600
Subject: [PATCH 13/25] Add virtual scroll to table

---
 .../security/device-management.component.html | 146 +++++++++---------
 1 file changed, 71 insertions(+), 75 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index a5512cedcc1..e8c51bfb983 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -5,84 +5,80 @@ <h2>
   </h2>
   <p>{{ "deviceListDescription" | i18n }}</p>
 
-  <bit-table [dataSource]="dataSource">
+  <bit-table-scroll [dataSource]="dataSource" [rowSize]="1">
     <ng-container header>
-      <tr>
-        <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>
-      </tr>
+      <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 body>
-      <tr bitRow *ngFor="let device of dataSource.data">
-        <td bitCell class="tw-flex tw-gap-2">
-          <div class="tw-flex tw-items-center tw-justify-center tw-w-10">
-            <i [class]="getDeviceIcon(device.type)" class="bwi-lg" aria-hidden="true"></i>
-          </div>
-          <div>
-            {{ device.displayName }}
-            <span *ngIf="device.trusted" class="tw-text-sm tw-text-muted tw-block">
-              {{ "trusted" | i18n }}
-            </span>
-          </div>
-        </td>
-        <td bitCell>
-          <span *ngIf="isCurrentDevice(device)" bitBadge variant="primary">{{
-            "currentSession" | i18n
-          }}</span>
-          <span *ngIf="hasPendingAuthRequest(device)" bitBadge variant="warning">{{
-            "requestPending" | i18n
-          }}</span>
-        </td>
-        <td bitCell>{{ device.firstLogin | date: "medium" }}</td>
-        <td bitCell>
+    <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)="approveDevice(row)"
+            *ngIf="row.loginStatus && !isCurrentDevice(row)"
+          >
+            <i class="bwi bwi-check" aria-hidden="true"></i>
+            {{ "approveRequest" | i18n }}
+          </button>
           <button
             type="button"
-            bitIconButton="bwi-ellipsis-v"
-            [bitMenuTriggerFor]="optionsMenu"
-          ></button>
-          <bit-menu #optionsMenu>
-            <button
-              type="button"
-              bitMenuItem
-              (click)="approveDevice(device)"
-              *ngIf="device.loginStatus && !isCurrentDevice(device)"
-            >
-              <i class="bwi bwi-check" aria-hidden="true"></i>
-              {{ "approveRequest" | i18n }}
-            </button>
-            <button
-              type="button"
-              bitMenuItem
-              (click)="logOutDevice(device)"
-              [disabled]="isCurrentDevice(device)"
-            >
-              <i aria-hidden="true" class="bwi bwi-fw bwi-sign-out"></i>
-              {{ "logOut" | i18n }}
-            </button>
-            <button
-              type="button"
-              bitMenuItem
-              (click)="removeDevice(device)"
-              [disabled]="isCurrentDevice(device)"
-            >
-              <span [class]="isCurrentDevice(device) ? 'tw-text-muted' : 'tw-text-danger'">
-                <i class="bwi bwi-trash" aria-hidden="true"></i>
-                {{ "remove" | i18n }}
-              </span>
-            </button>
-          </bit-menu>
-        </td>
-      </tr>
+            bitMenuItem
+            (click)="logOutDevice(row)"
+            [disabled]="isCurrentDevice(row)"
+          >
+            <i aria-hidden="true" class="bwi bwi-fw bwi-sign-out"></i>
+            {{ "logOut" | i18n }}
+          </button>
+          <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>
+  </bit-table-scroll>
 </div>

From f336afcf52511f8bdc6940b9c20f52b5392d7d53 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Wed, 18 Dec 2024 22:03:06 -0600
Subject: [PATCH 14/25] Remove approve device and log out menu options

---
 .../security/device-management.component.html | 18 ------
 .../security/device-management.component.ts   | 55 -------------------
 2 files changed, 73 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index e8c51bfb983..acdfaa84b9a 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -48,24 +48,6 @@ <h2>
           [bitMenuTriggerFor]="optionsMenu"
         ></button>
         <bit-menu #optionsMenu>
-          <button
-            type="button"
-            bitMenuItem
-            (click)="approveDevice(row)"
-            *ngIf="row.loginStatus && !isCurrentDevice(row)"
-          >
-            <i class="bwi bwi-check" aria-hidden="true"></i>
-            {{ "approveRequest" | i18n }}
-          </button>
-          <button
-            type="button"
-            bitMenuItem
-            (click)="logOutDevice(row)"
-            [disabled]="isCurrentDevice(row)"
-          >
-            <i aria-hidden="true" class="bwi bwi-fw bwi-sign-out"></i>
-            {{ "logOut" | i18n }}
-          </button>
           <button
             type="button"
             bitMenuItem
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index fb1eeadce63..c69034d094e 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -201,59 +201,4 @@ export class DeviceManagementComponent {
       });
     }
   }
-
-  /**
-   * Log out a device
-   * @param device - The device
-   */
-  protected async logOutDevice(device: DeviceTableData) {
-    const confirmed = await this.dialogService.openSimpleDialog({
-      title: { key: "logOut" },
-      content: { key: "logOutConfirmation" },
-      type: "warning",
-    });
-
-    if (!confirmed) {
-      return;
-    }
-    try {
-      // TODO: Implement actual device log out
-      // await this.devicesService.logOutDevice(device.id);
-
-      this.toastService.showToast({
-        title: "",
-        message: this.i18nService.t("loggedOut"),
-        variant: "success",
-      });
-    } catch (e) {
-      this.toastService.showToast({
-        title: "",
-        message: this.i18nService.t("errorOccurred"),
-        variant: "warning",
-      });
-    }
-  }
-
-  /**
-   * Approve a device
-   * @param device - The device
-   */
-  protected async approveDevice(device: DeviceTableData) {
-    try {
-      // TODO: Implement actual device approval
-      // await this.devicesService.approveDevice(device.id);
-
-      this.toastService.showToast({
-        title: "",
-        message: this.i18nService.t("deviceApproved"),
-        variant: "success",
-      });
-    } catch (e) {
-      this.toastService.showToast({
-        title: "",
-        message: this.i18nService.t("errorOccurred"),
-        variant: "warning",
-      });
-    }
-  }
 }

From d995fe5faf77ebd3443298c0ddd0e7516e710997 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Thu, 19 Dec 2024 15:18:45 -0600
Subject: [PATCH 15/25] Remove device when successfully deactivated

---
 .../app/auth/settings/security/device-management.component.ts  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index c69034d094e..9d2af5322cb 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -188,6 +188,9 @@ export class DeviceManagementComponent {
     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"),

From 3eb0ef7187bdbd8f57c7e9e23673cfa7ada860d5 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Thu, 19 Dec 2024 15:37:10 -0600
Subject: [PATCH 16/25] Update row size

---
 .../app/auth/settings/security/device-management.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index acdfaa84b9a..931745510de 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -5,7 +5,7 @@ <h2>
   </h2>
   <p>{{ "deviceListDescription" | i18n }}</p>
 
-  <bit-table-scroll [dataSource]="dataSource" [rowSize]="1">
+  <bit-table-scroll [dataSource]="dataSource" [rowSize]="50">
     <ng-container header>
       <th
         *ngFor="let col of columnConfig"

From c3c73cc1e8c92fb7e737e99ed390fd011630c816 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Thu, 19 Dec 2024 16:09:50 -0600
Subject: [PATCH 17/25] Add service tests

---
 .../services/device-trust.service.spec.ts     |  35 +++++-
 ...devices-api.service.implementation.spec.ts | 100 ++++++++++++++++++
 2 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 libs/common/src/auth/services/devices-api.service.implementation.spec.ts

diff --git a/libs/common/src/auth/services/device-trust.service.spec.ts b/libs/common/src/auth/services/device-trust.service.spec.ts
index 66a91a693e5..444e10a9708 100644
--- a/libs/common/src/auth/services/device-trust.service.spec.ts
+++ b/libs/common/src/auth/services/device-trust.service.spec.ts
@@ -1,5 +1,5 @@
 import { matches, mock } from "jest-mock-extended";
-import { BehaviorSubject, of } from "rxjs";
+import { BehaviorSubject, lastValueFrom, of } from "rxjs";
 
 import { UserDecryptionOptionsServiceAbstraction } from "@bitwarden/auth/common";
 
@@ -736,6 +736,39 @@ describe("deviceTrustService", () => {
     });
   });
 
+  describe("getCurrentDevice$", () => {
+    beforeEach(() => {
+      appIdService.getAppId.mockResolvedValue("test_device_identifier");
+    });
+
+    it("returns the current device when found", async () => {
+      const mockDevice = new DeviceResponse({
+        Id: "test-id",
+        Name: "Firefox",
+        Identifier: "test_device_identifier",
+        Type: DeviceType.FirefoxBrowser,
+        CreationDate: "2024-12-12",
+      });
+
+      devicesApiService.getDeviceByIdentifier.mockResolvedValue(mockDevice);
+
+      const device = await lastValueFrom(deviceTrustService.getCurrentDevice$());
+      expect(device).toEqual(mockDevice);
+    });
+
+    it("returns null when device is not found", async () => {
+      devicesApiService.getDeviceByIdentifier.mockResolvedValue(null as unknown as DeviceResponse);
+
+      const device = await lastValueFrom(deviceTrustService.getCurrentDevice$());
+
+      expect(device).toBeNull();
+      expect(appIdService.getAppId).toHaveBeenCalled();
+      expect(devicesApiService.getDeviceByIdentifier).toHaveBeenCalledWith(
+        "test_device_identifier",
+      );
+    });
+  });
+
   // Helpers
   function createDeviceTrustService(mockUserId: UserId | null, supportsSecureStorage: boolean) {
     accountService = mockAccountServiceWith(mockUserId);
diff --git a/libs/common/src/auth/services/devices-api.service.implementation.spec.ts b/libs/common/src/auth/services/devices-api.service.implementation.spec.ts
new file mode 100644
index 00000000000..7aea36c7bd4
--- /dev/null
+++ b/libs/common/src/auth/services/devices-api.service.implementation.spec.ts
@@ -0,0 +1,100 @@
+import { mock, MockProxy } from "jest-mock-extended";
+
+import { ApiService } from "../../abstractions/api.service";
+import { DeviceResponse } from "../abstractions/devices/responses/device.response";
+
+import { DevicesApiServiceImplementation } from "./devices-api.service.implementation";
+
+describe("DevicesApiServiceImplementation", () => {
+  let devicesApiService: DevicesApiServiceImplementation;
+  let apiService: MockProxy<ApiService>;
+
+  beforeEach(() => {
+    apiService = mock<ApiService>();
+    devicesApiService = new DevicesApiServiceImplementation(apiService);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe("getKnownDevice", () => {
+    it("calls api with correct parameters", async () => {
+      const email = "test@example.com";
+      const deviceIdentifier = "device123";
+      apiService.send.mockResolvedValue(true);
+
+      const result = await devicesApiService.getKnownDevice(email, deviceIdentifier);
+
+      expect(result).toBe(true);
+      expect(apiService.send).toHaveBeenCalledWith(
+        "GET",
+        "/devices/knowndevice",
+        null,
+        false,
+        true,
+        null,
+        expect.any(Function),
+      );
+    });
+  });
+
+  describe("getDeviceByIdentifier", () => {
+    it("returns device response", async () => {
+      const deviceIdentifier = "device123";
+      const mockResponse = { id: "123", name: "Test Device" };
+      apiService.send.mockResolvedValue(mockResponse);
+
+      const result = await devicesApiService.getDeviceByIdentifier(deviceIdentifier);
+
+      expect(result).toBeInstanceOf(DeviceResponse);
+      expect(apiService.send).toHaveBeenCalledWith(
+        "GET",
+        `/devices/identifier/${deviceIdentifier}`,
+        null,
+        true,
+        true,
+      );
+    });
+  });
+
+  describe("updateTrustedDeviceKeys", () => {
+    it("updates device keys and returns device response", async () => {
+      const deviceIdentifier = "device123";
+      const publicKeyEncrypted = "encryptedPublicKey";
+      const userKeyEncrypted = "encryptedUserKey";
+      const deviceKeyEncrypted = "encryptedDeviceKey";
+      const mockResponse = { id: "123", name: "Test Device" };
+      apiService.send.mockResolvedValue(mockResponse);
+
+      const result = await devicesApiService.updateTrustedDeviceKeys(
+        deviceIdentifier,
+        publicKeyEncrypted,
+        userKeyEncrypted,
+        deviceKeyEncrypted,
+      );
+
+      expect(result).toBeInstanceOf(DeviceResponse);
+      expect(apiService.send).toHaveBeenCalledWith(
+        "PUT",
+        `/devices/${deviceIdentifier}/keys`,
+        {
+          encryptedPrivateKey: deviceKeyEncrypted,
+          encryptedPublicKey: userKeyEncrypted,
+          encryptedUserKey: publicKeyEncrypted,
+        },
+        true,
+        true,
+      );
+    });
+  });
+
+  describe("error handling", () => {
+    it("propagates api errors", async () => {
+      const error = new Error("API Error");
+      apiService.send.mockRejectedValue(error);
+
+      await expect(devicesApiService.getDevices()).rejects.toThrow("API Error");
+    });
+  });
+});

From 99a647c7b7d3671553db1e2234f8e33177ce45c8 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Fri, 20 Dec 2024 14:04:10 -0600
Subject: [PATCH 18/25] Move getCurrentDevice$ to DevicesService

---
 .../browser/src/background/main.background.ts |  5 ++-
 .../security/device-management.component.ts   | 23 ++++++------
 .../src/services/jslib-services.module.ts     |  2 +-
 .../device-trust.service.abstraction.ts       |  4 ---
 .../devices/devices.service.abstraction.ts    |  2 ++
 .../device-trust.service.implementation.ts    | 29 ++++++---------
 .../services/device-trust.service.spec.ts     | 35 +------------------
 .../devices/devices.service.implementation.ts | 17 ++++++++-
 8 files changed, 45 insertions(+), 72 deletions(-)

diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index aaee59ee3fa..059e080d5f0 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -770,7 +770,10 @@ export default class MainBackground {
       this.configService,
     );
 
-    this.devicesService = new DevicesServiceImplementation(this.devicesApiService);
+    this.devicesService = new DevicesServiceImplementation(
+      this.devicesApiService,
+      this.appIdService,
+    );
 
     this.authRequestService = new AuthRequestService(
       this.appIdService,
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 9d2af5322cb..5aef13332cb 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -2,8 +2,8 @@ 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 { 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";
@@ -39,22 +39,19 @@ export class DeviceManagementComponent {
   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
+    // Get the current device and then get all devices
     this.devicesService
-      .getDevices$()
-      .pipe(takeUntilDestroyed())
+      .getCurrentDevice$()
+      .pipe(
+        takeUntilDestroyed(),
+        switchMap((currentDevice) => {
+          this.currentDevice = new DeviceView(currentDevice);
+          return this.devicesService.getDevices$();
+        }),
+      )
       .subscribe((devices) => {
         this.dataSource.data = devices.map((device) => {
           return {
diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts
index 688507099de..7772c0d1338 100644
--- a/libs/angular/src/services/jslib-services.module.ts
+++ b/libs/angular/src/services/jslib-services.module.ts
@@ -1102,7 +1102,7 @@ const safeProviders: SafeProvider[] = [
   safeProvider({
     provide: DevicesServiceAbstraction,
     useClass: DevicesServiceImplementation,
-    deps: [DevicesApiServiceAbstraction],
+    deps: [DevicesApiServiceAbstraction, AppIdServiceAbstraction],
   }),
   safeProvider({
     provide: DeviceTrustServiceAbstraction,
diff --git a/libs/common/src/auth/abstractions/device-trust.service.abstraction.ts b/libs/common/src/auth/abstractions/device-trust.service.abstraction.ts
index 966910a17f7..13963b03bea 100644
--- a/libs/common/src/auth/abstractions/device-trust.service.abstraction.ts
+++ b/libs/common/src/auth/abstractions/device-trust.service.abstraction.ts
@@ -39,8 +39,4 @@ export abstract class DeviceTrustServiceAbstraction {
    * Note: For debugging purposes only.
    */
   recordDeviceTrustLoss: () => Promise<void>;
-  /**
-   * Retrieves the current device
-   */
-  getCurrentDevice$: () => Observable<DeviceResponse>;
 }
diff --git a/libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts b/libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts
index 2439046fbc4..ba6890947c1 100644
--- a/libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts
+++ b/libs/common/src/auth/abstractions/devices/devices.service.abstraction.ts
@@ -1,5 +1,6 @@
 import { Observable } from "rxjs";
 
+import { DeviceResponse } from "./responses/device.response";
 import { DeviceView } from "./views/device.view";
 
 export abstract class DevicesServiceAbstraction {
@@ -13,4 +14,5 @@ export abstract class DevicesServiceAbstraction {
     deviceKeyEncryptedDevicePrivateKey: string,
   ): Observable<DeviceView>;
   abstract deactivateDevice$(deviceId: string): Observable<void>;
+  abstract getCurrentDevice$(): Observable<DeviceResponse>;
 }
diff --git a/libs/common/src/auth/services/device-trust.service.implementation.ts b/libs/common/src/auth/services/device-trust.service.implementation.ts
index bb28e76eee3..409150552ad 100644
--- a/libs/common/src/auth/services/device-trust.service.implementation.ts
+++ b/libs/common/src/auth/services/device-trust.service.implementation.ts
@@ -1,4 +1,6 @@
-import { firstValueFrom, map, Observable, defer } from "rxjs";
+// FIXME: Update this file to be type safe and remove this and next line
+// @ts-strict-ignore
+import { firstValueFrom, map, Observable } from "rxjs";
 
 import { UserDecryptionOptionsServiceAbstraction } from "@bitwarden/auth/common";
 
@@ -94,10 +96,10 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
       this.stateProvider.getUserState$(SHOULD_TRUST_DEVICE, userId),
     );
 
-    return shouldTrustDevice ?? false;
+    return shouldTrustDevice;
   }
 
-  async setShouldTrustDevice(userId: UserId, value: boolean | null): Promise<void> {
+  async setShouldTrustDevice(userId: UserId, value: boolean): Promise<void> {
     if (!userId) {
       throw new Error("UserId is required. Cannot set should trust device.");
     }
@@ -157,15 +159,15 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
     const deviceIdentifier = await this.appIdService.getAppId();
     const deviceResponse = await this.devicesApiService.updateTrustedDeviceKeys(
       deviceIdentifier,
-      devicePublicKeyEncryptedUserKey.encryptedString!,
-      userKeyEncryptedDevicePublicKey.encryptedString!,
-      deviceKeyEncryptedDevicePrivateKey.encryptedString!,
+      devicePublicKeyEncryptedUserKey.encryptedString,
+      userKeyEncryptedDevicePublicKey.encryptedString,
+      deviceKeyEncryptedDevicePrivateKey.encryptedString,
     );
 
     // store device key in local/secure storage if enc keys posted to server successfully
     await this.setDeviceKey(userId, deviceKey);
 
-    this.platformUtilsService.showToast("success", "", this.i18nService.t("deviceTrusted"));
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("deviceTrusted"));
 
     return deviceResponse;
   }
@@ -264,8 +266,6 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
     } catch (e) {
       this.logService.error("Failed to get device key", e);
     }
-
-    return null;
   }
 
   private async setDeviceKey(userId: UserId, deviceKey: DeviceKey | null): Promise<void> {
@@ -277,7 +277,7 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
       if (this.platformSupportsSecureStorage) {
         await this.secureStorageService.save<DeviceKey>(
           `${userId}${this.deviceKeySecureStorageKey}`,
-          deviceKey as DeviceKey,
+          deviceKey,
           this.getSecureStorageOptions(userId),
         );
         return;
@@ -330,7 +330,7 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
 
       // Attempt to decrypt encryptedUserDataKey with devicePrivateKey
       const userKey = await this.encryptService.rsaDecrypt(
-        new EncString(encryptedUserKey.encryptedString!),
+        new EncString(encryptedUserKey.encryptedString),
         devicePrivateKey,
       );
 
@@ -356,11 +356,4 @@ export class DeviceTrustService implements DeviceTrustServiceAbstraction {
       userId: userId,
     };
   }
-
-  getCurrentDevice$(): Observable<DeviceResponse> {
-    return defer(async () => {
-      const deviceIdentifier = await this.appIdService.getAppId();
-      return this.devicesApiService.getDeviceByIdentifier(deviceIdentifier);
-    });
-  }
 }
diff --git a/libs/common/src/auth/services/device-trust.service.spec.ts b/libs/common/src/auth/services/device-trust.service.spec.ts
index 444e10a9708..66a91a693e5 100644
--- a/libs/common/src/auth/services/device-trust.service.spec.ts
+++ b/libs/common/src/auth/services/device-trust.service.spec.ts
@@ -1,5 +1,5 @@
 import { matches, mock } from "jest-mock-extended";
-import { BehaviorSubject, lastValueFrom, of } from "rxjs";
+import { BehaviorSubject, of } from "rxjs";
 
 import { UserDecryptionOptionsServiceAbstraction } from "@bitwarden/auth/common";
 
@@ -736,39 +736,6 @@ describe("deviceTrustService", () => {
     });
   });
 
-  describe("getCurrentDevice$", () => {
-    beforeEach(() => {
-      appIdService.getAppId.mockResolvedValue("test_device_identifier");
-    });
-
-    it("returns the current device when found", async () => {
-      const mockDevice = new DeviceResponse({
-        Id: "test-id",
-        Name: "Firefox",
-        Identifier: "test_device_identifier",
-        Type: DeviceType.FirefoxBrowser,
-        CreationDate: "2024-12-12",
-      });
-
-      devicesApiService.getDeviceByIdentifier.mockResolvedValue(mockDevice);
-
-      const device = await lastValueFrom(deviceTrustService.getCurrentDevice$());
-      expect(device).toEqual(mockDevice);
-    });
-
-    it("returns null when device is not found", async () => {
-      devicesApiService.getDeviceByIdentifier.mockResolvedValue(null as unknown as DeviceResponse);
-
-      const device = await lastValueFrom(deviceTrustService.getCurrentDevice$());
-
-      expect(device).toBeNull();
-      expect(appIdService.getAppId).toHaveBeenCalled();
-      expect(devicesApiService.getDeviceByIdentifier).toHaveBeenCalledWith(
-        "test_device_identifier",
-      );
-    });
-  });
-
   // Helpers
   function createDeviceTrustService(mockUserId: UserId | null, supportsSecureStorage: boolean) {
     accountService = mockAccountServiceWith(mockUserId);
diff --git a/libs/common/src/auth/services/devices/devices.service.implementation.ts b/libs/common/src/auth/services/devices/devices.service.implementation.ts
index 052b377a0e2..cd6f1148dd8 100644
--- a/libs/common/src/auth/services/devices/devices.service.implementation.ts
+++ b/libs/common/src/auth/services/devices/devices.service.implementation.ts
@@ -1,5 +1,7 @@
 import { Observable, defer, map } from "rxjs";
 
+import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
+
 import { ListResponse } from "../../../models/response/list.response";
 import { DevicesServiceAbstraction } from "../../abstractions/devices/devices.service.abstraction";
 import { DeviceResponse } from "../../abstractions/devices/responses/device.response";
@@ -15,7 +17,10 @@ import { DevicesApiServiceAbstraction } from "../../abstractions/devices-api.ser
  * (i.e., promsise --> observables are cold until subscribed to)
  */
 export class DevicesServiceImplementation implements DevicesServiceAbstraction {
-  constructor(private devicesApiService: DevicesApiServiceAbstraction) {}
+  constructor(
+    private devicesApiService: DevicesApiServiceAbstraction,
+    private appIdService: AppIdService,
+  ) {}
 
   /**
    * @description Gets the list of all devices.
@@ -72,4 +77,14 @@ export class DevicesServiceImplementation implements DevicesServiceAbstraction {
   deactivateDevice$(deviceId: string): Observable<void> {
     return defer(() => this.devicesApiService.deactivateDevice(deviceId));
   }
+
+  /**
+   * @description Gets the current device.
+   */
+  getCurrentDevice$(): Observable<DeviceResponse> {
+    return defer(async () => {
+      const deviceIdentifier = await this.appIdService.getAppId();
+      return this.devicesApiService.getDeviceByIdentifier(deviceIdentifier);
+    });
+  }
 }

From d01ca4d5613c9c622608b195a9c57750fc611915 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Fri, 20 Dec 2024 14:20:46 -0600
Subject: [PATCH 19/25] Update "Remove" to "Remove device"

---
 .../auth/settings/security/device-management.component.html    | 2 +-
 apps/web/src/locales/en/messages.json                          | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index 931745510de..3ee04c8376e 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -56,7 +56,7 @@ <h2>
           >
             <span [class]="isCurrentDevice(row) ? 'tw-text-muted' : 'tw-text-danger'">
               <i class="bwi bwi-trash" aria-hidden="true"></i>
-              {{ "remove" | i18n }}
+              {{ "removeDevice" | i18n }}
             </span>
           </button>
         </bit-menu>
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index a38dc4674b2..580a0744a63 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -8257,6 +8257,9 @@
   "deviceRemoved": {
     "message": "Device removed"
   },
+  "removeDevice": {
+    "message": "Remove device"
+  },
   "removeDeviceConfirmation": {
     "message": "Are you sure you want to remove this device?"
   },

From 0932e1886c5fe84f04ad4d67662d5508b881dd2a Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Fri, 20 Dec 2024 16:07:18 -0600
Subject: [PATCH 20/25] Add loading spinners

---
 .../security/device-management.component.html | 23 +++++++++---
 .../security/device-management.component.ts   | 35 ++++++++++++-------
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index 3ee04c8376e..dee1254316c 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -1,11 +1,24 @@
 <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>
+  <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>
 
-  <bit-table-scroll [dataSource]="dataSource" [rowSize]="50">
+  <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"
diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 5aef13332cb..a2450fa1cd0 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -35,6 +35,8 @@ 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,
@@ -42,7 +44,6 @@ export class DeviceManagementComponent {
     private dialogService: DialogService,
     private toastService: ToastService,
   ) {
-    // Get the current device and then get all devices
     this.devicesService
       .getCurrentDevice$()
       .pipe(
@@ -52,18 +53,24 @@ export class DeviceManagementComponent {
           return this.devicesService.getDevices$();
         }),
       )
-      .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,
-          };
-        });
+      .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;
+        },
       });
   }
 
@@ -183,7 +190,9 @@ export class DeviceManagementComponent {
     }
 
     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);

From 39341019182c71afb5711ce1819f07d779569f48 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Fri, 20 Dec 2024 17:40:33 -0600
Subject: [PATCH 21/25] Use ValidationService to handle error

---
 .../settings/security/device-management.component.ts   | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index a2450fa1cd0..5a27f42416a 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -8,6 +8,7 @@ import { DevicesServiceAbstraction } from "@bitwarden/common/auth/abstractions/d
 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";
@@ -43,6 +44,7 @@ export class DeviceManagementComponent {
     private devicesService: DevicesServiceAbstraction,
     private dialogService: DialogService,
     private toastService: ToastService,
+    private validationService: ValidationService,
   ) {
     this.devicesService
       .getCurrentDevice$()
@@ -202,12 +204,8 @@ export class DeviceManagementComponent {
         message: this.i18nService.t("deviceRemoved"),
         variant: "success",
       });
-    } catch (e) {
-      this.toastService.showToast({
-        title: "",
-        message: this.i18nService.t("errorOccurred"),
-        variant: "warning",
-      });
+    } catch (error) {
+      this.validationService.showError(error);
     }
   }
 }

From 4bb04596c27b1e588a321ffcc9e7a2ae55c3083c Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Mon, 23 Dec 2024 11:34:48 -0600
Subject: [PATCH 22/25] Fix platform translation in device management component
 to handle "Unknown" platform correctly

---
 .../auth/settings/security/device-management.component.ts    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.ts b/apps/web/src/app/auth/settings/security/device-management.component.ts
index 5a27f42416a..fabc960d574 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management.component.ts
@@ -150,8 +150,11 @@ export class DeviceManagementComponent {
       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 metadata.platform ? `${category} - ${metadata.platform}` : category;
+    return platform ? `${category} - ${platform}` : category;
   }
 
   /**

From 66e497c230d799d8c1027cff28159389597cf234 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Thu, 26 Dec 2024 12:39:04 -0600
Subject: [PATCH 23/25] Add DeviceManagement feature flag

---
 .../app/auth/settings/security/security-routing.module.ts | 4 ++++
 .../app/auth/settings/security/security.component.html    | 4 +++-
 .../src/app/auth/settings/security/security.component.ts  | 8 +++++++-
 libs/common/src/enums/feature-flag.enum.ts                | 2 ++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/security-routing.module.ts b/apps/web/src/app/auth/settings/security/security-routing.module.ts
index 6ed21605184..87fe1183cdd 100644
--- a/apps/web/src/app/auth/settings/security/security-routing.module.ts
+++ b/apps/web/src/app/auth/settings/security/security-routing.module.ts
@@ -1,6 +1,9 @@
 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";
 
@@ -34,6 +37,7 @@ const routes: Routes = [
         path: "device-management",
         component: DeviceManagementComponent,
         data: { titleId: "devices" },
+        canActivate: [canAccessFeature(FeatureFlag.DeviceManagement)],
       },
     ],
   },
diff --git a/apps/web/src/app/auth/settings/security/security.component.html b/apps/web/src/app/auth/settings/security/security.component.html
index 6bd7c1daf36..aa9ebf5840c 100644
--- a/apps/web/src/app/auth/settings/security/security.component.html
+++ b/apps/web/src/app/auth/settings/security/security.component.html
@@ -4,7 +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>
-    <bit-tab-link route="device-management">{{ "devices" | 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>
diff --git a/apps/web/src/app/auth/settings/security/security.component.ts b/apps/web/src/app/auth/settings/security/security.component.ts
index 1df8145a917..0a4b6d9d626 100644
--- a/apps/web/src/app/auth/settings/security/security.component.ts
+++ b/apps/web/src/app/auth/settings/security/security.component.ts
@@ -1,6 +1,8 @@
 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",
@@ -8,8 +10,12 @@ import { UserVerificationService } from "@bitwarden/common/auth/abstractions/use
 })
 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();
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index cc2abed3ba1..2f3c193d2cc 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -43,6 +43,7 @@ export enum FeatureFlag {
   PM11360RemoveProviderExportPermission = "pm-11360-remove-provider-export-permission",
   PM12443RemovePagingLogic = "pm-12443-remove-paging-logic",
   PrivateKeyRegeneration = "pm-12241-private-key-regeneration",
+  DeviceManagement = "device-management",
 }
 
 export type AllowedFeatureFlagTypes = boolean | number | string;
@@ -96,6 +97,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.PM11360RemoveProviderExportPermission]: FALSE,
   [FeatureFlag.PM12443RemovePagingLogic]: FALSE,
   [FeatureFlag.PrivateKeyRegeneration]: FALSE,
+  [FeatureFlag.DeviceManagement]: FALSE,
 } satisfies Record<FeatureFlag, AllowedFeatureFlagTypes>;
 
 export type DefaultFeatureFlagValueType = typeof DefaultFeatureFlagValue;

From 3bebfabc4056105c82cfb331f3a10641a3aaf859 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Mon, 30 Dec 2024 10:50:09 -0600
Subject: [PATCH 24/25] Clean up device management header to look more like
 other tabs

---
 .../security/device-management.component.html | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index dee1254316c..1023827dcf6 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -1,15 +1,17 @@
-<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>
+<bit-container>
+  <div class="tabbed-header">
+    <div class="tw-flex tw-items-center tw-gap-2">
+      <h1>{{ "devices" | i18n }}</h1>
+      <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>
   </div>
 
   <p>{{ "deviceListDescription" | i18n }}</p>
@@ -76,4 +78,4 @@ <h2 class="tw-m-0">{{ "devices" | i18n }}</h2>
       </td>
     </ng-template>
   </bit-table-scroll>
-</div>
+</bit-container>

From fa51b93a0f6208bd882d922afb4ac0d21a4d0706 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Mon, 30 Dec 2024 10:51:49 -0600
Subject: [PATCH 25/25] Fix default column sort

---
 .../app/auth/settings/security/device-management.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/auth/settings/security/device-management.component.html b/apps/web/src/app/auth/settings/security/device-management.component.html
index 1023827dcf6..69acd255a60 100644
--- a/apps/web/src/app/auth/settings/security/device-management.component.html
+++ b/apps/web/src/app/auth/settings/security/device-management.component.html
@@ -27,7 +27,7 @@ <h1>{{ "devices" | i18n }}</h1>
         [class]="col.headerClass"
         bitCell
         [bitSortable]="col.sortable ? col.name : null"
-        [default]="col.name === 'displayName' ? 'desc' : null"
+        [default]="col.name === 'loginStatus' ? 'desc' : null"
         scope="col"
         role="columnheader"
       >