bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-06 03:33:30 +00:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'origin' into auth/pm-19877/notification-processing

Browse Source
This commit is contained in:
Patrick Pimentel
2025-07-23 10:20:48 -04:00
parent c05b4c3413 6b76581918
commit 4f895ee4e6
558 changed files with 22610 additions and 5035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
libs/angular/src/auth/device-management/default-device-management-component.service.ts Normal file
View File

@@ -0,0 +1,15 @@
import { DeviceManagementComponentServiceAbstraction } from "./device-management-component.service.abstraction";
/**
* Default implementation of the device management component service
*/
export class DefaultDeviceManagementComponentService
implements DeviceManagementComponentServiceAbstraction
{
/**
* Show header information in web client
*/
showHeaderInformation(): boolean {
return true;
}
}

11
libs/angular/src/auth/device-management/device-management-component.service.abstraction.ts Normal file
View File

@@ -0,0 +1,11 @@
/**
* Service abstraction for device management component
* Used to determine client-specific behavior
*/
export abstract class DeviceManagementComponentServiceAbstraction {
/**
* Whether to show header information (title, description, etc.) in the device management component
* @returns true if header information should be shown, false otherwise
*/
abstract showHeaderInformation(): boolean;
}

63
libs/angular/src/auth/device-management/device-management-item-group.component.html Normal file
View File

@@ -0,0 +1,63 @@
<bit-item-group>
<bit-item *ngFor="let device of devices">
@if (device.pendingAuthRequest) {
<button
class="tw-relative"
bit-item-content
type="button"
[attr.tabindex]="device.pendingAuthRequest != null ? 0 : null"
(click)="approveOrDenyAuthRequest(device.pendingAuthRequest)"
(keydown.enter)="approveOrDenyAuthRequest(device.pendingAuthRequest)"
>
<!-- Default Content -->
<span class="tw-text-base">{{ device.displayName }}</span>
<!-- Default Trailing Content -->
<span class="tw-absolute tw-top-[6px] tw-right-3" slot="default-trailing">
<span bitBadge variant="warning">
{{ "requestPending" | i18n }}
</span>
</span>
<!-- Secondary Content -->
<span slot="secondary" class="tw-text-sm">
<span>{{ "needsApproval" | i18n }}</span>
<div>
<span class="tw-font-semibold"> {{ "firstLogin" | i18n }}: </span>
<span>{{ device.firstLogin | date: "medium" }}</span>
</div>
</span>
</button>
} @else {
<bit-item-content ngClass="tw-relative">
<!-- Default Content -->
<span class="tw-text-base">{{ device.displayName }}</span>
<!-- Default Trailing Content -->
<div
*ngIf="device.isCurrentDevice"
class="tw-absolute tw-top-[6px] tw-right-3"
slot="default-trailing"
>
<span bitBadge variant="primary">
{{ "currentSession" | i18n }}
</span>
</div>
<!-- Secondary Content -->
<div slot="secondary" class="tw-text-sm">
@if (device.isTrusted) {
<span>{{ "trusted" | i18n }}</span>
} @else {
<br />
}
<div>
<span class="tw-font-semibold">{{ "firstLogin" | i18n }}: </span>
<span>{{ device.firstLogin | date: "medium" }}</span>
</div>
</div>
</bit-item-content>
}
</bit-item>
</bit-item-group>

44
libs/angular/src/auth/device-management/device-management-item-group.component.ts Normal file
View File

