diff --git a/libs/auth/src/angular/new-device-verification/new-device-verification.component.ts b/libs/auth/src/angular/new-device-verification/new-device-verification.component.ts index 6c48a471d08..57583eb24d2 100644 --- a/libs/auth/src/angular/new-device-verification/new-device-verification.component.ts +++ b/libs/auth/src/angular/new-device-verification/new-device-verification.component.ts @@ -15,7 +15,6 @@ import { FormFieldModule, IconButtonModule, LinkModule, - ToastService, } from "@bitwarden/components"; import { LoginEmailServiceAbstraction } from "../../common/abstractions/login-email.service"; @@ -60,7 +59,6 @@ export class NewDeviceVerificationComponent implements OnInit, OnDestroy { private apiService: ApiService, private loginStrategyService: LoginStrategyServiceAbstraction, private logService: LogService, - private toastService: ToastService, private i18nService: I18nService, private syncService: SyncService, private loginEmailService: LoginEmailServiceAbstraction, @@ -153,9 +151,17 @@ export class NewDeviceVerificationComponent implements OnInit, OnDestroy { await this.router.navigate(["/vault"]); } catch (e) { this.logService.error(e); - const errorMessage = - (e as any)?.response?.error_description ?? this.i18nService.t("errorOccurred"); + let errorMessage = + ((e as any)?.response?.error_description as string) ?? this.i18nService.t("errorOccurred"); + + if (errorMessage.includes("Invalid New Device OTP")) { + errorMessage = this.i18nService.t("invalidVerificationCode"); + } + codeControl.setErrors({ serverError: { message: errorMessage } }); + // For enter key press scenarios, we have to manually mark the control as touched + // to get the error message to display + codeControl.markAsTouched(); } }; }