fix: User Registration Form Validation and Other Setup Wizard Things (#5920)

frontend/composables/use-setup/common-settings-form.ts

@@ -4,7 +4,7 @@ import type { AutoFormItems } from "~/types/auto-forms";
 export const useCommonSettingsForm = () => {
   const i18n = useI18n();
 
-  const commonSettingsForm: AutoFormItems = [
+  const commonSettingsForm = computed<AutoFormItems>(() => [
     {
       section: i18n.t("profile.group-settings"),
       label: i18n.t("group.enable-public-access"),
@@ -21,7 +21,7 @@ export const useCommonSettingsForm = () => {
       type: fieldTypes.BOOLEAN,
       rules: ["required"],
     },
-  ];
+  ]);
 
   return {
     commonSettingsForm,

frontend/composables/use-users/user-registration-form.ts

@@ -1,5 +1,5 @@
 import { useAsyncValidator } from "~/composables/use-validators";
-import type { VForm } from "~/types/vuetify";
+import type { VForm } from "~/types/auto-forms";
 import { usePublicApi } from "~/composables/api/api-client";
 
 const domAccountForm = ref<VForm | null>(null);
@@ -13,12 +13,14 @@ const advancedOptions = ref(false);
 export const useUserRegistrationForm = () => {
   const i18n = useI18n();
 
-  function safeValidate(form: Ref<VForm | null>) {
-    if (form.value && form.value.validate) {
-      return form.value.validate();
-    }
+  async function safeValidate(form: Ref<VForm | null>) {
+    if (!form.value) {
       return false;
     }
+
+    const result = await form.value.validate();
+    return result.valid;
+  }
   // ================================================================
   // Provide Group Details
   const publicApi = usePublicApi();
@@ -45,11 +47,15 @@ export const useUserRegistrationForm = () => {
     email,
     advancedOptions,
     validate: async () => {
-      if (!(validUsername.value && validEmail.value)) {
+      if (!validUsername.value || !validEmail.value) {
         await Promise.all([validateUsername(), validateEmail()]);
       }
 
-      return (safeValidate(domAccountForm as Ref<VForm>) && validUsername.value && validEmail.value);
+      if (!validUsername.value || !validEmail.value) {
+        return false;
+      }
+
+      return await safeValidate(domAccountForm as Ref<VForm>);
     },
     reset: () => {
       accountDetails.username.value = "";

frontend/lang/messages/en-US.json

@@ -1168,7 +1168,7 @@
     "group-details": "Group Details",
     "group-details-description": "Before you create an account you'll need to create a group. Your group will only contain you, but you'll be able to invite others later. Members in your group can share meal plans, shopping lists, recipes, and more!",
     "use-seed-data": "Use Seed Data",
-    "use-seed-data-description": "Mealie ships with a collection of Foods, Units, and Labels that can be used to populate your group with helpful data for organizing your recipes.",
+    "use-seed-data-description": "Mealie ships with a collection of Foods, Units, and Labels that can be used to populate your group with helpful data for organizing your recipes. These are translated into the language you currently have selected. You can always add to or modify this data later.",
     "account-details": "Account Details"
   },
   "validation": {

frontend/pages/admin/setup.vue

@@ -1,5 +1,6 @@
 <template>
-  <v-container fill-height
+  <v-container
+    fill-height
     fluid
     class="d-flex justify-center align-center"
     width="1200px"
@@ -8,7 +9,8 @@
       'bg-off-white': !$vuetify.theme.current.dark,
     }"
   >
-    <BaseWizard v-model="currentPage"
+    <BaseWizard
+      v-model="currentPage"
       :max-page-number="totalPages"
       :title="$t('admin.setup.first-time-setup')"
       :prev-button-show="activeConfig.showPrevButton"
@@ -20,13 +22,15 @@
       :is-submitting="isSubmitting"
       @submit="handleSubmit"
     >
-      <v-container v-if="currentPage === Pages.LANDING"
+      <v-container
+        v-if="currentPage === Pages.LANDING"
         class="mb-12"
       >
         <v-card-title class="text-h4 justify-center text-center">
           {{ $t('admin.setup.welcome-to-mealie-get-started') }}
         </v-card-title>
-        <v-btn :to="groupSlug ? `/g/${groupSlug}` : '/login'"
+        <v-btn
+          :to="groupSlug ? `/g/${groupSlug}` : '/login'"
           rounded
           variant="outlined"
           color="grey-lighten-1"
@@ -36,35 +40,42 @@
           {{ $t('admin.setup.already-set-up-bring-to-homepage') }}
         </v-btn>
       </v-container>
+
       <v-container v-if="currentPage === Pages.USER_INFO">
         <UserRegistrationForm />
       </v-container>
+
       <v-container v-if="currentPage === Pages.PAGE_2">
-        <v-card-title class="headline justify-center">
+        <v-card-title class="headline justify-center pa-0">
           {{ $t('admin.setup.common-settings-for-new-sites') }}
         </v-card-title>
-        <AutoForm v-model="commonSettings"
+        <AutoForm
+          v-model="commonSettings"
           :items="commonSettingsForm"
         />
       </v-container>
+
       <v-container v-if="currentPage === Pages.CONFIRM">
         <v-card-title class="headline justify-center">
           {{ $t("general.confirm-how-does-everything-look") }}
         </v-card-title>
         <v-list>
           <template v-for="(item, idx) in confirmationData">
-            <v-list-item v-if="item.display"
+            <v-list-item
+              v-if="item.display"
               :key="idx"
             >
               <v-list-item-title>{{ item.text }}</v-list-item-title>
               <v-list-item-subtitle>{{ item.value }}</v-list-item-subtitle>
             </v-list-item>
-            <v-divider v-if="idx !== confirmationData.length - 1"
+            <v-divider
+              v-if="idx !== confirmationData.length - 1"
               :key="`divider-${idx}`"
             />
           </template>
         </v-list>
       </v-container>
+
       <v-container v-if="currentPage === Pages.END">
         <v-card-title class="text-h4 justify-center">
           {{ $t('admin.setup.setup-complete') }}
@@ -72,7 +83,8 @@
         <v-card-title class="text-h6 justify-center">
           {{ $t('admin.setup.here-are-a-few-things-to-help-you-get-started') }}
         </v-card-title>
-        <div v-for="link, idx in setupCompleteLinks"
+        <div
+          v-for="link, idx in setupCompleteLinks"
           :key="idx"
           class="px-4 pt-4"
         >
@@ -82,7 +94,8 @@
               {{ link.section }}
             </v-card-text>
           </div>
-          <v-btn :to="link.to"
+          <v-btn
+            :to="link.to"
             color="info"
           >
             {{ link.text }}