diff --git a/apps/browser/src/autofill/content/components/notification/at-risk-password/body.ts b/apps/browser/src/autofill/content/components/notification/at-risk-password/body.ts index a1b0ff91e7e..062a7e50c1a 100644 --- a/apps/browser/src/autofill/content/components/notification/at-risk-password/body.ts +++ b/apps/browser/src/autofill/content/components/notification/at-risk-password/body.ts @@ -2,7 +2,7 @@ import { html, nothing } from "lit"; import { Theme } from "@bitwarden/common/platform/enums"; -import { Celebrate, Keyhole, Warning } from "../../illustrations"; +import { Warning } from "../../illustrations"; import { iconContainerStyles, notificationConfirmationBodyStyles } from "../confirmation/body"; import { AtRiskNotificationMessage } from "./message"; @@ -10,40 +10,25 @@ import { AtRiskNotificationMessage } from "./message"; export const componentClassPrefix = "notification-confirmation-body"; export type AtRiskNotificationBodyProps = { - buttonAria: string; - buttonText: string; confirmationMessage: string; - error?: string; - itemName?: string; messageDetails?: string; - tasksAreComplete?: boolean; theme: Theme; handleOpenVault: (e: Event) => void; }; export function AtRiskNotificationBody({ - buttonAria, - buttonText, confirmationMessage, - error, - itemName, messageDetails, - tasksAreComplete, theme, handleOpenVault, }: AtRiskNotificationBodyProps) { - const IconComponent = tasksAreComplete ? Keyhole : !error ? Celebrate : Warning; - - const showConfirmationMessage = confirmationMessage || buttonText || messageDetails; + const showConfirmationMessage = confirmationMessage || messageDetails; return html`
-
${IconComponent({ theme })}
+
${Warning()}
${showConfirmationMessage ? AtRiskNotificationMessage({ - buttonAria, - buttonText, - itemName, message: confirmationMessage, messageDetails, theme, diff --git a/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts b/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts index 24564dc37b8..957a3028d78 100644 --- a/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts +++ b/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts @@ -17,25 +17,21 @@ import { AtRiskNotificationFooter } from "./footer"; export type AtRiskNotificationProps = NotificationBarIframeInitData & { handleCloseNotification: (e: Event) => void; - handleOpenVault: (e: Event) => void; - handleOpenTasks: (e: Event) => void; } & { error?: string; i18n: I18n; - itemName: string; type: NotificationType; params: AtRiskPasswordNotificationParams; }; export function AtRiskNotification({ - error, handleCloseNotification, i18n, theme = ThemeTypes.Light, type, params, }: AtRiskNotificationProps) { - const headerMessage = getHeaderMessage(i18n, type, error); + const headerMessage = getHeaderMessage(i18n, type); const { passwordChangeUri, organizationName } = params; return html` @@ -46,13 +42,8 @@ export function AtRiskNotification({ theme, })} ${AtRiskNotificationBody({ - buttonAria: "", - error: "At risk password", theme, - tasksAreComplete: false, - itemName: "", handleOpenVault: () => {}, - buttonText: "", confirmationMessage: chrome.i18n.getMessage( passwordChangeUri ? "atRiskChangePrompt" : "atRiskNavigatePrompt", organizationName, @@ -67,10 +58,6 @@ export function AtRiskNotification({ `; } -function getHeaderMessage(i18n: I18n, type?: NotificationType, error?: string) { - if (error) { - return i18n.saveFailure; - } - +function getHeaderMessage(i18n: I18n, type?: NotificationType) { return type === NotificationTypes.AtRiskPassword ? i18n.changePassword : undefined; } diff --git a/apps/browser/src/autofill/content/components/notification/confirmation/body.ts b/apps/browser/src/autofill/content/components/notification/confirmation/body.ts index 98cc9a7ef7d..33085f53b42 100644 --- a/apps/browser/src/autofill/content/components/notification/confirmation/body.ts +++ b/apps/browser/src/autofill/content/components/notification/confirmation/body.ts @@ -60,7 +60,7 @@ export function NotificationConfirmationBody({ } // Allow sharing of styles between notifications (@TODO isolate structural/presentational component layer) -export const iconContainerStyles = (error?: string) => css` +export const iconContainerStyles = (error?: string | boolean) => css` > svg { width: ${!error ? "50px" : "40px"}; height: fit-content; diff --git a/apps/browser/src/autofill/notification/abstractions/notification-bar.ts b/apps/browser/src/autofill/notification/abstractions/notification-bar.ts index ef3304b8fc9..934aa4a2571 100644 --- a/apps/browser/src/autofill/notification/abstractions/notification-bar.ts +++ b/apps/browser/src/autofill/notification/abstractions/notification-bar.ts @@ -32,6 +32,7 @@ type NotificationBarIframeInitData = { removeIndividualVault?: boolean; theme?: Theme; type?: NotificationType; + params?: AtRiskPasswordNotificationParams | any; }; type NotificationBarWindowMessage = { diff --git a/apps/browser/src/autofill/notification/bar.ts b/apps/browser/src/autofill/notification/bar.ts index 2adec6ae22c..c71d311c81f 100644 --- a/apps/browser/src/autofill/notification/bar.ts +++ b/apps/browser/src/autofill/notification/bar.ts @@ -7,6 +7,7 @@ import type { FolderView } from "@bitwarden/common/vault/models/view/folder.view import { AdjustNotificationBarMessageData } from "../background/abstractions/notification.background"; import { NotificationCipherData } from "../content/components/cipher/types"; import { CollectionView, OrgView } from "../content/components/common-types"; +import { AtRiskNotification } from "../content/components/notification/at-risk-password/container"; import { NotificationConfirmationContainer } from "../content/components/notification/confirmation/container"; import { NotificationContainer } from "../content/components/notification/container"; import { selectedFolder as selectedFolderSignal } from "../content/components/signals/selected-folder"; @@ -19,6 +20,7 @@ import { NotificationBarWindowMessage, NotificationBarIframeInitData, NotificationType, + NotificationTypes, } from "./abstractions/notification-bar"; const logService = new ConsoleLogService(false); @@ -149,7 +151,24 @@ async function initNotificationBar(message: NotificationBarWindowMessage) { document.body.innerHTML = ""; // Current implementations utilize a require for scss files which creates the need to remove the node. document.head.querySelectorAll('link[rel="stylesheet"]').forEach((node) => node.remove()); + + // Handle AtRiskPasswordNotification render + if (notificationBarIframeInitData.type === NotificationTypes.AtRiskPassword) { + return render( + AtRiskNotification({ + ...notificationBarIframeInitData, + type: notificationBarIframeInitData.type as NotificationType, + theme: resolvedTheme, + i18n, + params: initData.params, + handleCloseNotification, + }), + document.body, + ); + } + const orgId = selectedVaultSignal.get(); + await Promise.all([ new Promise((resolve) => sendPlatformMessage({ command: "bgGetOrgData" }, resolve), @@ -183,7 +202,6 @@ async function initNotificationBar(message: NotificationBarWindowMessage) { handleSaveAction, handleEditOrUpdateAction, i18n, - params: initData.params, }), document.body, );