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 743414aac41..37827a33afe 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,17 +48,31 @@
- {{ row.displayName }}
-
- {{ "trusted" | i18n }}
-
+
+
+ {{ row.displayName }}
+
+
+
+ {{ "needsApproval" | i18n }}
+
+
+
+ {{ row.displayName }}
+
+ {{ "trusted" | i18n }}
+
+
{{
"currentSession" | i18n
}}
- {{
+ {{
"requestPending" | i18n
}}
|
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 65f2afc250e..e22122ad9ae 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,10 +1,14 @@
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 { combineLatest, firstValueFrom } from "rxjs";
+import { LoginApprovalComponent } from "@bitwarden/auth/angular";
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";
@@ -26,7 +30,8 @@ interface DeviceTableData {
loginStatus: string;
firstLogin: Date;
trusted: boolean;
- devicePendingAuthRequest: object | null;
+ devicePendingAuthRequest: DevicePendingAuthRequest | null;
+ hasPendingAuthRequest: boolean;
}
/**
@@ -52,28 +57,25 @@ export class DeviceManagementComponent {
private toastService: ToastService,
private validationService: ValidationService,
) {
- this.devicesService
- .getCurrentDevice$()
- .pipe(
- takeUntilDestroyed(),
- switchMap((currentDevice) => {
- this.currentDevice = new DeviceView(currentDevice);
- return this.devicesService.getDevices$();
- }),
- )
+ combineLatest([this.devicesService.getCurrentDevice$(), this.devicesService.getDevices$()])
+ .pipe(takeUntilDestroyed())
.subscribe({
- next: (devices) => {
- this.dataSource.data = devices.map((device) => {
+ next: ([currentDevice, devices]: [DeviceResponse, Array]) => {
+ this.currentDevice = new DeviceView(currentDevice);
+
+ this.dataSource.data = devices.map((device: DeviceView): DeviceTableData => {
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,
+ devicePendingAuthRequest: device.response.devicePendingAuthRequest,
+ hasPendingAuthRequest: this.hasPendingAuthRequest(device.response),
};
});
+
this.loading = false;
},
error: () => {
@@ -176,15 +178,36 @@ export class DeviceManagementComponent {
/**
* Check if a device has a pending auth request
- * @param device - The device
+ * @param device - The device response
* @returns True if the device has a pending auth request, false otherwise
*/
- protected hasPendingAuthRequest(device: DeviceTableData): boolean {
+ private hasPendingAuthRequest(device: DeviceResponse): boolean {
return (
device.devicePendingAuthRequest !== undefined && device.devicePendingAuthRequest !== null
);
}
+ /**
+ * Open a dialog to approve or deny a pending auth request for a device
+ */
+ async managePendingAuthRequest(device: DeviceTableData) {
+ if (device.devicePendingAuthRequest === undefined || device.devicePendingAuthRequest === null) {
+ return;
+ }
+
+ const dialogRef = LoginApprovalComponent.open(this.dialogService, {
+ notificationId: device.devicePendingAuthRequest.id,
+ });
+
+ const result = await firstValueFrom(dialogRef.closed);
+
+ if (result !== undefined && typeof result === "boolean") {
+ // auth request approved or denied so reset
+ device.devicePendingAuthRequest = null;
+ device.hasPendingAuthRequest = false;
+ }
+ }
+
/**
* 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 456981fe9a6..2779c0470e7 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -3813,6 +3813,67 @@
"trusted": {
"message": "Trusted"
},
+ "needsApproval": {
+ "message": "Needs approval"
+ },
+ "areYouTryingtoLogin": {
+ "message": "Are you trying to log in?"
+ },
+ "logInAttemptBy": {
+ "message": "Login attempt by $EMAIL$",
+ "placeholders": {
+ "email": {
+ "content": "$1",
+ "example": "name@example.com"
+ }
+ }
+ },
+ "deviceType": {
+ "message": "Device Type"
+ },
+ "ipAddress": {
+ "message": "IP Address"
+ },
+ "confirmLogIn": {
+ "message": "Confirm login"
+ },
+ "denyLogIn": {
+ "message": "Deny login"
+ },
+ "thisRequestIsNoLongerValid": {
+ "message": "This request is no longer valid."
+ },
+ "logInConfirmedForEmailOnDevice": {
+ "message": "Login confirmed for $EMAIL$ on $DEVICE$",
+ "placeholders": {
+ "email": {
+ "content": "$1",
+ "example": "name@example.com"
+ },
+ "device": {
+ "content": "$2",
+ "example": "iOS"
+ }
+ }
+ },
+ "youDeniedALogInAttemptFromAnotherDevice": {
+ "message": "You denied a login attempt from another device. If this really was you, try to log in with the device again."
+ },
+ "loginRequestHasAlreadyExpired": {
+ "message": "Login request has already expired."
+ },
+ "justNow": {
+ "message": "Just now"
+ },
+ "requestedXMinutesAgo": {
+ "message": "Requested $MINUTES$ minutes ago",
+ "placeholders": {
+ "minutes": {
+ "content": "$1",
+ "example": "5"
+ }
+ }
+ },
"creatingAccountOn": {
"message": "Creating account on"
},
diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts
index 93d25af1a53..803808612cf 100644
--- a/libs/angular/src/services/jslib-services.module.ts
+++ b/libs/angular/src/services/jslib-services.module.ts
@@ -20,6 +20,7 @@ import {
DefaultLoginComponentService,
LoginDecryptionOptionsService,
DefaultLoginDecryptionOptionsService,
+ DefaultLoginApprovalComponentService,
} from "@bitwarden/auth/angular";
import {
AuthRequestServiceAbstraction,
@@ -39,6 +40,7 @@ import {
DefaultAuthRequestApiService,
DefaultLoginSuccessHandlerService,
LoginSuccessHandlerService,
+ LoginApprovalComponentServiceAbstraction,
} from "@bitwarden/auth/common";
import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
import { AuditService as AuditServiceAbstraction } from "@bitwarden/common/abstractions/audit.service";
@@ -1405,6 +1407,11 @@ const safeProviders: SafeProvider[] = [
useClass: DefaultAuthRequestApiService,
deps: [ApiServiceAbstraction, LogService],
}),
+ safeProvider({
+ provide: LoginApprovalComponentServiceAbstraction,
+ useClass: DefaultLoginApprovalComponentService,
+ deps: [],
+ }),
safeProvider({
provide: LoginDecryptionOptionsService,
useClass: DefaultLoginDecryptionOptionsService,
diff --git a/libs/auth/src/angular/login-approval/login-approval.component.html b/libs/auth/src/angular/login-approval/login-approval.component.html
index ddbc48d71a3..c0cb9b9caf4 100644
--- a/libs/auth/src/angular/login-approval/login-approval.component.html
+++ b/libs/auth/src/angular/login-approval/login-approval.component.html
@@ -1,23 +1,31 @@
{{ "areYouTryingtoLogin" | i18n }}
- {{ "logInAttemptBy" | i18n: email }}
-
-
{{ "fingerprintPhraseHeader" | i18n }}
-
{{ fingerprintPhrase }}
-
-
{{ "deviceType" | i18n }}
-
{{ authRequestResponse?.requestDeviceType }}
-
-
{{ "ipAddress" | i18n }}
-
{{ authRequestResponse?.requestIpAddress }}
-
-
{{ "time" | i18n }}
-
{{ requestTimeText }}
-
+
+
+
+
+
+ {{ "logInAttemptBy" | i18n: email }}
+
+
{{ "fingerprintPhraseHeader" | i18n }}
+
{{ fingerprintPhrase }}
+
+
{{ "deviceType" | i18n }}
+
{{ authRequestResponse?.requestDeviceType }}
+
+
{{ "ipAddress" | i18n }}
+
{{ authRequestResponse?.requestIpAddress }}
+
+
{{ "time" | i18n }}
+
{{ requestTimeText }}
+