@@ -0,0 +1,44 @@
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
import { firstValueFrom } from "rxjs";
// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
// eslint-disable-next-line no-restricted-imports
import { LoginApprovalComponent } from "@bitwarden/auth/angular";
import { DevicePendingAuthRequest } from "@bitwarden/common/auth/abstractions/devices/responses/device.response";
import { BadgeModule, DialogService, ItemModule } from "@bitwarden/components";
import { I18nPipe } from "@bitwarden/ui-common";
import { DeviceDisplayData } from "./device-management.component";
import { clearAuthRequestAndResortDevices } from "./resort-devices.helper";
/** Displays user devices in an item list view */
@Component({
standalone: true,
selector: "auth-device-management-item-group",
templateUrl: "./device-management-item-group.component.html",
imports: [BadgeModule, CommonModule, ItemModule, I18nPipe],
})
export class DeviceManagementItemGroupComponent {
@Input() devices: DeviceDisplayData[] = [];
constructor(private dialogService: DialogService) {}
protected async approveOrDenyAuthRequest(pendingAuthRequest: DevicePendingAuthRequest | null) {
if (pendingAuthRequest == null) {
return;
}
const loginApprovalDialog = LoginApprovalComponent.open(this.dialogService, {
notificationId: pendingAuthRequest.id,
});
const result = await firstValueFrom(loginApprovalDialog.closed);
if (result !== undefined && typeof result === "boolean") {
// Auth request was approved or denied, so clear the
// pending auth request and re-sort the device array
this.devices = clearAuthRequestAndResortDevices(this.devices, pendingAuthRequest);
}
}
}

62
libs/angular/src/auth/device-management/device-management-table.component.html Normal file
View File

@@ -0,0 +1,62 @@
<bit-table-scroll [dataSource]="tableDataSource" [rowSize]="50">
<!-- Table Header -->
<ng-container header>
<th
*ngFor="let column of columnConfig"
[class]="column.headerClass"
bitCell
[bitSortable]="column.sortable ? column.name : ''"
[default]="column.name === 'loginStatus' ? 'desc' : false"
scope="col"
role="columnheader"
>
{{ column.title }}
</th>
</ng-container>
<!-- Table Rows -->
<ng-template bitRowDef let-device>
<!-- Column: Device Name -->
<td bitCell class="tw-flex tw-gap-2">
<div class="tw-flex tw-items-center tw-justify-center tw-w-10">
<i [class]="device.icon" class="bwi-lg" aria-hidden="true"></i>
</div>
<div>
@if (device.pendingAuthRequest) {
<a
bitLink
href="#"
appStopClick
(click)="approveOrDenyAuthRequest(device.pendingAuthRequest)"
>
{{ device.displayName }}
</a>
<div class="tw-text-sm tw-text-muted">
{{ "needsApproval" | i18n }}
</div>
} @else {
<span>{{ device.displayName }}</span>
<div *ngIf="device.isTrusted" class="tw-text-sm tw-text-muted">
{{ "trusted" | i18n }}
</div>
}
</div>
</td>
<!-- Column: Login Status -->
<td bitCell>
<div class="tw-flex tw-gap-1">
<span *ngIf="device.isCurrentDevice" bitBadge variant="primary">
{{ "currentSession" | i18n }}
</span>
<span *ngIf="device.pendingAuthRequest" bitBadge variant="warning">
{{ "requestPending" | i18n }}
</span>
</div>
</td>
<!-- Column: First Login -->
<td bitCell>{{ device.firstLogin | date: "medium" }}</td>
</ng-template>
</bit-table-scroll>

86
libs/angular/src/auth/device-management/device-management-table.component.ts Normal file
View File

