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,
);