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:
committed by
GitHub
parent
11ba8d188d
commit
2fa4c6e4f9
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user