@@ -0,0 +1,86 @@
import { CommonModule } from "@angular/common";
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
import { firstValueFrom } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
// eslint-disable-next-line no-restricted-imports
import { LoginApprovalComponent } from "@bitwarden/auth/angular";
import { DevicePendingAuthRequest } from "@bitwarden/common/auth/abstractions/devices/responses/device.response";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import {
BadgeModule,
ButtonModule,
DialogService,
LinkModule,
TableDataSource,
TableModule,
} from "@bitwarden/components";
import { DeviceDisplayData } from "./device-management.component";
import { clearAuthRequestAndResortDevices } from "./resort-devices.helper";
/** 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[] = [];
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,
private dialogService: DialogService,
) {}
ngOnChanges(changes: SimpleChanges): void {
if (changes.devices) {
this.tableDataSource.data = this.devices;
}
}
protected async approveOrDenyAuthRequest(pendingAuthRequest: DevicePendingAuthRequest | null) {
if (pendingAuthRequest == null) {
return;
}
const loginApprovalDialog = LoginApprovalComponent.open(this.dialogService, {
notificationId: pendingAuthRequest.id,
});
const result = await firstValueFrom(loginApprovalDialog.closed);
if (result !== undefined && typeof result === "boolean") {
// Auth request was approved or denied, so clear the
// pending auth request and re-sort the device array
this.tableDataSource.data = clearAuthRequestAndResortDevices(
this.devices,
pendingAuthRequest,
);
}
}
}

40
libs/angular/src/auth/device-management/device-management.component.html Normal file
View File

@@ -0,0 +1,40 @@
<div *ngIf="showHeaderInfo" class="tw-mt-6 tw-mb-2 tw-pb-2.5">
<div class="tw-flex tw-items-center tw-gap-2 tw-mb-5">
<h1 class="tw-m-0">{{ "devices" | i18n }}</h1>
<button
type="button"
class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-flex tw-items-center tw-size-4"
[bitPopoverTriggerFor]="infoPopover"
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>
</div>
<p>
{{ "deviceListDescriptionTemp" | i18n }}
</p>
</div>
@if (initializing) {
<div 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>
} @else {
<!-- Table View: displays on medium to large screens -->
<auth-device-management-table
ngClass="tw-hidden md:tw-block"
[devices]="devices"
></auth-device-management-table>
<!-- List View: displays on small screens -->
<auth-device-management-item-group
ngClass="md:tw-hidden"
[devices]="devices"
></auth-device-management-item-group>
}

230
libs/angular/src/auth/device-management/device-management.component.ts Normal file
View File

@@ -0,0 +1,230 @@
import { CommonModule } from "@angular/common";
import { Component, DestroyRef, OnInit } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { firstValueFrom } from "rxjs";
// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
// eslint-disable-next-line no-restricted-imports
import { AuthRequestApiServiceAbstraction } from "@bitwarden/auth/common";
import { DevicesServiceAbstraction } from "@bitwarden/common/auth/abstractions/devices/devices.service.abstraction";
import {
DevicePendingAuthRequest,
DeviceResponse,
} from "@bitwarden/common/auth/abstractions/devices/responses/device.response";
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 { MessageListener } from "@bitwarden/common/platform/messaging";
import { ButtonModule, PopoverModule } from "@bitwarden/components";
import { I18nPipe } from "@bitwarden/ui-common";
import { DeviceManagementComponentServiceAbstraction } from "./device-management-component.service.abstraction";
import { DeviceManagementItemGroupComponent } from "./device-management-item-group.component";
import { DeviceManagementTableComponent } from "./device-management-table.component";
export interface DeviceDisplayData {
displayName: string;
firstLogin: Date;
icon: string;
id: string;
identifier: string;
isCurrentDevice: boolean;
isTrusted: boolean;
loginStatus: string;
pendingAuthRequest: DevicePendingAuthRequest | null;
}
/**
* The `DeviceManagementComponent` fetches user devices and passes them down
* to a child component for display.
*
* The specific child component that gets displayed depends on the viewport width:
* - Medium to Large screens = `bit-table` view
* - Small screens = `bit-item-group` view
*/
@Component({
standalone: true,
selector: "auth-device-management",
templateUrl: "./device-management.component.html",
imports: [
ButtonModule,
CommonModule,
DeviceManagementItemGroupComponent,
DeviceManagementTableComponent,
I18nPipe,
PopoverModule,
],
})
export class DeviceManagementComponent implements OnInit {
protected devices: DeviceDisplayData[] = [];
protected initializing = true;
protected showHeaderInfo = false;
constructor(
private authRequestApiService: AuthRequestApiServiceAbstraction,
private destroyRef: DestroyRef,
private deviceManagementComponentService: DeviceManagementComponentServiceAbstraction,
private devicesService: DevicesServiceAbstraction,
private i18nService: I18nService,
private messageListener: MessageListener,
private validationService: ValidationService,
) {
this.showHeaderInfo = this.deviceManagementComponentService.showHeaderInformation();
}
async ngOnInit() {
await this.loadDevices();
this.messageListener.allMessages$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((message) => {
if (
message.command === "openLoginApproval" &&
message.notificationId &&
typeof message.notificationId === "string"
) {
void this.upsertDeviceWithPendingAuthRequest(message.notificationId);
}
});
}
async loadDevices() {
try {
const devices = await firstValueFrom(this.devicesService.getDevices$());
const currentDevice = await firstValueFrom(this.devicesService.getCurrentDevice$());
if (!devices || !currentDevice) {
return;
}
this.devices = this.mapDevicesToDisplayData(devices, currentDevice);
} catch (e) {
this.validationService.showError(e);
} finally {
this.initializing = false;
}
}
private mapDevicesToDisplayData(
devices: DeviceView[],
currentDevice: DeviceResponse,
): DeviceDisplayData[] {
return devices
.map((device): DeviceDisplayData | null => {
if (!device.id) {
this.validationService.showError(new Error(this.i18nService.t("deviceIdMissing")));
return null;
}
if (device.type == undefined) {
this.validationService.showError(new Error(this.i18nService.t("deviceTypeMissing")));
return null;
}
if (!device.creationDate) {
this.validationService.showError(
new Error(this.i18nService.t("deviceCreationDateMissing")),
);
return null;
}
return {
displayName: this.devicesService.getReadableDeviceTypeName(device.type),
firstLogin: device.creationDate ? new Date(device.creationDate) : new Date(),
icon: this.getDeviceIcon(device.type),
id: device.id || "",
identifier: device.identifier ?? "",
isCurrentDevice: this.isCurrentDevice(device, currentDevice),
isTrusted: device.response?.isTrusted ?? false,
loginStatus: this.getLoginStatus(device, currentDevice),
pendingAuthRequest: device.response?.devicePendingAuthRequest ?? null,
};
})
.filter((device) => device !== null);
}
private async upsertDeviceWithPendingAuthRequest(authRequestId: string) {
const authRequestResponse = await this.authRequestApiService.getAuthRequest(authRequestId);
if (!authRequestResponse) {
return;
}
const upsertDevice: DeviceDisplayData = {
displayName: this.devicesService.getReadableDeviceTypeName(
authRequestResponse.requestDeviceTypeValue,
),
firstLogin: new Date(authRequestResponse.creationDate),
icon: this.getDeviceIcon(authRequestResponse.requestDeviceTypeValue),
id: "",
identifier: authRequestResponse.requestDeviceIdentifier,
isCurrentDevice: false,
isTrusted: false,
loginStatus: this.i18nService.t("requestPending"),
pendingAuthRequest: {
id: authRequestResponse.id,
creationDate: authRequestResponse.creationDate,
},
};
// If the device already exists in the DB, update the device id and first login date
if (authRequestResponse.requestDeviceIdentifier) {
const existingDevice = await firstValueFrom(
this.devicesService.getDeviceByIdentifier$(authRequestResponse.requestDeviceIdentifier),
);
if (existingDevice?.id && existingDevice.creationDate) {
upsertDevice.id = existingDevice.id;
upsertDevice.firstLogin = new Date(existingDevice.creationDate);
}
}
const existingDeviceIndex = this.devices.findIndex(
(device) => device.identifier === upsertDevice.identifier,
);
if (existingDeviceIndex >= 0) {
// Update existing device in device list
this.devices[existingDeviceIndex] = upsertDevice;
this.devices = [...this.devices];
} else {
// Add new device to device list
this.devices = [upsertDevice, ...this.devices];
}
}
private getLoginStatus(device: DeviceView, currentDevice: DeviceResponse): string {
if (this.isCurrentDevice(device, currentDevice)) {
return this.i18nService.t("currentSession");
}
if (this.hasPendingAuthRequest(device)) {
return this.i18nService.t("requestPending");
}
return "";
}
private isCurrentDevice(device: DeviceView, currentDevice: DeviceResponse): boolean {
return device.id === currentDevice.id;
}
private hasPendingAuthRequest(device: DeviceView): boolean {
return device.response?.devicePendingAuthRequest != null;
}
private getDeviceIcon(type: DeviceType): string {
const defaultIcon = "bwi bwi-desktop";
const categoryIconMap: Record<string, string> = {
webApp: "bwi bwi-browser",
desktop: "bwi bwi-desktop",
mobile: "bwi bwi-mobile",
cli: "bwi bwi-cli",
extension: "bwi bwi-puzzle",
sdk: "bwi bwi-desktop",
};
const metadata = DeviceTypeMetadata[type];
return metadata ? (categoryIconMap[metadata.category] ?? defaultIcon) : defaultIcon;
}
}

