summaryrefslogtreecommitdiff
path: root/http/public/scripts/otp-form-wc.js
diff options
context:
space:
mode:
Diffstat (limited to 'http/public/scripts/otp-form-wc.js')
-rw-r--r--http/public/scripts/otp-form-wc.js68
1 files changed, 0 insertions, 68 deletions
diff --git a/http/public/scripts/otp-form-wc.js b/http/public/scripts/otp-form-wc.js
deleted file mode 100644
index 49e1b02..0000000
--- a/http/public/scripts/otp-form-wc.js
+++ /dev/null
@@ -1,68 +0,0 @@
-class OtpForm extends HTMLElement {
- /** @type MutationObserver? */
- observer;
-
- 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");
- /** @type NodeListOf<HTMLInputElement> */
- const inputs = this.querySelectorAll('input:not([type="submit"])');
- for (const input of inputs) {
- input.value = "";
- }
- }
-
- configureInputs() {
- this.observer?.disconnect();
- /** @type NodeListOf<HTMLInputElement> */
- const inputs = this.querySelectorAll('input:not([type="submit"])');
- /** @type NodeListOf<HTMLFormElement> */
- const form = this.querySelector("form");
-
- 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();
- /** @type HTMLInputElement */
- const nextInput = input.nextElementSibling;
- if (nextInput) {
- nextInput.focus();
- return;
- }
-
- /** @type HTMLInputElement */
- const submitButton = form.querySelector('input[type="submit"]');
- submitButton.focus();
- let areAllInputsEntered = true;
- inputs.forEach((input) => {
- areAllInputsEntered = areAllInputsEntered && input.value.length > 0;
- });
- if (areAllInputsEntered) {
- form.requestSubmit(submitButton);
- }
- }
- });
- }
- }
-}
-
-customElements.define("otp-form", OtpForm);