password-rules-tooltip.mjs

Enable keyboard shortcuts

/* 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/. */

import { html } from "chrome://global/content/vendor/lit.all.mjs";

import { MozLitElement } from "chrome://global/content/lit-utils.mjs";

/**

 * The widget for enabling password protection if the backup is not yet

 * encrypted.

*/

export default class PasswordRulesTooltip extends MozLitElement {

  static properties = {

    hasCommon: { type: Boolean },

    hasEmail: { type: Boolean },

    tooShort: { type: Boolean },

    supportBaseLink: { type: String },

};

  static get queries() {

    return {

      passwordRulesEl: "#password-rules-wrapper",

};

  constructor() {

    super();

    this.hasCommon = false;

    this.hasEmail = false;

    this.tooShort = false;

    this.supportBaseLink = "";

  getRuleStateConstants(hasInvalidCondition) {

    if (hasInvalidCondition) {

      return {

        class: "warning",

        icon: "chrome://global/skin/icons/warning.svg",

        l10nId: "password-rules-a11y-warning",

};

    return {

      class: "success",

      icon: "chrome://global/skin/icons/check-filled.svg",

      l10nId: "password-rules-a11y-success",

};

  render() {

    let lengthConstants = this.getRuleStateConstants(this.tooShort);

    let emailConstants = this.getRuleStateConstants(this.hasEmail);

    // TODO: (bug 1905140) read list of common passwords - default to success state for now

    let commonConstants = this.getRuleStateConstants(this.hasCommon);

    return html`

      <link

        rel="stylesheet"

        href="chrome://browser/content/backup/password-rules-tooltip.css"

/>

      <div id="password-rules-wrapper" aria-live="polite">

<h2

          id="password-rules-header"

          data-l10n-id="password-rules-header"

        ></h2>

        <ul>

          <li>

            <img

              data-l10n-id=${lengthConstants.l10nId}

              class="icon ${lengthConstants.class}"

              src=${lengthConstants.icon}

/>

            <span

              data-l10n-id="password-rules-length-description"

              class="rule-description"

            ></span>

          </li>

          <li>

            <img

              data-l10n-id=${emailConstants.l10nId}

              class="icon ${emailConstants.class}"

              src=${emailConstants.icon}

/>

            <span

              data-l10n-id="password-rules-email-description"

              class="rule-description"

            ></span>

          </li>

          <li>

            <img

              data-l10n-id=${commonConstants.l10nId}

              class="icon ${commonConstants.class}"

              src=${commonConstants.icon}

/>

            <span

              data-l10n-id="password-rules-common-description"

              class="rule-description"

            ></span>

          </li>

          <li>

            <img

              class="icon"

              src="chrome://browser/skin/preferences/category-privacy-security.svg"

/>

            <span data-l10n-id="password-rules-disclaimer"

><a

                data-l10n-name="password-support-link"

                target="_blank"

                href=${`${this.supportBaseLink}password-strength`}

              ></a

            ></span>

          </li>

        </ul>

      </div>

`;

customElements.define("password-rules-tooltip", PasswordRulesTooltip);