feat: First Time Setup Wizard (#3204)

* extract user registration form into a composable

* added base wizard component

* added partial setup implementation

* removed unused attrs

* added setup bypass

* made setup page more readable

* add checkbox hints to autoform

* added common settings pages and initial submit logic

* bypass setup in demo

* add full name to user registration

* added fullname and pw handling to setup

* fixed wizard indentation

* added post-setup suggestions

* added tests for backend changes

* renamed Wizard to BaseWizard

* lint fixes

* pass hardcoded default password instead of backend nonsense

* removed old test

* fix e2e

* added setup skip to e2e testing for all admin users

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

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

@@ -0,0 +1,30 @@
+import { useContext } from "@nuxtjs/composition-api";
+import { fieldTypes } from "../forms";
+import { AutoFormItems } from "~/types/auto-forms";
+
+export const useCommonSettingsForm = () => {
+    const { i18n } = useContext();
+
+    const commonSettingsForm: AutoFormItems = [
+        {
+          section: i18n.tc("profile.group-settings"),
+          label: i18n.tc("group.enable-public-access"),
+          hint: i18n.tc("group.enable-public-access-description"),
+          varName: "makeGroupRecipesPublic",
+          type: fieldTypes.BOOLEAN,
+          rules: ["required"],
+        },
+        {
+          section: i18n.tc("data-pages.data-management"),
+          label: i18n.tc("user-registration.use-seed-data"),
+          hint: i18n.tc("user-registration.use-seed-data-description"),
+          varName: "useSeedData",
+          type: fieldTypes.BOOLEAN,
+          rules: ["required"],
+        },
+      ];
+
+    return {
+        commonSettingsForm,
+    }
+}

frontend/composables/use-setup/index.ts

@@ -0,0 +1 @@
+export { useCommonSettingsForm } from "./common-settings-form";

frontend/composables/use-users/index.ts

@@ -1 +1,2 @@
 export { useUserForm } from "./user-form";
+export { useUserRegistrationForm } from "./user-registration-form";

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

@@ -0,0 +1,87 @@
+import { ref, Ref, useContext } from "@nuxtjs/composition-api";
+import { useAsyncValidator } from "~/composables/use-validators";
+import { VForm } from "~/types/vuetify";
+import { usePublicApi } from "~/composables/api/api-client";
+
+const domAccountForm = ref<VForm | null>(null);
+const username = ref("");
+const fullName = ref("");
+const email = ref("");
+const password1 = ref("");
+const password2 = ref("");
+const advancedOptions = ref(false);
+
+export const useUserRegistrationForm = () => {
+  const { i18n } = useContext();
+  function safeValidate(form: Ref<VForm | null>) {
+    if (form.value && form.value.validate) {
+      return form.value.validate();
+    }
+    return false;
+  }
+  // ================================================================
+  // Provide Group Details
+  const publicApi = usePublicApi();
+  // ================================================================
+  // Provide Account Details
+
+  const usernameErrorMessages = ref<string[]>([]);
+  const { validate: validateUsername, valid: validUsername } = useAsyncValidator(
+    username,
+    (v: string) => publicApi.validators.username(v),
+    i18n.tc("validation.username-is-taken"),
+    usernameErrorMessages
+  );
+  const emailErrorMessages = ref<string[]>([]);
+  const { validate: validateEmail, valid: validEmail } = useAsyncValidator(
+    email,
+    (v: string) => publicApi.validators.email(v),
+    i18n.tc("validation.email-is-taken"),
+    emailErrorMessages
+  );
+  const accountDetails = {
+    username,
+    fullName,
+    email,
+    advancedOptions,
+    validate: async () => {
+      if (!(validUsername.value && validEmail.value)) {
+        await Promise.all([validateUsername(), validateEmail()]);
+      }
+
+      return (safeValidate(domAccountForm as Ref<VForm>) && validUsername.value && validEmail.value);
+    },
+    reset: () => {
+      accountDetails.username.value = "";
+      accountDetails.fullName.value = "";
+      accountDetails.email.value = "";
+      accountDetails.advancedOptions.value = false;
+    },
+  };
+  // ================================================================
+  // Provide Credentials
+  const passwordMatch = () => password1.value === password2.value || i18n.tc("user.password-must-match");
+  const credentials = {
+    password1,
+    password2,
+    passwordMatch,
+    reset: () => {
+      credentials.password1.value = "";
+      credentials.password2.value = "";
+    }
+  };
+
+  return {
+    accountDetails,
+    credentials,
+    emailErrorMessages,
+    usernameErrorMessages,
+    // Fields
+    advancedOptions,
+    // Validators
+    validateUsername,
+    validateEmail,
+    // Dom Refs
+    domAccountForm,
+  };
+};