53
libs/angular/src/auth/device-management/resort-devices.helper.ts Normal file
View File

@@ -0,0 +1,53 @@
import { DevicePendingAuthRequest } from "@bitwarden/common/auth/abstractions/devices/responses/device.response";
import { DeviceDisplayData } from "./device-management.component";
export function clearAuthRequestAndResortDevices(
devices: DeviceDisplayData[],
pendingAuthRequest: DevicePendingAuthRequest,
): DeviceDisplayData[] {
return devices
.map((device) => {
if (device.pendingAuthRequest?.id === pendingAuthRequest.id) {
device.pendingAuthRequest = null;
device.loginStatus = "";
}
return device;
})
.sort(resortDevices);
}
/**
* After a device is approved/denied, it will still be at the beginning of the array,
* so we must resort the array to ensure it is in the correct order.
*
* This is a helper function that gets passed to the `Array.sort()` method
*/
function resortDevices(deviceA: DeviceDisplayData, deviceB: DeviceDisplayData) {
// Devices with a pending auth request should be first
if (deviceA.pendingAuthRequest) {
return -1;
}
if (deviceB.pendingAuthRequest) {
return 1;
}
// Next is the current device
if (deviceA.isCurrentDevice) {
return -1;
}
if (deviceB.isCurrentDevice) {
return 1;
}
// Then sort the rest by display name (alphabetically)
if (deviceA.displayName < deviceB.displayName) {
return -1;
}
if (deviceA.displayName > deviceB.displayName) {
return 1;
}
// Default
return 0;
}

