From ccd3a3d3daba1c85a66cb0cabfcbed4c53a8e30d Mon Sep 17 00:00:00 2001
From: Hinton <hinton@users.noreply.github.com>
Date: Wed, 19 Mar 2025 23:02:43 +0900
Subject: [PATCH] Add PoC to browser

---
 apps/browser/src/_locales/messages.sv-se.json | 11 ++++++++++
 apps/browser/src/autofill/notification/bar.ts | 20 +++++++++++++++++--
 apps/browser/src/popup/main.ts                | 18 +++++++++++++----
 apps/browser/src/popup/polyfills.ts           |  1 +
 apps/browser/webpack.config.js                |  2 +-
 .../src/angular/login/login.component.html    |  8 +++++++-
 .../auth/src/angular/login/login.component.ts |  1 +
 7 files changed, 53 insertions(+), 8 deletions(-)
 create mode 100644 apps/browser/src/_locales/messages.sv-se.json

diff --git a/apps/browser/src/_locales/messages.sv-se.json b/apps/browser/src/_locales/messages.sv-se.json
new file mode 100644
index 00000000000..eab53678cd2
--- /dev/null
+++ b/apps/browser/src/_locales/messages.sv-se.json
@@ -0,0 +1,11 @@
+{
+  "locale": "sv-Se",
+  "translations": {
+    "4606963464835766483": "Uppdaterad {$ICU}",
+    "2002272803511843863": "{VAR_PLURAL, plural, =0 {precis nu} =1 {en minut sedan} other {för {INTERPOLATION} minuter sedan}}",
+    "1150463724722084961": "Detta är en flytande länk till {$START_LINK}Inställningar{$CLOSE_LINK} med text före och efter.",
+    "5010897546053474360": "En fras som vi verkligen {$START_TAG_STRONG}behöver{$CLOSE_TAG_STRONG} framhäva!",
+    "email": "E-postadress",
+    "616177228530588915": "En översatt sträng med en länk. {$PH}"
+  }
+}
diff --git a/apps/browser/src/autofill/notification/bar.ts b/apps/browser/src/autofill/notification/bar.ts
index 617b1e58c14..dd75786f7f1 100644
--- a/apps/browser/src/autofill/notification/bar.ts
+++ b/apps/browser/src/autofill/notification/bar.ts
@@ -1,3 +1,5 @@
+import "@angular/localize/init";
+import { loadTranslations } from "@angular/localize";
 import { render } from "lit";
 
 import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
@@ -17,6 +19,19 @@ import {
   NotificationType,
 } from "./abstractions/notification-bar";
 
+async function initLanguage(locale: string): Promise<void> {
+  if (locale === "en") {
+    return;
+  }
+
+  const json = await fetch("/_locales/messages." + locale + ".json").then((r) => r.json());
+
+  loadTranslations(json.translations);
+  $localize.locale = locale;
+}
+
+void initLanguage("sv-se");
+
 const logService = new ConsoleLogService(false);
 let notificationBarIframeInitData: NotificationBarIframeInitData = {};
 let windowMessageOrigin: string;
@@ -48,6 +63,7 @@ function applyNotificationBarStyle() {
 }
 
 function getI18n() {
+  const a = 5;
   return {
     appName: chrome.i18n.getMessage("appName"),
     close: chrome.i18n.getMessage("close"),
@@ -60,7 +76,7 @@ function getI18n() {
     never: chrome.i18n.getMessage("never"),
     notificationAddDesc: chrome.i18n.getMessage("notificationAddDesc"),
     notificationAddSave: chrome.i18n.getMessage("notificationAddSave"),
-    notificationChangeDesc: chrome.i18n.getMessage("notificationChangeDesc"),
+    notificationChangeDesc: $localize`Test translated message in content script with <a href="/settings">link</a> ${a}`,
     notificationChangeSave: chrome.i18n.getMessage("notificationChangeSave"),
     notificationEdit: chrome.i18n.getMessage("edit"),
     notificationUnlock: chrome.i18n.getMessage("notificationUnlock"),
@@ -111,7 +127,7 @@ const findElementById = <ElementType extends HTMLElement>(
 function setElementText(template: HTMLTemplateElement, elementId: string, text: string): void {
   const element = template.content.getElementById(elementId);
   if (element) {
-    element.textContent = text;
+    element.innerHTML = text;
   }
 }
 
diff --git a/apps/browser/src/popup/main.ts b/apps/browser/src/popup/main.ts
index bb975f48e5d..e30462cf9e8 100644
--- a/apps/browser/src/popup/main.ts
+++ b/apps/browser/src/popup/main.ts
@@ -1,4 +1,5 @@
 import { enableProdMode } from "@angular/core";
+import { loadTranslations } from "@angular/localize";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
 import { PopupSizeService } from "../platform/popup/layout/popup-size.service";
@@ -22,8 +23,17 @@ if (process.env.ENV === "production") {
   enableProdMode();
 }
 
-function init() {
-  void platformBrowserDynamic().bootstrapModule(AppModule);
-}
+void initLanguage("sv-se").then(() => {
+  return platformBrowserDynamic().bootstrapModule(AppModule);
+});
 
-init();
+async function initLanguage(locale: string): Promise<void> {
+  if (locale === "en") {
+    return;
+  }
+
+  const json = await fetch("/_locales/messages." + locale + ".json").then((r) => r.json());
+
+  loadTranslations(json.translations);
+  $localize.locale = locale;
+}
diff --git a/apps/browser/src/popup/polyfills.ts b/apps/browser/src/popup/polyfills.ts
index 4bb2aa0bbee..3d8085a833c 100644
--- a/apps/browser/src/popup/polyfills.ts
+++ b/apps/browser/src/popup/polyfills.ts
@@ -1,3 +1,4 @@
 import "core-js/stable";
 import "core-js/proposals/explicit-resource-management";
 import "zone.js";
+import "@angular/localize/init";
diff --git a/apps/browser/webpack.config.js b/apps/browser/webpack.config.js
index ff5331ae459..50581fc0930 100644
--- a/apps/browser/webpack.config.js
+++ b/apps/browser/webpack.config.js
@@ -80,7 +80,7 @@ const moduleRules = [
       {
         loader: "babel-loader",
         options: {
-          configFile: "../../babel.config.json",
+          configFile: "../../babel2.config.json",
         },
       },
     ],
diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index b04a54da425..c9db7d4f154 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   # Table of Contents
 
     This file contains a single consolidated template for all visual clients.
@@ -10,6 +10,12 @@
       MASTER_PASSWORD_ENTRY: displays the master password input field + login button
 -->
 
+<p i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ 5 }} minutes ago}}</p>
+
+<p i18n>This is a inline link to <a href="/settings">Settings</a> with text before and after.</p>
+
+<p i18n>A phrase we really <strong>need</strong> to highlight!</p>
+
 <form [bitSubmit]="submit" [formGroup]="formGroup">
   <div [ngClass]="{ 'tw-hidden': loginUiState !== LoginUiState.EMAIL_ENTRY }">
     <!-- Email Address input -->
diff --git a/libs/auth/src/angular/login/login.component.ts b/libs/auth/src/angular/login/login.component.ts
index cc38ec5dfb3..b76bd802cf2 100644
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -73,6 +73,7 @@ export class LoginComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
   readonly Icons = { WaveIcon, VaultIcon };
+  protected minutes = 5;
 
   clientType: ClientType;
   ClientType = ClientType;