mirror of
https://github.com/bitwarden/browser
synced 2025-12-23 03:33:54 +00:00
00b6b0224e
Creates a new `DeviceManagementComponent` that fetches devices and formats them before handing them off to a view component for display. View components: - `DeviceManagementTableComponent` - displays on medium to large screens - `DeviceManagementItemGroupComponent` - displays on small screens Feature flag: `PM14938_BrowserExtensionLoginApproval`
105 lines
3.6 KiB
HTML
105 lines
3.6 KiB
HTML
<bit-container>
|
|
<div class="tw-mt-6 tw-mb-2 tw-pb-2.5">
|
|
<div class="tw-flex tw-items-center tw-gap-2">
|
|
<h1 class="tw-m-0">{{ "devices" | i18n }}</h1>
|
|
<button
|
|
[bitPopoverTriggerFor]="infoPopover"
|
|
type="button"
|
|
class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-flex tw-items-center tw-size-4"
|
|
[position]="'right-start'"
|
|
>
|
|
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
|
|
</button>
|
|
<bit-popover [title]="'whatIsADevice' | i18n" #infoPopover>
|
|
<p>{{ "aDeviceIs" | i18n }}</p>
|
|
</bit-popover>
|
|
<i
|
|
*ngIf="asyncActionLoading"
|
|
class="bwi bwi-spinner bwi-spin tw-flex tw-items-center tw-size-4"
|
|
aria-hidden="true"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
|
|
<p>{{ "deviceListDescriptionTemp" | i18n }}</p>
|
|
|
|
<div *ngIf="loading" class="tw-flex tw-justify-center tw-items-center tw-p-4">
|
|
<i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
|
|
</div>
|
|
|
|
<bit-table-scroll *ngIf="!loading" [dataSource]="dataSource" [rowSize]="50">
|
|
<ng-container header>
|
|
<th
|
|
*ngFor="let col of columnConfig"
|
|
[class]="col.headerClass"
|
|
bitCell
|
|
[bitSortable]="col.sortable ? col.name : null"
|
|
[default]="col.name === 'loginStatus' ? 'desc' : null"
|
|
scope="col"
|
|
role="columnheader"
|
|
>
|
|
{{ col.title }}
|
|
</th>
|
|
<!-- TODO: Add a column for the device actions when available -->
|
|
<!-- <th bitCell scope="col" role="columnheader"></th> -->
|
|
</ng-container>
|
|
<ng-template bitRowDef let-row>
|
|
<td bitCell class="tw-flex tw-gap-2">
|
|
<div class="tw-flex tw-items-center tw-justify-center tw-w-10">
|
|
<i [class]="getDeviceIcon(row.type)" class="bwi-lg" aria-hidden="true"></i>
|
|
</div>
|
|
<div>
|
|
<ng-container *ngIf="row.hasPendingAuthRequest">
|
|
<a bitLink href="#" appStopClick (click)="managePendingAuthRequest(row)">
|
|
{{ row.displayName }}
|
|
</a>
|
|
|
|
<span class="tw-text-sm tw-text-muted tw-block">
|
|
{{ "needsApproval" | i18n }}
|
|
</span>
|
|
</ng-container>
|
|
<ng-container *ngIf="!row.hasPendingAuthRequest">
|
|
{{ row.displayName }}
|
|
<span
|
|
*ngIf="row.trusted && !row.hasPendingAuthRequest"
|
|
class="tw-text-sm tw-text-muted tw-block"
|
|
>
|
|
{{ "trusted" | i18n }}
|
|
</span>
|
|
</ng-container>
|
|
</div>
|
|
</td>
|
|
<td bitCell>
|
|
<span *ngIf="isCurrentDevice(row)" bitBadge variant="primary">{{
|
|
"currentSession" | i18n
|
|
}}</span>
|
|
<span *ngIf="row.hasPendingAuthRequest" 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>
|
|
Remove device button to be re-added later when we have per device session de-authentication.
|
|
<button
|
|
type="button"
|
|
bitMenuItem
|
|
(click)="removeDevice(row)"
|
|
[disabled]="isCurrentDevice(row)"
|
|
>
|
|
<span [class]="isCurrentDevice(row) ? 'tw-text-muted' : 'tw-text-danger'">
|
|
<i class="bwi bwi-trash" aria-hidden="true"></i>
|
|
{{ "removeDevice" | i18n }}
|
|
</span>
|
|
</button>
|
|
</bit-menu>
|
|
</td> -->
|
|
</ng-template>
|
|
</bit-table-scroll>
|
|
</bit-container>
|