PM-20391 UX: Saving new login when none exist (#14406)

* PM-20391 UX: Saving new login when none exist * Update apps/browser/src/_locales/en/messages.json Co-authored-by: Jonathan Prusik <jprusik@users.noreply.github.com> * Update apps/browser/src/_locales/en/messages.json Co-authored-by: Jonathan Prusik <jprusik@users.noreply.github.com> * Update apps/browser/src/autofill/notification/bar.ts Co-authored-by: Jonathan Prusik <jprusik@users.noreply.github.com> * Update apps/browser/src/autofill/content/components/cipher/cipher-action.ts Co-authored-by: Jonathan Prusik <jprusik@users.noreply.github.com> --------- Co-authored-by: Jonathan Prusik <jprusik@users.noreply.github.com>
2025-12-06 00:13:28 +00:00 · 2025-04-24 16:15:27 -04:00
parent 116751d4ca
commit 4a01c8bb17
7 changed files with 104 additions and 56 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -1071,6 +1071,10 @@
    },
    "description": "Aria label for the view button in notification bar confirmation message"
  },
+  "notificationEditTooltip": {
+    "message": "Edit before saving",
+    "description": "Tooltip and Aria label for edit button on cipher item"
+  },
  "newNotification": {
    "message": "New notification"
  },
@@ -1110,12 +1114,12 @@
    "message": "Update login",
    "description": "Button text for updating an existing login entry."
  },
-  "saveLoginPrompt": {
-    "message": "Save login?",
+  "saveLogin": {
+    "message": "Save login",
    "description": "Prompt asking the user if they want to save their login details."
  },
-  "updateLoginPrompt": {
-    "message": "Update existing login?",
+  "updateLogin": {
+    "message": "Update existing login",
    "description": "Prompt asking the user if they want to update an existing login entry."
  },
  "loginSaveSuccess": {
@@ -1128,24 +1132,24 @@
  },
  "loginUpdateTaskSuccess": {
    "message": "Great job! You took the steps to make you and $ORGANIZATION$ more secure.",
-      "placeholders": {
-        "organization": {
-          "content": "$1"
-        }
-      },
-      "description": "Shown to user after login is updated."
+    "placeholders": {
+      "organization": {
+        "content": "$1"
+      }
+    },
+    "description": "Shown to user after login is updated."
  },
  "loginUpdateTaskSuccessAdditional": {
    "message": "Thank you for making $ORGANIZATION$ more secure. You have $TASK_COUNT$ more passwords to update.",
-      "placeholders": {
-        "organization": {
-          "content": "$1"
-        },
-        "task_count": {
-          "content": "$2"
-        }
+    "placeholders": {
+      "organization": {
+        "content": "$1"
      },
-      "description": "Shown to user after login is updated."
+      "task_count": {
+        "content": "$2"
+      }
+    },
+    "description": "Shown to user after login is updated."
  },
  "nextSecurityTaskAction": {
    "message": "Change next password",
@@ -2518,8 +2522,8 @@
        "example": "Acme Corp"
      },
      "count": {
-          "content": "$2",
-          "example": "2"
+        "content": "$2",
+        "example": "2"
      }
    }
  },
@@ -5224,4 +5228,4 @@
  "secureDevicesBody": {
    "message": "Save unlimited passwords across unlimited devices with Bitwarden mobile, browser, and desktop apps."
  }
-}
+}
--- a/apps/browser/src/autofill/background/notification.background.ts
+++ b/apps/browser/src/autofill/background/notification.background.ts
@@ -163,6 +163,7 @@ export default class NotificationBackground {
   * Gets the current active tab and retrieves the relevant decrypted cipher
   * for the tab's URL. It constructs and returns an array of `NotificationCipherData` objects or a singular object.
   * If no active tab or URL is found, it returns an empty array.
+   * If new login, returns a preview of the cipher.
   *
   * @returns {Promise<NotificationCipherData[]>}
   */
@@ -175,53 +176,94 @@ export default class NotificationBackground {
      firstValueFrom(this.accountService.activeAccount$.pipe(getOptionalUserId)),
    ]);

