mirror of
https://github.com/bitwarden/browser
synced 2026-02-21 20:04:02 +00:00
c5e5417abf
This PR makes it so the devices are always sorted in this order (by default): 1. Has Pending Auth Request (if any) comes first 2. Current Device comes second (or first if there are no pending auth requests) 3. First Login Date - the rest of the devices are sorted by first login date (newest to oldest) This sort order is preserved even after a user approves/denies and auth request - that is, the approved/denied device will re-sort to its correct position according to it's first login date. Feature Flag: `PM14938_BrowserExtensionLoginApproval`
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { CommonModule } from "@angular/common";
|
|
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from "@angular/core";
|
|
|
|
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
|
import { DevicePendingAuthRequest } from "@bitwarden/common/auth/abstractions/devices/responses/device.response";
|
|
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
|
import {
|
|
BadgeModule,
|
|
ButtonModule,
|
|
LinkModule,
|
|
TableDataSource,
|
|
TableModule,
|
|
} from "@bitwarden/components";
|
|
|
|
import { DeviceDisplayData } from "./device-management.component";
|
|
|
|
/** Displays user devices in a sortable table view */
|
|
@Component({
|
|
standalone: true,
|
|
selector: "auth-device-management-table",
|
|
templateUrl: "./device-management-table.component.html",
|
|
imports: [BadgeModule, ButtonModule, CommonModule, JslibModule, LinkModule, TableModule],
|
|
})
|
|
export class DeviceManagementTableComponent implements OnChanges {
|
|
@Input() devices: DeviceDisplayData[] = [];
|
|
@Output() onAuthRequestAnswered = new EventEmitter<DevicePendingAuthRequest>();
|
|
|
|
protected tableDataSource = new TableDataSource<DeviceDisplayData>();
|
|
|
|
protected readonly columnConfig = [
|
|
{
|
|
name: "displayName",
|
|
title: this.i18nService.t("device"),
|
|
headerClass: "tw-w-1/3",
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: "loginStatus",
|
|
title: this.i18nService.t("loginStatus"),
|
|
headerClass: "tw-w-1/3",
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: "firstLogin",
|
|
title: this.i18nService.t("firstLogin"),
|
|
headerClass: "tw-w-1/3",
|
|
sortable: true,
|
|
},
|
|
];
|
|
|
|
constructor(private i18nService: I18nService) {}
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
if (changes.devices) {
|
|
this.tableDataSource.data = this.devices;
|
|
}
|
|
}
|
|
|
|
protected answerAuthRequest(pendingAuthRequest: DevicePendingAuthRequest | null) {
|
|
if (pendingAuthRequest == null) {
|
|
return;
|
|
}
|
|
this.onAuthRequestAnswered.emit(pendingAuthRequest);
|
|
}
|
|
}
|