tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

lockwise-card.mjs (4443B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 const HOW_IT_WORKS_URL_PREF = RPMGetFormatURLPref(
      6  "browser.contentblocking.report.lockwise.how_it_works.url"
      7 );
      8 
      9 export default class LockwiseCard {
     10  constructor(doc) {
     11    this.doc = doc;
     12  }
     13 
     14  /**
     15   * Initializes message listeners/senders.
     16   */
     17  init() {
     18    const savePasswordsButton = this.doc.getElementById(
     19      "save-passwords-button"
     20    );
     21    savePasswordsButton.addEventListener(
     22      "click",
     23      this.openAboutLogins.bind(this)
     24    );
     25 
     26    const managePasswordsButton = this.doc.getElementById(
     27      "manage-passwords-button"
     28    );
     29    managePasswordsButton.addEventListener(
     30      "click",
     31      this.openAboutLogins.bind(this)
     32    );
     33 
     34    // Attack link to Firefox Lockwise "How it works" page.
     35    const lockwiseReportLink = this.doc.getElementById("lockwise-how-it-works");
     36    lockwiseReportLink.addEventListener("click", () => {
     37      this.doc.sendTelemetryEvent("clickLwAboutLink");
     38    });
     39  }
     40 
     41  openAboutLogins() {
     42    const lockwiseCard = this.doc.querySelector(".lockwise-card");
     43    if (lockwiseCard.classList.contains("has-logins")) {
     44      if (lockwiseCard.classList.contains("breached-logins")) {
     45        this.doc.sendTelemetryEvent(
     46          "clickLwOpenButton",
     47          "manage_breached_passwords"
     48        );
     49      } else if (lockwiseCard.classList.contains("no-breached-logins")) {
     50        this.doc.sendTelemetryEvent("clickLwOpenButton", "manage_passwords");
     51      }
     52    } else if (lockwiseCard.classList.contains("no-logins")) {
     53      this.doc.sendTelemetryEvent("clickLwOpenButton", "save_passwords");
     54    }
     55    RPMSendAsyncMessage("OpenAboutLogins");
     56  }
     57 
     58  buildContent(data) {
     59    const { numLogins, potentiallyBreachedLogins } = data;
     60    const hasLogins = numLogins > 0;
     61    const title = this.doc.getElementById("lockwise-title");
     62    const headerContent = this.doc.querySelector(
     63      "#lockwise-header-content span"
     64    );
     65    const lockwiseCard = this.doc.querySelector(".card.lockwise-card");
     66 
     67    if (hasLogins) {
     68      lockwiseCard.classList.remove("no-logins");
     69      lockwiseCard.classList.add("has-logins");
     70      document.l10n.setAttributes(title, "passwords-title-logged-in");
     71      document.l10n.setAttributes(
     72        headerContent,
     73        "lockwise-header-content-logged-in"
     74      );
     75      this.renderContentForLoggedInUser(numLogins, potentiallyBreachedLogins);
     76    } else {
     77      lockwiseCard.classList.remove("has-logins");
     78      lockwiseCard.classList.add("no-logins");
     79      document.l10n.setAttributes(title, "lockwise-title");
     80      document.l10n.setAttributes(headerContent, "passwords-header-content");
     81    }
     82 
     83    const lockwiseUI = document.querySelector(".card.lockwise-card.loading");
     84    lockwiseUI.classList.remove("loading");
     85  }
     86 
     87  /**
     88   * Displays strings indicating stored logins for a user.
     89   *
     90   * @param {number}  storedLogins
     91   *        The number of browser-stored logins.
     92   * @param {number}  potentiallyBreachedLogins
     93   *        The number of potentially breached logins.
     94   */
     95  renderContentForLoggedInUser(storedLogins, potentiallyBreachedLogins) {
     96    const lockwiseScannedText = this.doc.getElementById(
     97      "lockwise-scanned-text"
     98    );
     99    const lockwiseScannedIcon = this.doc.getElementById(
    100      "lockwise-scanned-icon"
    101    );
    102    const lockwiseCard = this.doc.querySelector(".card.lockwise-card");
    103 
    104    if (potentiallyBreachedLogins) {
    105      document.l10n.setAttributes(
    106        lockwiseScannedText,
    107        "lockwise-scanned-text-breached-logins",
    108        {
    109          count: potentiallyBreachedLogins,
    110        }
    111      );
    112      lockwiseScannedIcon.setAttribute(
    113        "src",
    114        "chrome://browser/skin/protections/breached-password.svg"
    115      );
    116      lockwiseCard.classList.add("breached-logins");
    117    } else {
    118      document.l10n.setAttributes(
    119        lockwiseScannedText,
    120        "lockwise-scanned-text-no-breached-logins",
    121        {
    122          count: storedLogins,
    123        }
    124      );
    125      lockwiseScannedIcon.setAttribute(
    126        "src",
    127        "chrome://browser/skin/protections/resolved-breach.svg"
    128      );
    129      lockwiseCard.classList.add("no-breached-logins");
    130    }
    131 
    132    const howItWorksLink = this.doc.getElementById("lockwise-how-it-works");
    133    howItWorksLink.href = HOW_IT_WORKS_URL_PREF;
    134  }
    135 }