(
+ (options, { id, name }: FolderView) => [
+ ...options,
+ {
+ icon: Folder,
+ text: name,
+ value: id === null ? "0" : id,
+ default: id === null,
+ },
+ ],
+ [],
+ )
+ : [];
+
+ return html`
+ ${ButtonRow({
+ theme,
+ primaryButton,
+ selectButtons: [
+ ...(organizationOptions.length > 1
+ ? [
+ {
+ id: "organization",
+ label: "Vault", // @TODO localize
+ options: organizationOptions,
+ },
+ ]
+ : []),
+ ...(folderOptions.length > 1
+ ? [
+ {
+ id: "folder",
+ label: "Folder", // @TODO localize
+ options: folderOptions,
+ },
+ ]
+ : []),
+ ],
+ })}
+ `;
+}
diff --git a/apps/browser/src/autofill/content/components/notification/confirmation-container.ts b/apps/browser/src/autofill/content/components/notification/confirmation-container.ts
new file mode 100644
index 00000000000..0666859ac44
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/notification/confirmation-container.ts
@@ -0,0 +1,110 @@
+import { css } from "@emotion/css";
+import { html } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
+
+import {
+ NotificationBarIframeInitData,
+ NotificationTypes,
+ NotificationType,
+} from "../../../notification/abstractions/notification-bar";
+import { themes, spacing } from "../constants/styles";
+
+import { NotificationConfirmationBody } from "./confirmation";
+import {
+ NotificationHeader,
+ componentClassPrefix as notificationHeaderClassPrefix,
+} from "./header";
+
+export function NotificationConfirmationContainer({
+ error,
+ handleCloseNotification,
+ handleOpenVault,
+ i18n,
+ theme = ThemeTypes.Light,
+ type,
+ username,
+}: NotificationBarIframeInitData & {
+ handleCloseNotification: (e: Event) => void;
+ handleOpenVault: (e: Event) => void;
+} & {
+ error?: string;
+ i18n: { [key: string]: string };
+ type: NotificationType;
+ username: string;
+}) {
+ const headerMessage = getHeaderMessage(i18n, type, error);
+ const confirmationMessage = getConfirmationMessage(i18n, username, type, error);
+ const buttonText = error ? i18n.newItem : i18n.view;
+
+ return html`
+
+ ${NotificationHeader({
+ handleCloseNotification,
+ message: headerMessage,
+ theme,
+ })}
+ ${NotificationConfirmationBody({
+ buttonText,
+ confirmationMessage,
+ error: error,
+ handleOpenVault,
+ theme,
+ })}
+
+ `;
+}
+
+const notificationContainerStyles = (theme: Theme) => css`
+ position: absolute;
+ right: 20px;
+ border: 1px solid ${themes[theme].secondary["300"]};
+ border-radius: ${spacing["4"]};
+ box-shadow: -2px 4px 6px 0px #0000001a;
+ background-color: ${themes[theme].background.alt};
+ width: 400px;
+ overflow: hidden;
+
+ [class*="${notificationHeaderClassPrefix}-"] {
+ border-radius: ${spacing["4"]} ${spacing["4"]} 0 0;
+ border-bottom: 0.5px solid ${themes[theme].secondary["300"]};
+ }
+`;
+
+function getConfirmationMessage(
+ i18n: { [key: string]: string },
+ username: string,
+ type?: NotificationType,
+ error?: string,
+) {
+ const loginSaveSuccessDetails = chrome.i18n.getMessage("loginSaveSuccessDetails", [username]);
+ const loginUpdatedSuccessDetails = chrome.i18n.getMessage("loginUpdatedSuccessDetails", [
+ username,
+ ]);
+
+ if (error) {
+ return i18n.saveFailureDetails;
+ }
+ return type === "add" ? loginSaveSuccessDetails : loginUpdatedSuccessDetails;
+}
+
+function getHeaderMessage(
+ i18n: { [key: string]: string },
+ type?: NotificationType,
+ error?: string,
+) {
+ if (error) {
+ return i18n.saveFailure;
+ }
+
+ switch (type) {
+ case NotificationTypes.Add:
+ return i18n.loginSaveSuccess;
+ case NotificationTypes.Change:
+ return i18n.loginUpdateSuccess;
+ case NotificationTypes.Unlock:
+ return "";
+ default:
+ return undefined;
+ }
+}
diff --git a/apps/browser/src/autofill/content/components/notification/confirmation-message.ts b/apps/browser/src/autofill/content/components/notification/confirmation-message.ts
new file mode 100644
index 00000000000..d6f7ba3024d
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/notification/confirmation-message.ts
@@ -0,0 +1,53 @@
+import { css } from "@emotion/css";
+import { html } from "lit";
+
+import { Theme } from "@bitwarden/common/platform/enums";
+
+import { themes } from "../constants/styles";
+
+export function NotificationConfirmationMessage({
+ buttonText,
+ confirmationMessage,
+ handleClick,
+ theme,
+}: {
+ buttonText: string;
+ confirmationMessage: string;
+ handleClick: (e: Event) => void;
+ theme: Theme;
+}) {
+ return html`
+ ${confirmationMessage}
+ ${buttonText}
+ `;
+}
+
+const baseTextStyles = css`
+ flex-grow: 1;
+ overflow-x: hidden;
+ text-align: left;
+ text-overflow: ellipsis;
+ line-height: 24px;
+ font-family: "DM Sans", sans-serif;
+ font-size: 16px;
+`;
+
+const notificationConfirmationMessageStyles = (theme: Theme) => css`
+ ${baseTextStyles}
+ color: ${themes[theme].text.main};
+ font-weight: 400;
+`;
+
+const notificationConfirmationButtonTextStyles = (theme: Theme) => css`
+ ${baseTextStyles}
+ color: ${themes[theme].primary[600]};
+ font-weight: 700;
+ cursor: pointer;
+`;
diff --git a/apps/browser/src/autofill/content/components/notification/confirmation.ts b/apps/browser/src/autofill/content/components/notification/confirmation.ts
new file mode 100644
index 00000000000..8c213a7663f
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/notification/confirmation.ts
@@ -0,0 +1,59 @@
+import createEmotion from "@emotion/css/create-instance";
+import { html } from "lit";
+
+import { Theme } from "@bitwarden/common/platform/enums";
+
+import { themes } from "../constants/styles";
+import { PartyHorn, Warning } from "../icons";
+
+import { NotificationConfirmationMessage } from "./confirmation-message";
+
+export const componentClassPrefix = "notification-confirmation-body";
+
+const { css } = createEmotion({
+ key: componentClassPrefix,
+});
+
+export function NotificationConfirmationBody({
+ buttonText,
+ error,
+ confirmationMessage,
+ theme,
+ handleOpenVault,
+}: {
+ error?: string;
+ buttonText: string;
+ confirmationMessage: string;
+ theme: Theme;
+ handleOpenVault: (e: Event) => void;
+}) {
+ const IconComponent = !error ? PartyHorn : Warning;
+ return html`
+
+
${IconComponent({ theme })}
+ ${confirmationMessage && buttonText
+ ? NotificationConfirmationMessage({
+ handleClick: handleOpenVault,
+ confirmationMessage,
+ theme,
+ buttonText,
+ })
+ : null}
+
${NotificationHeader({
handleCloseNotification,
- standalone: showBody,
message: headerMessage,
+ standalone: showBody,
theme,
})}
${showBody
? NotificationBody({
+ handleEditOrUpdateAction,
ciphers,
notificationType: type,
theme,
})
: null}
${NotificationFooter({
- theme,
+ handleSaveAction,
+ folders,
+ i18n,
notificationType: type,
+ organizations,
+ theme,
})}
`;
@@ -91,8 +98,6 @@ function getHeaderMessage(i18n: { [key: string]: string }, type?: NotificationTy
return i18n.updateLoginPrompt;
case NotificationTypes.Unlock:
return "";
- case NotificationTypes.FilelessImport:
- return "";
default:
return undefined;
}
diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts
index 91a72dc9aab..8ed69a96ad9 100644
--- a/apps/browser/src/autofill/content/components/notification/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/footer.ts
@@ -1,5 +1,5 @@
import { css } from "@emotion/css";
-import { html } from "lit";
+import { html, nothing } from "lit";
import { Theme } from "@bitwarden/common/platform/enums";
@@ -7,26 +7,44 @@ import {
NotificationType,
NotificationTypes,
} from "../../../notification/abstractions/notification-bar";
+import { OrgView, FolderView } from "../common-types";
import { spacing, themes } from "../constants/styles";
-import { ActionRow } from "../rows/action-row";
-import { ButtonRow } from "../rows/button-row";
+
+import { NotificationButtonRow } from "./button-row";
+
+export type NotificationFooterProps = {
+ folders?: FolderView[];
+ i18n: { [key: string]: string };
+ notificationType?: NotificationType;
+ organizations?: OrgView[];
+ theme: Theme;
+ handleSaveAction: (e: Event) => void;
+};
export function NotificationFooter({
+ folders,
+ i18n,
notificationType,
+ organizations,
theme,
-}: {
- notificationType?: NotificationType;
- theme: Theme;
-}) {
+ handleSaveAction,
+}: NotificationFooterProps) {
const isChangeNotification = notificationType === NotificationTypes.Change;
- // @TODO localize
- const saveNewItemText = "Save as new login";
+ const primaryButtonText = i18n.saveAction;
return html`
`;
}
@@ -38,5 +56,6 @@ const notificationFooterStyles = ({ theme }: { theme: Theme }) => css`
:last-child {
border-radius: 0 0 ${spacing["4"]} ${spacing["4"]};
+ padding-bottom: ${spacing[4]};
}
`;
diff --git a/apps/browser/src/autofill/content/components/notification/header.ts b/apps/browser/src/autofill/content/components/notification/header.ts
index 85f6e48cd5d..50c2c629942 100644
--- a/apps/browser/src/autofill/content/components/notification/header.ts
+++ b/apps/browser/src/autofill/content/components/notification/header.ts
@@ -17,12 +17,12 @@ const { css } = createEmotion({
export function NotificationHeader({
message,
- standalone,
+ standalone = false,
theme = ThemeTypes.Light,
handleCloseNotification,
}: {
message?: string;
- standalone: boolean;
+ standalone?: boolean;
theme: Theme;
handleCloseNotification: (e: Event) => void;
}) {
@@ -49,7 +49,7 @@ const notificationHeaderStyles = ({
display: flex;
align-items: center;
justify-content: flex-start;
- background-color: ${themes[theme].background.alt};
+ background-color: ${themes[theme].background};
padding: 12px 16px 8px 16px;
white-space: nowrap;
diff --git a/apps/browser/src/autofill/content/components/option-selection/option-item.ts b/apps/browser/src/autofill/content/components/option-selection/option-item.ts
new file mode 100644
index 00000000000..619d77e63d3
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/option-selection/option-item.ts
@@ -0,0 +1,81 @@
+import createEmotion from "@emotion/css/create-instance";
+import { html, nothing } from "lit";
+
+import { Theme } from "@bitwarden/common/platform/enums";
+
+import { IconProps, Option } from "../common-types";
+import { themes, spacing } from "../constants/styles";
+
+export const optionItemTagName = "option-item";
+
+const { css } = createEmotion({
+ key: optionItemTagName,
+});
+
+export function OptionItem({
+ icon,
+ text,
+ value,
+ theme,
+ handleSelection,
+}: Option & {
+ theme: Theme;
+ handleSelection: () => void;
+}) {
+ const handleSelectionKeyUpProxy = (event: KeyboardEvent) => {
+ const listenedForKeys = new Set(["Enter", "Space"]);
+ if (listenedForKeys.has(event.code) && event.target instanceof Element) {
+ handleSelection();
+ }
+
+ return;
+ };
+
+ const iconProps: IconProps = { color: themes[theme].text.main, theme };
+ const itemIcon = icon?.(iconProps);
+
+ return html`
+ ${itemIcon ? html`
${itemIcon}
` : nothing}
+
${text || value}
+
+ ${label ? html`
${label}
` : nothing}
+
+ ${options.map((option) =>
+ OptionItem({ ...option, theme, handleSelection: () => handleOptionSelection(option) }),
+ )}
+
+
+ ${OptionSelectionButton({
+ disabled: this.disabled,
+ icon: this.selection?.icon,
+ text: this.selection?.text,
+ theme: this.theme,
+ toggledOn: this.showMenu,
+ handleButtonClick: this.handleButtonClick,
+ })}
+ ${this.showMenu
+ ? OptionItems({
+ label: this.label,
+ options: this.options,
+ theme: this.theme,
+ topOffset: this.menuTopOffset,
+ handleOptionSelection: this.handleOptionSelection,
+ })
+ : nothing}
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ [optionSelectionTagName]: OptionSelection;
+ }
+}
+
+export default customElements.define(optionSelectionTagName, OptionSelection);
+
+function getDefaultOption(options: Option[] = []) {
+ return options.find((option: Option) => option.default) || options[0];
+}
+
+const optionSelectionStyles = ({ menuIsEndJustified }: { menuIsEndJustified: boolean }) => css`
+ display: flex;
+ justify-content: ${menuIsEndJustified ? "flex-end" : "flex-start"};
+
+ > div,
+ > button {
+ width: 100%;
+ }
+`;
diff --git a/apps/browser/src/autofill/content/components/package.json b/apps/browser/src/autofill/content/components/package.json
new file mode 100644
index 00000000000..8dbe9e7f516
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/package.json
@@ -0,0 +1,7 @@
+{
+ "name": "@bitwarden/lit-components",
+ "version": "2025.1.1",
+ "scripts": {
+ "storybook:lit": "storybook dev -p 6006 -c ./.lit-storybook"
+ }
+}
diff --git a/apps/browser/src/autofill/content/components/rows/button-row.ts b/apps/browser/src/autofill/content/components/rows/button-row.ts
index ce14a242e97..80dcd0de125 100644
--- a/apps/browser/src/autofill/content/components/rows/button-row.ts
+++ b/apps/browser/src/autofill/content/components/rows/button-row.ts
@@ -1,46 +1,53 @@
import { css } from "@emotion/css";
-import { html, TemplateResult } from "lit";
+import { html, nothing } from "lit";
import { Theme } from "@bitwarden/common/platform/enums";
import { ActionButton } from "../../../content/components/buttons/action-button";
-import { spacing, themes } from "../../../content/components/constants/styles";
-import { Folder, User } from "../../../content/components/icons";
-import { DropdownMenu } from "../dropdown-menu";
+import { spacing } from "../../../content/components/constants/styles";
+import { Option } from "../common-types";
+import { optionSelectionTagName } from "../option-selection/option-selection";
-export function ButtonRow({ theme }: { theme: Theme }) {
+export type ButtonRowProps = {
+ theme: Theme;
+ primaryButton: {
+ text: string;
+ handlePrimaryButtonClick: (args: any) => void;
+ };
+ selectButtons?: {
+ id: string;
+ label?: string;
+ options: Option[];
+ handleSelectionUpdate?: (args: any) => void;
+ }[];
+};
+
+export function ButtonRow({ theme, primaryButton, selectButtons }: ButtonRowProps) {
return html`
`;
}
-function DropdownContainer({ children }: { children: TemplateResult[] }) {
- return html` ${children}
`;
-}
-
const buttonRowStyles = css`
gap: 16px;
display: flex;
@@ -49,6 +56,7 @@ const buttonRowStyles = css`
width: 100%;
max-height: 52px;
white-space: nowrap;
+ padding-top: ${spacing[1]};
> button {
max-width: min-content;
@@ -60,14 +68,16 @@ const buttonRowStyles = css`
}
`;
-const dropdownContainerStyles = css`
- gap: 8px;
+const optionSelectionsStyles = css`
+ gap: ${spacing["2"]};
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
- > div {
- min-width: calc(50% - ${spacing["1.5"]});
+ > ${optionSelectionTagName} {
+ /* assumes two option selections */
+ max-width: calc(50% - ${spacing["1.5"]});
+ min-width: 120px;
}
`;
diff --git a/apps/browser/src/autofill/content/content-message-handler.spec.ts b/apps/browser/src/autofill/content/content-message-handler.spec.ts
index 226fcb4bd61..99d0d9031cf 100644
--- a/apps/browser/src/autofill/content/content-message-handler.spec.ts
+++ b/apps/browser/src/autofill/content/content-message-handler.spec.ts
@@ -1,6 +1,6 @@
import { mock } from "jest-mock-extended";
-import { VaultOnboardingMessages } from "@bitwarden/common/vault/enums/vault-onboarding.enum";
+import { VaultMessages } from "@bitwarden/common/vault/enums/vault-messages.enum";
import { postWindowMessage, sendMockExtensionMessage } from "../spec/testing-utils";
@@ -19,6 +19,8 @@ describe("ContentMessageHandler", () => {
);
beforeEach(() => {
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./content-message-handler");
});
@@ -32,10 +34,10 @@ describe("ContentMessageHandler", () => {
const mockPostMessage = jest.fn();
window.postMessage = mockPostMessage;
- postWindowMessage({ command: VaultOnboardingMessages.checkBwInstalled });
+ postWindowMessage({ command: VaultMessages.checkBwInstalled });
expect(mockPostMessage).toHaveBeenCalledWith({
- command: VaultOnboardingMessages.HasBwInstalled,
+ command: VaultMessages.HasBwInstalled,
});
});
});
diff --git a/apps/browser/src/autofill/content/content-message-handler.ts b/apps/browser/src/autofill/content/content-message-handler.ts
index ef542896492..55e0c071a55 100644
--- a/apps/browser/src/autofill/content/content-message-handler.ts
+++ b/apps/browser/src/autofill/content/content-message-handler.ts
@@ -1,10 +1,25 @@
-import { VaultOnboardingMessages } from "@bitwarden/common/vault/enums/vault-onboarding.enum";
+import { VaultMessages } from "@bitwarden/common/vault/enums/vault-messages.enum";
import {
ContentMessageWindowData,
ContentMessageWindowEventHandlers,
} from "./abstractions/content-message-handler";
+/**
+ * Handlers for window messages from the content script.
+ * NOTE: These handlers should be above the event listener to ensure they are defined before being used.
+ */
+const windowMessageHandlers: ContentMessageWindowEventHandlers = {
+ authResult: ({ data, referrer }: { data: any; referrer: string }) =>
+ handleAuthResultMessage(data, referrer),
+ webAuthnResult: ({ data, referrer }: { data: any; referrer: string }) =>
+ handleWebAuthnResultMessage(data, referrer),
+ [VaultMessages.checkBwInstalled]: () => handleExtensionInstallCheck(),
+ duoResult: ({ data, referrer }: { data: any; referrer: string }) =>
+ handleDuoResultMessage(data, referrer),
+ [VaultMessages.OpenPopup]: () => handleOpenPopupMessage(),
+};
+
/**
* IMPORTANT: Safari seems to have a bug where it doesn't properly handle
* window message events from content scripts when the listener these events
@@ -18,24 +33,11 @@ setupExtensionDisconnectAction(() => {
chrome.runtime.onMessage.removeListener(handleExtensionMessage);
});
-/**
- * Handlers for window messages from the content script.
- */
-const windowMessageHandlers: ContentMessageWindowEventHandlers = {
- authResult: ({ data, referrer }: { data: any; referrer: string }) =>
- handleAuthResultMessage(data, referrer),
- webAuthnResult: ({ data, referrer }: { data: any; referrer: string }) =>
- handleWebAuthnResultMessage(data, referrer),
- checkIfBWExtensionInstalled: () => handleExtensionInstallCheck(),
- duoResult: ({ data, referrer }: { data: any; referrer: string }) =>
- handleDuoResultMessage(data, referrer),
-};
-
/**
* Handles the post to the web vault showing the extension has been installed
*/
function handleExtensionInstallCheck() {
- window.postMessage({ command: VaultOnboardingMessages.HasBwInstalled });
+ window.postMessage({ command: VaultMessages.HasBwInstalled });
}
/**
@@ -71,6 +73,10 @@ function handleWebAuthnResultMessage(data: ContentMessageWindowData, referrer: s
sendExtensionRuntimeMessage({ command, data: data.data, remember, referrer });
}
+function handleOpenPopupMessage() {
+ sendExtensionRuntimeMessage({ command: VaultMessages.OpenPopup });
+}
+
/**
* Handles the window message event.
*
diff --git a/apps/browser/src/autofill/content/misc-utils.ts b/apps/browser/src/autofill/content/misc-utils.ts
deleted file mode 100644
index 7fe884f1d51..00000000000
--- a/apps/browser/src/autofill/content/misc-utils.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { TabMessage } from "../../types/tab-messages";
-
-async function copyText(text: string) {
- await window.navigator.clipboard.writeText(text);
-}
-
-async function onMessageListener(
- msg: TabMessage,
- sender: chrome.runtime.MessageSender,
- responseCallback: (response: unknown) => void,
-) {
- switch (msg.command) {
- case "copyText":
- await copyText(msg.text);
- break;
- case "clearClipboard":
- await copyText("\u0000");
- break;
- default:
- }
-}
-
-chrome.runtime.onMessage.addListener(onMessageListener);
diff --git a/apps/browser/src/autofill/content/notification-bar.ts b/apps/browser/src/autofill/content/notification-bar.ts
index b260bfef632..bf3d562a0ef 100644
--- a/apps/browser/src/autofill/content/notification-bar.ts
+++ b/apps/browser/src/autofill/content/notification-bar.ts
@@ -1,6 +1,7 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
-import { ServerConfig } from "../../../../../libs/common/src/platform/abstractions/config/server-config";
+import { ServerConfig } from "@bitwarden/common/platform/abstractions/config/server-config";
+
import {
AddLoginMessageData,
ChangePasswordMessageData,
@@ -192,6 +193,8 @@ async function loadNotificationBar() {
{
command: "saveCipherAttemptCompleted",
error: msg.data?.error,
+ username: msg.data?.username,
+ cipherId: msg.data?.cipherId,
},
"*",
);
@@ -842,6 +845,7 @@ async function loadNotificationBar() {
theme: typeData.theme,
removeIndividualVault: typeData.removeIndividualVault,
importType: typeData.importType,
+ launchTimestamp: typeData.launchTimestamp,
};
const notificationBarUrl = "notification/bar.html";
@@ -851,10 +855,10 @@ async function loadNotificationBar() {
}
closeBar(false);
- openBar(type, notificationBarUrl, notificationBarInitData);
+ void openBar(type, notificationBarUrl, notificationBarInitData);
}
- function openBar(
+ async function openBar(
type: string,
barPage: string,
notificationBarInitData: NotificationBarIframeInitData,
@@ -864,22 +868,59 @@ async function loadNotificationBar() {
if (document.body == null) {
return;
}
+ const useComponentBar: boolean = await sendExtensionMessage("notificationRefreshFlagValue");
setupInitNotificationBarMessageListener(notificationBarInitData);
const barPageUrl: string = chrome.runtime.getURL(barPage);
+ function getIframeStyle(useComponentBar: boolean): string {
+ const isNotificationFresh =
+ notificationBarInitData.launchTimestamp &&
+ Date.now() - notificationBarInitData.launchTimestamp < 500;
+
+ const baseStyle = useComponentBar
+ ? isNotificationFresh
+ ? "height: calc(276px + 50px); width: 450px; right: 0; transform:translateX(100%); opacity:0;"
+ : "height: calc(276px + 25px); width: 450px; right: 0; transform:translateX(0%); opacity:1;"
+ : "height: 42px; width: 100%;";
+
+ const transitionStyle =
+ isNotificationFresh && useComponentBar
+ ? "transition: transform 0.15s ease-in, opacity 0.15s ease; transform:translateX(0%); opacity:1; transition-delay: 0.25s;"
+ : "";
+
+ notificationBarIframe.style.cssText = baseStyle + " border: 0; min-height: initial;";
+
+ if (isNotificationFresh && useComponentBar) {
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ notificationBarIframe.style.cssText += transitionStyle;
+ });
+ });
+ }
+
+ return baseStyle + " border: 0; min-height: initial;";
+ }
+
notificationBarIframe = document.createElement("iframe");
- notificationBarIframe.style.cssText =
- "height: 42px; width: 100%; border: 0; min-height: initial;";
+ notificationBarIframe.style.cssText = getIframeStyle(useComponentBar);
notificationBarIframe.id = "bit-notification-bar-iframe";
notificationBarIframe.src = barPageUrl;
+ function getFrameStyle(useComponentBar: boolean): string {
+ return (
+ (useComponentBar
+ ? "height: calc(276px + 50px); width: 450px; right: 0;"
+ : "height: 42px; width: 100%; left: 0;") +
+ " top: 0; padding: 0; position: fixed;" +
+ " z-index: 2147483647; visibility: visible;"
+ );
+ }
+
const frameDiv = document.createElement("div");
frameDiv.setAttribute("aria-live", "polite");
frameDiv.id = "bit-notification-bar";
- frameDiv.style.cssText =
- "height: 42px; width: 100%; top: 0; left: 0; padding: 0; position: fixed; " +
- "z-index: 2147483647; visibility: visible;";
+ frameDiv.style.cssText = getFrameStyle(useComponentBar);
frameDiv.appendChild(notificationBarIframe);
document.body.appendChild(frameDiv);
diff --git a/apps/browser/src/autofill/content/trigger-autofill-script-injection.spec.ts b/apps/browser/src/autofill/content/trigger-autofill-script-injection.spec.ts
index 1ad985bc8e9..317f63e756c 100644
--- a/apps/browser/src/autofill/content/trigger-autofill-script-injection.spec.ts
+++ b/apps/browser/src/autofill/content/trigger-autofill-script-injection.spec.ts
@@ -6,6 +6,8 @@ describe("TriggerAutofillScriptInjection", () => {
describe("init", () => {
it("sends a message to the extension background", () => {
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("../content/trigger-autofill-script-injection");
expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
diff --git a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
index 2c22097f3d0..128dd189878 100644
--- a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
+++ b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
@@ -110,6 +110,7 @@ describe("OverlayBackground", () => {
i18nService,
platformUtilsService,
themeStateService,
+ accountService,
);
jest
@@ -205,7 +206,7 @@ describe("OverlayBackground", () => {
await overlayBackground.updateOverlayCiphers();
expect(BrowserApi.getTabFromCurrentWindowId).toHaveBeenCalled();
- expect(cipherService.getAllDecryptedForUrl).toHaveBeenCalledWith(url);
+ expect(cipherService.getAllDecryptedForUrl).toHaveBeenCalledWith(url, mockUserId);
expect(overlayBackground["cipherService"].sortCiphersByLastUsedThenName).toHaveBeenCalled();
expect(overlayBackground["overlayLoginCiphers"]).toStrictEqual(
new Map([
@@ -354,7 +355,7 @@ describe("OverlayBackground", () => {
icon: {
fallbackImage: "",
icon: "bwi-credit-card",
- image: undefined,
+ image: null,
imageEnabled: true,
},
id: "overlay-cipher-2",
@@ -369,7 +370,7 @@ describe("OverlayBackground", () => {
icon: {
fallbackImage: "",
icon: "bwi-credit-card",
- image: undefined,
+ image: null,
imageEnabled: true,
},
id: "overlay-cipher-3",
@@ -478,7 +479,6 @@ describe("OverlayBackground", () => {
it("will set up onMessage and onConnect listeners", () => {
overlayBackground["setupExtensionMessageListeners"]();
- // eslint-disable-next-line
expect(chrome.runtime.onMessage.addListener).toHaveBeenCalled();
expect(chrome.runtime.onConnect.addListener).toHaveBeenCalled();
});
diff --git a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
index 5dfade0f863..d0fad4cd00e 100644
--- a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
+++ b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
@@ -1,7 +1,8 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
-import { firstValueFrom } from "rxjs";
+import { firstValueFrom, map } from "rxjs";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
import { SHOW_AUTOFILL_BUTTON } from "@bitwarden/common/autofill/constants";
@@ -106,6 +107,7 @@ class LegacyOverlayBackground implements OverlayBackgroundInterface {
private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService,
private themeStateService: ThemeStateService,
+ private accountService: AccountService,
) {}
/**
@@ -152,9 +154,13 @@ class LegacyOverlayBackground implements OverlayBackgroundInterface {
}
this.overlayLoginCiphers = new Map();
- const ciphersViews = (await this.cipherService.getAllDecryptedForUrl(currentTab.url)).sort(
- (a, b) => this.cipherService.sortCiphersByLastUsedThenName(a, b),
+
+ const activeUserId = await firstValueFrom(
+ this.accountService.activeAccount$.pipe(map((a) => a?.id)),
);
+ const ciphersViews = (
+ await this.cipherService.getAllDecryptedForUrl(currentTab.url, activeUserId)
+ ).sort((a, b) => this.cipherService.sortCiphersByLastUsedThenName(a, b));
for (let cipherIndex = 0; cipherIndex < ciphersViews.length; cipherIndex++) {
this.overlayLoginCiphers.set(`overlay-cipher-${cipherIndex}`, ciphersViews[cipherIndex]);
}
@@ -660,10 +666,16 @@ class LegacyOverlayBackground implements OverlayBackgroundInterface {
cipherView.type = CipherType.Login;
cipherView.login = loginView;
- await this.cipherService.setAddEditCipherInfo({
- cipher: cipherView,
- collectionIds: cipherView.collectionIds,
- });
+ const activeUserId = await firstValueFrom(
+ this.accountService.activeAccount$.pipe(map((a) => a?.id)),
+ );
+ await this.cipherService.setAddEditCipherInfo(
+ {
+ cipher: cipherView,
+ collectionIds: cipherView.collectionIds,
+ },
+ activeUserId,
+ );
await this.openAddEditVaultItemPopout(sender.tab, { cipherId: cipherView.id });
await BrowserApi.sendMessage("inlineAutofillMenuRefreshAddEditCipher");
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts
index 67f7ed66885..e79cba71763 100644
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts
+++ b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts
@@ -277,32 +277,6 @@ describe("AutofillOverlayIframeService", () => {
borderColor: "#4c525f",
});
});
-
- it("updates the border to match the `nord` theme", () => {
- const message = {
- command: "initAutofillOverlayList",
- theme: ThemeType.Nord,
- };
-
- sendPortMessage(portSpy, message);
-
- expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
- borderColor: "#2E3440",
- });
- });
-
- it("updates the border to match the `solarizedDark` theme", () => {
- const message = {
- command: "initAutofillOverlayList",
- theme: ThemeType.SolarizedDark,
- };
-
- sendPortMessage(portSpy, message);
-
- expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
- borderColor: "#073642",
- });
- });
});
describe("updating the iframe's position", () => {
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts
index 402c384b8be..e0df9eb60b6 100644
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts
+++ b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts
@@ -221,12 +221,6 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
if (verifiedTheme === ThemeTypes.Dark) {
borderColor = "#4c525f";
}
- if (theme === ThemeTypes.Nord) {
- borderColor = "#2E3440";
- }
- if (theme === ThemeTypes.SolarizedDark) {
- borderColor = "#073642";
- }
if (borderColor) {
this.updateElementStyles(this.iframe, { borderColor });
}
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts
index fde98a58a5f..fd6a79733cb 100644
--- a/apps/browser/src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts
+++ b/apps/browser/src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts
@@ -2,6 +2,8 @@ import { AutofillOverlayElement } from "../../../../enums/autofill-overlay.enum"
import AutofillOverlayButton from "./autofill-overlay-button.deprecated";
+// FIXME: Remove when updating file. Eslint update
+// eslint-disable-next-line @typescript-eslint/no-require-imports
require("./legacy-button.scss");
(function () {
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts
index 714ccbfbee5..5d587bd4293 100644
--- a/apps/browser/src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts
+++ b/apps/browser/src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts
@@ -2,6 +2,8 @@ import { AutofillOverlayElement } from "../../../../enums/autofill-overlay.enum"
import AutofillOverlayList from "./autofill-overlay-list.deprecated";
+// FIXME: Remove when updating file. Eslint update
+// eslint-disable-next-line @typescript-eslint/no-require-imports
require("./legacy-list.scss");
(function () {
diff --git a/apps/browser/src/autofill/enums/notification-queue-message-type.enum.ts b/apps/browser/src/autofill/enums/notification-queue-message-type.enum.ts
index 1f5abac92b1..5a7b8fa990b 100644
--- a/apps/browser/src/autofill/enums/notification-queue-message-type.enum.ts
+++ b/apps/browser/src/autofill/enums/notification-queue-message-type.enum.ts
@@ -2,7 +2,6 @@ const NotificationQueueMessageType = {
AddLogin: "add",
ChangePassword: "change",
UnlockVault: "unlock",
- RequestFilelessImport: "fileless-import",
} as const;
type NotificationQueueMessageTypes =
diff --git a/apps/browser/src/autofill/fido2/content/fido2-content-script.spec.ts b/apps/browser/src/autofill/fido2/content/fido2-content-script.spec.ts
index 94bef354a79..8885ed6299c 100644
--- a/apps/browser/src/autofill/fido2/content/fido2-content-script.spec.ts
+++ b/apps/browser/src/autofill/fido2/content/fido2-content-script.spec.ts
@@ -60,6 +60,8 @@ describe("Fido2 Content Script", () => {
chrome.runtime.connect = jest.fn(() => portSpy);
it("destroys the messenger when the port is disconnected", () => {
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
triggerPortOnDisconnectEvent(portSpy);
@@ -75,6 +77,8 @@ describe("Fido2 Content Script", () => {
const mockResult = { credentialId: "mock" } as CreateCredentialResult;
jest.spyOn(chrome.runtime, "sendMessage").mockResolvedValue(mockResult);
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
const response = await messenger.handler!(message, new AbortController());
@@ -99,6 +103,8 @@ describe("Fido2 Content Script", () => {
data: mock(),
});
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
await messenger.handler!(message, new AbortController());
@@ -121,6 +127,8 @@ describe("Fido2 Content Script", () => {
const abortController = new AbortController();
const abortSpy = jest.spyOn(abortController.signal, "removeEventListener");
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
await messenger.handler!(message, abortController);
@@ -141,6 +149,8 @@ describe("Fido2 Content Script", () => {
abortController.abort();
});
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
await messenger.handler!(message, abortController);
@@ -161,6 +171,8 @@ describe("Fido2 Content Script", () => {
const abortController = new AbortController();
jest.spyOn(chrome.runtime, "sendMessage").mockResolvedValue({ error: errorMessage });
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
const result = messenger.handler!(message, abortController);
@@ -175,6 +187,8 @@ describe("Fido2 Content Script", () => {
contentType: "application/json",
}));
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
expect(messengerForDOMCommunicationSpy).not.toHaveBeenCalled();
@@ -193,6 +207,8 @@ describe("Fido2 Content Script", () => {
},
}));
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
expect(messengerForDOMCommunicationSpy).not.toHaveBeenCalled();
diff --git a/apps/browser/src/autofill/fido2/content/fido2-page-script-append.mv2.spec.ts b/apps/browser/src/autofill/fido2/content/fido2-page-script-append.mv2.spec.ts
index 6b9b41b5aac..69e17d26fe5 100644
--- a/apps/browser/src/autofill/fido2/content/fido2-page-script-append.mv2.spec.ts
+++ b/apps/browser/src/autofill/fido2/content/fido2-page-script-append.mv2.spec.ts
@@ -22,6 +22,8 @@ describe("FIDO2 page-script for manifest v2", () => {
it("skips appending the `page-script.js` file if the document contentType is not `text/html`", () => {
Object.defineProperty(window.document, "contentType", { value: "text/plain", writable: true });
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-page-script-append.mv2");
expect(window.document.createElement).not.toHaveBeenCalled();
@@ -33,6 +35,8 @@ describe("FIDO2 page-script for manifest v2", () => {
return node;
});
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-page-script-append.mv2");
expect(window.document.createElement).toHaveBeenCalledWith("script");
@@ -48,6 +52,8 @@ describe("FIDO2 page-script for manifest v2", () => {
return node;
});
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-page-script-append.mv2");
expect(window.document.createElement).toHaveBeenCalledWith("script");
diff --git a/apps/browser/src/autofill/fido2/content/fido2-page-script.ts b/apps/browser/src/autofill/fido2/content/fido2-page-script.ts
index fd033090cd4..4c1761c37ba 100644
--- a/apps/browser/src/autofill/fido2/content/fido2-page-script.ts
+++ b/apps/browser/src/autofill/fido2/content/fido2-page-script.ts
@@ -267,6 +267,8 @@ import { Messenger } from "./messaging/messenger";
clearWaitForFocus();
void messenger.destroy();
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (e) {
/** empty */
}
diff --git a/apps/browser/src/autofill/fido2/content/fido2-page-script.webauthn-supported.spec.ts b/apps/browser/src/autofill/fido2/content/fido2-page-script.webauthn-supported.spec.ts
index 31e8c941e86..f1aec69193b 100644
--- a/apps/browser/src/autofill/fido2/content/fido2-page-script.webauthn-supported.spec.ts
+++ b/apps/browser/src/autofill/fido2/content/fido2-page-script.webauthn-supported.spec.ts
@@ -55,6 +55,8 @@ describe("Fido2 page script with native WebAuthn support", () => {
setupMockedWebAuthnSupport();
beforeAll(() => {
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-page-script");
});
@@ -166,6 +168,8 @@ describe("Fido2 page script with native WebAuthn support", () => {
contentType: "json/application",
}));
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
expect(Messenger.forDOMCommunication).not.toHaveBeenCalled();
@@ -184,6 +188,8 @@ describe("Fido2 page script with native WebAuthn support", () => {
},
}));
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-content-script");
expect(Messenger.forDOMCommunication).not.toHaveBeenCalled();
diff --git a/apps/browser/src/autofill/fido2/content/fido2-page-script.webauthn-unsupported.spec.ts b/apps/browser/src/autofill/fido2/content/fido2-page-script.webauthn-unsupported.spec.ts
index e354453ca59..af1838ec942 100644
--- a/apps/browser/src/autofill/fido2/content/fido2-page-script.webauthn-unsupported.spec.ts
+++ b/apps/browser/src/autofill/fido2/content/fido2-page-script.webauthn-unsupported.spec.ts
@@ -50,6 +50,8 @@ describe("Fido2 page script without native WebAuthn support", () => {
const mockCreateCredentialsResult = createCreateCredentialResultMock();
const mockCredentialRequestOptions = createCredentialRequestOptionsMock();
const mockCredentialAssertResult = createAssertCredentialResultMock();
+ // FIXME: Remove when updating file. Eslint update
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
require("./fido2-page-script");
afterEach(() => {
diff --git a/apps/browser/src/autofill/models/autofill-field.ts b/apps/browser/src/autofill/models/autofill-field.ts
index 7660b4ce5f0..c0be60f1cd0 100644
--- a/apps/browser/src/autofill/models/autofill-field.ts
+++ b/apps/browser/src/autofill/models/autofill-field.ts
@@ -1,3 +1,4 @@
+import { FieldRect } from "../background/abstractions/overlay.background";
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { AutofillFieldQualifierType } from "../enums/autofill-field.enums";
@@ -124,4 +125,9 @@ export default class AutofillField {
fieldQualifier?: AutofillFieldQualifierType;
accountCreationFieldType?: InlineMenuAccountCreationFieldTypes;
+
+ /**
+ * used for totp multiline calculations
+ */
+ fieldRect?: FieldRect;
}
diff --git a/apps/browser/src/autofill/notification/abstractions/notification-bar.ts b/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
index 2e38adacb32..6e7427e3a38 100644
--- a/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
+++ b/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
@@ -1,29 +1,35 @@
import { Theme } from "@bitwarden/common/platform/enums";
+import { NotificationCipherData } from "../../../autofill/content/components/cipher/types";
+import { FolderView, OrgView } from "../../../autofill/content/components/common-types";
+
const NotificationTypes = {
Add: "add",
Change: "change",
Unlock: "unlock",
- FilelessImport: "fileless-import",
} as const;
type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
type NotificationBarIframeInitData = {
- type?: string; // @TODO use `NotificationType`
- isVaultLocked?: boolean;
- theme?: Theme;
- removeIndividualVault?: boolean;
- importType?: string;
applyRedesign?: boolean;
+ ciphers?: NotificationCipherData[];
+ folders?: FolderView[];
+ importType?: string;
+ isVaultLocked?: boolean;
launchTimestamp?: number;
+ organizations?: OrgView[];
+ removeIndividualVault?: boolean;
+ theme?: Theme;
+ type?: string; // @TODO use `NotificationType`
};
type NotificationBarWindowMessage = {
- [key: string]: any;
+ cipherId?: string;
command: string;
error?: string;
initData?: NotificationBarIframeInitData;
+ username?: string;
};
type NotificationBarWindowMessageHandlers = {
diff --git a/apps/browser/src/autofill/notification/bar.html b/apps/browser/src/autofill/notification/bar.html
index 6b0e76b5169..b686e1ec2f5 100644
--- a/apps/browser/src/autofill/notification/bar.html
+++ b/apps/browser/src/autofill/notification/bar.html
@@ -55,14 +55,4 @@