Bug 1592467 - Add strings for vulnerable password banner. r=sfoster,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D68104

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.html

@@ -160,7 +160,9 @@
             </span>
           </div>
           <div class="breach-alert">
+            <h3 class="alert-title" data-l10n-id="about-logins-breach-alert-title"></h3>
             <img class="alert-icon" src="chrome://global/skin/icons/warning.svg"/>
+            <span class="alert-date" data-l10n-id="about-logins-breach-alert-date" data-l10n-args='{"date": 0}'></span>
             <span class="alert-text" data-l10n-id="breach-alert-text"></span>
             <a class="alert-link" data-l10n-id="breach-alert-link" href="#" rel="noreferrer" target="_blank"></a>
             <button class="dismiss-alert" data-l10n-id="breach-alert-dismiss">
@@ -168,9 +170,10 @@
             </button>
           </div>
           <div class="vulnerable-alert">
+            <h3 class="alert-title" data-l10n-id="about-logins-vulnerable-alert-title"></h3>
             <img class="alert-icon" src="chrome://browser/content/aboutlogins/icons/vulnerable-password.svg"/>
             <span class="alert-text" data-l10n-id="about-logins-vulnerable-alert-text"></span>
-            <a class="alert-link" data-l10n-id="about-logins-vulnerable-alert-link" href="#" rel="noreferrer" target="_blank"></a>
+            <a class="alert-link" data-l10n-id="about-logins-vulnerable-alert-link" data-l10n-args='{"hostname": ""}' href="#" rel="noreferrer" target="_blank"></a>
           </div>
           <div class="header">
             <div class="login-item-favicon-wrapper">

browser/components/aboutlogins/content/components/login-item.js

@@ -161,7 +161,14 @@ export default class LoginItem extends HTMLElement {
       !this._vulnerableLoginsMap.has(this._login.guid) ||
       !this._breachAlert.hidden;
     if (!this._vulnerableAlert.hidden) {
-      // TODO
+      this._vulnerableAlertLink.href = this._login.origin;
+      document.l10n.setAttributes(
+        this._vulnerableAlertLink,
+        "about-logins-vulnerable-alert-link",
+        {
+          hostname: this._login.displayOrigin,
+        }
+      );
     }
     document.l10n.setAttributes(this._timeCreated, "login-item-time-created", {
       timeCreated: this._login.timeCreated || "",

browser/locales/en-US/browser/aboutLogins.ftl

@@ -167,11 +167,20 @@ confirm-discard-changes-dialog-confirm-button = Discard
 
 ## Breach Alert notification
 
+about-logins-breach-alert-title = Website Breach
 breach-alert-text = Passwords were leaked or stolen from this website since you last updated your login details. Change your password to protect your account.
 breach-alert-link = Learn more about this breach.
 breach-alert-dismiss =
     .title = Close this alert
 
+## Vulnerable Password notification
+
+about-logins-vulnerable-alert-title = Vulnerable Password
+about-logins-vulnerable-alert-text = This password was leaked or stolen in another company’s data breach. Reusing credentials puts all of your accounts at risk. To improve your online security, change this password.
+# Variables:
+#   $hostname (String) - The hostname of the website associated with the login, e.g. "example.com"
+about-logins-vulnerable-alert-link = Go to { $hostname }
+
 ## Error Messages
 
 # This is an error message that appears when a user attempts to save