${IconComponent({ theme })}
- ${confirmationMessage && buttonText
+ ${showConfirmationMessage
? NotificationConfirmationMessage({
- handleClick: handleOpenVault,
- confirmationMessage,
- theme,
buttonText,
+ message: confirmationMessage,
+ messageDetails,
+ theme,
+ handleClick: handleOpenVault,
})
- : null}
+ : nothing}
`;
}
diff --git a/apps/browser/src/autofill/content/components/notification/confirmation-container.ts b/apps/browser/src/autofill/content/components/notification/confirmation/container.ts
similarity index 66%
rename from apps/browser/src/autofill/content/components/notification/confirmation-container.ts
rename to apps/browser/src/autofill/content/components/notification/confirmation/container.ts
index 0666859ac44..a071338af9a 100644
--- a/apps/browser/src/autofill/content/components/notification/confirmation-container.ts
+++ b/apps/browser/src/autofill/content/components/notification/confirmation/container.ts
@@ -1,42 +1,67 @@
import { css } from "@emotion/css";
-import { html } from "lit";
+import { html, nothing } from "lit";
import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
import {
NotificationBarIframeInitData,
- NotificationTypes,
+ NotificationTaskInfo,
NotificationType,
-} from "../../../notification/abstractions/notification-bar";
-import { themes, spacing } from "../constants/styles";
-
-import { NotificationConfirmationBody } from "./confirmation";
+ NotificationTypes,
+} from "../../../../notification/abstractions/notification-bar";
+import { themes, spacing } from "../../constants/styles";
import {
NotificationHeader,
componentClassPrefix as notificationHeaderClassPrefix,
-} from "./header";
+} from "../header";
+
+import { NotificationConfirmationBody } from "./body";
+import { NotificationConfirmationFooter } from "./footer";
+
+export type NotificationConfirmationContainerProps = NotificationBarIframeInitData & {
+ handleCloseNotification: (e: Event) => void;
+ handleOpenVault: (e: Event) => void;
+ handleOpenTasks: (e: Event) => void;
+} & {
+ error?: string;
+ i18n: { [key: string]: string };
+ task?: NotificationTaskInfo;
+ type: NotificationType;
+ username: string;
+};
export function NotificationConfirmationContainer({
error,
handleCloseNotification,
handleOpenVault,
+ handleOpenTasks,
i18n,
+ task,
theme = ThemeTypes.Light,
type,
username,
-}: NotificationBarIframeInitData & {
- handleCloseNotification: (e: Event) => void;
- handleOpenVault: (e: Event) => void;
-} & {
- error?: string;
- i18n: { [key: string]: string };
- type: NotificationType;
- username: string;
-}) {
+}: NotificationConfirmationContainerProps) {
const headerMessage = getHeaderMessage(i18n, type, error);
const confirmationMessage = getConfirmationMessage(i18n, username, type, error);
const buttonText = error ? i18n.newItem : i18n.view;
+ let messageDetails: string | undefined;
+ let remainingTasksCount: number | undefined;
+ let tasksAreComplete: boolean = false;
+
+ if (task) {
+ remainingTasksCount = task.remainingTasksCount || 0;
+ tasksAreComplete = remainingTasksCount === 0;
+
+ messageDetails =
+ remainingTasksCount > 0
+ ? chrome.i18n.getMessage("loginUpdateTaskSuccessAdditional", [
+ task.orgName,
+ `${remainingTasksCount}`,
+ ])
+ : chrome.i18n.getMessage("loginUpdateTaskSuccess", [task.orgName]);
+ }
+
return html`
${NotificationHeader({
@@ -47,10 +72,18 @@ export function NotificationConfirmationContainer({
${NotificationConfirmationBody({
buttonText,
confirmationMessage,
- error: error,
- handleOpenVault,
+ tasksAreComplete,
+ messageDetails,
theme,
+ handleOpenVault,
})}
+ ${remainingTasksCount
+ ? NotificationConfirmationFooter({
+ i18n,
+ theme,
+ handleButtonClick: handleOpenTasks,
+ })
+ : nothing}
`;
}
diff --git a/apps/browser/src/autofill/content/components/notification/confirmation/footer.ts b/apps/browser/src/autofill/content/components/notification/confirmation/footer.ts
new file mode 100644
index 00000000000..e245d22c8e8
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/notification/confirmation/footer.ts
@@ -0,0 +1,59 @@
+import { css } from "@emotion/css";
+import { html } from "lit";
+
+import { Theme } from "@bitwarden/common/platform/enums";
+
+import { ActionButton } from "../../buttons/action-button";
+import { spacing, themes } from "../../constants/styles";
+import { ExternalLink } from "../../icons";
+
+export type NotificationConfirmationFooterProps = {
+ i18n: { [key: string]: string };
+ theme: Theme;
+ handleButtonClick: (event: Event) => void;
+};
+
+export function NotificationConfirmationFooter({
+ i18n,
+ theme,
+ handleButtonClick,
+}: NotificationConfirmationFooterProps) {
+ const primaryButtonText = i18n.nextSecurityTaskAction;
+
+ return html`
+
+ `;
+}
+
+const notificationConfirmationFooterStyles = ({ theme }: { theme: Theme }) => css`
+ background-color: ${themes[theme].background.alt};
+ padding: 0 ${spacing[3]} ${spacing[3]} ${spacing[3]};
+ max-width: min-content;
+
+ :last-child {
+ border-radius: 0 0 ${spacing["4"]} ${spacing["4"]};
+ padding-bottom: ${spacing[4]};
+ }
+`;
+
+function AdditionalTasksButtonContent({ buttonText, theme }: { buttonText: string; theme: Theme }) {
+ return html`
+