feat: improved registration signup flow (#1188)

refactored signup flow for entire registration process. Utilized seed data option for optional seeding of Foods, Units, and Labels. Localized registration page.

frontend/composables/use-validators.ts

@@ -1,14 +1,46 @@
+import { ref, Ref } from "@nuxtjs/composition-api";
+import { RequestResponse } from "~/types/api";
+import { Validation } from "~/api/public/validators";
+
 const EMAIL_REGEX =
   /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
 const URL_REGEX = /[-a-zA-Z0-9@:%._+~#=]{1,256}.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
-export const validators: {[key: string]: (v: string) => boolean | string} = {
+export const validators = {
   required: (v: string) => !!v || "This Field is Required",
   email: (v: string) => !v || EMAIL_REGEX.test(v) || "Email Must Be Valid",
   whitespace: (v: string) => !v || v.split(" ").length <= 1 || "No Whitespace Allowed",
   url: (v: string) => !v || URL_REGEX.test(v) || "Must Be A Valid URL",
-  // TODO These appear to be unused?
-  // minLength: (min: number) => (v: string) => !v || v.length >= min || `Must Be At Least ${min} Characters`,
-  // maxLength: (max: number) => (v: string) => !v || v.length <= max || `Must Be At Most ${max} Characters`,
+  minLength: (min: number) => (v: string) => !v || v.length >= min || `Must Be At Least ${min} Characters`,
+  maxLength: (max: number) => (v: string) => !v || v.length <= max || `Must Be At Most ${max} Characters`,
+};
+
+/**
+ * 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<Validation>>,
+  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 };
 };