Commit b3d1ba9b authored by Jared Wein's avatar Jared Wein
Browse files

Bug 1550099 - Add reveal button for modal-input[type=password]. r=MattN,Pike

Differential Revision: https://phabricator.services.mozilla.com/D30961

--HG--
extra : moz-landing-system : lando
parent 3c6818e9
......@@ -27,6 +27,7 @@ login-item =
.delete-button = Delete
.edit-button = Edit
.hostname-label = Website Address
.modal-input-reveal-button = Toggle password visibility
.password-label = Password
.save-changes-button = Save Changes
.time-created = Created: { DATETIME($timeCreated, day: "numeric", month: "long", year: "numeric") }
......
......@@ -33,6 +33,7 @@
delete-button,
edit-button,
hostname-label,
modal-input-reveal-button,
password-label,
save-changes-button,
time-created,
......@@ -95,6 +96,7 @@
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/modal-input.css">
<span class="locked-value"></span>
<input type="text" class="unlocked-value"/>
<button class="reveal-button"/>
</template>
</body>
</html>
......@@ -43,6 +43,7 @@ class LoginItem extends ReflectedFluentElement {
"delete-button",
"edit-button",
"hostname-label",
"modal-input-reveal-button",
"password-label",
"save-changes-button",
"time-created",
......@@ -56,6 +57,16 @@ class LoginItem extends ReflectedFluentElement {
return this.reflectedFluentIDs;
}
handleSpecialCaseFluentString(attrName) {
if (attrName != "modal-input-reveal-button") {
return false;
}
this.shadowRoot.querySelector("modal-input[name='password']")
.setAttribute("reveal-button", this.getAttribute(attrName));
return true;
}
render() {
let l10nArgs = {
timeCreated: this._login.timeCreated || "",
......
......@@ -6,3 +6,7 @@
:host(:not([editing])) .unlocked-value {
display: none;
}
:host(:not([type="password"])) .reveal-button {
display: none;
}
......@@ -2,7 +2,9 @@
* 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/. */
class ModalInput extends HTMLElement {
/* globals ReflectedFluentElement */
class ModalInput extends ReflectedFluentElement {
static get LOCKED_PASSWORD_DISPLAY() {
return "••••••••";
}
......@@ -24,13 +26,21 @@ class ModalInput extends HTMLElement {
let unlockedValue = this.shadowRoot.querySelector(".unlocked-value");
unlockedValue.setAttribute("type", "password");
}
this.shadowRoot.querySelector(".reveal-button").addEventListener("click", this);
}
static get reflectedFluentIDs() {
return ["reveal-button"];
}
static get observedAttributes() {
return ["editing", "type", "value"];
return ["editing", "type", "value"].concat(ModalInput.reflectedFluentIDs);
}
attributeChangedCallback(attr, oldValue, newValue) {
super.attributeChangedCallback(attr, oldValue, newValue);
if (!this.shadowRoot) {
return;
}
......@@ -63,6 +73,27 @@ class ModalInput extends HTMLElement {
}
}
handleEvent(event) {
switch (event.type) {
case "click": {
if (event.target.classList.contains("reveal-button")) {
let lockedValue = this.shadowRoot.querySelector(".locked-value");
let unlockedValue = this.shadowRoot.querySelector(".unlocked-value");
let editing = this.hasAttribute("editing");
if ((editing && unlockedValue.getAttribute("type") == "password") ||
(!editing && lockedValue.textContent == this.constructor.LOCKED_PASSWORD_DISPLAY)) {
lockedValue.textContent = this.value;
unlockedValue.setAttribute("type", "text");
} else {
lockedValue.textContent = this.constructor.LOCKED_PASSWORD_DISPLAY;
unlockedValue.setAttribute("type", "password");
}
}
break;
}
}
}
get value() {
return this.hasAttribute("editing") ? this.shadowRoot.querySelector(".unlocked-value").value.trim()
: this.getAttribute("value") || "";
......
......@@ -7,6 +7,7 @@ Test the modal-input component
<meta charset="utf-8">
<title>Test the modal-input component</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="reflected-fluent-element.js"></script>
<script src="modal-input.js"></script>
<script src="aboutlogins_common.js"></script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment