1 files changed, 67 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/content/components/login-intro.mjs b/browser/components/aboutlogins/content/components/login-intro.mjs
new file mode 100644
index 0000000000..682ddb32d8
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-intro.mjs
@@ -0,0 +1,67 @@
+/* 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/. */
+
+export default class LoginIntro extends HTMLElement {
+  connectedCallback() {
+    if (this.shadowRoot) {
+      return;
+    }
+
+    let loginIntroTemplate = document.querySelector("#login-intro-template");
+    let shadowRoot = this.attachShadow({ mode: "open" });
+    document.l10n.connectRoot(shadowRoot);
+    shadowRoot.appendChild(loginIntroTemplate.content.cloneNode(true));
+  }
+
+  focus() {
+    let helpLink = this.shadowRoot.querySelector(".intro-help-link");
+    helpLink.focus();
+  }
+
+  handleEvent(event) {
+    if (
+      event.currentTarget.classList.contains("intro-import-text") &&
+      event.target.localName == "a"
+    ) {
+      let eventName =
+        event.target.dataset.l10nName == "import-file-link"
+          ? "AboutLoginsImportFromFile"
+          : "AboutLoginsImportFromBrowser";
+      document.dispatchEvent(
+        new CustomEvent(eventName, {
+          bubbles: true,
+        })
+      );
+    }
+    event.preventDefault();
+  }
+
+  updateState(syncState) {
+    let l10nId = syncState.loggedIn
+      ? "about-logins-login-intro-heading-logged-in"
+      : "about-logins-login-intro-heading-logged-out2";
+    document.l10n.setAttributes(
+      this.shadowRoot.querySelector(".heading"),
+      l10nId
+    );
+
+    this.shadowRoot
+      .querySelector(".illustration")
+      .classList.toggle("logged-in", syncState.loggedIn);
+    let supportURL =
+      window.AboutLoginsUtils.supportBaseURL +
+      "password-manager-remember-delete-edit-logins";
+    this.shadowRoot
+      .querySelector(".intro-help-link")
+      .setAttribute("href", supportURL);
+
+    let importClass = window.AboutLoginsUtils.fileImportEnabled
+      ? ".intro-import-text.file-import"
+      : ".intro-import-text.no-file-import";
+    let importText = this.shadowRoot.querySelector(importClass);
+    importText.addEventListener("click", this);
+    importText.hidden = !window.AboutLoginsUtils.importVisible;
+  }
+}
+customElements.define("login-intro", LoginIntro);