1
libs/angular/src/auth/guards/index.ts
View File

@@ -4,3 +4,4 @@ export * from "./lock.guard";
export * from "./redirect/redirect.guard";
export * from "./tde-decryption-required.guard";
export * from "./unauth.guard";
export * from "./redirect-to-vault-if-unlocked/redirect-to-vault-if-unlocked.guard";

19
libs/angular/src/auth/guards/redirect-to-vault-if-unlocked/README.md Normal file
View File

@@ -0,0 +1,19 @@
# RedirectToVaultIfUnlocked Guard
The `redirectToVaultIfUnlocked` redirects the user to `/vault` if they are `Unlocked`. Otherwise, it allows access to the route.
This is particularly useful for routes that can handle BOTH unauthenticated AND authenticated-but-locked users (which makes the `authGuard` unusable on those routes).
<br>
### Special Use Case - Authenticating in the Extension Popout
Imagine a user is going through the Login with Device flow in the Extension pop*out*:
- They open the pop*out* while on `/login-with-device`
- The approve the login from another device
- They are authenticated and routed to `/vault` while in the pop*out*
If the `redirectToVaultIfUnlocked` were NOT applied, if this user now opens the pop*up* they would be shown the `/login-with-device`, not their `/vault`.
But by adding the `redirectToVaultIfUnlocked` to `/login-with-device` we make sure to check if the user has already `Unlocked`, and if so, route them to `/vault` upon opening the pop*up*.

98
libs/angular/src/auth/guards/redirect-to-vault-if-unlocked/redirect-to-vault-if-unlocked.guard.spec.ts Normal file
View File

