119 lines
3.5 KiB
JavaScript
119 lines
3.5 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/. */
|
|
|
|
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);
|