(
+ (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/container.ts b/apps/browser/src/autofill/content/components/notification/container.ts
index f98ef795749..8d80dc9fb50 100644
--- a/apps/browser/src/autofill/content/components/notification/container.ts
+++ b/apps/browser/src/autofill/content/components/notification/container.ts
@@ -9,6 +9,7 @@ import {
NotificationType,
} from "../../../notification/abstractions/notification-bar";
import { NotificationCipherData } from "../cipher/types";
+import { FolderView, OrgView } from "../common-types";
import { themes, spacing } from "../constants/styles";
import { NotificationBody, componentClassPrefix as notificationBodyClassPrefix } from "./body";
@@ -20,20 +21,24 @@ import {
export function NotificationContainer({
handleCloseNotification,
+ handleEditOrUpdateAction,
+ handleSaveAction,
+ ciphers,
+ folders,
i18n,
+ organizations,
theme = ThemeTypes.Light,
type,
- ciphers,
- handleSaveAction,
- handleEditOrUpdateAction,
}: NotificationBarIframeInitData & {
handleCloseNotification: (e: Event) => void;
handleSaveAction: (e: Event) => void;
handleEditOrUpdateAction: (e: Event) => void;
} & {
+ ciphers?: NotificationCipherData[];
+ folders?: FolderView[];
i18n: { [key: string]: string };
+ organizations?: OrgView[];
type: NotificationType; // @TODO typing override for generic `NotificationBarIframeInitData.type`
- ciphers: NotificationCipherData[];
}) {
const headerMessage = getHeaderMessage(i18n, type);
const showBody = true;
@@ -42,8 +47,8 @@ export function NotificationContainer({
${NotificationHeader({
handleCloseNotification,
- standalone: showBody,
message: headerMessage,
+ standalone: showBody,
theme,
})}
${showBody
@@ -56,9 +61,11 @@ export function NotificationContainer({
: null}
${NotificationFooter({
handleSaveAction,
- theme,
- notificationType: type,
+ folders,
i18n,
+ notificationType: type,
+ organizations,
+ theme,
})}
`;
diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts
index c604fcd196f..8ed69a96ad9 100644
--- a/apps/browser/src/autofill/content/components/notification/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/footer.ts
@@ -7,27 +7,43 @@ import {
NotificationType,
NotificationTypes,
} from "../../../notification/abstractions/notification-bar";
+import { OrgView, FolderView } from "../common-types";
import { spacing, themes } from "../constants/styles";
-import { ButtonRow } from "../rows/button-row";
-export function NotificationFooter({
- handleSaveAction,
- notificationType,
- theme,
- i18n,
-}: {
- handleSaveAction: (e: Event) => void;
+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,
+ handleSaveAction,
+}: NotificationFooterProps) {
const isChangeNotification = notificationType === NotificationTypes.Change;
- const buttonText = i18n.saveAction;
+ const primaryButtonText = i18n.saveAction;
return html`
`;
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/rows/button-row.ts b/apps/browser/src/autofill/content/components/rows/button-row.ts
index ed0ed5aac7d..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,54 +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,
- buttonAction,
- buttonText,
-}: {
+export type ButtonRowProps = {
theme: Theme;
- buttonAction: (e: Event) => void;
- buttonText: string;
-}) {
+ 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;
@@ -69,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/notification-bar.ts b/apps/browser/src/autofill/content/notification-bar.ts
deleted file mode 100644
index ae489ea956b..00000000000
--- a/apps/browser/src/autofill/content/notification-bar.ts
+++ /dev/null
@@ -1,1082 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { ServerConfig } from "@bitwarden/common/platform/abstractions/config/server-config";
-
-import {
- AddLoginMessageData,
- ChangePasswordMessageData,
-} from "../background/abstractions/notification.background";
-import AutofillField from "../models/autofill-field";
-import { WatchedForm } from "../models/watched-form";
-import { NotificationBarIframeInitData } from "../notification/abstractions/notification-bar";
-import { NotificationTypeData } from "../overlay/notifications/abstractions/overlay-notifications-content.service";
-import { FormData } from "../services/abstractions/autofill.service";
-import { sendExtensionMessage, setupExtensionDisconnectAction } from "../utils";
-
-interface HTMLElementWithFormOpId extends HTMLElement {
- formOpId: string;
-}
-
-/**
- * @fileoverview This file contains the code for the Bitwarden Notification Bar content script.
- * The notification bar is used to notify logged in users that they can
- * save a new login, change a existing password on a password change screen,
- * or update an existing login after detecting a different password on login.
- *
- * Note: content scripts are reloaded on non-SPA page change.
- */
-
-/*
- * Run content script when the DOM is fully loaded
- *
- * The DOMContentLoaded event fires when the HTML document has been completely parsed,
- * and all deferred scripts (