refactor(input validation): rework getting current validation status (@Miodec) (monkeytypegame#6988)

Rename to diffrentiate between the predicate `isValid` and the element
`isValid`
Return `ValidationResult` instead of just a boolean
Update usage to the new format
Move config specific `resetIfEmpty` to the `ConfigInputOptions` type

Author: Miodec

frontend/src/ts/elements/input-validation.ts

@@ -32,9 +32,6 @@ export type Validation<T> = {
 
   /** custom debounce delay for `isValid` call. defaults to 100 */
   debounceDelay?: number;
-
-  /** Resets the value to the current config if empty */
-  resetIfEmpty?: false;
 };
 
 // oxlint-disable-next-line no-explicit-any
@@ -144,7 +141,7 @@ export type ValidationOptions<T> = (T extends string
 };
 
 export type ValidatedHtmlInputElement = HTMLInputElement & {
-  isValid: () => boolean | undefined;
+  getValidationResult: () => ValidationResult;
   setValue: (val: string | null) => void;
   triggerValidation: () => void;
 };
@@ -178,9 +175,11 @@ export function validateWithIndicator<T>(
     },
   });
 
-  let isValid: boolean | undefined = undefined;
+  let currentStatus: ValidationResult = {
+    status: "checking",
+  };
   const callback = (result: ValidationResult): void => {
-    isValid = result.status === "success" || result.status === "warning";
+    currentStatus = result;
     if (result.status === "failed" || result.status === "warning") {
       indicator.show(result.status, result.errorMessage);
     } else {
@@ -198,11 +197,12 @@ export function validateWithIndicator<T>(
   inputElement.addEventListener("input", handler);
 
   const result = inputElement as ValidatedHtmlInputElement;
-  result.isValid = () => isValid;
+  result.getValidationResult = () => {
+    return currentStatus;
+  };
   result.setValue = (val: string | null) => {
     inputElement.value = val ?? "";
     if (val === null) {
-      isValid = undefined;
       indicator.hide();
     } else {
       inputElement.dispatchEvent(new Event("input"));
@@ -227,6 +227,8 @@ export type ConfigInputOptions<K extends ConfigKey, T = ConfigType[K]> = {
     schema: boolean;
     /** optional callback is called for each change of the validation result */
     validationCallback?: (result: ValidationResult) => void;
+    /** Resets the value to the current config if empty */
+    resetIfEmpty?: false;
   };
 };
 

frontend/src/ts/modals/edit-preset.ts

@@ -262,7 +262,7 @@ async function apply(): Promise<void> {
     return;
   }
 
-  if (presetNameEl?.isValid() === false) {
+  if (presetNameEl?.getValidationResult().status === "failed") {
     Notifications.add("Preset name is not valid", 0);
     return;
   }

frontend/src/ts/modals/save-custom-text.ts

@@ -89,7 +89,7 @@ function save(): boolean {
 async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.addEventListener("submit", (e) => {
     e.preventDefault();
-    if (validatedInput.isValid() === true && save()) {
+    if (validatedInput.getValidationResult().status === "success" && save()) {
       void modal.hide();
     }
   });

frontend/src/ts/pages/login.ts

@@ -170,7 +170,8 @@ validateWithIndicator(emailVerifyInputEl, {
   debounceDelay: 0,
   callback: (result) => {
     registerForm.email =
-      emailInputEl.isValid() && result.status === "success"
+      emailInputEl.getValidationResult().status === "success" &&
+      result.status === "success"
         ? emailInputEl.value
         : undefined;
     updateSignupButton();
@@ -204,7 +205,8 @@ validateWithIndicator(passwordVerifyInputEl, {
   debounceDelay: 0,
   callback: (result) => {
     registerForm.password =
-      passwordInputEl.isValid() && result.status === "success"
+      passwordInputEl.getValidationResult().status === "success" &&
+      result.status === "success"
         ? passwordInputEl.value
         : undefined;
     updateSignupButton();