diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-action.ts b/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
index aaa4b11d8a..85698c87c6 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
@@ -8,24 +8,24 @@ export function CipherAction({
handleAction = () => {
/* no-op */
},
+ i18n,
notificationType,
theme,
}: {
handleAction?: (e: Event) => void;
+ i18n: { [key: string]: string };
notificationType: typeof NotificationTypes.Change | typeof NotificationTypes.Add;
theme: Theme;
}) {
return notificationType === NotificationTypes.Change
? BadgeButton({
buttonAction: handleAction,
- // @TODO localize
- buttonText: "Update",
+ buttonText: i18n.notificationUpdate,
theme,
})
: EditButton({
buttonAction: handleAction,
- // @TODO localize
- buttonText: "Edit",
+ buttonText: i18n.notificationEdit,
theme,
});
}
diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-item.ts b/apps/browser/src/autofill/content/components/cipher/cipher-item.ts
index 96b44d2c0c..8ab29860f3 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-item.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-item.ts
@@ -19,11 +19,13 @@ const cipherIconWidth = "24px";
export function CipherItem({
cipher,
handleAction,
+ i18n,
notificationType,
theme = ThemeTypes.Light,
}: {
cipher: NotificationCipherData;
handleAction?: (e: Event) => void;
+ i18n: { [key: string]: string };
notificationType?: NotificationType;
theme: Theme;
}) {
@@ -34,7 +36,7 @@ export function CipherItem({
if (notificationType === NotificationTypes.Change || notificationType === NotificationTypes.Add) {
cipherActionButton = html`
- ${CipherAction({ handleAction, notificationType, theme })}
+ ${CipherAction({ handleAction, i18n, notificationType, theme })}
`;
}
diff --git a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts
index e597cddabe..dd1ff816f0 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts
@@ -7,6 +7,7 @@ import { CipherAction } from "../../cipher/cipher-action";
type Args = {
handleAction?: (e: Event) => void;
+ i18n: { [key: string]: string };
notificationType: typeof NotificationTypes.Change | typeof NotificationTypes.Add;
theme: Theme;
};
diff --git a/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts
index 32b4170d1d..13e2322a9f 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts
@@ -10,6 +10,7 @@ import { NotificationBody } from "../../notification/body";
type Args = {
ciphers: NotificationCipherData[];
+ i18n: { [key: string]: string };
notificationType: NotificationType;
theme: Theme;
handleEditOrUpdateAction: (e: Event) => void;
diff --git a/apps/browser/src/autofill/content/components/notification/body.ts b/apps/browser/src/autofill/content/components/notification/body.ts
index 66b580bde4..cc0fa35930 100644
--- a/apps/browser/src/autofill/content/components/notification/body.ts
+++ b/apps/browser/src/autofill/content/components/notification/body.ts
@@ -17,12 +17,14 @@ const { css } = createEmotion({
export function NotificationBody({
ciphers = [],
+ i18n,
notificationType,
theme = ThemeTypes.Light,
handleEditOrUpdateAction,
}: {
ciphers?: NotificationCipherData[];
customClasses?: string[];
+ i18n: { [key: string]: string };
notificationType?: NotificationType;
theme: Theme;
handleEditOrUpdateAction: (e: Event) => void;
@@ -37,6 +39,7 @@ export function NotificationBody({
theme,
children: CipherItem({
cipher,
+ i18n,
notificationType,
theme,
handleAction: handleEditOrUpdateAction,
diff --git a/apps/browser/src/autofill/content/components/notification/button-row.ts b/apps/browser/src/autofill/content/components/notification/button-row.ts
index 8661f5957e..3834da4269 100644
--- a/apps/browser/src/autofill/content/components/notification/button-row.ts
+++ b/apps/browser/src/autofill/content/components/notification/button-row.ts
@@ -22,17 +22,19 @@ function getVaultIconByProductTier(productTierType?: ProductTierType): Option["i
}
export type NotificationButtonRowProps = {
- theme: Theme;
+ folders?: FolderView[];
+ i18n: { [key: string]: string };
+ organizations?: OrgView[];
primaryButton: {
text: string;
handlePrimaryButtonClick: (args: any) => void;
};
- folders?: FolderView[];
- organizations?: OrgView[];
+ theme: Theme;
};
export function NotificationButtonRow({
folders,
+ i18n,
organizations,
primaryButton,
theme,
@@ -40,7 +42,7 @@ export function NotificationButtonRow({
const currentUserVaultOption: Option = {
icon: User,
default: true,
- text: "My vault", // @TODO localize
+ text: i18n.myVault,
value: "0",
};
const organizationOptions: Option[] = organizations?.length
@@ -84,7 +86,7 @@ export function NotificationButtonRow({
? [
{
id: "organization",
- label: "Vault", // @TODO localize
+ label: i18n.vault,
options: organizationOptions,
},
]
@@ -93,7 +95,7 @@ export function NotificationButtonRow({
? [
{
id: "folder",
- label: "Folder", // @TODO localize
+ label: i18n.folder,
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 c29f58e116..e1d098e3b0 100644
--- a/apps/browser/src/autofill/content/components/notification/container.ts
+++ b/apps/browser/src/autofill/content/components/notification/container.ts
@@ -59,6 +59,7 @@ export function NotificationContainer({
ciphers,
notificationType: type,
theme,
+ i18n,
})
: null}
${NotificationFooter({
diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts
index 8ed69a96ad..58a87ebc67 100644
--- a/apps/browser/src/autofill/content/components/notification/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/footer.ts
@@ -38,6 +38,7 @@ export function NotificationFooter({
? NotificationButtonRow({
folders,
organizations,
+ i18n,
primaryButton: {
handlePrimaryButtonClick: handleSaveAction,
text: primaryButtonText,
diff --git a/apps/browser/src/autofill/notification/bar.ts b/apps/browser/src/autofill/notification/bar.ts
index d660790ee6..4e85d89317 100644
--- a/apps/browser/src/autofill/notification/bar.ts
+++ b/apps/browser/src/autofill/notification/bar.ts
@@ -53,6 +53,7 @@ function getI18n() {
return {
appName: chrome.i18n.getMessage("appName"),
close: chrome.i18n.getMessage("close"),
+ collection: chrome.i18n.getMessage("collection"),
folder: chrome.i18n.getMessage("folder"),
loginSaveSuccess: chrome.i18n.getMessage("loginSaveSuccess"),
loginSaveSuccessDetails: chrome.i18n.getMessage("loginSaveSuccessDetails"),
@@ -63,10 +64,11 @@ function getI18n() {
nextSecurityTaskAction: chrome.i18n.getMessage("nextSecurityTaskAction"),
newItem: chrome.i18n.getMessage("newItem"),
never: chrome.i18n.getMessage("never"),
+ myVault: chrome.i18n.getMessage("myVault"),
notificationAddDesc: chrome.i18n.getMessage("notificationAddDesc"),
notificationAddSave: chrome.i18n.getMessage("notificationAddSave"),
notificationChangeDesc: chrome.i18n.getMessage("notificationChangeDesc"),
- notificationChangeSave: chrome.i18n.getMessage("notificationChangeSave"),
+ notificationUpdate: chrome.i18n.getMessage("notificationChangeSave"),
notificationEdit: chrome.i18n.getMessage("edit"),
notificationUnlock: chrome.i18n.getMessage("notificationUnlock"),
notificationUnlockDesc: chrome.i18n.getMessage("notificationUnlockDesc"),
@@ -78,6 +80,7 @@ function getI18n() {
typeLogin: chrome.i18n.getMessage("typeLogin"),
updateLoginAction: chrome.i18n.getMessage("updateLoginAction"),
updateLoginPrompt: chrome.i18n.getMessage("updateLoginPrompt"),
+ vault: chrome.i18n.getMessage("vault"),
view: chrome.i18n.getMessage("view"),
};
}
@@ -200,7 +203,7 @@ async function initNotificationBar(message: NotificationBarWindowMessage) {
const changeTemplate = document.getElementById("template-change") as HTMLTemplateElement;
const changeButton = findElementById(changeTemplate, "change-save");
- changeButton.textContent = i18n.notificationChangeSave;
+ changeButton.textContent = i18n.notificationUpdate;
const changeEditButton = findElementById(changeTemplate, "change-edit");
changeEditButton.textContent = i18n.notificationEdit;