Auth field

{
  name: "Demo: login form",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <form novalidate>
        <oc-auth-field-v1>
          <input
            name="email"
            type="email"
            aria-describedby="errorEmail hintEmail"
            maxlength="250"
            id="inputEmail"
            aria-required="true"
            spellcheck="false"
            autocorrect="off"
            aria-invalid="false"
          />
          <label for="inputEmail">Username</label>
          <div slot="error" id="errorEmail"></div>
          <div slot="hint" id="hintEmail">Enter username</div>
        </oc-auth-field-v1>

        <oc-auth-field-v1>
          <input
            name="password"
            type="password"
            aria-describedby="errorPassword hintPassword"
            minlength="8"
            id="inputPassword"
            aria-required="true"
            aria-invalid="false"
            autocomplete="current-password"
          />
          <label for="inputPassword">Password</label>
          <div slot="error" id="errorPassword"></div>
          <div slot="hint" id="hintPassword">Enter password</div>
        </oc-auth-field-v1>

        <!-- Workaround for Safari < 18. -->
        <!-- Fixed with Safari 18: https://bugs.webkit.org/show_bug.cgi?id=279595 -->
        <input type="hidden" />

        <div class="buttons">
          <oc-button-v1 type="reset" variant="secondary">Reset</oc-button-v1>
          <oc-button-v1 type="submit">Submit</oc-button-v1>
        </div>
      </form>

      <script>
        (() => {
          const [form] = document.getElementsByTagName("form");
          const [resetButton] = document.getElementsByTagName("oc-button-v1");
          const [ocEmail, ocPassword] = document.getElementsByTagName("oc-auth-field-v1");
          const inputEmail = document.getElementById("inputEmail");
          const inputPassword = document.getElementById("inputPassword");

          resetButton.addEventListener("click", () => {
            inputEmail.ariaInvalid = "false";
            ocEmail.variant = "default";
            ocEmail.querySelector("[slot=error]").textContent = "";

            inputPassword.ariaInvalid = "false";
            ocPassword.variant = "default";
            ocPassword.querySelector("[slot=error]").textContent = "";
          });

          const validateEmail = () => {
            if (!inputEmail.value) {
              inputEmail.ariaInvalid = "true";
              ocEmail.querySelector("[slot=error]").textContent =
                "Please enter your email address.";
            } else if (inputEmail.validity.typeMismatch) {
              inputEmail.ariaInvalid = "true";
              ocEmail.querySelector("[slot=error]").textContent =
                "Please enter a valid email address.";
            } else {
              inputEmail.ariaInvalid = "false";
              ocEmail.querySelector("[slot=error]").textContent = "";
            }
            ocEmail.variant = inputEmail.ariaInvalid === "true" ? "error" : "default";
          };

          const validatePassword = () => {
            if (!inputPassword.value) {
              inputPassword.ariaInvalid = "true";
              ocPassword.querySelector("[slot=error]").textContent = "Please enter your password.";
            } else if (inputPassword.value.length < 8) {
              inputPassword.ariaInvalid = "true";
              ocPassword.querySelector("[slot=error]").textContent =
                "Password must be at least 8 characters long.";
            } else {
              inputPassword.ariaInvalid = "false";
              ocPassword.querySelector("[slot=error]").textContent = "";
            }

            ocPassword.variant = inputPassword.ariaInvalid === "true" ? "error" : "default";
          };

          form.addEventListener("submit", (ev) => {
            validateEmail();
            validatePassword();

            // focus the first invalid field
            if (inputEmail.ariaInvalid === "true") {
              inputEmail.focus();
            } else if (inputPassword.ariaInvalid === "true") {
              inputPassword.focus();
            }

            if (inputEmail.ariaInvalid !== "true" && inputPassword.ariaInvalid !== "true") {
              let formData = new FormData(form);
              formData.set("password", "********"); // just in case
              let data = JSON.stringify(Object.fromEntries(formData));
              alert("sending " + data);
            }
            ev.preventDefault();
          });
        })();
      </script>

      ${safariObscureHint}

      <style>
        form {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .buttons {
          display: flex;
          gap: 16px;
        }
      </style>
    `;
  }
}

{
  name: "Demo: password repeat",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <form novalidate>
        <oc-auth-field-v1>
          <input
            name="password"
            type="password"
            aria-describedby="errorPassword1 hintPassword1"
            minlength="8"
            id="inputPassword1"
            aria-required="true"
            aria-invalid="false"
            autocomplete="new-password"
          />
          <label for="inputPassword1">Password</label>
          <div slot="error" id="errorPassword1"></div>
          <div slot="hint" id="hintPassword1">Enter password</div>
        </oc-auth-field-v1>

        <oc-auth-field-v1>
          <input
            name="password"
            type="password"
            aria-describedby="errorPassword2 hintPassword2"
            minlength="8"
            id="inputPassword2"
            aria-required="true"
            aria-invalid="false"
            autocomplete="new-password"
          />
          <label for="inputPassword2">Repeat</label>
          <div slot="error" id="errorPassword2"></div>
          <div slot="hint" id="hintPassword2">Repeat password</div>
        </oc-auth-field-v1>
      </form>

      ${safariObscureHint}

      <script>
        (() => {
          const [ocPassword1, ocPassword2] = document.getElementsByTagName("oc-auth-field-v1");

          ocPassword1.addEventListener("oc-property-change", (ev) => {
            if (ev.detail.passwordVisible) {
              ocPassword2.passwordVisible = ev.detail.passwordVisible.current;
            }
          });

          ocPassword2.addEventListener("oc-property-change", (ev) => {
            if (ev.detail.passwordVisible) {
              ocPassword1.passwordVisible = ev.detail.passwordVisible.current;
            }
          });
        })();
      </script>

      <style>
        form {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .buttons {
          display: flex;
          gap: 16px;
        }
      </style>
    `;
  }
}

