diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css index 48011ae110e3..03e8885ee328 100644 --- a/browser/components/aboutlogins/content/components/login-item.css +++ b/browser/components/aboutlogins/content/components/login-item.css @@ -312,6 +312,10 @@ input[name="password"] { position: relative; } +.alert-date { + display: block;; +} + .alert-link { color: inherit; text-decoration: underline; diff --git a/browser/components/aboutlogins/content/components/login-item.js b/browser/components/aboutlogins/content/components/login-item.js index 9b8a028ac474..b154a1242d2e 100644 --- a/browser/components/aboutlogins/content/components/login-item.js +++ b/browser/components/aboutlogins/content/components/login-item.js @@ -82,6 +82,7 @@ export default class LoginItem extends HTMLElement { this._timeUsed = this.shadowRoot.querySelector(".time-used"); this._breachAlert = this.shadowRoot.querySelector(".breach-alert"); this._breachAlertLink = this._breachAlert.querySelector(".alert-link"); + this._breachAlertDate = this._breachAlert.querySelector(".alert-date"); this._dismissBreachAlert = this._breachAlert.querySelector( ".dismiss-alert" ); @@ -155,6 +156,19 @@ export default class LoginItem extends HTMLElement { if (!this._breachAlert.hidden) { const breachDetails = this._breachesMap.get(this._login.guid); this._breachAlertLink.href = breachDetails.breachAlertURL; + if (breachDetails.BreachDate) { + let breachDate = new Date(breachDetails.BreachDate); + this._breachAlertDate.hidden = isNaN(breachDate); + if (!isNaN(breachDate)) { + document.l10n.setAttributes( + this._breachAlertDate, + "about-logins-breach-alert-date", + { + date: breachDate.getTime(), + } + ); + } + } } this._vulnerableAlert.hidden = !this._vulnerableLoginsMap || diff --git a/browser/locales/en-US/browser/aboutLogins.ftl b/browser/locales/en-US/browser/aboutLogins.ftl index 4c0d0ec86540..2404c59c4c10 100644 --- a/browser/locales/en-US/browser/aboutLogins.ftl +++ b/browser/locales/en-US/browser/aboutLogins.ftl @@ -172,6 +172,7 @@ breach-alert-text = Passwords were leaked or stolen from this website since you breach-alert-link = Learn more about this breach. breach-alert-dismiss = .title = Close this alert +about-logins-breach-alert-date = This breach occurred on { DATETIME($date, day: "numeric", month: "long", year: "numeric") } ## Vulnerable Password notification