1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00

[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:
Federico Maccaroni 2022-06-13 15:13:22 -03:00 committed by GitHub
parent 2d72201650
commit c93c6a775d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 186 additions and 3 deletions

View File

@ -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() {

View File

@ -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>

View File

@ -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);
}
}
}

View File

@ -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"
}
}
}
}

View File

@ -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>>;

View File

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

View File

@ -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"
);
}
}

View File

@ -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>> {