+    if (!currentTab?.url || !activeUserId) {
+      return [];
+    }
+
    const [decryptedCiphers, organizations] = await Promise.all([
-      this.cipherService.getAllDecryptedForUrl(currentTab?.url, activeUserId),
+      this.cipherService.getAllDecryptedForUrl(currentTab.url, activeUserId),
      firstValueFrom(this.organizationService.organizations$(activeUserId)),
    ]);

    const iconsServerUrl = env.getIconsUrl();

-    const toNotificationData = (view: CipherView): NotificationCipherData => {
-      const { id, name, reprompt, favorite, login, organizationId } = view;
+    const getOrganizationType = (orgId?: string) =>
+      organizations.find((org) => org.id === orgId)?.productTierType;

-      const type = organizations.find((org) => org.id === organizationId)?.productTierType;
+    const cipherQueueMessage = this.notificationQueue.find(
+      (message): message is AddChangePasswordQueueMessage | AddLoginQueueMessage =>
+        message.type === NotificationQueueMessageType.ChangePassword ||
+        message.type === NotificationQueueMessageType.AddLogin,
+    );

-      const organizationCategories: OrganizationCategory[] = [];
+    if (cipherQueueMessage) {
+      const cipherView =
+        cipherQueueMessage.type === NotificationQueueMessageType.ChangePassword
+          ? await this.getDecryptedCipherById(cipherQueueMessage.cipherId, activeUserId)
+          : this.convertAddLoginQueueMessageToCipherView(cipherQueueMessage);
+
+      const organizationType = getOrganizationType(cipherView.organizationId);
+      return [
+        this.convertToNotificationCipherData(
+          cipherView,
+          iconsServerUrl,
+          showFavicons,
+          organizationType,
+        ),
+      ];
+    }
+
+    return decryptedCiphers.map((view) =>
+      this.convertToNotificationCipherData(
+        view,
+        iconsServerUrl,
+        showFavicons,
+        getOrganizationType(view.organizationId),
+      ),
+    );
+  }
+
+  /**
+   * Converts a CipherView and organization type into a NotificationCipherData object
+   * for use in the notification bar.
+   *
+   * @returns A NotificationCipherData object containing the relevant cipher information.
+   */
+
+  convertToNotificationCipherData(
+    view: CipherView,
+    iconsServerUrl: string,
+    showFavicons: boolean,
+    organizationType?: ProductTierType,
+  ): NotificationCipherData {
+    const { id, name, reprompt, favorite, login } = view;
+
+    const organizationCategories: OrganizationCategory[] = [];
+
+    if (organizationType != null) {
      if (
        [ProductTierType.Teams, ProductTierType.Enterprise, ProductTierType.TeamsStarter].includes(
-          type,
+          organizationType,
        )
      ) {
        organizationCategories.push(OrganizationCategories.business);
      }
-      if ([ProductTierType.Families, ProductTierType.Free].includes(type)) {
+
+      if ([ProductTierType.Families, ProductTierType.Free].includes(organizationType)) {
        organizationCategories.push(OrganizationCategories.family);
      }
-
-      return {
-        id,
-        name,
-        type: CipherType.Login,
-        reprompt,
-        favorite,
-        ...(organizationCategories.length ? { organizationCategories } : {}),
-        icon: buildCipherIcon(iconsServerUrl, view, showFavicons),
-        login: login && { username: login.username },
-      };
-    };
-
-    const changeItem = this.notificationQueue.find(
-      (message): message is AddChangePasswordQueueMessage =>
-        message.type === NotificationQueueMessageType.ChangePassword,
-    );
-
-    if (changeItem) {
-      const cipherView = await this.getDecryptedCipherById(changeItem.cipherId, activeUserId);
-      return [toNotificationData(cipherView)];
    }

-    return decryptedCiphers.map(toNotificationData);
+    return {
+      id,
+      name,
+      type: CipherType.Login,
+      reprompt,
+      favorite,
+      ...(organizationCategories.length ? { organizationCategories } : {}),
+      icon: buildCipherIcon(iconsServerUrl, view, showFavicons),
+      login: login && { username: login.username },
+    };
  }

  /**
--- a/apps/browser/src/autofill/content/components/buttons/edit-button.ts
+++ b/apps/browser/src/autofill/content/components/buttons/edit-button.ts
@@ -21,6 +21,7 @@ export function EditButton({
    <button
      type="button"
      title=${buttonText}
+      aria-label=${buttonText}
      class=${editButtonStyles({ disabled, theme })}
      @click=${(event: Event) => {
        if (!disabled) {
--- a/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
@@ -25,7 +25,7 @@ export function CipherAction({
      })
    : EditButton({
        buttonAction: handleAction,
-        buttonText: i18n.notificationEdit,
+        buttonText: i18n.notificationEditTooltip,
        theme,
      });
 }
--- a/apps/browser/src/autofill/content/components/icons/pencil-square.ts
+++ b/apps/browser/src/autofill/content/components/icons/pencil-square.ts
@@ -8,7 +8,7 @@ export function PencilSquare({ color, disabled, theme }: IconProps) {
  const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;

  return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none" aria-hidden="true">
      <path
        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
        d="M11.013.677a1.75 1.75 0 0 1 2.474 0l.836.836a1.75 1.75 0 0 1 0 2.475L9.03 9.28a.75.75 0 0 1-.348.197l-3 .75a.75.75 0 0 1-.91-.91l.75-3a.75.75 0 0 1 .198-.348L11.013.677Zm1.414 1.06a.25.25 0 0 0-.354 0l-.646.647a.75.75 0 0 1 .103.086l1 1a.751.751 0 0 1 .087.103l.646-.646a.25.25 0 0 0 0-.353l-.836-.836Zm-.854 2.88a.752.752 0 0 1-.103-.087l-1-1a.756.756 0 0 1-.087-.103L6.928 6.884 6.531 8.47l1.586-.397 3.456-3.456Z"
--- a/apps/browser/src/autofill/content/components/notification/container.ts
+++ b/apps/browser/src/autofill/content/components/notification/container.ts
@@ -96,9 +96,9 @@ const notificationContainerStyles = (theme: Theme) => css`
 function getHeaderMessage(i18n: { [key: string]: string }, type?: NotificationType) {
  switch (type) {
    case NotificationTypes.Add:
-      return i18n.saveAsNewLoginAction;
+      return i18n.saveLogin;
    case NotificationTypes.Change:
-      return i18n.updateLoginPrompt;
+      return i18n.updateLogin;
    case NotificationTypes.Unlock:
      return "";
    default:
--- a/apps/browser/src/autofill/notification/bar.ts
+++ b/apps/browser/src/autofill/notification/bar.ts
@@ -70,6 +70,7 @@ function getI18n() {
    notificationChangeDesc: chrome.i18n.getMessage("notificationChangeDesc"),
    notificationUpdate: chrome.i18n.getMessage("notificationChangeSave"),
    notificationEdit: chrome.i18n.getMessage("edit"),
+    notificationEditTooltip: chrome.i18n.getMessage("notificationEditTooltip"),
    notificationUnlock: chrome.i18n.getMessage("notificationUnlock"),
    notificationUnlockDesc: chrome.i18n.getMessage("notificationUnlockDesc"),
    notificationViewAria: chrome.i18n.getMessage("notificationViewAria"),
@@ -77,10 +78,10 @@ function getI18n() {
    saveAsNewLoginAction: chrome.i18n.getMessage("saveAsNewLoginAction"),
    saveFailure: chrome.i18n.getMessage("saveFailure"),
    saveFailureDetails: chrome.i18n.getMessage("saveFailureDetails"),
-    saveLoginPrompt: chrome.i18n.getMessage("saveLoginPrompt"),
+    saveLogin: chrome.i18n.getMessage("saveLogin"),
    typeLogin: chrome.i18n.getMessage("typeLogin"),
    updateLoginAction: chrome.i18n.getMessage("updateLoginAction"),
-    updateLoginPrompt: chrome.i18n.getMessage("updateLoginPrompt"),
+    updateLogin: chrome.i18n.getMessage("updateLogin"),
    vault: chrome.i18n.getMessage("vault"),
    view: chrome.i18n.getMessage("view"),
  };