impr(modals): missing/invalid inputs disable submit button (@fehmer) (monkeytypegame#6973)

Author: fehmer

frontend/src/ts/utils/simple-modal.ts

@@ -171,15 +171,14 @@ export class SimpleModal {
       el.find(".submitButton").remove();
     } else {
       el.find(".submitButton").text(this.buttonText);
+      this.updateSubmitButtonState();
     }
 
     if ((this.text ?? "") === "") {
       el.find(".text").addClass("hidden");
     } else {
       el.find(".text").removeClass("hidden");
     }
-
-    // }
   }
 
   initInputs(): void {
@@ -315,9 +314,12 @@ export class SimpleModal {
         "#" + attributes["id"]
       ) as HTMLInputElement;
 
-      if (input.oninput !== undefined) {
-        element.oninput = input.oninput;
-      }
+      const originalOnInput = element.oninput;
+      element.oninput = (e) => {
+        if (originalOnInput) originalOnInput.call(element, e);
+        input.oninput?.(e);
+        this.updateSubmitButtonState();
+      };
 
       input.currentValue = () => {
         if (element.type === "checkbox")
@@ -338,6 +340,8 @@ export class SimpleModal {
 
           callback: (result: ValidationResult) => {
             input.hasError = result.status !== "success";
+
+            this.updateSubmitButtonState();
           },
           debounceDelay: input.validation.debounceDelay,
         };
@@ -351,16 +355,12 @@ export class SimpleModal {
 
   exec(): void {
     if (!this.canClose) return;
-    if (
-      this.inputs
-        .filter((i) => i.hidden !== true && i.optional !== true)
-        .some((v) => v.currentValue() === undefined || v.currentValue() === "")
-    ) {
+    if (this.hasMissingRequired()) {
       Notifications.add("Please fill in all fields", 0);
       return;
     }
 
-    if (this.inputs.some((i) => i.hasError === true)) {
+    if (this.hasValidationErrors()) {
       Notifications.add("Please solve all validation errors", 0);
       return;
     }
@@ -429,6 +429,29 @@ export class SimpleModal {
       await modal.hide(hideOptions);
     }
   }
+
+  hasMissingRequired(): boolean {
+    return this.inputs
+      .filter((i) => i.hidden !== true && i.optional !== true)
+      .some((v) => v.currentValue() === undefined || v.currentValue() === "");
+  }
+
+  hasValidationErrors(): boolean {
+    return this.inputs.some((i) => i.hasError === true);
+  }
+
+  updateSubmitButtonState(): void {
+    const button = this.element.querySelector(
+      ".submitButton"
+    ) as HTMLButtonElement;
+    if (button === null) return;
+
+    if (this.hasMissingRequired() || this.hasValidationErrors()) {
+      button.disabled = true;
+    } else {
+      button.disabled = false;
+    }
+  }
 }
 
 function hide(): void {