1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 14:23:32 +00:00

PM-4945 Update Two Factor verify dialog (#8580)

* PM-4945 Update Two Factor verify dialog

* PM-4945 Addressed review comments

* PM-4945 Removed legacy User verification component and used new one
This commit is contained in:
KiruthigaManivannan
2024-04-26 18:24:48 +05:30
committed by GitHub
parent 11ba8d188d
commit 2fa4c6e4f9
11 changed files with 142 additions and 87 deletions

View File

@@ -1,4 +1,6 @@
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
import { Component, EventEmitter, Inject, Output } from "@angular/core";
import { FormControl, FormGroup } 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,46 +10,74 @@ import { SecretVerificationRequest } from "@bitwarden/common/auth/models/request
import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
import { TwoFactorResponse } from "@bitwarden/common/auth/types/two-factor-response";
import { Verification } from "@bitwarden/common/auth/types/verification";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { DialogService } from "@bitwarden/components";
type TwoFactorVerifyDialogData = {
type: TwoFactorProviderType;
organizationId: string;
};
@Component({
selector: "app-two-factor-verify",
templateUrl: "two-factor-verify.component.html",
})
export class TwoFactorVerifyComponent {
@Input() type: TwoFactorProviderType;
@Input() organizationId: string;
type: TwoFactorProviderType;
organizationId: string;
@Output() onAuthed = new EventEmitter<AuthResponse<TwoFactorResponse>>();
secret: Verification;
formPromise: Promise<TwoFactorResponse>;
protected formGroup = new FormGroup({
secret: new FormControl<Verification | null>(null),
});
constructor(
@Inject(DIALOG_DATA) protected data: TwoFactorVerifyDialogData,
private dialogRef: DialogRef,
private apiService: ApiService,
private logService: LogService,
private i18nService: I18nService,
private userVerificationService: UserVerificationService,
) {}
) {
this.type = data.type;
this.organizationId = data.organizationId;
}
async submit() {
submit = async () => {
let hashedSecret: string;
try {
this.formPromise = this.userVerificationService.buildRequest(this.secret).then((request) => {
this.formPromise = this.userVerificationService
.buildRequest(this.formGroup.value.secret)
.then((request) => {
hashedSecret =
this.secret.type === VerificationType.MasterPassword
this.formGroup.value.secret.type === VerificationType.MasterPassword
? request.masterPasswordHash
: request.otp;
return this.apiCall(request);
});
const response = await this.formPromise;
this.onAuthed.emit({
response: response,
secret: hashedSecret,
verificationType: this.secret.type,
});
} catch (e) {
this.logService.error(e);
const response = await this.formPromise;
this.dialogRef.close({
response: response,
secret: hashedSecret,
verificationType: this.formGroup.value.secret.type,
});
};
get dialogTitle(): string {
switch (this.type) {
case -1 as TwoFactorProviderType:
return this.i18nService.t("recoveryCodeTitle");
case TwoFactorProviderType.Duo:
return "Duo";
case TwoFactorProviderType.Email:
return this.i18nService.t("emailTitle");
case TwoFactorProviderType.WebAuthn:
return this.i18nService.t("webAuthnTitle");
case TwoFactorProviderType.Authenticator:
return this.i18nService.t("authenticatorAppTitle");
case TwoFactorProviderType.Yubikey:
return "Yubikey";
}
}
@@ -72,4 +102,8 @@ export class TwoFactorVerifyComponent {
return this.apiService.getTwoFactorYubiKey(request);
}
}
static open(dialogService: DialogService, config: DialogConfig<TwoFactorVerifyDialogData>) {
return dialogService.open<AuthResponse<any>>(TwoFactorVerifyComponent, config);
}
}