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/api/api-client.ts

@@ -3,9 +3,14 @@ import { useContext } from "@nuxtjs/composition-api";
 import { NuxtAxiosInstance } from "@nuxtjs/axios";
 import { AdminAPI, Api } from "~/api";
 import { ApiRequestInstance, RequestResponse } from "~/types/api";
+import { PublicApi } from "~/api/public-api";
 
 const request = {
-  async safe<T, U>(funcCall: (url: string, data: U) => Promise<AxiosResponse<T>>, url: string, data: U): Promise<RequestResponse<T>> {
+  async safe<T, U>(
+    funcCall: (url: string, data: U) => Promise<AxiosResponse<T>>,
+    url: string,
+    data: U
+  ): Promise<RequestResponse<T>> {
     let error = null;
     const response = await funcCall(url, data).catch(function (e) {
       console.log(e);
@@ -66,6 +71,13 @@ export const useUserApi = function (): Api {
   $axios.setHeader("Accept-Language", i18n.locale);
 
   const requests = getRequests($axios);
-
   return new Api(requests);
 };
+
+export const usePublicApi = function (): PublicApi {
+  const { $axios, i18n } = useContext();
+  $axios.setHeader("Accept-Language", i18n.locale);
+
+  const requests = getRequests($axios);
+  return new PublicApi(requests);
+};

frontend/composables/use-password-field.ts

@@ -1,22 +0,0 @@
-import { computed, ref, useContext } from "@nuxtjs/composition-api";
-
-export function usePasswordField() {
-  const show = ref(false);
-
-  const { $globals } = useContext();
-
-  const passwordIcon = computed(() => {
-    return show.value ? $globals.icons.eyeOff : $globals.icons.eye;
-  });
-  const inputType = computed(() => (show.value ? "text" : "password"));
-
-  const togglePasswordShow = () => {
-    show.value = !show.value;
-  };
-
-  return {
-    inputType,
-    togglePasswordShow,
-    passwordIcon,
-  };
-}

frontend/composables/use-passwords.ts

@@ -0,0 +1,94 @@
+import { computed, Ref, ref, useContext } from "@nuxtjs/composition-api";
+
+export function usePasswordField() {
+  const show = ref(false);
+
+  const { $globals } = useContext();
+
+  const passwordIcon = computed(() => {
+    return show.value ? $globals.icons.eyeOff : $globals.icons.eye;
+  });
+  const inputType = computed(() => (show.value ? "text" : "password"));
+
+  const togglePasswordShow = () => {
+    show.value = !show.value;
+  };
+
+  return {
+    inputType,
+    togglePasswordShow,
+    passwordIcon,
+  };
+}
+
+function scorePassword(pass: string): number {
+  let score = 0;
+  if (!pass) return score;
+
+  const flaggedWords = ["password", "mealie", "admin", "qwerty", "login"];
+
+  if (pass.length < 6) return score;
+
+  // Check for flagged words
+  for (const word of flaggedWords) {
+    if (pass.toLowerCase().includes(word)) {
+      score -= 100;
+    }
+  }
+
+  // award every unique letter until 5 repetitions
+  const letters: { [key: string]: number } = {};
+
+  for (let i = 0; i < pass.length; i++) {
+    letters[pass[i]] = (letters[pass[i]] || 0) + 1;
+    score += 5.0 / letters[pass[i]];
+  }
+
+  // bonus points for mixing it up
+  const variations: { [key: string]: boolean } = {
+    digits: /\d/.test(pass),
+    lower: /[a-z]/.test(pass),
+    upper: /[A-Z]/.test(pass),
+    nonWords: /\W/.test(pass),
+  };
+
+  let variationCount = 0;
+  for (const check in variations) {
+    variationCount += variations[check] === true ? 1 : 0;
+  }
+  score += (variationCount - 1) * 10;
+
+  return score;
+}
+
+export const usePasswordStrength = (password: Ref<string>) => {
+  const score = computed(() => {
+    return scorePassword(password.value);
+  });
+
+  const strength = computed(() => {
+    if (score.value < 50) {
+      return "Weak";
+    } else if (score.value < 80) {
+      return "Good";
+    } else if (score.value < 100) {
+      return "Strong";
+    } else {
+      return "Very Strong";
+    }
+  });
+
+  const color = computed(() => {
+    if (score.value < 50) {
+      return "error";
+    } else if (score.value < 80) {
+      return "warning";
+    } else if (score.value < 100) {
+      return "info";
+    } else {
+      return "success";
+    }
+  });
+
+  return { score, strength, color };
+};

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 };
 };