[PM-15605] Add new device protection opt out (#12880)

* feat(newdeviceVerificaiton) : adding component and request model

* feat(newDeviceverification) : adding state structure to track verify devices for active user; added API call to server.

* feat(newDeviceVerification) : added visual elements for opting out of new device verification.

* Fixing tests for account service.
fixed DI for account service

* Fixing strict lint issues

* debt(deauthorizeSessionsModal) : changed modal to dialog. fixed strict typing for the new dialog for deviceVerification.

* fixing tests

* fixing desktop build DI

* changed dialog to standalone fixed names and comments.

* Adding tests for AccountService

* fix linting

* PM-15605 - AccountComp - fix ngOnDestroy erroring as it was incorrectly decorated with removed property.

* PM-15605 - SetAccountVerifyDevicesDialogComponent - only show warning about turning off new device verification if user doensn't have 2FA configured per task description

---------

Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Co-authored-by: Jared Snider <jsnider@bitwarden.com>

apps/browser/src/background/main.background.ts

@@ -560,6 +560,7 @@ export default class MainBackground {
       this.messagingService,
       this.logService,
       this.globalStateProvider,
+      this.singleUserStateProvider,
     );
     this.activeUserStateProvider = new DefaultActiveUserStateProvider(
       this.accountService,

apps/cli/src/service-container/service-container.ts

@@ -355,6 +355,7 @@ export class ServiceContainer {
       this.messagingService,
       this.logService,
       this.globalStateProvider,
+      this.singleUserStateProvider,
     );
 
     this.activeUserStateProvider = new DefaultActiveUserStateProvider(

apps/desktop/src/main.ts

@@ -133,12 +133,6 @@ export class Main {
     this.mainCryptoFunctionService = new MainCryptoFunctionService();
     this.mainCryptoFunctionService.init();
 
-    const accountService = new AccountServiceImplementation(
-      MessageSender.EMPTY,
-      this.logService,
-      globalStateProvider,
-    );
-
     const stateEventRegistrarService = new StateEventRegistrarService(
       globalStateProvider,
       storageServiceProvider,
@@ -150,6 +144,13 @@ export class Main {
       this.logService,
     );
 
+    const accountService = new AccountServiceImplementation(
+      MessageSender.EMPTY,
+      this.logService,
+      globalStateProvider,
+      singleUserStateProvider,
+    );
+
     const activeUserStateProvider = new DefaultActiveUserStateProvider(
       accountService,
       singleUserStateProvider,

apps/web/src/app/auth/settings/account/account.component.html

@@ -9,6 +9,26 @@
   </div>
 
   <app-danger-zone>
+    <ng-container *ngIf="showSetNewDeviceLoginProtection$ | async">
+      <button
+        *ngIf="verifyNewDeviceLogin"
+        type="button"
+        bitButton
+        buttonType="danger"
+        [bitAction]="setNewDeviceLoginProtection"
+      >
+        {{ "turnOffNewDeviceLoginProtection" | i18n }}
+      </button>
+      <button
+        *ngIf="!verifyNewDeviceLogin"
+        type="button"
+        bitButton
+        buttonType="secondary"
+        [bitAction]="setNewDeviceLoginProtection"
+      >
+        {{ "turnOnNewDeviceLoginProtection" | i18n }}
+      </button>
+    </ng-container>
     <button type="button" bitButton buttonType="danger" (click)="deauthorizeSessions()">
       {{ "deauthorizeSessions" | i18n }}
     </button>
@@ -32,7 +52,6 @@
     </button>
   </app-danger-zone>
 
-  <ng-template #deauthorizeSessionsTemplate></ng-template>
   <ng-template #viewUserApiKeyTemplate></ng-template>
   <ng-template #rotateUserApiKeyTemplate></ng-template>
 </bit-container>

apps/web/src/app/auth/settings/account/account.component.ts

@@ -1,9 +1,15 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { combineLatest, firstValueFrom, from, lastValueFrom, map, Observable } from "rxjs";
+import { Component, OnInit, OnDestroy } from "@angular/core";
+import {
+  combineLatest,
+  firstValueFrom,
+  from,
+  lastValueFrom,
+  map,
+  Observable,
+  Subject,
+  takeUntil,
+} from "rxjs";
 
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
@@ -16,31 +22,35 @@ import { PurgeVaultComponent } from "../../../vault/settings/purge-vault.compone
 
 import { DeauthorizeSessionsComponent } from "./deauthorize-sessions.component";
 import { DeleteAccountDialogComponent } from "./delete-account-dialog.component";
+import { SetAccountVerifyDevicesDialogComponent } from "./set-account-verify-devices-dialog.component";
 
 @Component({
   selector: "app-account",
   templateUrl: "account.component.html",
 })
-export class AccountComponent implements OnInit {
-  @ViewChild("deauthorizeSessionsTemplate", { read: ViewContainerRef, static: true })
-  deauthModalRef: ViewContainerRef;
+export class AccountComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
 
-  showChangeEmail$: Observable<boolean>;
-  showPurgeVault$: Observable<boolean>;
-  showDeleteAccount$: Observable<boolean>;
+  showChangeEmail$: Observable<boolean> = new Observable();
+  showPurgeVault$: Observable<boolean> = new Observable();
+  showDeleteAccount$: Observable<boolean> = new Observable();
+  showSetNewDeviceLoginProtection$: Observable<boolean> = new Observable();
+  verifyNewDeviceLogin: boolean = true;
 
   constructor(
-    private modalService: ModalService,
+    private accountService: AccountService,
     private dialogService: DialogService,
     private userVerificationService: UserVerificationService,
     private configService: ConfigService,
     private organizationService: OrganizationService,
-    private accountService: AccountService,
   ) {}
 
   async ngOnInit() {
     const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
 
+    this.showSetNewDeviceLoginProtection$ = this.configService.getFeatureFlag$(
+      FeatureFlag.NewDeviceVerification,
+    );
     const isAccountDeprovisioningEnabled$ = this.configService.getFeatureFlag$(
       FeatureFlag.AccountDeprovisioning,
     );
@@ -83,11 +93,17 @@ export class AccountComponent implements OnInit {
           !isAccountDeprovisioningEnabled || !userIsManagedByOrganization,
       ),
     );
+    this.accountService.accountVerifyNewDeviceLogin$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((verifyDevices) => {
+        this.verifyNewDeviceLogin = verifyDevices;
+      });
   }
 
-  async deauthorizeSessions() {
-    await this.modalService.openViewRef(DeauthorizeSessionsComponent, this.deauthModalRef);
-  }
+  deauthorizeSessions = async () => {
+    const dialogRef = DeauthorizeSessionsComponent.open(this.dialogService);
+    await lastValueFrom(dialogRef.closed);
+  };
 
   purgeVault = async () => {
     const dialogRef = PurgeVaultComponent.open(this.dialogService);
@@ -98,4 +114,14 @@ export class AccountComponent implements OnInit {
     const dialogRef = DeleteAccountDialogComponent.open(this.dialogService);
     await lastValueFrom(dialogRef.closed);
   };
+
+  setNewDeviceLoginProtection = async () => {
+    const dialogRef = SetAccountVerifyDevicesDialogComponent.open(this.dialogService);
+    await lastValueFrom(dialogRef.closed);
+  };
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

apps/web/src/app/auth/settings/account/danger-zone.component.html

@@ -1,14 +1,6 @@
 <h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5 !tw-text-danger">{{ "dangerZone" | i18n }}</h1>
 
 <div class="tw-rounded tw-border tw-border-solid tw-border-danger-600 tw-p-5">
-  <p>
-    {{
-      (accountDeprovisioningEnabled$ | async) && content.children.length === 1
-        ? ("dangerZoneDescSingular" | i18n)
-        : ("dangerZoneDesc" | i18n)
-    }}
-  </p>
-
   <div #content class="tw-flex tw-flex-row tw-gap-2">
     <ng-content></ng-content>
   </div>

apps/web/src/app/auth/settings/account/deauthorize-sessions.component.html

@@ -1,38 +1,21 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="deAuthTitle">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="deAuthTitle">{{ "deauthorizeSessions" | i18n }}</h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p>{{ "deauthorizeSessionsDesc" | i18n }}</p>
-        <bit-callout type="warning">{{ "deauthorizeSessionsWarning" | i18n }}</bit-callout>
-        <app-user-verification [(ngModel)]="masterPassword" ngDefaultControl name="secret">
-        </app-user-verification>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ "deauthorizeSessions" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "close" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+<form [formGroup]="deauthForm" [bitSubmit]="submit">
+  <bit-dialog dialogSize="default" [title]="'deauthorizeSessions' | i18n">
+    <ng-container bitDialogContent>
+      <p bitTypography="body1">{{ "deauthorizeSessionsDesc" | i18n }}</p>
+      <bit-callout type="warning">{{ "deauthorizeSessionsWarning" | i18n }}</bit-callout>
+      <app-user-verification-form-input
+        formControlName="verification"
+        name="verification"
+        [(invalidSecret)]="invalidSecret"
+      ></app-user-verification-form-input>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button bitButton bitFormButton type="submit" buttonType="danger">
+        {{ "deauthorizeSessions" | i18n }}
+      </button>
+      <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
+        {{ "close" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts

@@ -1,6 +1,5 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
@@ -8,33 +7,33 @@ import { Verification } from "@bitwarden/common/auth/types/verification";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { ToastService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-deauthorize-sessions",
   templateUrl: "deauthorize-sessions.component.html",
 })
 export class DeauthorizeSessionsComponent {
-  masterPassword: Verification;
-  formPromise: Promise<unknown>;
+  deauthForm = this.formBuilder.group({
+    verification: undefined as Verification | undefined,
+  });
+  invalidSecret: boolean = false;
 
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
-    private platformUtilsService: PlatformUtilsService,
+    private formBuilder: FormBuilder,
     private userVerificationService: UserVerificationService,
     private messagingService: MessagingService,
     private logService: LogService,
     private toastService: ToastService,
   ) {}
 
-  async submit() {
+  submit = async () => {
     try {
-      this.formPromise = this.userVerificationService
-        .buildRequest(this.masterPassword)
-        .then((request) => this.apiService.postSecurityStamp(request));
-      await this.formPromise;
+      const verification: Verification = this.deauthForm.value.verification!;
+      const request = await this.userVerificationService.buildRequest(verification);
+      await this.apiService.postSecurityStamp(request);
       this.toastService.showToast({
         variant: "success",
         title: this.i18nService.t("sessionsDeauthorized"),
@@ -44,5 +43,9 @@ export class DeauthorizeSessionsComponent {
     } catch (e) {
       this.logService.error(e);
     }
+  };
+
+  static open(dialogService: DialogService) {
+    return dialogService.open(DeauthorizeSessionsComponent);
   }
 }

apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts

@@ -8,7 +8,6 @@ import { AccountApiService } from "@bitwarden/common/auth/abstractions/account-a
 import { Verification } from "@bitwarden/common/auth/types/verification";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
 @Component({
@@ -22,7 +21,6 @@ export class DeleteAccountDialogComponent {
 
   constructor(
     private i18nService: I18nService,
-    private platformUtilsService: PlatformUtilsService,
     private formBuilder: FormBuilder,
     private accountApiService: AccountApiService,
     private dialogRef: DialogRef,

apps/web/src/app/auth/settings/account/set-account-verify-devices-dialog.component.html

@@ -0,0 +1,43 @@
+<form [formGroup]="setVerifyDevicesForm" [bitSubmit]="submit">
+  <bit-dialog dialogSize="default" [title]="'newDeviceLoginProtection' | i18n">
+    <ng-container bitDialogContent>
+      <p *ngIf="verifyNewDeviceLogin" bitTypography="body1">
+        {{ "turnOffNewDeviceLoginProtectionModalDesc" | i18n }}
+      </p>
+      <p *ngIf="!verifyNewDeviceLogin" bitTypography="body1">
+        {{ "turnOnNewDeviceLoginProtectionModalDesc" | i18n }}
+      </p>
+      <bit-callout *ngIf="verifyNewDeviceLogin && !has2faConfigured" type="warning">{{
+        "turnOffNewDeviceLoginProtectionWarning" | i18n
+      }}</bit-callout>
+      <app-user-verification-form-input
+        formControlName="verification"
+        name="verification"
+        [(invalidSecret)]="invalidSecret"
+      ></app-user-verification-form-input>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button
+        bitButton
+        *ngIf="verifyNewDeviceLogin"
+        bitFormButton
+        type="submit"
+        buttonType="danger"
+      >
+        {{ "disable" | i18n }}
+      </button>
+      <button
+        bitButton
+        *ngIf="!verifyNewDeviceLogin"
+        bitFormButton
+        type="submit"
+        buttonType="primary"
+      >
+        {{ "enable" | i18n }}
+      </button>
+      <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
+        {{ "close" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/auth/settings/account/set-account-verify-devices-dialog.component.ts

@@ -0,0 +1,122 @@
+import { DialogRef } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
+import { firstValueFrom, Subject, takeUntil } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { UserVerificationFormInputComponent } from "@bitwarden/auth/angular";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { AccountApiService } from "@bitwarden/common/auth/abstractions/account-api.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { SetVerifyDevicesRequest } from "@bitwarden/common/auth/models/request/set-verify-devices.request";
+import { Verification } from "@bitwarden/common/auth/types/verification";
+import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  CalloutModule,
+  DialogModule,
+  DialogService,
+  FormFieldModule,
+  IconButtonModule,
+  RadioButtonModule,
+  SelectModule,
+  ToastService,
+} from "@bitwarden/components";
+
+@Component({
+  templateUrl: "./set-account-verify-devices-dialog.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    JslibModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    ButtonModule,
+    IconButtonModule,
+    SelectModule,
+    CalloutModule,
+    RadioButtonModule,
+    DialogModule,
+    UserVerificationFormInputComponent,
+  ],
+})
+export class SetAccountVerifyDevicesDialogComponent implements OnInit, OnDestroy {
+  // use this subject for all subscriptions to ensure all subscripts are completed
+  private destroy$ = new Subject<void>();
+  // the default for new device verification is true
+  verifyNewDeviceLogin: boolean = true;
+  has2faConfigured: boolean = false;
+
+  setVerifyDevicesForm = this.formBuilder.group({
+    verification: undefined as Verification | undefined,
+  });
+  invalidSecret: boolean = false;
+
+  constructor(
+    private i18nService: I18nService,
+    private formBuilder: FormBuilder,
+    private accountApiService: AccountApiService,
+    private accountService: AccountService,
+    private userVerificationService: UserVerificationService,
+    private dialogRef: DialogRef,
+    private toastService: ToastService,
+    private apiService: ApiService,
+  ) {
+    this.accountService.accountVerifyNewDeviceLogin$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((verifyDevices: boolean) => {
+        this.verifyNewDeviceLogin = verifyDevices;
+      });
+  }
+
+  async ngOnInit() {
+    const twoFactorProviders = await this.apiService.getTwoFactorProviders();
+    this.has2faConfigured = twoFactorProviders.data.length > 0;
+  }
+
+  submit = async () => {
+    try {
+      const activeAccount = await firstValueFrom(
+        this.accountService.activeAccount$.pipe(takeUntil(this.destroy$)),
+      );
+      const verification: Verification = this.setVerifyDevicesForm.value.verification!;
+      const request: SetVerifyDevicesRequest = await this.userVerificationService.buildRequest(
+        verification,
+        SetVerifyDevicesRequest,
+      );
+      // set verify device opposite what is currently is.
+      request.verifyDevices = !this.verifyNewDeviceLogin;
+      await this.accountApiService.setVerifyDevices(request);
+      await this.accountService.setAccountVerifyNewDeviceLogin(
+        activeAccount!.id,
+        request.verifyDevices,
+      );
+      this.dialogRef.close();
+      this.toastService.showToast({
+        variant: "success",
+        title: "",
+        message: this.i18nService.t("accountNewDeviceLoginProtectionSaved"),
+      });
+    } catch (e) {
+      if (e instanceof ErrorResponse && e.statusCode === 400) {
+        this.invalidSecret = true;
+      }
+      throw e;
+    }
+  };
+
+  static open(dialogService: DialogService) {
+    return dialogService.open(SetAccountVerifyDevicesDialogComponent);
+  }
+
+  // closes subscription leaks
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

apps/web/src/locales/en/messages.json

@@ -1792,7 +1792,7 @@
   },
   "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."
   },
@@ -1860,12 +1860,6 @@
   "dangerZone": {
     "message": "Danger zone"
   },
-  "dangerZoneDesc": {
-    "message": "Careful, these actions are not reversible!"
-  },
-  "dangerZoneDescSingular": {
-    "message": "Careful, this action is not reversible!"
-  },
   "deauthorizeSessions": {
     "message": "Deauthorize sessions"
   },
@@ -1875,6 +1869,27 @@
   "deauthorizeSessionsWarning": {
     "message": "Proceeding will also log you out of your current session, requiring you to log back in. You will also be prompted for two-step login again, if set up. Active sessions on other devices may continue to remain active for up to one hour."
   },
+  "newDeviceLoginProtection": {
+    "message":"New device login"
+  },
+  "turnOffNewDeviceLoginProtection": {
+    "message":"Turn off new device login protection"
+  },
+  "turnOnNewDeviceLoginProtection": {
+    "message":"Turn on new device login protection"
+  },
+  "turnOffNewDeviceLoginProtectionModalDesc": {
+    "message":"Proceed below to turn off the verification emails bitwarden sends when you login from a new device."
+  },
+  "turnOnNewDeviceLoginProtectionModalDesc": {
+    "message":"Proceed below to have bitwarden send you verification emails when you login from a new device."
+  },
+  "turnOffNewDeviceLoginProtectionWarning": {
+    "message":"With new device login protection turned off, anyone with your master password can access your account from any device. To protect your account without verification emails, set up two-step login."
+  },
+  "accountNewDeviceLoginProtectionSaved": {
+    "message": "New device login protection changes saved"
+  },
   "sessionsDeauthorized": {
     "message": "All sessions deauthorized"
   },