refactor(login-error): (Auth) [PM-22145] Improved Error State for Failed Login (#16569)

Updates the inline error message on a failed login.

apps/browser/src/_locales/en/messages.json

@@ -733,6 +733,15 @@
   "invalidMasterPassword": {
     "message": "Invalid master password"
   },
+  "invalidMasterPasswordConfirmEmailAndHost": {
+    "message": "Invalid master password. Confirm your email is correct and your account was created on $HOST$.",
+    "placeholders": {
+      "host": {
+        "content": "$1",
+        "example": "vault.bitwarden.com"
+      }
+    }
+  },
   "vaultTimeout": {
     "message": "Vault timeout"
   },

apps/cli/src/auth/commands/login.command.ts

@@ -34,6 +34,7 @@ import { CryptoFunctionService } from "@bitwarden/common/key-management/crypto/a
 import { EncString } from "@bitwarden/common/key-management/crypto/models/enc-string";
 import { KeyConnectorService } from "@bitwarden/common/key-management/key-connector/abstractions/key-connector.service";
 import { MasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
+import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -369,6 +370,15 @@ export class LoginCommand {
 
       return await this.handleSuccessResponse(response);
     } catch (e) {
+      if (
+        e instanceof ErrorResponse &&
+        e.message === "Username or password is incorrect. Try again."
+      ) {
+        const env = await firstValueFrom(this.environmentService.environment$);
+        const host = Utils.getHost(env.getWebVaultUrl());
+        return Response.error(this.i18nService.t("invalidMasterPasswordConfirmEmailAndHost", host));
+      }
+
       return Response.error(e);
     }
   }

apps/cli/src/locales/en/messages.json

@@ -41,6 +41,15 @@
   "invalidMasterPassword": {
     "message": "Invalid master password."
   },
+  "invalidMasterPasswordConfirmEmailAndHost": {
+    "message": "Invalid master password. Confirm your email is correct and your account was created on $HOST$.",
+    "placeholders": {
+      "host": {
+        "content": "$1",
+        "example": "vault.bitwarden.com"
+      }
+    }
+  },
   "sessionTimeout": {
     "message": "Your session has timed out. Please go back and try logging in again."
   },

apps/desktop/src/locales/en/messages.json

@@ -1222,6 +1222,15 @@
   "invalidMasterPassword": {
     "message": "Invalid master password"
   },
+  "invalidMasterPasswordConfirmEmailAndHost": {
+    "message": "Invalid master password. Confirm your email is correct and your account was created on $HOST$.",
+    "placeholders": {
+      "host": {
+        "content": "$1",
+        "example": "vault.bitwarden.com"
+      }
+    }
+  },
   "twoStepLoginConfirmation": {
     "message": "Two-step login makes your account more secure by requiring you to verify your login with another device such as a security key, authenticator app, SMS, phone call, or email. Two-step login can be set up on the bitwarden.com web vault. Do you want to visit the website now?"
   },

apps/web/src/locales/en/messages.json

@@ -1499,6 +1499,15 @@
   "invalidMasterPassword": {
     "message": "Invalid master password"
   },
+  "invalidMasterPasswordConfirmEmailAndHost": {
+    "message": "Invalid master password. Confirm your email is correct and your account was created on $HOST$.",
+    "placeholders": {
+      "host": {
+        "content": "$1",
+        "example": "vault.bitwarden.com"
+      }
+    }
+  },
   "invalidFilePassword": {
     "message": "Invalid file password, please use the password you entered when you created the export file."
   },

libs/auth/src/angular/login/login.component.ts

@@ -34,6 +34,7 @@ import { ErrorResponse } from "@bitwarden/common/models/response/error.response"
 import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
@@ -138,6 +139,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     private loginSuccessHandlerService: LoginSuccessHandlerService,
     private configService: ConfigService,
     private ssoLoginService: SsoLoginServiceAbstraction,
+    private environmentService: EnvironmentService,
   ) {
     this.clientType = this.platformUtilsService.getClientType();
   }
@@ -307,7 +309,7 @@ export class LoginComponent implements OnInit, OnDestroy {
       await this.handleAuthResult(authResult);
     } catch (error) {
       this.logService.error(error);
-      this.handleSubmitError(error);
+      await this.handleSubmitError(error);
     }
   };
 
@@ -316,15 +318,18 @@ export class LoginComponent implements OnInit, OnDestroy {
    *
    * @param error The error object.
    */
-  private handleSubmitError(error: unknown) {
+  private async handleSubmitError(error: unknown) {
     // Handle error responses
     if (error instanceof ErrorResponse) {
       switch (error.statusCode) {
         case HttpStatusCode.BadRequest: {
           if (error.message?.toLowerCase().includes("username or password is incorrect")) {
+            const env = await firstValueFrom(this.environmentService.environment$);
+            const host = Utils.getHost(env.getWebVaultUrl());
+
             this.formGroup.controls.masterPassword.setErrors({
               error: {
-                message: this.i18nService.t("invalidMasterPassword"),
+                message: this.i18nService.t("invalidMasterPasswordConfirmEmailAndHost", host),
               },
             });
           } else {