[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
This commit is contained in:
parent
2d72201650
commit
c93c6a775d
|
@ -3,7 +3,10 @@ import { ActivatedRoute } from "@angular/router";
|
||||||
|
|
||||||
import { ModalService } from "jslib-angular/services/modal.service";
|
import { ModalService } from "jslib-angular/services/modal.service";
|
||||||
import { ApiService } from "jslib-common/abstractions/api.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 { MessagingService } from "jslib-common/abstractions/messaging.service";
|
||||||
|
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
|
||||||
import { PolicyService } from "jslib-common/abstractions/policy.service";
|
import { PolicyService } from "jslib-common/abstractions/policy.service";
|
||||||
import { StateService } from "jslib-common/abstractions/state.service";
|
import { StateService } from "jslib-common/abstractions/state.service";
|
||||||
import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
|
import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
|
||||||
|
@ -22,9 +25,21 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
|
||||||
messagingService: MessagingService,
|
messagingService: MessagingService,
|
||||||
policyService: PolicyService,
|
policyService: PolicyService,
|
||||||
private route: ActivatedRoute,
|
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() {
|
async ngOnInit() {
|
||||||
|
|
|
@ -55,6 +55,47 @@
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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 #authenticatorTemplate></ng-template>
|
||||||
<ng-template #recoveryTemplate></ng-template>
|
<ng-template #recoveryTemplate></ng-template>
|
||||||
|
|
|
@ -3,11 +3,15 @@ import { Component, OnInit, Type, ViewChild, ViewContainerRef } from "@angular/c
|
||||||
import { ModalRef } from "jslib-angular/components/modal/modal.ref";
|
import { ModalRef } from "jslib-angular/components/modal/modal.ref";
|
||||||
import { ModalService } from "jslib-angular/services/modal.service";
|
import { ModalService } from "jslib-angular/services/modal.service";
|
||||||
import { ApiService } from "jslib-common/abstractions/api.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 { MessagingService } from "jslib-common/abstractions/messaging.service";
|
||||||
|
import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
|
||||||
import { PolicyService } from "jslib-common/abstractions/policy.service";
|
import { PolicyService } from "jslib-common/abstractions/policy.service";
|
||||||
import { StateService } from "jslib-common/abstractions/state.service";
|
import { StateService } from "jslib-common/abstractions/state.service";
|
||||||
import { PolicyType } from "jslib-common/enums/policyType";
|
import { PolicyType } from "jslib-common/enums/policyType";
|
||||||
import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
|
import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
|
||||||
|
import { DeviceVerificationRequest } from "jslib-common/models/request/deviceVerificationRequest";
|
||||||
import { TwoFactorProviders } from "jslib-common/services/twoFactor.service";
|
import { TwoFactorProviders } from "jslib-common/services/twoFactor.service";
|
||||||
|
|
||||||
import { TwoFactorAuthenticatorComponent } from "./two-factor-authenticator.component";
|
import { TwoFactorAuthenticatorComponent } from "./two-factor-authenticator.component";
|
||||||
|
@ -39,18 +43,32 @@ export class TwoFactorSetupComponent implements OnInit {
|
||||||
canAccessPremium: boolean;
|
canAccessPremium: boolean;
|
||||||
showPolicyWarning = false;
|
showPolicyWarning = false;
|
||||||
loading = true;
|
loading = true;
|
||||||
|
enableDeviceVerification: boolean;
|
||||||
|
isDeviceVerificationSectionEnabled: boolean;
|
||||||
modal: ModalRef;
|
modal: ModalRef;
|
||||||
|
formPromise: Promise<any>;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
protected apiService: ApiService,
|
protected apiService: ApiService,
|
||||||
protected modalService: ModalService,
|
protected modalService: ModalService,
|
||||||
protected messagingService: MessagingService,
|
protected messagingService: MessagingService,
|
||||||
protected policyService: PolicyService,
|
protected policyService: PolicyService,
|
||||||
private stateService: StateService
|
private stateService: StateService,
|
||||||
|
private platformUtilsService: PlatformUtilsService,
|
||||||
|
private i18nService: I18nService,
|
||||||
|
private logService: LogService
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
this.canAccessPremium = await this.stateService.getCanAccessPremium();
|
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) {
|
for (const key in TwoFactorProviders) {
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
|
@ -186,4 +204,37 @@ export class TwoFactorSetupComponent implements OnInit {
|
||||||
this.showPolicyWarning = false;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5075,5 +5075,26 @@
|
||||||
},
|
},
|
||||||
"apiAccessToken": {
|
"apiAccessToken": {
|
||||||
"message": "API Access Token"
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,7 +1,9 @@
|
||||||
import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
|
import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
|
||||||
|
import { DeviceVerificationRequest } from "jslib-common/models/request/deviceVerificationRequest";
|
||||||
import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";
|
import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";
|
||||||
import { BillingHistoryResponse } from "jslib-common/models/response/billingHistoryResponse";
|
import { BillingHistoryResponse } from "jslib-common/models/response/billingHistoryResponse";
|
||||||
import { BillingPaymentResponse } from "jslib-common/models/response/billingPaymentResponse";
|
import { BillingPaymentResponse } from "jslib-common/models/response/billingPaymentResponse";
|
||||||
|
import { DeviceVerificationResponse } from "jslib-common/models/response/deviceVerificationResponse";
|
||||||
import {
|
import {
|
||||||
OrganizationConnectionConfigApis,
|
OrganizationConnectionConfigApis,
|
||||||
OrganizationConnectionResponse,
|
OrganizationConnectionResponse,
|
||||||
|
@ -494,6 +496,10 @@ export abstract class ApiService {
|
||||||
postTwoFactorRecover: (request: TwoFactorRecoveryRequest) => Promise<any>;
|
postTwoFactorRecover: (request: TwoFactorRecoveryRequest) => Promise<any>;
|
||||||
postTwoFactorEmailSetup: (request: TwoFactorEmailRequest) => Promise<any>;
|
postTwoFactorEmailSetup: (request: TwoFactorEmailRequest) => Promise<any>;
|
||||||
postTwoFactorEmail: (request: TwoFactorEmailRequest) => Promise<any>;
|
postTwoFactorEmail: (request: TwoFactorEmailRequest) => Promise<any>;
|
||||||
|
getDeviceVerificationSettings: () => Promise<DeviceVerificationResponse>;
|
||||||
|
putDeviceVerificationSettings: (
|
||||||
|
request: DeviceVerificationRequest
|
||||||
|
) => Promise<DeviceVerificationResponse>;
|
||||||
|
|
||||||
getEmergencyAccessTrusted: () => Promise<ListResponse<EmergencyAccessGranteeDetailsResponse>>;
|
getEmergencyAccessTrusted: () => Promise<ListResponse<EmergencyAccessGranteeDetailsResponse>>;
|
||||||
getEmergencyAccessGranted: () => Promise<ListResponse<EmergencyAccessGrantorDetailsResponse>>;
|
getEmergencyAccessGranted: () => Promise<ListResponse<EmergencyAccessGrantorDetailsResponse>>;
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
export class DeviceVerificationRequest {
|
||||||
|
unknownDeviceVerificationEnabled: boolean;
|
||||||
|
|
||||||
|
constructor(unknownDeviceVerificationEnabled: boolean) {
|
||||||
|
this.unknownDeviceVerificationEnabled = unknownDeviceVerificationEnabled;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -31,6 +31,7 @@ import { CipherRequest } from "../models/request/cipherRequest";
|
||||||
import { CipherShareRequest } from "../models/request/cipherShareRequest";
|
import { CipherShareRequest } from "../models/request/cipherShareRequest";
|
||||||
import { CollectionRequest } from "../models/request/collectionRequest";
|
import { CollectionRequest } from "../models/request/collectionRequest";
|
||||||
import { DeleteRecoverRequest } from "../models/request/deleteRecoverRequest";
|
import { DeleteRecoverRequest } from "../models/request/deleteRecoverRequest";
|
||||||
|
import { DeviceVerificationRequest } from "../models/request/deviceVerificationRequest";
|
||||||
import { EmailRequest } from "../models/request/emailRequest";
|
import { EmailRequest } from "../models/request/emailRequest";
|
||||||
import { EmailTokenRequest } from "../models/request/emailTokenRequest";
|
import { EmailTokenRequest } from "../models/request/emailTokenRequest";
|
||||||
import { EmergencyAccessAcceptRequest } from "../models/request/emergencyAccessAcceptRequest";
|
import { EmergencyAccessAcceptRequest } from "../models/request/emergencyAccessAcceptRequest";
|
||||||
|
@ -121,6 +122,7 @@ import {
|
||||||
CollectionGroupDetailsResponse,
|
CollectionGroupDetailsResponse,
|
||||||
CollectionResponse,
|
CollectionResponse,
|
||||||
} from "../models/response/collectionResponse";
|
} from "../models/response/collectionResponse";
|
||||||
|
import { DeviceVerificationResponse } from "../models/response/deviceVerificationResponse";
|
||||||
import { DomainsResponse } from "../models/response/domainsResponse";
|
import { DomainsResponse } from "../models/response/domainsResponse";
|
||||||
import {
|
import {
|
||||||
EmergencyAccessGranteeDetailsResponse,
|
EmergencyAccessGranteeDetailsResponse,
|
||||||
|
@ -1572,6 +1574,30 @@ export class ApiService implements ApiServiceAbstraction {
|
||||||
return this.send("POST", "/two-factor/send-email-login", request, false, false);
|
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
|
// Emergency Access APIs
|
||||||
|
|
||||||
async getEmergencyAccessTrusted(): Promise<ListResponse<EmergencyAccessGranteeDetailsResponse>> {
|
async getEmergencyAccessTrusted(): Promise<ListResponse<EmergencyAccessGranteeDetailsResponse>> {
|
||||||
|
|
Loading…
Reference in New Issue