@@ -0,0 +1,98 @@
import { TestBed } from "@angular/core/testing";
import { Router, provideRouter } from "@angular/router";
import { mock } from "jest-mock-extended";
import { BehaviorSubject, of } from "rxjs";
import { EmptyComponent } from "@bitwarden/angular/platform/guard/feature-flag.guard.spec";
import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
import { UserId } from "@bitwarden/common/types/guid";
import { redirectToVaultIfUnlockedGuard } from "./redirect-to-vault-if-unlocked.guard";
describe("redirectToVaultIfUnlockedGuard", () => {
const activeUser: Account = {
id: "userId" as UserId,
email: "test@email.com",
emailVerified: true,
name: "Test User",
};
const setup = (activeUser: Account | null, authStatus: AuthenticationStatus | null) => {
const accountService = mock<AccountService>();
const authService = mock<AuthService>();
accountService.activeAccount$ = new BehaviorSubject<Account | null>(activeUser);
authService.authStatusFor$.mockReturnValue(of(authStatus));
const testBed = TestBed.configureTestingModule({
providers: [
{ provide: AccountService, useValue: accountService },
{ provide: AuthService, useValue: authService },
provideRouter([
{ path: "", component: EmptyComponent },
{ path: "vault", component: EmptyComponent },
{
path: "guarded-route",
component: EmptyComponent,
canActivate: [redirectToVaultIfUnlockedGuard()],
},
]),
],
});
return {
router: testBed.inject(Router),
};
};
it("should be created", () => {
const { router } = setup(null, null);
expect(router).toBeTruthy();
});
it("should redirect to /vault if the user is AuthenticationStatus.Unlocked", async () => {
// Arrange
const { router } = setup(activeUser, AuthenticationStatus.Unlocked);
// Act
await router.navigate(["guarded-route"]);
// Assert
expect(router.url).toBe("/vault");
});
it("should allow navigation to continue to the route if there is no active user", async () => {
// Arrange
const { router } = setup(null, null);
// Act
await router.navigate(["guarded-route"]);
// Assert
expect(router.url).toBe("/guarded-route");
});
it("should allow navigation to continue to the route if the user is AuthenticationStatus.LoggedOut", async () => {
// Arrange
const { router } = setup(null, AuthenticationStatus.LoggedOut);
// Act
await router.navigate(["guarded-route"]);
// Assert
expect(router.url).toBe("/guarded-route");
});
it("should allow navigation to continue to the route if the user is AuthenticationStatus.Locked", async () => {
// Arrange
const { router } = setup(null, AuthenticationStatus.Locked);
// Act
await router.navigate(["guarded-route"]);
// Assert
expect(router.url).toBe("/guarded-route");
});
});

36
libs/angular/src/auth/guards/redirect-to-vault-if-unlocked/redirect-to-vault-if-unlocked.guard.ts Normal file
View File

@@ -0,0 +1,36 @@
import { inject } from "@angular/core";
import { CanActivateFn, Router } from "@angular/router";
import { firstValueFrom } from "rxjs";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
/**
* Redirects the user to `/vault` if they are `Unlocked`. Otherwise, it allows access to the route.
* See ./redirect-to-vault-if-unlocked/README.md for more details.
*/
export function redirectToVaultIfUnlockedGuard(): CanActivateFn {
return async () => {
const accountService = inject(AccountService);
const authService = inject(AuthService);
const router = inject(Router);
const activeUser = await firstValueFrom(accountService.activeAccount$);
// If there is no active user, allow access to the route
if (!activeUser) {
return true;
}
const authStatus = await firstValueFrom(authService.authStatusFor$(activeUser.id));
// If user is Unlocked, redirect to vault
if (authStatus === AuthenticationStatus.Unlocked) {
return router.createUrlTree(["/vault"]);
}
// If user is LoggedOut or Locked, allow access to the route
return true;
};
}

2
libs/angular/src/services/jslib-services.module.ts
View File

