Add PoC to browser

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}"
+  }
+}

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;
   }
 }
 

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;
+}

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";

apps/browser/webpack.config.js

@@ -80,7 +80,7 @@ const moduleRules = [
       {
         loader: "babel-loader",
         options: {
-          configFile: "../../babel.config.json",
+          configFile: "../../babel2.config.json",
         },
       },
     ],

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 -->

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;