[PS-589] Added Device Verification section setting for 2FA Email for new device (#2868)

* PS-589 Added Device Verification section for enable/disable the feature of 2FA email on new device login and the api calls for the new endpoint

* PS-589 prettier fix

* PS-589 Fix import typo because of caps

* PS-589 Improved button to use bitButton directive and loading to have the ngIf on the 2fa setup component

apps/web/src/app/organizations/settings/two-factor-setup.component.ts

@@ -3,7 +3,10 @@ import { ActivatedRoute } from "@angular/router";
 
 import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
@@ -22,9 +25,21 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
     messagingService: MessagingService,
     policyService: PolicyService,
     private route: ActivatedRoute,
-    stateService: StateService
+    stateService: StateService,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService,
+    logService: LogService
   ) {
-    super(apiService, modalService, messagingService, policyService, stateService);
+    super(
+      apiService,
+      modalService,
+      messagingService,
+      policyService,
+      stateService,
+      platformUtilsService,
+      i18nService,
+      logService
+    );
   }
 
   async ngOnInit() {

apps/web/src/app/settings/two-factor-setup.component.html

@@ -55,6 +55,47 @@
     </div>
   </li>
 </ul>
+<form *ngIf="!loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+  <div class="row">
+    <div class="col-12">
+      <h2 class="mt-5 spaced-header">
+        {{ "deviceVerification" | i18n }}
+      </h2>
+      <div class="form-group">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="enableDeviceVerification"
+            name="enableDeviceVerification"
+            disabled="{{ !isDeviceVerificationSectionEnabled }}"
+            [(ngModel)]="enableDeviceVerification"
+          />
+          <label class="form-check-label" for="enableDeviceVerification">
+            {{ "enableDeviceVerification" | i18n }}
+          </label>
+        </div>
+        <small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
+      </div>
+      <button
+        type="submit"
+        bitButton
+        buttonType="primary"
+        class="btn-submit"
+        [disabled]="form.loading"
+        *ngIf="isDeviceVerificationSectionEnabled"
+      >
+        <i
+          class="bwi bwi-spinner bwi-spin"
+          title="{{ 'loading' | i18n }}"
+          aria-hidden="true"
+          *ngIf="form.loading"
+        ></i>
+        <span>{{ "save" | i18n }}</span>
+      </button>
+    </div>
+  </div>
+</form>
 
 <ng-template #authenticatorTemplate></ng-template>
 <ng-template #recoveryTemplate></ng-template>

apps/web/src/app/settings/two-factor-setup.component.ts

@@ -3,11 +3,15 @@ import { Component, OnInit, Type, ViewChild, ViewContainerRef } from "@angular/c
 import { ModalRef } from "jslib-angular/components/modal/modal.ref";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { PolicyType } from "jslib-common/enums/policyType";
 import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
+import { DeviceVerificationRequest } from "jslib-common/models/request/deviceVerificationRequest";
 import { TwoFactorProviders } from "jslib-common/services/twoFactor.service";
 
 import { TwoFactorAuthenticatorComponent } from "./two-factor-authenticator.component";
@@ -39,18 +43,32 @@ export class TwoFactorSetupComponent implements OnInit {
   canAccessPremium: boolean;
   showPolicyWarning = false;
   loading = true;
+  enableDeviceVerification: boolean;
+  isDeviceVerificationSectionEnabled: boolean;
   modal: ModalRef;
+  formPromise: Promise<any>;
 
   constructor(
     protected apiService: ApiService,
     protected modalService: ModalService,
     protected messagingService: MessagingService,
     protected policyService: PolicyService,
-    private stateService: StateService
+    private stateService: StateService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private logService: LogService
   ) {}
 
   async ngOnInit() {
     this.canAccessPremium = await this.stateService.getCanAccessPremium();
+    try {
+      const deviceVerificationSettings = await this.apiService.getDeviceVerificationSettings();
+      this.isDeviceVerificationSectionEnabled =
+        deviceVerificationSettings.isDeviceVerificationSectionEnabled;
+      this.enableDeviceVerification = deviceVerificationSettings.unknownDeviceVerificationEnabled;
+    } catch (e) {
+      this.logService.error(e);
+    }
 
     for (const key in TwoFactorProviders) {
       // eslint-disable-next-line
@@ -186,4 +204,37 @@ export class TwoFactorSetupComponent implements OnInit {
       this.showPolicyWarning = false;
     }
   }
+
+  async submit() {
+    try {
+      if (this.enableDeviceVerification) {
+        const email = await this.stateService.getEmail();
+        const confirmed = await this.platformUtilsService.showDialog(
+          this.i18nService.t(
+            "areYouSureYouWantToEnableDeviceVerificationTheVerificationCodeEmailsWillArriveAtX",
+            email
+          ),
+          this.i18nService.t("deviceVerification"),
+          this.i18nService.t("yes"),
+          this.i18nService.t("no"),
+          "warning"
+        );
+        if (!confirmed) {
+          return;
+        }
+      }
+
+      this.formPromise = this.apiService.putDeviceVerificationSettings(
+        new DeviceVerificationRequest(this.enableDeviceVerification)
+      );
+      await this.formPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("updatedDeviceVerification")
+      );
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
 }

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

@@ -5075,5 +5075,26 @@
   },
   "apiAccessToken": {
     "message": "API Access Token"
+  },
+  "deviceVerification": {
+    "message": "Device Verification"
+  },
+  "enableDeviceVerification": {
+    "message": "Enable Device Verification"
+  },
+  "deviceVerificationDesc": {
+    "message": "When enabled, verification codes are sent to your email address when logging in from an unrecognized device"
+  },
+  "updatedDeviceVerification": {
+    "message": "Updated Device Verification"
+  },
+  "areYouSureYouWantToEnableDeviceVerificationTheVerificationCodeEmailsWillArriveAtX": {
+    "message": "Are you sure you want to enable Device Verification? The verification code emails will arrive at: $EMAIL$",
+    "placeholders": {
+      "email": {
+        "content": "$1",
+        "example": "My Email"
+      }
+    }
   }
 }

libs/common/src/abstractions/api.service.ts

@@ -1,7 +1,9 @@
 import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
+import { DeviceVerificationRequest } from "jslib-common/models/request/deviceVerificationRequest";
 import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";
 import { BillingHistoryResponse } from "jslib-common/models/response/billingHistoryResponse";
 import { BillingPaymentResponse } from "jslib-common/models/response/billingPaymentResponse";
+import { DeviceVerificationResponse } from "jslib-common/models/response/deviceVerificationResponse";
 import {
   OrganizationConnectionConfigApis,
   OrganizationConnectionResponse,
@@ -494,6 +496,10 @@ export abstract class ApiService {
   postTwoFactorRecover: (request: TwoFactorRecoveryRequest) => Promise<any>;
   postTwoFactorEmailSetup: (request: TwoFactorEmailRequest) => Promise<any>;
   postTwoFactorEmail: (request: TwoFactorEmailRequest) => Promise<any>;
+  getDeviceVerificationSettings: () => Promise<DeviceVerificationResponse>;
+  putDeviceVerificationSettings: (
+    request: DeviceVerificationRequest
+  ) => Promise<DeviceVerificationResponse>;
 
   getEmergencyAccessTrusted: () => Promise<ListResponse<EmergencyAccessGranteeDetailsResponse>>;
   getEmergencyAccessGranted: () => Promise<ListResponse<EmergencyAccessGrantorDetailsResponse>>;

libs/common/src/models/request/deviceVerificationRequest.ts

@@ -0,0 +1,7 @@
+export class DeviceVerificationRequest {
+  unknownDeviceVerificationEnabled: boolean;
+
+  constructor(unknownDeviceVerificationEnabled: boolean) {
+    this.unknownDeviceVerificationEnabled = unknownDeviceVerificationEnabled;
+  }
+}

libs/common/src/models/response/deviceVerificationResponse.ts

@@ -0,0 +1,16 @@
+import { BaseResponse } from "./baseResponse";
+
+export class DeviceVerificationResponse extends BaseResponse {
+  isDeviceVerificationSectionEnabled: boolean;
+  unknownDeviceVerificationEnabled: boolean;
+
+  constructor(response: any) {
+    super(response);
+    this.isDeviceVerificationSectionEnabled = this.getResponseProperty(
+      "IsDeviceVerificationSectionEnabled"
+    );
+    this.unknownDeviceVerificationEnabled = this.getResponseProperty(
+      "UnknownDeviceVerificationEnabled"
+    );
+  }
+}

libs/common/src/services/api.service.ts

@@ -31,6 +31,7 @@ import { CipherRequest } from "../models/request/cipherRequest";
 import { CipherShareRequest } from "../models/request/cipherShareRequest";
 import { CollectionRequest } from "../models/request/collectionRequest";
 import { DeleteRecoverRequest } from "../models/request/deleteRecoverRequest";
+import { DeviceVerificationRequest } from "../models/request/deviceVerificationRequest";
 import { EmailRequest } from "../models/request/emailRequest";
 import { EmailTokenRequest } from "../models/request/emailTokenRequest";
 import { EmergencyAccessAcceptRequest } from "../models/request/emergencyAccessAcceptRequest";
@@ -121,6 +122,7 @@ import {
   CollectionGroupDetailsResponse,
   CollectionResponse,
 } from "../models/response/collectionResponse";
+import { DeviceVerificationResponse } from "../models/response/deviceVerificationResponse";
 import { DomainsResponse } from "../models/response/domainsResponse";
 import {
   EmergencyAccessGranteeDetailsResponse,
@@ -1572,6 +1574,30 @@ export class ApiService implements ApiServiceAbstraction {
     return this.send("POST", "/two-factor/send-email-login", request, false, false);
   }
 
+  async getDeviceVerificationSettings(): Promise<DeviceVerificationResponse> {
+    const r = await this.send(
+      "GET",
+      "/two-factor/get-device-verification-settings",
+      null,
+      true,
+      true
+    );
+    return new DeviceVerificationResponse(r);
+  }
+
+  async putDeviceVerificationSettings(
+    request: DeviceVerificationRequest
+  ): Promise<DeviceVerificationResponse> {
+    const r = await this.send(
+      "PUT",
+      "/two-factor/device-verification-settings",
+      request,
+      true,
+      true
+    );
+    return new DeviceVerificationResponse(r);
+  }
+
   // Emergency Access APIs
 
   async getEmergencyAccessTrusted(): Promise<ListResponse<EmergencyAccessGranteeDetailsResponse>> {