define OtpDialog

website/src/scripts/otp-form-wc.ts

@@ -0,0 +1,68 @@
+class OtpForm extends HTMLElement {
+  observer?: MutationObserver;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.observer = new MutationObserver(() => {
+      this.clearInputs();
+      this.configureInputs();
+    });
+    this.observer.observe(this, { childList: true, subtree: true });
+  }
+
+  disconnectedCallback() {
+    this.observer?.disconnect();
+  }
+
+  clearInputs() {
+    console.log("clearing all inputs");
+    const inputs = this.querySelectorAll(
+      'input:not([type="submit"])',
+    ) as NodeListOf<HTMLInputElement>;
+    for (const input of inputs) {
+      input.value = "";
+    }
+  }
+
+  configureInputs() {
+    this.observer?.disconnect();
+    const inputs = this.querySelectorAll(
+      'input:not([type="submit"])',
+    ) as NodeListOf<HTMLInputElement>;
+    const form = this.querySelector("form") as HTMLFormElement;
+
+    for (const input of inputs) {
+      input.addEventListener("focus", () => {
+        input.select();
+      });
+
+      input.addEventListener("input", () => {
+        if (input.value.length > 0) {
+          input.value = input.value.slice(0, 1).toLocaleUpperCase();
+          const nextInput = input.nextElementSibling as HTMLInputElement;
+          if (nextInput) {
+            nextInput.focus();
+            return;
+          }
+
+          const submitButton = form.querySelector(
+            'input[type="submit"]',
+          ) as HTMLInputElement;
+          submitButton.focus();
+          let areAllInputsEntered = true;
+          inputs.forEach((input) => {
+            areAllInputsEntered = areAllInputsEntered && input.value.length > 0;
+          });
+          if (areAllInputsEntered) {
+            form.requestSubmit(submitButton);
+          }
+        }
+      });
+    }
+  }
+}
+
+customElements.define("otp-form", OtpForm);