cleanup

frontend/src/ts/modals/google-sign-up.ts

@@ -16,7 +16,7 @@ import AnimatedModal from "../utils/animated-modal";
 import { resetIgnoreAuthCallback } from "../firebase";
 import { validateWithIndicator } from "../elements/input-validation";
 import { UserNameSchema } from "@monkeytype/schemas/users";
-import { apeValidation } from "../utils/remote-validation";
+import { remoteValidation } from "../utils/remote-validation";
 
 let signedInUser: UserCredential | undefined = undefined;
 
@@ -155,9 +155,9 @@ function disableInput(): void {
 
 validateWithIndicator(nameInputEl, {
   schema: UserNameSchema,
-  isValid: apeValidation(
+  isValid: remoteValidation(
     async (name) => Ape.users.getNameAvailability({ params: { name } }),
-    { errorMessage: "Name not available" }
+    { on5xx: "Backend unavailable, try later." }
   ),
   debounceDelay: 1000,
   callback: (result) => {

frontend/src/ts/modals/simple-modals.ts

@@ -45,7 +45,7 @@ import {
 import { goToPage } from "../pages/leaderboards";
 import FileStorage from "../utils/file-storage";
 import { z } from "zod";
-import { apeValidation } from "../utils/remote-validation";
+import { remoteValidation } from "../utils/remote-validation";
 
 type PopupKey =
   | "updateEmail"
@@ -480,9 +480,9 @@ list.updateName = new SimpleModal({
       initVal: "",
       validation: {
         schema: UserNameSchema,
-        isValid: apeValidation(
+        isValid: remoteValidation(
           async (name) => Ape.users.getNameAvailability({ params: { name } }),
-          { errorMessage: "Name not available" }
+          { on5xx: "Backend unavailable, try later." }
         ),
         debounceDelay: 1000,
       },

frontend/src/ts/pages/login.ts

@@ -10,7 +10,7 @@ import {
 import { validateWithIndicator } from "../elements/input-validation";
 import { isDevEnvironment } from "../utils/misc";
 import { z } from "zod";
-import { apeValidation } from "../utils/remote-validation";
+import { remoteValidation } from "../utils/remote-validation";
 
 let registerForm: {
   name?: string;
@@ -74,9 +74,9 @@ const nameInputEl = document.querySelector(
 ) as HTMLInputElement;
 validateWithIndicator(nameInputEl, {
   schema: UserNameSchema,
-  isValid: apeValidation(
+  isValid: remoteValidation(
     async (name) => Ape.users.getNameAvailability({ params: { name } }),
-    { errorMessage: "Name not available" }
+    { on5xx: "Backend unavailable, try later." }
   ),
   debounceDelay: 1000,
   callback: (result) => {

frontend/src/ts/utils/remote-validation.ts

@@ -1,22 +1,26 @@
 import { IsValidResponse } from "../elements/input-validation";
 
-export function apeValidation<T>(
+type IsValidResonseOrFunction =
+  | ((message: string) => IsValidResponse)
+  | IsValidResponse;
+export function remoteValidation<V, T>(
   call: (
-    val: string
+    val: V
   ) => Promise<{ status: number; body: { data?: T; message: string } }>,
   options?: {
     check?: (data: T) => IsValidResponse;
-    errorMessage?: string;
+    on4xx?: IsValidResonseOrFunction;
+    on5xx?: IsValidResonseOrFunction;
   }
-): (val: string) => Promise<IsValidResponse> {
+): (val: V) => Promise<IsValidResponse> {
   return async (val) => {
     const result = await call(val);
-    if (result.status === 200) {
+    if (result.status <= 299) {
       return options?.check?.(result.body.data as T) ?? true;
-    } else if (result.status >= 500) {
-      return result.body.message;
-    } else {
-      return options?.errorMessage ?? result.body.message;
     }
+    const handler = result.status <= 499 ? options?.on4xx : options?.on5xx;
+    if (handler === undefined) return result.body.message;
+    if (typeof handler === "function") return handler(result.body.message);
+    return handler;
   };
 }