chore: Nuxt 4 upgrade (#7426)

frontend/app/composables/use-validators.ts

@@ -0,0 +1,42 @@
+import type { RequestResponse } from "~/lib/api/types/non-generated";
+import type { ValidationResponse } from "~/lib/api/types/response";
+import { required, email, whitespace, url, urlOptional, minLength, maxLength } from "~/lib/validators";
+
+export const validators = {
+  required,
+  email,
+  whitespace,
+  url,
+  urlOptional,
+  minLength,
+  maxLength,
+};
+
+/**
+   * useAsyncValidator us a factory function that returns an async function that
+   * when called will validate the input against the backend database and set the
+   * error messages when applicable to the ref.
+   */
+export const useAsyncValidator = (
+  value: Ref<string>,
+  validatorFunc: (v: string) => Promise<RequestResponse<ValidationResponse>>,
+  validatorMessage: string,
+  errorMessages: Ref<string[]>,
+) => {
+  const valid = ref(false);
+
+  const validate = async () => {
+    errorMessages.value = [];
+    const { data } = await validatorFunc(value.value);
+
+    if (!data?.valid) {
+      valid.value = false;
+      errorMessages.value.push(validatorMessage);
+      return;
+    }
+
+    valid.value = true;
+  };
+
+  return { validate, valid };
+};