tor-browser

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

ipprotection-signedout.mjs (2471B)

      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 https://mozilla.org/MPL/2.0/. */
      4 
      5 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
      6 import { html } from "chrome://global/content/vendor/lit.all.mjs";
      7 import { LINKS } from "chrome://browser/content/ipprotection/ipprotection-constants.mjs";
      8 
      9 /**
     10 * A custom element that handles the signed out status of IP Protection.
     11 */
     12 export default class IPProtectionSignedOutContentElement extends MozLitElement {
     13  static queries = {
     14    learnMoreLinkEl: "#learn-more-vpn-signed-out",
     15  };
     16  static shadowRootOptions = {
     17    ...MozLitElement.shadowRootOptions,
     18    delegatesFocus: true,
     19  };
     20 
     21  constructor() {
     22    super();
     23  }
     24 
     25  handleSignIn() {
     26    this.dispatchEvent(
     27      new CustomEvent("IPProtection:SignIn", { bubbles: true, composed: true })
     28    );
     29    // Close the panel
     30    this.dispatchEvent(
     31      new CustomEvent("IPProtection:Close", { bubbles: true, composed: true })
     32    );
     33  }
     34 
     35  handleClickLearnMore(event) {
     36    const win = event.target.ownerGlobal;
     37 
     38    if (event.target === this.learnMoreLinkEl) {
     39      win.openWebLinkIn(LINKS.SUPPORT_URL, "tab");
     40      this.dispatchEvent(
     41        new CustomEvent("IPProtection:Close", { bubbles: true, composed: true })
     42      );
     43    }
     44  }
     45 
     46  render() {
     47    return html`
     48      <link
     49        rel="stylesheet"
     50        href="chrome://browser/content/ipprotection/ipprotection-content.css"
     51      />
     52      <div id="signed-out-vpn-content">
     53        <img
     54          id="signed-out-vpn-img"
     55          src="chrome://browser/content/ipprotection/assets/ipprotection.svg"
     56          alt=""
     57        />
     58        <h2 id="signed-out-vpn-title" data-l10n-id="signed-out-vpn-title"></h2>
     59        <p
     60          id="signed-out-vpn-message"
     61          data-l10n-id="signed-out-vpn-message"
     62          @click=${this.handleClickLearnMore}
     63        >
     64          <a
     65            id="learn-more-vpn-signed-out"
     66            data-l10n-name="learn-more-vpn-signed-out"
     67            href=${LINKS.SUPPORT_URL}
     68          >
     69          </a>
     70        </p>
     71        <moz-button
     72          id="sign-in-vpn"
     73          class="vpn-button"
     74          data-l10n-id="sign-in-vpn"
     75          type="primary"
     76          @click=${this.handleSignIn}
     77        ></moz-button>
     78      </div>
     79    `;
     80  }
     81 }
     82 
     83 customElements.define(
     84  "ipprotection-signedout",
     85  IPProtectionSignedOutContentElement
     86 );