Bug 1941437 - Create a basic moz-input-password element r=reusable-components-reviewers,hjones

Differential Revision: https://phabricator.services.mozilla.com/D240538
2025-03-12 14:25:40 +00:00
parent 8cfb80ce02
commit 50de7bd1b4
8 changed files with 216 additions and 3 deletions
--- a/toolkit/content/customElements.js
+++ b/toolkit/content/customElements.js
@@ -838,6 +838,10 @@
            "moz-input-folder",
            "chrome://global/content/elements/moz-input-folder.mjs",
          ],
+          [
+            "moz-input-password",
+            "chrome://global/content/elements/moz-input-password.mjs",
+          ],
          [
            "moz-input-search",
            "chrome://global/content/elements/moz-input-search.mjs",
--- a/toolkit/content/jar.mn
+++ b/toolkit/content/jar.mn
@@ -104,6 +104,7 @@ toolkit.jar:
   content/global/elements/moz-input-common.css       (widgets/moz-input-common.css)
   content/global/elements/moz-input-folder.css    (widgets/moz-input-folder/moz-input-folder.css)
   content/global/elements/moz-input-folder.mjs    (widgets/moz-input-folder/moz-input-folder.mjs)
+   content/global/elements/moz-input-password.mjs    (widgets/moz-input-password/moz-input-password.mjs)
   content/global/elements/moz-input-search.mjs    (widgets/moz-input-search/moz-input-search.mjs)
   content/global/elements/moz-input-text.css    (widgets/moz-input-text/moz-input-text.css)
   content/global/elements/moz-input-text.mjs    (widgets/moz-input-text/moz-input-text.mjs)
--- a/toolkit/content/tests/widgets/chrome.toml
+++ b/toolkit/content/tests/widgets/chrome.toml
@@ -44,6 +44,8 @@ skip-if = [

 ["test_moz_input_folder.html"]

+["test_moz_input_password.html"]
+
 ["test_moz_input_search.html"]

 ["test_moz_input_text.html"]
--- a/toolkit/content/tests/widgets/test_moz_input_password.html
+++ b/toolkit/content/tests/widgets/test_moz_input_password.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>MozInputPassword Tests</title>
+    <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+    <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
+    <link
+      rel="stylesheet"
+      href="chrome://mochikit/content/tests/SimpleTest/test.css"
+    />
+    <script
+      type="module"
+      src="chrome://global/content/elements/moz-input-password.mjs"
+    ></script>
+    <script src="lit-test-helpers.js"></script>
+    <script class="testbody" type="application/javascript">
+      let testHelpers = new InputTestHelpers();
+      let html;
+
+      add_setup(async function setup() {
+        ({ html } = await testHelpers.setupLit());
+        testHelpers.setupTests({
+          templateFn: (attrs, children) =>
+            html`<moz-input-password ${attrs}>${children}</moz-input-password>`,
+        });
+      });
+
+      add_task(async function testMozInputPasswordProperties() {
+        await testHelpers.testCommonInputProperties("moz-input-password");
+      });
+
+      add_task(async function testMozInputPasswordEvents() {
+        await testHelpers.testTextBasedInputEvents("moz-input-password");
+      });
+    </script>
+  </head>
+  <body>
+    <p id="display"></p>
+    <div id="content" style="display: none"></div>
+    <pre id="test"></pre>
+  </body>
+</html>
--- a/toolkit/content/widgets/moz-input-folder/moz-input-folder.mjs
+++ b/toolkit/content/widgets/moz-input-folder/moz-input-folder.mjs
@@ -155,7 +155,7 @@ export default class MozInputFolder extends MozInputText {

    return html`
      <div class="container">
-        ${super.inputTemplate(classes, styles, inputValue)}
+        ${super.inputTemplate({ classes, styles, inputValue })}
        <moz-button
          id="choose-folder-button"
          data-l10n-id="choose-folder-button"
--- a/toolkit/content/widgets/moz-input-password/moz-input-password.mjs
+++ b/toolkit/content/widgets/moz-input-password/moz-input-password.mjs
@@ -0,0 +1,26 @@
+/* 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 MozInputText from "chrome://global/content/elements/moz-input-text.mjs";
+
+/**
+ * A password input custom element.
+ *
+ * @tagname moz-input-password
+ * @property {string} label - The text of the label element
+ * @property {string} name - The name of the input control
+ * @property {string} value - The value of the input control
+ * @property {boolean} disabled - The disabled state of the input control
+ * @property {boolean} readonly - The readonly state of the input control
+ * @property {string} iconSrc - The src for an optional icon
+ * @property {string} description - The text for the description element that helps describe the input control
+ * @property {string} supportPage - Name of the SUMO support page to link to.
+ * @property {string} placeholder - Text to display when the input has no value.
+ */
+export default class MozInputPassword extends MozInputText {
+  inputTemplate() {
+    return super.inputTemplate({ type: "password" });
+  }
+}
+customElements.define("moz-input-password", MozInputPassword);
--- a/toolkit/content/widgets/moz-input-password/moz-input-password.stories.mjs
+++ b/toolkit/content/widgets/moz-input-password/moz-input-password.stories.mjs
@@ -0,0 +1,134 @@
+/* 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, ifDefined } from "../vendor/lit.all.mjs";
+import "./moz-input-password.mjs";
+
+export default {
+  title: "UI Widgets/Input Password",
+  component: "moz-input-password",
+  argTypes: {
+    l10nId: {
+      options: [
+        "moz-input-password-label",
+        "moz-input-password-placeholder",
+        "moz-input-password-description",
+        "moz-input-password-label-wrapped",
+      ],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    status: "in-development",
+    handles: ["change", "input"],
+    fluent: `
+moz-input-password-label =
+  .label = Password:
+moz-input-password-placeholder =
+  .label = Password:
+  .placeholder = Placeholder text
+moz-input-password-description =
+  .label = Password:
+  .description = Description for the password input
+  .placeholder = Placeholder text
+moz-input-password-label-wrapped =
+  .label = Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique justo leo, ac pellentesque lacus gravida vitae. Nam pellentesque suscipit venenatis.
+    `,
+  },
+};
+
+const Template = ({
+  name,
+  value,
+  iconSrc,
+  disabled,
+  l10nId,
+  description,
+  supportPage,
+  accessKey,
+  hasSlottedDescription,
+  hasSlottedSupportLink,
+}) => html`
+  <moz-input-password
+    name=${name}
+    value=${ifDefined(value || null)}
+    iconsrc=${ifDefined(iconSrc || null)}
+    ?disabled=${disabled}
+    data-l10n-id=${l10nId}
+    support-page=${ifDefined(supportPage || null)}
+    accesskey=${ifDefined(accessKey || null)}
+  >
+    ${hasSlottedDescription
+      ? html`<div slot="description">${description}</div>`
+      : ""}
+    ${hasSlottedSupportLink
+      ? html`<a slot="support-link" href="www.example.com">Click me!</a>`
+      : ""}
+  </moz-input-password>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  name: "example-moz-input-password",
+  value: "",
+  iconSrc: "",
+  disabled: false,
+  l10nId: "moz-input-password-label",
+  supportPage: "",
+  accessKey: "",
+  hasSlottedDescription: false,
+  hasSlottedSupportLink: false,
+};
+
+export const WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  ...Default.args,
+  l10nId: "moz-input-password-placeholder",
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  ...Default.args,
+  iconSrc: "chrome://global/skin/icons/highlights.svg",
+};
+
+export const withDescription = Template.bind({});
+withDescription.args = {
+  ...Default.args,
+  l10nId: "moz-input-password-description",
+};
+
+export const WithSlottedDescription = Template.bind({});
+WithSlottedDescription.args = {
+  ...Default.args,
+  description: "This is a custom slotted description.",
+  hasSlottedDescription: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  l10nId: "moz-input-password-description",
+  disabled: true,
+};
+
+export const WithAccesskey = Template.bind({});
+WithAccesskey.args = {
+  ...Default.args,
+  accessKey: "s",
+};
+
+export const WithSupportLink = Template.bind({});
+WithSupportLink.args = {
+  ...Default.args,
+  supportPage: "support-page",
+  l10nId: "moz-input-password-description",
+};
+
+export const WithSlottedSupportLink = Template.bind({});
+WithSlottedSupportLink.args = {
+  ...Default.args,
+  hasSlottedSupportLink: true,
+  l10nId: "moz-input-password-description",
+};
--- a/toolkit/content/widgets/moz-input-text/moz-input-text.mjs
+++ b/toolkit/content/widgets/moz-input-text/moz-input-text.mjs
@@ -43,11 +43,13 @@ export default class MozInputText extends MozBaseInputElement {
    this.value = e.target.value;
  }

-  inputTemplate(classes, styles, inputValue) {
+  inputTemplate(options = {}) {
+    let { type = "text", classes, styles, inputValue } = options;
+
    return html`
      <input
        id="input"
-        type="text"
+        type=${type}
        class=${ifDefined(classes)}
        style=${ifDefined(styles)}
        name=${this.name}