@@ -1195,7 +1195,7 @@ const safeProviders: SafeProvider[] = [
safeProvider({
provide: DevicesServiceAbstraction,
useClass: DevicesServiceImplementation,
deps: [DevicesApiServiceAbstraction, AppIdServiceAbstraction],
deps: [AppIdServiceAbstraction, DevicesApiServiceAbstraction, I18nServiceAbstraction],
}),
safeProvider({
provide: AuthRequestApiServiceAbstraction,

2
libs/angular/src/vault/abstractions/deprecated-vault-filter.service.ts
View File

@@ -1,5 +1,3 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Observable } from "rxjs";
// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.

4
libs/angular/src/vault/components/icon.component.ts
View File

@@ -13,7 +13,7 @@ import {
import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { buildCipherIcon, CipherIconDetails } from "@bitwarden/common/vault/icon/build-cipher-icon";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { CipherViewLike } from "@bitwarden/common/vault/utils/cipher-view-like-utils";
@Component({
selector: "app-vault-icon",
@@ -25,7 +25,7 @@ export class IconComponent {
/**
* The cipher to display the icon for.
*/
cipher = input.required<CipherView>();
cipher = input.required<CipherViewLike>();
imageLoaded = signal(false);

38
libs/angular/src/vault/components/vault-items.component.ts
View File

@@ -21,20 +21,23 @@ import { getUserId } from "@bitwarden/common/auth/services/account.service";
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
import { CipherType } from "@bitwarden/common/vault/enums";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
import { CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
import {
CipherViewLike,
CipherViewLikeUtils,
} from "@bitwarden/common/vault/utils/cipher-view-like-utils";
@Directive()
export class VaultItemsComponent implements OnInit, OnDestroy {
export class VaultItemsComponent<C extends CipherViewLike> implements OnInit, OnDestroy {
@Input() activeCipherId: string = null;
@Output() onCipherClicked = new EventEmitter<CipherView>();
@Output() onCipherRightClicked = new EventEmitter<CipherView>();
@Output() onCipherClicked = new EventEmitter<C>();
@Output() onCipherRightClicked = new EventEmitter<C>();
@Output() onAddCipher = new EventEmitter<CipherType | undefined>();
@Output() onAddCipherOptions = new EventEmitter();
loaded = false;
ciphers: CipherView[] = [];
ciphers: C[] = [];
deleted = false;
organization: Organization;
CipherType = CipherType;
@@ -55,7 +58,7 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
protected searchPending = false;
/** Construct filters as an observable so it can be appended to the cipher stream. */
private _filter$ = new BehaviorSubject<(cipher: CipherView) => boolean | null>(null);
private _filter$ = new BehaviorSubject<(cipher: C) => boolean | null>(null);
private destroy$ = new Subject<void>();
private isSearchable: boolean = false;
private _searchText$ = new BehaviorSubject<string>("");
@@ -71,7 +74,7 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
return this._filter$.value;
}
set filter(value: (cipher: CipherView) => boolean | null) {
set filter(value: (cipher: C) => boolean | null) {
this._filter$.next(value);
}
@@ -102,13 +105,13 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
this.destroy$.complete();
}
async load(filter: (cipher: CipherView) => boolean = null, deleted = false) {
async load(filter: (cipher: C) => boolean = null, deleted = false) {
this.deleted = deleted ?? false;
await this.applyFilter(filter);
this.loaded = true;
}
async reload(filter: (cipher: CipherView) => boolean = null, deleted = false) {
async reload(filter: (cipher: C) => boolean = null, deleted = false) {
this.loaded = false;
await this.load(filter, deleted);
}
@@ -117,15 +120,15 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
await this.reload(this.filter, this.deleted);
}
async applyFilter(filter: (cipher: CipherView) => boolean = null) {
async applyFilter(filter: (cipher: C) => boolean = null) {
this.filter = filter;
}
selectCipher(cipher: CipherView) {
selectCipher(cipher: C) {
this.onCipherClicked.emit(cipher);
}
rightClickCipher(cipher: CipherView) {
rightClickCipher(cipher: C) {
this.onCipherRightClicked.emit(cipher);
}
@@ -141,7 +144,8 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
return !this.searchPending && this.isSearchable;
}
protected deletedFilter: (cipher: CipherView) => boolean = (c) => c.isDeleted === this.deleted;
protected deletedFilter: (cipher: C) => boolean = (c) =>
CipherViewLikeUtils.isDeleted(c) === this.deleted;
/**
* Creates stream of dependencies that results in the list of ciphers to display
@@ -156,7 +160,7 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
.pipe(
switchMap((userId) =>
combineLatest([
this.cipherService.cipherViews$(userId).pipe(filter((ciphers) => ciphers != null)),
this.cipherService.cipherListViews$(userId).pipe(filter((ciphers) => ciphers != null)),
this.cipherService.failedToDecryptCiphers$(userId),
this._searchText$,
this._filter$,
@@ -165,12 +169,12 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
]),
),
switchMap(([indexedCiphers, failedCiphers, searchText, filter, userId, restricted]) => {
let allCiphers = indexedCiphers ?? [];
let allCiphers = (indexedCiphers ?? []) as C[];
const _failedCiphers = failedCiphers ?? [];
allCiphers = [..._failedCiphers, ...allCiphers];
allCiphers = [..._failedCiphers, ...allCiphers] as C[];
const restrictedTypeFilter = (cipher: CipherView) =>
const restrictedTypeFilter = (cipher: CipherViewLike) =>
!this.restrictedItemTypesService.isCipherRestricted(cipher, restricted);
return this.searchService.searchCiphers(

4
libs/angular/src/vault/services/custom-nudges-services/empty-vault-nudge.service.ts
View File

@@ -25,7 +25,7 @@ export class EmptyVaultNudgeService extends DefaultSingleNudgeService {
nudgeStatus$(nudgeType: NudgeType, userId: UserId): Observable<NudgeStatus> {
return combineLatest([
this.getNudgeStatus$(nudgeType, userId),
this.cipherService.cipherViews$(userId),
this.cipherService.cipherListViews$(userId),
this.organizationService.organizations$(userId),
this.collectionService.decryptedCollections$,
]).pipe(
@@ -42,7 +42,7 @@ export class EmptyVaultNudgeService extends DefaultSingleNudgeService {
const orgIds = new Set(orgs.map((org) => org.id));
const canCreateCollections = orgs.some((org) => org.canCreateNewCollections);
const hasManageCollections = collections.some(
(c) => c.manage && orgIds.has(c.organizationId),
(c) => c.manage && orgIds.has(c.organizationId!),
);
// When the user has dismissed the nudge or spotlight, return the nudge status directly

2
libs/angular/src/vault/services/custom-nudges-services/vault-settings-import-nudge.service.ts
View File

@@ -46,7 +46,7 @@ export class VaultSettingsImportNudgeService extends DefaultSingleNudgeService {
const orgIds = new Set(orgs.map((org) => org.id));
const canCreateCollections = orgs.some((org) => org.canCreateNewCollections);
const hasManageCollections = collections.some(
(c) => c.manage && orgIds.has(c.organizationId),
(c) => c.manage && orgIds.has(c.organizationId!),
);
// When the user has dismissed the nudge or spotlight, return the nudge status directly

13
libs/angular/src/vault/vault-filter/models/vault-filter.model.ts
View File

@@ -1,11 +1,14 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { CipherType } from "@bitwarden/common/vault/enums";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import {
CipherViewLike,
CipherViewLikeUtils,
} from "@bitwarden/common/vault/utils/cipher-view-like-utils";
import { CipherStatus } from "./cipher-status.model";
export type VaultFilterFunction = (cipher: CipherView) => boolean;
export type VaultFilterFunction = (cipher: CipherViewLike) => boolean;
export class VaultFilter {
cipherType?: CipherType;
@@ -44,10 +47,10 @@ export class VaultFilter {
cipherPassesFilter = cipher.favorite;
}
if (this.status === "trash" && cipherPassesFilter) {
cipherPassesFilter = cipher.isDeleted;
cipherPassesFilter = CipherViewLikeUtils.isDeleted(cipher);
}
if (this.cipherType != null && cipherPassesFilter) {
cipherPassesFilter = cipher.type === this.cipherType;
cipherPassesFilter = CipherViewLikeUtils.getType(cipher) === this.cipherType;
}
if (this.selectedFolder && this.selectedFolderId == null && cipherPassesFilter) {
cipherPassesFilter = cipher.folderId == null;
@@ -68,7 +71,7 @@ export class VaultFilter {
cipherPassesFilter = cipher.organizationId === this.selectedOrganizationId;
}
if (this.myVaultOnly && cipherPassesFilter) {
cipherPassesFilter = cipher.organizationId === null;
cipherPassesFilter = cipher.organizationId == null;
}
return cipherPassesFilter;
};

3
libs/angular/src/vault/vault-filter/services/vault-filter.service.ts
View File

@@ -191,6 +191,9 @@ export function sortDefaultCollections(
.sort((a, b) => {
const aName = orgs.find((o) => o.id === a.organizationId)?.name ?? a.organizationId;
const bName = orgs.find((o) => o.id === b.organizationId)?.name ?? b.organizationId;
if (!aName || !bName) {
throw new Error("Collection does not have an organizationId.");
}
return collator.compare(aName, bName);
});
return [