[PM-32242] Error message is incorrectly formatted for password protected Send (#18991)

* re-work error display to match design specs

* fix password auth in attemptV1Access

* fix locales file (formatting)

apps/web/src/app/tools/send/send-access/send-auth.component.ts

@@ -104,7 +104,27 @@ export class SendAuthComponent implements OnInit {
     } catch (e) {
       if (e instanceof ErrorResponse) {
         if (e.statusCode === 401) {
+          if (this.sendAuthType() === AuthType.Password) {
+            // Password was already required, so this is an invalid password error
+            const passwordControl = this.sendAccessForm.get("password");
+            if (passwordControl) {
+              passwordControl.setErrors({
+                invalidPassword: { message: this.i18nService.t("sendPasswordInvalidAskOwner") },
+              });
+              passwordControl.markAsTouched();
+            }
+          }
+          // Set auth type to Password (either first time or refresh)
           this.sendAuthType.set(AuthType.Password);
+        } else if (e.statusCode === 400 && this.sendAuthType() === AuthType.Password) {
+          // Server returns 400 for SendAccessResult.PasswordInvalid
+          const passwordControl = this.sendAccessForm.get("password");
+          if (passwordControl) {
+            passwordControl.setErrors({
+              invalidPassword: { message: this.i18nService.t("sendPasswordInvalidAskOwner") },
+            });
+            passwordControl.markAsTouched();
+          }
         } else if (e.statusCode === 404) {
           this.unavailable.set(true);
         } else {
@@ -175,11 +195,10 @@ export class SendAuthComponent implements OnInit {
         this.sendAuthType.set(AuthType.Password);
         this.updatePageTitle();
       } else if (passwordHashB64Invalid(response.error)) {
-        this.toastService.showToast({
-          variant: "error",
-          title: this.i18nService.t("errorOccurred"),
-          message: this.i18nService.t("invalidSendPassword"),
+        this.sendAccessForm.controls.password?.setErrors({
+          invalidPassword: { message: this.i18nService.t("sendPasswordInvalidAskOwner") },
         });
+        this.sendAccessForm.controls.password?.markAsTouched();
       } else if (sendIdInvalid(response.error)) {
         this.unavailable.set(true);
       } else {

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

@@ -12946,8 +12946,13 @@
   "paymentMethodUpdateError": {
     "message": "There was an error updating your payment method."
   },
+  "sendPasswordInvalidAskOwner": {
+    "message": "Invalid password. Ask the sender for the password needed to access this Send.",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "sendExpiresOn": {
     "message": "This Send expires at $TIME$ on $DATE$",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated.",
     "placeholders": {
       "time": {
         "content": "$1",
@@ -12957,7 +12962,6 @@
         "content": "$2",
         "example": "Jan 1, 1970"
       }
-    },
-    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+    }
   }
 }