{
  render: () => html`
    <oc-auth-field-v1>
      <input
        name="email"
        type="email"
        aria-describedby="hintEmail"
        maxlength="250"
        id="inputEmail"
        aria-required="true"
        spellcheck="false"
        autocorrect="off"
      />
      <label for="inputEmail">Username</label>
      <div slot="hint" id="hintEmail">Enter username</div>
    </oc-auth-field-v1>
  `,
  play: async ({
    canvasElement
  }) => {
    const input = canvasElement.querySelector("input")!;
    const label = canvasElement.querySelector("label")!;
    await expect(label.getBoundingClientRect().toJSON(), "should initially be not on the top").toMatchObject({
      bottom: 52,
      height: 24,
      left: 28,
      top: 28,
      x: 28,
      y: 28
    });
    await userEvent.type(input, "foo@bar.de");
    await waitFor(() => expect(label.getBoundingClientRect().toJSON(), "should be on the top").toMatchObject({
      bottom: 24,
      height: 16,
      left: 28,
      top: 8,
      x: 28,
      y: 8
    }));
  }
}

{
  render: () => html`
    <oc-auth-field-v1>
      <input
        name="password"
        type="password"
        aria-describedby="hintPassword"
        maxlength="250"
        id="inputPassword"
        aria-required="true"
      />
      <label for="inputPassword">Password</label>
      <div slot="hint" id="hintPassword">Enter password</div>
    </oc-auth-field-v1>
  `,
  play: async ({
    canvasElement
  }) => {
    const input = canvasElement.querySelector("input")!;
    const passwordToggle = canvasElement.querySelector("oc-auth-field-v1")!.shadowRoot!.querySelector(".auth-field__password-toggle")! as HTMLElement;
    await expect(passwordToggle).toBeVisible();
    await expect(input.getAttribute("type"), "password should be visible").toBe("password");
    await userEvent.type(input, "MyTestPassword123");
    await click(passwordToggle);
    await expect(input.getAttribute("type"), "password should be visible").toBe("text");
  }
}

{
  render: () => html`
    <oc-auth-field-v1 variant="error">
      <input
        type="email"
        aria-describedby="errorXYZ hintXYZ"
        maxlength="250"
        id="inputXYZ"
        aria-required="true"
        aria-invalid="true"
        autocomplete=""
      />
      <label for="inputXYZ">E-Mail</label>
      <div slot="error" id="errorXYZ">Your input is not valid.</div>
      <div slot="hint" id="hintXYZ">Some hint</div>
    </oc-auth-field-v1>
  `,
  play: async ({
    canvasElement
  }) => {
    const hint = canvasElement.querySelector("[slot=hint]")!;
    const error = canvasElement.querySelector("[slot=error]")!;
    await expect(getComputedStyle(hint).color).toBe("rgb(109, 109, 109)");
    await expect(getComputedStyle(error).color).toBe("rgb(179, 0, 35)");
  }
}

{
  render: () => html`
    <form>
      <oc-auth-field-v1>
        <input
          name="email"
          type="email"
          aria-describedby="hintEmail"
          maxlength="250"
          id="inputEmail"
          aria-required="true"
          spellcheck="false"
          autocorrect="off"
        />
        <label for="inputEmail">Username</label>
        <div slot="hint" id="hintEmail">Enter username</div>
      </oc-auth-field-v1>

      <br />

      <oc-auth-field-v1>
        <input
          name="password"
          type="password"
          aria-describedby="hintPassword"
          maxlength="250"
          id="inputPassword"
          aria-required="true"
        />
        <label for="inputPassword">Password</label>
        <div slot="hint" id="hintPassword">Enter password</div>
      </oc-auth-field-v1>

      <br />

      <button type="submit">Submit</button>
    </form>
  `,
  play: async ({
    canvasElement
  }) => {
    const form = canvasElement.querySelector("form")!;
    const button = canvasElement.querySelector("button")!;
    const [emailInput, passwordInput] = Array.from(canvasElement.querySelectorAll("input"));
    let formData;
    form.addEventListener("submit", event => {
      event.preventDefault();
      formData = Object.fromEntries(new FormData(form).entries());
    });
    await userEvent.type(emailInput, "foo@bar.de");
    await userEvent.type(passwordInput, "MyTestPassword123");
    await click(button);
    await expect(formData).toStrictEqual({
      email: "foo@bar.de",
      password: "MyTestPassword123"
    });
  }
}