mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 14:20:14 +02:00
c1640d7f9e
Differential Revision: https://phabricator.services.mozilla.com/D37992 --HG-- extra : moz-landing-system : lando
105 lines
3.6 KiB
JavaScript
105 lines
3.6 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/* eslint-env mozilla/frame-script */
|
|
|
|
export default class LockwiseCard {
|
|
constructor(document) {
|
|
this.doc = document;
|
|
}
|
|
|
|
/**
|
|
* Initializes message listeners/senders.
|
|
*/
|
|
init() {
|
|
const openAboutLoginsButton = this.doc.getElementById(
|
|
"open-about-logins-button"
|
|
);
|
|
openAboutLoginsButton.addEventListener("click", () => {
|
|
RPMSendAsyncMessage("OpenAboutLogins");
|
|
});
|
|
|
|
const syncLink = this.doc.querySelector(".synced-devices-text a");
|
|
// Register a click handler for the anchor since it's not possible to navigate to about:preferences via href
|
|
syncLink.addEventListener("click", () => {
|
|
RPMSendAsyncMessage("OpenSyncPreferences");
|
|
});
|
|
|
|
RPMAddMessageListener("SendUserLoginsData", ({ data }) => {
|
|
// Once data for the user is retrieved, display the lockwise card.
|
|
this.buildContent(data);
|
|
|
|
// Show the Lockwise card.
|
|
const lockwiseCard = this.doc.querySelector(
|
|
".report-card.lockwise-card.hidden"
|
|
);
|
|
lockwiseCard.classList.remove("hidden");
|
|
});
|
|
}
|
|
|
|
buildContent(data) {
|
|
const { hasFxa, numLogins, numSyncedDevices } = data;
|
|
const isLoggedIn = numLogins > 0 || hasFxa;
|
|
const title = this.doc.getElementById("lockwise-title");
|
|
const headerContent = this.doc.getElementById("lockwise-header-content");
|
|
const lockwiseBodyContent = this.doc.getElementById(
|
|
"lockwise-body-content"
|
|
);
|
|
|
|
// Get the container for the content to display.
|
|
const container = isLoggedIn
|
|
? lockwiseBodyContent.querySelector(".has-logins")
|
|
: lockwiseBodyContent.querySelector(".no-logins");
|
|
// Display the content
|
|
container.classList.remove("hidden");
|
|
|
|
if (isLoggedIn) {
|
|
title.textContent = "Firefox Lockwise";
|
|
headerContent.textContent =
|
|
"Securely store and sync your passwords to all your devices.";
|
|
this.renderContentForLoggedInUser(container, numLogins, numSyncedDevices);
|
|
} else {
|
|
title.textContent = "Never forget a password again";
|
|
headerContent.textContent =
|
|
"Firefox Lockwise securely stores your passwords in your browser.";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Displays the number of stored logins and synced devices for a user.
|
|
*
|
|
* @param {Element} container
|
|
* The containing element for the content.
|
|
* @param {Number} storedLogins
|
|
* The number of browser-stored logins.
|
|
* @param {Number} syncedDevices
|
|
* The number of synced devices.
|
|
*/
|
|
renderContentForLoggedInUser(container, storedLogins, syncedDevices) {
|
|
// Set the text for number of stored logins.
|
|
const numberOfLoginsBlock = container.querySelector(
|
|
".number-of-logins.block"
|
|
);
|
|
numberOfLoginsBlock.textContent = storedLogins;
|
|
|
|
// Set the text for the number of synced devices.
|
|
const syncedDevicesBlock = container.querySelector(
|
|
".number-of-synced-devices.block"
|
|
);
|
|
syncedDevicesBlock.textContent = syncedDevices;
|
|
|
|
const syncedDevicesText = container.querySelector(".synced-devices-text");
|
|
const textEl = syncedDevicesText.querySelector("span");
|
|
textEl.textContent =
|
|
syncedDevices > 0
|
|
? `Syncing to ${syncedDevices} other devices.`
|
|
: "Not syncing to other devices.";
|
|
|
|
// Display the link for enabling sync if no synced devices are detected.
|
|
if (syncedDevices === 0) {
|
|
const syncLink = syncedDevicesText.querySelector("a");
|
|
syncLink.classList.remove("hidden");
|
|
}
|
|
}
|
|
}
|