From 0b5dcf6ece649788a93a1305aaf7e8f64a5a6cf6 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 19 Feb 2024 19:45:44 +0000
Subject: [PATCH 01/20] extract user registration form into a composable

---
 .../Domain/User/UserRegistrationForm.vue      | 153 ++++++++++++++++++
 .../use-users/user-registration-form.ts       |  84 ++++++++++
 frontend/lib/api/user/user-registration.ts    |   2 -
 frontend/pages/register/index.vue             | 142 ++++------------
 4 files changed, 269 insertions(+), 112 deletions(-)
 create mode 100644 frontend/components/Domain/User/UserRegistrationForm.vue
 create mode 100644 frontend/composables/use-users/user-registration-form.ts

diff --git a/frontend/components/Domain/User/UserRegistrationForm.vue b/frontend/components/Domain/User/UserRegistrationForm.vue
new file mode 100644
index 00000000000..b0ecfd9a75b
--- /dev/null
+++ b/frontend/components/Domain/User/UserRegistrationForm.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <v-card-title>
+      <v-icon large class="mr-3"> {{ $globals.icons.user }}</v-icon>
+      <span class="headline"> {{ $t("user-registration.account-details") }}</span>
+    </v-card-title>
+    <v-divider />
+    <v-card-text>
+      <v-form ref="domAccountForm" @submit.prevent>
+        <v-text-field
+          v-model="accountDetails.username.value"
+          autofocus
+          v-bind="inputAttrs"
+          :label="$tc('user.username')"
+          :prepend-icon="$globals.icons.user"
+          :rules="[validators.required]"
+          :error-messages="usernameErrorMessages"
+          @blur="validateUsername"
+        />
+        <v-text-field
+          v-model="accountDetails.email.value"
+          v-bind="inputAttrs"
+          :prepend-icon="$globals.icons.email"
+          :label="$tc('user.email')"
+          :rules="[validators.required, validators.email]"
+          :error-messages="emailErrorMessages"
+          @blur="validateEmail"
+        />
+        <v-text-field
+          v-model="credentials.password1.value"
+          v-bind="inputAttrs"
+          :type="pwFields.inputType.value"
+          :append-icon="pwFields.passwordIcon.value"
+          :prepend-icon="$globals.icons.lock"
+          :label="$tc('user.password')"
+          :rules="[validators.required, validators.minLength(8), validators.maxLength(258)]"
+          @click:append="pwFields.togglePasswordShow"
+        />
+
+        <UserPasswordStrength :value="credentials.password1.value" />
+
+        <v-text-field
+          v-model="credentials.password2.value"
+          v-bind="inputAttrs"
+          :type="pwFields.inputType.value"
+          :append-icon="pwFields.passwordIcon.value"
+          :prepend-icon="$globals.icons.lock"
+          :label="$tc('user.confirm-password')"
+          :rules="[validators.required, credentials.passwordMatch]"
+          @click:append="pwFields.togglePasswordShow"
+        />
+        <div class="px-2">
+          <v-checkbox
+            v-model="accountDetails.advancedOptions.value"
+            :label="$tc('user.enable-advanced-content')"
+          />
+          <p class="text-caption mt-n4">
+            {{ $tc("user.enable-advanced-content-description") }}
+          </p>
+        </div>
+      </v-form>
+    </v-card-text>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { useDark } from "@vueuse/core";
+import { validators } from "~/composables/use-validators";
+import { useUserRegistrationForm } from "~/composables/use-users/user-registration-form";
+import { usePasswordField } from "~/composables/use-passwords";
+import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
+
+const inputAttrs = {
+  filled: true,
+  rounded: true,
+  validateOnBlur: true,
+  class: "rounded-lg",
+};
+
+export default defineComponent({
+  components: { UserPasswordStrength },
+  layout: "blank",
+  setup() {
+    const isDark = useDark();
+    const langDialog = ref(false);
+
+    const pwFields = usePasswordField();
+    const {
+      accountDetails,
+      credentials,
+      emailErrorMessages,
+      usernameErrorMessages,
+      validateUsername,
+      validateEmail,
+      domAccountForm,
+    } = useUserRegistrationForm();
+    return {
+      accountDetails,
+      credentials,
+      emailErrorMessages,
+      inputAttrs,
+      isDark,
+      langDialog,
+      pwFields,
+      usernameErrorMessages,
+      validators,
+      // Validators
+      validateUsername,
+      validateEmail,
+      // Dom Refs
+      domAccountForm,
+    };
+  },
+});
+</script>
+
+<style lang="css" scoped>
+.icon-primary {
+  fill: var(--v-primary-base);
+}
+
+.icon-white {
+  fill: white;
+}
+
+.icon-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  margin-top: 2.5rem;
+}
+
+.icon-divider {
+  width: 100%;
+  margin-bottom: -2.5rem;
+}
+
+.icon-avatar {
+  border-color: rgba(0, 0, 0, 0.12);
+  border: 2px;
+}
+
+.bg-off-white {
+  background: #f5f8fa;
+}
+
+.preferred-width {
+  width: 840px;
+}
+</style>
diff --git a/frontend/composables/use-users/user-registration-form.ts b/frontend/composables/use-users/user-registration-form.ts
new file mode 100644
index 00000000000..dfa644b821f
--- /dev/null
+++ b/frontend/composables/use-users/user-registration-form.ts
@@ -0,0 +1,84 @@
+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 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,
+    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.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,
+  };
+};
diff --git a/frontend/lib/api/user/user-registration.ts b/frontend/lib/api/user/user-registration.ts
index ea722c5fbc5..e1921d4cf3e 100644
--- a/frontend/lib/api/user/user-registration.ts
+++ b/frontend/lib/api/user/user-registration.ts
@@ -8,8 +8,6 @@ const routes = {
 };
 
 export class RegisterAPI extends BaseAPI {
-  /** Returns a list of available .zip files for import into Mealie.
-   */
   async register(payload: CreateUserRegistration) {
     return await this.requests.post<any>(routes.register, payload);
   }
diff --git a/frontend/pages/register/index.vue b/frontend/pages/register/index.vue
index 1cd1f74d88a..fd3ce361669 100644
--- a/frontend/pages/register/index.vue
+++ b/frontend/pages/register/index.vue
@@ -4,7 +4,7 @@
     fluid
     class="d-flex justify-center align-center"
     :class="{
-      'bg-off-white': !$vuetify.theme.dark && !isDark.value,
+      'bg-off-white': !$vuetify.theme.dark && !isDark,
     }"
   >
     <LanguageDialog v-model="langDialog" />
@@ -136,73 +136,14 @@
 
         <template v-else-if="state.ctx.state === States.ProvideAccountDetails">
           <div>
-            <v-card-title>
-              <v-icon large class="mr-3"> {{ $globals.icons.user }}</v-icon>
-              <span class="headline"> {{ $t("user-registration.account-details") }}</span>
-            </v-card-title>
-            <v-divider />
-            <v-card-text>
-              <v-form ref="domAccountForm" @submit.prevent>
-                <v-text-field
-                  v-model="accountDetails.username.value"
-                  autofocus
-                  v-bind="inputAttrs"
-                  :label="$tc('user.username')"
-                  :prepend-icon="$globals.icons.user"
-                  :rules="[validators.required]"
-                  :error-messages="usernameErrorMessages"
-                  @blur="validateUsername"
-                />
-                <v-text-field
-                  v-model="accountDetails.email.value"
-                  v-bind="inputAttrs"
-                  :prepend-icon="$globals.icons.email"
-                  :label="$tc('user.email')"
-                  :rules="[validators.required, validators.email]"
-                  :error-messages="emailErrorMessages"
-                  @blur="validateEmail"
-                />
-                <v-text-field
-                  v-model="credentials.password1.value"
-                  v-bind="inputAttrs"
-                  :type="pwFields.inputType.value"
-                  :append-icon="pwFields.passwordIcon.value"
-                  :prepend-icon="$globals.icons.lock"
-                  :label="$tc('user.password')"
-                  :rules="[validators.required, validators.minLength(8), validators.maxLength(258)]"
-                  @click:append="pwFields.togglePasswordShow"
-                />
-
-                <UserPasswordStrength :value="credentials.password1.value" />
-
-                <v-text-field
-                  v-model="credentials.password2.value"
-                  v-bind="inputAttrs"
-                  :type="pwFields.inputType.value"
-                  :append-icon="pwFields.passwordIcon.value"
-                  :prepend-icon="$globals.icons.lock"
-                  :label="$tc('user.confirm-password')"
-                  :rules="[validators.required, credentials.passwordMatch]"
-                  @click:append="pwFields.togglePasswordShow"
-                />
-                <div class="px-2">
-                  <v-checkbox
-                    v-model="accountDetails.advancedOptions.value"
-                    :label="$tc('user.enable-advanced-content')"
-                  />
-                  <p class="text-caption mt-n4">
-                    {{ $tc("user.enable-advanced-content-description") }}
-                  </p>
-                </div>
-              </v-form>
-            </v-card-text>
+            <UserRegistrationForm />
             <v-divider />
             <v-card-actions class="justify-space-between">
               <BaseButton cancel @click="state.back">
                 <template #icon> {{ $globals.icons.back }}</template>
                 {{ $t("general.back") }}
               </BaseButton>
-              <BaseButton icon-right @click="accountDetails.next">
+              <BaseButton icon-right @click="accountDetailsNext">
                 <template #icon> {{ $globals.icons.forward }}</template>
                 {{ $t("general.next") }}
               </BaseButton>
@@ -258,6 +199,7 @@
 import { defineComponent, onMounted, ref, useRouter, Ref, useContext, computed } from "@nuxtjs/composition-api";
 import { useDark } from "@vueuse/core";
 import { States, RegistrationType, useRegistration } from "./states";
+import { useUserRegistrationForm } from "~/composables/use-users/user-registration-form";
 import { useRouteQuery } from "~/composables/use-router";
 import { validators, useAsyncValidator } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
@@ -268,6 +210,7 @@ import { usePasswordField } from "~/composables/use-passwords";
 import { usePublicApi } from "~/composables/api/api-client";
 import { useLocales } from "~/composables/use-locales";
 import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
+import UserRegistrationForm from "~/components/Domain/User/UserRegistrationForm.vue";
 
 const inputAttrs = {
   filled: true,
@@ -277,7 +220,7 @@ const inputAttrs = {
 };
 
 export default defineComponent({
-  components: { UserPasswordStrength },
+  components: { UserPasswordStrength, UserRegistrationForm },
   layout: "blank",
   setup() {
     const { i18n } = useContext();
@@ -370,48 +313,22 @@ export default defineComponent({
         state.setState(States.ProvideAccountDetails);
       },
     };
-    // ================================================================
-    // Provide Account Details
-    const domAccountForm = ref<VForm | null>(null);
-    const username = ref("");
-    const email = ref("");
-    const advancedOptions = ref(false);
-    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,
-      email,
-      advancedOptions,
-      next: () => {
-        if (!safeValidate(domAccountForm as Ref<VForm>) || !validUsername.value || !validEmail.value) {
+    const pwFields = usePasswordField();
+    const {
+      accountDetails,
+      credentials,
+      domAccountForm,
+      emailErrorMessages,
+      usernameErrorMessages,
+      validateUsername,
+      validateEmail,
+    } = useUserRegistrationForm();
+    async function accountDetailsNext() {
+      if (!await accountDetails.validate()) {
           return;
         }
         state.setState(States.Confirmation);
-      },
-    };
-    // ================================================================
-    // Provide Credentials
-    const password1 = ref("");
-    const password2 = ref("");
-    const pwFields = usePasswordField();
-    const passwordMatch = () => password1.value === password2.value || i18n.tc("user.password-must-match");
-    const credentials = {
-      password1,
-      password2,
-      passwordMatch,
-    };
+    }
     // ================================================================
     // Locale
     const { locale } = useLocales();
@@ -438,17 +355,17 @@ export default defineComponent({
         {
           display: true,
           text: i18n.tc("user.email"),
-          value: email.value,
+          value: accountDetails.email.value,
         },
         {
           display: true,
           text: i18n.tc("user.username"),
-          value: username.value,
+          value: accountDetails.username.value,
         },
         {
           display: true,
           text: i18n.tc("user.enable-advanced-content"),
-          value: advancedOptions.value ? i18n.tc("general.yes") : i18n.tc("general.no"),
+          value: accountDetails.advancedOptions.value ? i18n.tc("general.yes") : i18n.tc("general.no"),
         },
       ];
     });
@@ -456,12 +373,12 @@ export default defineComponent({
     const router = useRouter();
     async function submitRegistration() {
       const payload: CreateUserRegistration = {
-        email: email.value,
-        username: username.value,
-        password: password1.value,
-        passwordConfirm: password2.value,
+        email: accountDetails.email.value,
+        username: accountDetails.username.value,
+        password: credentials.password1.value,
+        passwordConfirm: credentials.password2.value,
         locale: locale.value,
-        advanced: advancedOptions.value,
+        advanced: accountDetails.advancedOptions.value,
       };
       if (state.ctx.type === RegistrationType.CreateGroup) {
         payload.group = groupName.value;
@@ -472,12 +389,17 @@ export default defineComponent({
       }
       const { response } = await api.register.register(payload);
       if (response?.status === 201) {
+        accountDetails.reset();
+        credentials.reset();
         alert.success(i18n.tc("user-registration.registration-success"));
         router.push("/login");
+      } else {
+        alert.error(i18n.t("events.something-went-wrong") as string);
       }
     }
     return {
       accountDetails,
+      accountDetailsNext,
       confirmationData,
       credentials,
       emailErrorMessages,

From b5fbee92947d9041a5688f5eff6ea907be340fb9 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 19 Feb 2024 20:25:23 +0000
Subject: [PATCH 02/20] added base wizard component

---
 frontend/components/global/Wizard.vue | 257 ++++++++++++++++++++++++++
 frontend/types/components.d.ts        |   2 +
 2 files changed, 259 insertions(+)
 create mode 100644 frontend/components/global/Wizard.vue

diff --git a/frontend/components/global/Wizard.vue b/frontend/components/global/Wizard.vue
new file mode 100644
index 00000000000..5898cc861fd
--- /dev/null
+++ b/frontend/components/global/Wizard.vue
@@ -0,0 +1,257 @@
+<template>
+  <div :style="`width: ${width}; height: 100%;`">
+    <LanguageDialog v-model="langDialog" />
+    <v-card>
+      <div>
+        <v-toolbar width="100%" color="primary" class="d-flex justify-center" style="margin-bottom: 4rem" dark>
+          <v-toolbar-title class="headline text-h4"> Mealie </v-toolbar-title>
+        </v-toolbar>
+
+        <div class="icon-container">
+          <v-divider class="icon-divider"></v-divider>
+          <v-avatar class="pa-2 icon-avatar" color="primary" size="75">
+            <svg class="icon-white" style="width: 75" viewBox="0 0 24 24">
+              <path
+                d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
+              />
+            </svg>
+          </v-avatar>
+        </div>
+      </div>
+      <div class="d-flex justify-center grow items-center my-4">
+        <slot :width="pageWidth"></slot>
+      </div>
+      <div class="mx-2 my-4">
+        <v-progress-linear
+          v-if="value > 0"
+          :value="Math.ceil((value/maxPageNumber)*100)"
+          striped
+          height="10"
+        />
+      </div>
+      <v-divider class="ma-2" />
+      <v-card-actions width="100%">
+        <v-btn
+          v-if="prevButtonShow"
+          :disabled="!prevButtonEnable"
+          :color="prevButtonColor"
+          @click="decrementPage"
+        >
+          <v-icon v-if="prevButtonIcon">
+            {{ prevButtonIcon }}
+          </v-icon>
+          {{ prevButtonText }}
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          v-if="nextButtonShow"
+          :disabled="!nextButtonEnable"
+          :color="nextButtonColor"
+          @click="incrementPage"
+        >
+          <div v-if="isSubmitting">
+            <v-progress-circular indeterminate color="white" size="24" />
+          </div>
+          <div v-else>
+            <v-icon v-if="nextButtonIcon && !nextButtonIconAfter">
+              {{ nextButtonIcon }}
+            </v-icon>
+            {{ nextButtonText }}
+            <v-icon v-if="nextButtonIcon && nextButtonIconAfter">
+              {{ nextButtonIcon }}
+            </v-icon>
+          </div>
+        </v-btn>
+      </v-card-actions>
+      <v-card-actions class="justify-center flex-column py-8">
+        <BaseButton large color="primary" @click="langDialog = true">
+          <template #icon> {{ $globals.icons.translate }}</template>
+          {{ $t("language-dialog.choose-language") }}
+        </BaseButton>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+    minPageNumber: {
+      type: Number,
+      default: 0,
+    },
+    maxPageNumber: {
+      type: Number,
+      required: true,
+    },
+    width: {
+      type: [String, Number],
+      default: "1200px",
+    },
+    pageWidth: {
+      type: [String, Number],
+      default: "600px",
+    },
+    prevButtonText: {
+      type: String,
+      default: undefined,
+    },
+    prevButtonIcon: {
+      type: String,
+      default: null,
+    },
+    prevButtonColor: {
+      type: String,
+      default: "grey-darken-3",
+    },
+    prevButtonShow: {
+      type: Boolean,
+      default: true,
+    },
+    prevButtonEnable: {
+      type: Boolean,
+      default: true,
+    },
+    nextButtonText: {
+      type: String,
+      default: undefined,
+    },
+    nextButtonIcon: {
+      type: String,
+      default: null,
+    },
+    nextButtonIconAfter: {
+      type: Boolean,
+      default: true,
+    },
+    nextButtonColor: {
+      type: String,
+      default: undefined,
+    },
+    nextButtonShow: {
+      type: Boolean,
+      default: true,
+    },
+    nextButtonEnable: {
+      type: Boolean,
+      default: true,
+    },
+    nextButtonIsSubmit: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    isSubmitting: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  setup(props, context) {
+    const { $globals, i18n } = useContext();
+    const ready = ref(false);
+    const langDialog = ref(false);
+
+    const prevButtonText = computed(() => props.prevButtonText || i18n.tc("general.back"));
+    const prevButtonIcon = computed(() => props.prevButtonIcon || $globals.icons.back);
+    const nextButtonText = computed(
+      () => props.nextButtonText || (
+          props.nextButtonIsSubmit ? i18n.tc("general.submit") : i18n.tc("general.next")
+        )
+      );
+    const nextButtonIcon = computed(
+      () => props.nextButtonIcon || (
+          props.nextButtonIsSubmit ? $globals.icons.createAlt : $globals.icons.forward
+      )
+    );
+    const nextButtonColor = computed(
+      () => props.nextButtonColor || (props.nextButtonIsSubmit ? "success" : "info")
+    );
+
+    function goToPage(page: number) {
+      if (page < props.minPageNumber) {
+        return goToPage(props.minPageNumber);
+      } else if (page > props.maxPageNumber) {
+        return goToPage(props.maxPageNumber);
+      }
+
+      context.emit("input", page);
+    }
+
+    function decrementPage() {
+      goToPage(props.value - 1);
+    }
+
+    function incrementPage() {
+      if (props.nextButtonIsSubmit) {
+        context.emit("submit", props.value);
+      } else {
+        goToPage(props.value + 1);
+      }
+    }
+
+    ready.value = true;
+
+    return {
+      ready,
+      langDialog,
+      prevButtonText,
+      prevButtonIcon,
+      nextButtonText,
+      nextButtonIcon,
+      nextButtonColor,
+      decrementPage,
+      incrementPage,
+    };
+  }
+});
+</script>
+
+<style lang="css" scoped>
+.icon-primary {
+  fill: var(--v-primary-base);
+}
+
+.icon-white {
+  fill: white;
+}
+
+.icon-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  margin-top: 2.5rem;
+}
+
+.icon-divider {
+  width: 100%;
+  margin-bottom: -2.5rem;
+}
+
+.icon-avatar {
+  border-color: rgba(0, 0, 0, 0.12);
+  border: 2px;
+}
+
+.bg-off-white {
+  background: #f5f8fa;
+}
+
+.preferred-width {
+  width: 840px;
+}
+</style>
diff --git a/frontend/types/components.d.ts b/frontend/types/components.d.ts
index be102380138..3cfeee63732 100644
--- a/frontend/types/components.d.ts
+++ b/frontend/types/components.d.ts
@@ -32,6 +32,7 @@ import ReportTable from "@/components/global/ReportTable.vue";
 import SafeMarkdown from "@/components/global/SafeMarkdown.vue";
 import StatsCards from "@/components/global/StatsCards.vue";
 import ToggleState from "@/components/global/ToggleState.vue";
+import Wizard from "@/components/global/Wizard.vue";
 import DefaultLayout from "@/components/layout/DefaultLayout.vue";
 
 declare module "vue" {
@@ -70,6 +71,7 @@ declare module "vue" {
     SafeMarkdown: typeof SafeMarkdown;
     StatsCards: typeof StatsCards;
     ToggleState: typeof ToggleState;
+    Wizard: typeof Wizard;
     // Layout Components
     DefaultLayout: typeof DefaultLayout;
   }

From 8e80a656cc09d046a5f4779e39e2d2cf8d418793 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 19 Feb 2024 20:25:38 +0000
Subject: [PATCH 03/20] added partial setup implementation

---
 frontend/lang/messages/en-US.json |   6 +-
 frontend/pages/admin/setup.vue    | 178 ++++++++++++++++++++++++++++++
 frontend/pages/index.vue          |  23 ++--
 frontend/pages/login.vue          |  25 +++--
 4 files changed, 213 insertions(+), 19 deletions(-)
 create mode 100644 frontend/pages/admin/setup.vue

diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 932a49bb303..da10d5e3efc 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -168,6 +168,7 @@
     "units": "Units",
     "back": "Back",
     "next": "Next",
+    "start": "Start",
     "toggle-view": "Toggle View",
     "date": "Date",
     "id": "Id",
@@ -1129,7 +1130,10 @@
     "background-tasks": "Background Tasks",
     "background-tasks-description": "Here you can view all the running background tasks and their status",
     "no-logs-found": "No Logs Found",
-    "tasks": "Tasks"
+    "tasks": "Tasks",
+    "first-time-setup": "First Time Setup",
+    "welcome-to-mealie-get-started": "Welcome to Mealie! Let's get started",
+    "already-set-up-bring-to-homepage": "I'm already set up, just bring me to the homepage"
   },
   "profile": {
     "welcome-user": "👋 Welcome, {0}",
diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
new file mode 100644
index 00000000000..9eebbdd4083
--- /dev/null
+++ b/frontend/pages/admin/setup.vue
@@ -0,0 +1,178 @@
+<template>
+  <v-container
+    fill-height
+    fluid
+    class="d-flex justify-center align-center"
+    width="1200px"
+    min-height="700px"
+    :class="{
+      'bg-off-white': !$vuetify.theme.dark,
+    }"
+  >
+    <Wizard
+      v-model="currentPage"
+      :max-page-number="totalPages"
+      :title="$i18n.tc('admin.first-time-setup')"
+      :prev-button-show="activeConfig.showPrevButton"
+      :next-button-show="activeConfig.showNextButton"
+      :next-button-text="activeConfig.nextButtonText"
+      :next-button-icon="activeConfig.nextButtonIcon"
+      :next-button-color="activeConfig.nextButtonColor"
+      :next-button-is-submit="activeConfig.isSubmit"
+      :is-submitting="isSubmitting"
+      @submit="handleSubmit"
+    >
+    <v-container v-if="currentPage === Pages.LANDING" class="mb-12">
+      <v-card-title class="text-h4 justify-center">
+        {{ $i18n.tc('admin.welcome-to-mealie-get-started') }}
+      </v-card-title>
+      <v-btn
+        rounded
+        outlined
+        text
+        color="grey lighten-1"
+        class="text-subtitle-2 d-flex mx-auto"
+      >
+        {{ $i18n.tc('admin.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-text>Page 2</v-card-text>
+    </v-container>
+    <v-container v-if="currentPage === Pages.CONFIRM">
+      <v-card-text>Confirm Page</v-card-text>
+    </v-container>
+    <v-container v-if="currentPage === Pages.END">
+      <v-card-text>End Page</v-card-text>
+    </v-container>
+    </Wizard>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, useContext, useRouter } from "@nuxtjs/composition-api";
+import { useUserRegistrationForm } from "~/composables/use-users/user-registration-form";
+import UserRegistrationForm from "~/components/Domain/User/UserRegistrationForm.vue";
+
+export default defineComponent({
+  components: { UserRegistrationForm },
+  layout: "blank",
+  setup() {
+    const { $auth, $globals, $vuetify, i18n } = useContext();
+    const { accountDetails } = useUserRegistrationForm();
+
+    const groupSlug = computed(() => $auth.user?.groupSlug);
+    const router = useRouter();
+    const isSubmitting = ref(false);
+
+    if (!$auth.loggedIn) {
+      router.push("/login");
+    }
+
+    const attrs = computed(() => {
+      return $vuetify.breakpoint.smAndDown ? {
+        maxWidth: undefined,
+      } : {
+        maxWidth: "800",
+      }
+    })
+
+    type Config = {
+      nextButtonText: string | undefined;
+      nextButtonIcon: string | undefined;
+      nextButtonColor: string | undefined;
+      showPrevButton: boolean;
+      showNextButton: boolean;
+      isSubmit: boolean;
+    }
+
+    const totalPages = 4;
+    enum Pages {
+      LANDING = 0,
+      USER_INFO = 1,
+      PAGE_2 = 2,
+      CONFIRM = 3,
+      END = 4,
+    }
+
+    const currentPage = ref(0);
+    const activeConfig = computed<Config>(() => {
+      const config: Config = {
+        nextButtonText: undefined,
+        nextButtonIcon: undefined,
+        nextButtonColor: undefined,
+        showPrevButton: true,
+        showNextButton: true,
+        isSubmit: false,
+      }
+
+      switch (currentPage.value) {
+        case Pages.LANDING:
+          config.showPrevButton = false;
+          config.nextButtonText = i18n.tc("general.start");
+          config.nextButtonIcon = $globals.icons.forward;
+          break;
+        case Pages.USER_INFO:
+          config.showPrevButton = false;
+          config.nextButtonText = i18n.tc("general.next");
+          config.nextButtonIcon = $globals.icons.forward;
+          config.isSubmit = true;
+        case Pages.CONFIRM:
+          config.isSubmit = true;
+          break;
+        case Pages.END:
+          config.nextButtonText = i18n.tc("general.home");
+          config.nextButtonIcon = $globals.icons.home;
+          config.nextButtonColor = "primary";
+          config.showPrevButton = false;
+          config.isSubmit = true;
+          break;
+      }
+
+      return config;
+    })
+
+    async function handleSubmit(page: number) {
+      if (isSubmitting.value) {
+        return;
+      }
+
+      isSubmitting.value = true;
+      switch (page) {
+        case Pages.USER_INFO:
+          if (await accountDetails.validate()) {
+            currentPage.value += 1;
+          }
+          break;
+        case Pages.CONFIRM:
+          // TODO: handle submit
+          currentPage.value += 1;
+          break;
+        case Pages.END:
+          router.push(groupSlug.value ? `/g/${groupSlug.value || ""}` : "/login");
+          break;
+      }
+      isSubmitting.value = false;
+    }
+
+    return {
+      attrs,
+      Pages,
+      currentPage,
+      totalPages,
+      activeConfig,
+      isSubmitting,
+      handleSubmit,
+    }
+  },
+
+  header() {
+    return {
+      title: this.$i18n.tc("admin.first-time-setup"),
+    };
+  },
+})
+</script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 795b423388c..612ed71ed06 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext, useRouter } from "@nuxtjs/composition-api";
-import { AppInfo } from "~/lib/api/types/admin";
+import { computed, defineComponent, useAsync, useContext, useRouter } from "@nuxtjs/composition-api";
+import { useAsyncKey } from "~/composables/use-utils";
+import { AppInfo, AppStartupInfo } from "~/lib/api/types/admin";
 
 export default defineComponent({
   layout: "blank",
@@ -22,11 +23,19 @@ export default defineComponent({
       }
     }
 
-    if (groupSlug.value) {
-      router.push(`/g/${groupSlug.value}`);
-    } else {
-      redirectPublicUserToDefaultGroup();
-    }
+    useAsync(async () => {
+      if (groupSlug.value) {
+        const data = await $axios.get<AppStartupInfo>("/api/app/about/startup-info");
+        const isFirstLogin = data.data.isFirstLogin;
+        if (isFirstLogin && $auth.user?.admin) {
+          router.push("/admin/setup");
+        } else {
+          router.push(`/g/${groupSlug.value}`);
+        }
+      } else {
+        redirectPublicUserToDefaultGroup();
+      }
+    }, useAsyncKey());
   }
 });
 </script>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 2e6bfcec6b2..1d9a17f6169 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -132,14 +132,7 @@ export default defineComponent({
     const { $auth, i18n, $axios } = useContext();
     const { loggedIn } = useLoggedInState();
     const groupSlug = computed(() => $auth.user?.groupSlug);
-
-    whenever(
-      () => loggedIn.value && groupSlug.value,
-      () => {
-        router.push(`/g/${groupSlug.value || ""}`);
-      },
-      { immediate: true },
-    );
+    const isFirstLogin = ref(false);
 
     const form = reactive({
       email: "",
@@ -147,12 +140,22 @@ export default defineComponent({
       remember: false,
     });
 
-    const isFirstLogin = ref(false)
-
     useAsync(async () => {
       const data = await $axios.get<AppStartupInfo>("/api/app/about/startup-info");
       isFirstLogin.value = data.data.isFirstLogin;
-  }, useAsyncKey());
+    }, useAsyncKey());
+
+    whenever(
+      () => loggedIn.value && groupSlug.value,
+      () => {
+        if (isFirstLogin.value && $auth.user?.admin) {
+          router.push("/admin/setup");
+        } else {
+          router.push(`/g/${groupSlug.value || ""}`);
+        }
+      },
+      { immediate: true },
+    );
 
     const loggingIn = ref(false);
 

From cf23b79710811765a5c89a2c5459bae67f69ee28 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 19 Feb 2024 20:28:03 +0000
Subject: [PATCH 04/20] removed unused attrs

---
 frontend/pages/admin/setup.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index 9eebbdd4083..7686aa7fe15 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -61,7 +61,7 @@ export default defineComponent({
   components: { UserRegistrationForm },
   layout: "blank",
   setup() {
-    const { $auth, $globals, $vuetify, i18n } = useContext();
+    const { $auth, $globals, i18n } = useContext();
     const { accountDetails } = useUserRegistrationForm();
 
     const groupSlug = computed(() => $auth.user?.groupSlug);
@@ -72,14 +72,6 @@ export default defineComponent({
       router.push("/login");
     }
 
-    const attrs = computed(() => {
-      return $vuetify.breakpoint.smAndDown ? {
-        maxWidth: undefined,
-      } : {
-        maxWidth: "800",
-      }
-    })
-
     type Config = {
       nextButtonText: string | undefined;
       nextButtonIcon: string | undefined;
@@ -159,7 +151,6 @@ export default defineComponent({
     }
 
     return {
-      attrs,
       Pages,
       currentPage,
       totalPages,

From 8ea0a97d2f66091337b556d2a3da18b431bbb9fa Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 19 Feb 2024 20:31:32 +0000
Subject: [PATCH 05/20] added setup bypass

---
 frontend/pages/admin/setup.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index 7686aa7fe15..6af8831ba0a 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -27,11 +27,13 @@
         {{ $i18n.tc('admin.welcome-to-mealie-get-started') }}
       </v-card-title>
       <v-btn
+        :to="groupSlug ? `/g/${groupSlug}` : '/login'"
         rounded
         outlined
         text
         color="grey lighten-1"
         class="text-subtitle-2 d-flex mx-auto"
+        style="width: fit-content;"
       >
         {{ $i18n.tc('admin.already-set-up-bring-to-homepage') }}
       </v-btn>
@@ -70,6 +72,8 @@ export default defineComponent({
 
     if (!$auth.loggedIn) {
       router.push("/login");
+    } else if (!$auth.user?.admin) {
+      router.push(groupSlug.value ? `/g/${groupSlug.value}` : "/login");
     }
 
     type Config = {
@@ -144,7 +148,7 @@ export default defineComponent({
           currentPage.value += 1;
           break;
         case Pages.END:
-          router.push(groupSlug.value ? `/g/${groupSlug.value || ""}` : "/login");
+          router.push(groupSlug.value ? `/g/${groupSlug.value}` : "/login");
           break;
       }
       isSubmitting.value = false;
@@ -157,6 +161,7 @@ export default defineComponent({
       activeConfig,
       isSubmitting,
       handleSubmit,
+      groupSlug,
     }
   },
 

From da100d1e59ec08a9099145fbab4971ff75fe471c Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 19 Feb 2024 20:35:15 +0000
Subject: [PATCH 06/20] made setup page more readable

---
 frontend/pages/admin/setup.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index 6af8831ba0a..9cafdb4265f 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -63,6 +63,8 @@ export default defineComponent({
   components: { UserRegistrationForm },
   layout: "blank",
   setup() {
+    // ================================================================
+    // Setup
     const { $auth, $globals, i18n } = useContext();
     const { accountDetails } = useUserRegistrationForm();
 
@@ -94,6 +96,8 @@ export default defineComponent({
       END = 4,
     }
 
+    // ================================================================
+    // Page Navigation
     const currentPage = ref(0);
     const activeConfig = computed<Config>(() => {
       const config: Config = {
@@ -131,6 +135,8 @@ export default defineComponent({
       return config;
     })
 
+    // ================================================================
+    // Page Submission
     async function handleSubmit(page: number) {
       if (isSubmitting.value) {
         return;
@@ -165,7 +171,7 @@ export default defineComponent({
     }
   },
 
-  header() {
+  head() {
     return {
       title: this.$i18n.tc("admin.first-time-setup"),
     };

From 3698b8342d37cd5ce66a8b10a4a5a2b402ad4576 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 19 Feb 2024 23:06:27 +0000
Subject: [PATCH 07/20] add checkbox hints to autoform

---
 frontend/components/global/AutoForm.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/components/global/AutoForm.vue b/frontend/components/global/AutoForm.vue
index f92acf2e975..2f143f52ea6 100644
--- a/frontend/components/global/AutoForm.vue
+++ b/frontend/components/global/AutoForm.vue
@@ -15,12 +15,22 @@
           v-if="inputField.type === fieldTypes.BOOLEAN"
           v-model="value[inputField.varName]"
           class="my-0 py-0"
-          :label="inputField.label"
           :name="inputField.varName"
-          :hint="inputField.hint || ''"
           :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
           @change="emitBlur"
-        />
+        >
+          <template #label>
+            <div>
+              <v-card-text class="text-body-1 my-0 py-0">
+                {{ inputField.label }}
+              </v-card-text>
+              <v-card-text v-if="inputField.hint" class="text-caption my-0 py-0">
+                {{ inputField.hint }}
+              </v-card-text>
+            </div>
+          </template>
+        </v-checkbox>
+
 
         <!-- Text Field -->
         <v-text-field

From f89cee299943a8b6bd948abaf45108a3b98391b0 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 19 Feb 2024 23:07:03 +0000
Subject: [PATCH 08/20] added common settings pages and initial submit logic

---
 .../use-setup/common-settings-form.ts         |  30 +++
 frontend/composables/use-setup/index.ts       |   1 +
 frontend/composables/use-users/index.ts       |   1 +
 frontend/lang/messages/en-US.json             |   6 +-
 frontend/pages/admin/setup.vue                | 193 +++++++++++++++++-
 frontend/pages/register/index.vue             |   2 +-
 6 files changed, 226 insertions(+), 7 deletions(-)
 create mode 100644 frontend/composables/use-setup/common-settings-form.ts
 create mode 100644 frontend/composables/use-setup/index.ts

diff --git a/frontend/composables/use-setup/common-settings-form.ts b/frontend/composables/use-setup/common-settings-form.ts
new file mode 100644
index 00000000000..12b3a7496e5
--- /dev/null
+++ b/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,
+    }
+}
diff --git a/frontend/composables/use-setup/index.ts b/frontend/composables/use-setup/index.ts
new file mode 100644
index 00000000000..13297ef4b8a
--- /dev/null
+++ b/frontend/composables/use-setup/index.ts
@@ -0,0 +1 @@
+export { useCommonSettingsForm } from './common-settings-form';
diff --git a/frontend/composables/use-users/index.ts b/frontend/composables/use-users/index.ts
index adacee24eb8..f1b1a6a8571 100644
--- a/frontend/composables/use-users/index.ts
+++ b/frontend/composables/use-users/index.ts
@@ -1 +1,2 @@
 export { useUserForm } from "./user-form";
+export { useUserRegistrationForm } from "./user-registration-form";
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index da10d5e3efc..6e6e0f1b7e7 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -84,6 +84,7 @@
     "clear": "Clear",
     "close": "Close",
     "confirm": "Confirm",
+    "confirm-how-does-everything-look": "How does everything look?",
     "confirm-delete-generic": "Are you sure you want to delete this?",
     "copied_message": "Copied!",
     "create": "Create",
@@ -237,6 +238,8 @@
     "group-preferences": "Group Preferences",
     "private-group": "Private Group",
     "private-group-description": "Setting your group to private will default all public view options to default. This overrides an individual recipes public view settings.",
+    "enable-public-access": "Enable Public Access",
+    "enable-public-access-description": "Make group recipes public by default, and allow visitors to view recipes without logging-in",
     "allow-users-outside-of-your-group-to-see-your-recipes": "Allow users outside of your group to see your recipes",
     "allow-users-outside-of-your-group-to-see-your-recipes-description": "When enabled you can use a public share link to share specific recipes without authorizing the user. When disabled, you can only share recipes with users who are in your group or with a pre-generated private link",
     "show-nutrition-information": "Show nutrition information",
@@ -1133,7 +1136,8 @@
     "tasks": "Tasks",
     "first-time-setup": "First Time Setup",
     "welcome-to-mealie-get-started": "Welcome to Mealie! Let's get started",
-    "already-set-up-bring-to-homepage": "I'm already set up, just bring me to the homepage"
+    "already-set-up-bring-to-homepage": "I'm already set up, just bring me to the homepage",
+    "common-settings-for-new-sites": "Here are some common settings for new sites"
   },
   "profile": {
     "welcome-user": "👋 Welcome, {0}",
diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index 9cafdb4265f..9bc62595722 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -42,10 +42,26 @@
       <UserRegistrationForm />
     </v-container>
     <v-container v-if="currentPage === Pages.PAGE_2">
-      <v-card-text>Page 2</v-card-text>
+      <v-card-title class="headline justify-center">
+        {{ $i18n.tc('admin.common-settings-for-new-sites') }}
+      </v-card-title>
+      <AutoForm v-model="commonSettings" :items="commonSettingsForm" />
     </v-container>
     <v-container v-if="currentPage === Pages.CONFIRM">
-      <v-card-text>Confirm Page</v-card-text>
+      <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" :key="idx">
+            <v-list-item-content>
+              <v-list-item-title> {{ item.text }} </v-list-item-title>
+              <v-list-item-subtitle> {{ item.value }} </v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+          <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-text>End Page</v-card-text>
@@ -56,7 +72,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, useContext, useRouter } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+import { useLocales } from "~/composables/use-locales";
+import { alert } from "~/composables/use-toast";
 import { useUserRegistrationForm } from "~/composables/use-users/user-registration-form";
+import { useCommonSettingsForm } from "~/composables/use-setup/common-settings-form";
 import UserRegistrationForm from "~/components/Domain/User/UserRegistrationForm.vue";
 
 export default defineComponent({
@@ -66,9 +86,10 @@ export default defineComponent({
     // ================================================================
     // Setup
     const { $auth, $globals, i18n } = useContext();
-    const { accountDetails } = useUserRegistrationForm();
+    const api = useUserApi();
 
     const groupSlug = computed(() => $auth.user?.groupSlug);
+    const { locale } = useLocales();
     const router = useRouter();
     const isSubmitting = ref(false);
 
@@ -96,6 +117,45 @@ export default defineComponent({
       END = 4,
     }
 
+    // ================================================================
+    // Forms
+    const { accountDetails, credentials } = useUserRegistrationForm();
+    const { commonSettingsForm } = useCommonSettingsForm();
+    const commonSettings = ref({
+      makeGroupRecipesPublic: false,
+      useSeedData: true,
+    })
+
+    const confirmationData = computed(() => {
+      return [
+        {
+          display: true,
+          text: i18n.tc("user.email"),
+          value: accountDetails.email.value,
+        },
+        {
+          display: true,
+          text: i18n.tc("user.username"),
+          value: accountDetails.username.value,
+        },
+        {
+          display: true,
+          text: i18n.tc("user.enable-advanced-content"),
+          value: accountDetails.advancedOptions.value ? i18n.tc("general.yes") : i18n.tc("general.no"),
+        },
+        {
+          display: true,
+          text: i18n.tc("group.enable-public-access"),
+          value: commonSettings.value.makeGroupRecipesPublic ? i18n.tc("general.yes") : i18n.tc("general.no"),
+        },
+        {
+          display: true,
+          text: i18n.tc("user-registration.use-seed-data"),
+          value: commonSettings.value.useSeedData ? i18n.tc("general.yes") : i18n.tc("general.no"),
+        },
+      ];
+    });
+
     // ================================================================
     // Page Navigation
     const currentPage = ref(0);
@@ -137,6 +197,122 @@ export default defineComponent({
 
     // ================================================================
     // Page Submission
+
+    async function updateUser() {
+      // @ts-ignore-next-line user will never be null here
+      const { response } = await api.users.updateOne($auth.user?.id, {
+        ...$auth.user,
+        email: accountDetails.email.value,
+        username: accountDetails.username.value,
+        advancedOptions: accountDetails.advancedOptions.value,
+      })
+
+      if (!response || response.status !== 200) {
+        alert.error(i18n.tc("events.something-went-wrong"));
+      } else {
+        // TODO: update $auth.user
+      }
+    }
+
+    async function updatePassword() {
+      const { response } = await api.users.changePassword({
+        currentPassword: "",  // TODO: adjust workflow to capture this
+        newPassword: credentials.password1.value,
+      });
+
+      if (!response || response.status !== 200) {
+        alert.error(i18n.tc("events.something-went-wrong"));
+      }
+    }
+
+    async function submitRegistration() {
+      const tasks = [
+        updateUser(),
+        updatePassword(),
+      ]
+
+      await Promise.all(tasks);
+    }
+
+    async function updateGroup() {
+      // @ts-ignore-next-line user will never be null here
+      const { data } = await api.groups.getOne($auth.user?.groupId);
+      if (!data || !data.preferences) {
+        alert.error(i18n.tc("events.something-went-wrong"));
+        return;
+      }
+
+      const preferences = {
+        ...data.preferences,
+        privateGroup: !commonSettings.value.makeGroupRecipesPublic,
+        recipePublic: commonSettings.value.makeGroupRecipesPublic,
+      }
+
+      const payload = {
+        ...data,
+        preferences,
+      }
+
+      // @ts-ignore-next-line user will never be null here
+      const { response } = await api.groups.updateOne($auth.user?.groupId, payload);
+      if (!response || response.status !== 200) {
+        alert.error(i18n.tc("events.something-went-wrong"));
+      }
+    }
+
+    async function seedFoods() {
+      const { response } = await api.seeders.foods({ locale: locale.value })
+      if (!response || response.status !== 200) {
+        alert.error(i18n.tc("events.something-went-wrong"));
+      }
+    }
+
+    async function seedUnits() {
+      const { response } = await api.seeders.units({ locale: locale.value })
+      if (!response || response.status !== 200) {
+        alert.error(i18n.tc("events.something-went-wrong"));
+      }
+    }
+
+    async function seedLabels() {
+      const { response } = await api.seeders.labels({ locale: locale.value })
+      if (!response || response.status !== 200) {
+        alert.error(i18n.tc("events.something-went-wrong"));
+      }
+    }
+
+    async function seedData() {
+      if (!commonSettings.value.useSeedData) {
+        return;
+      }
+
+      const tasks = [
+        seedFoods(),
+        seedUnits(),
+        seedLabels(),
+      ]
+
+      await Promise.all(tasks);
+    }
+
+    async function submitCommonSettings() {
+      const tasks = [
+        updateGroup(),
+        seedData(),
+      ]
+
+      await Promise.all(tasks);
+    }
+
+    async function submitAll() {
+      const tasks = [
+        submitRegistration(),
+        submitCommonSettings(),
+      ]
+
+      await Promise.all(tasks);
+    }
+
     async function handleSubmit(page: number) {
       if (isSubmitting.value) {
         return;
@@ -150,7 +326,7 @@ export default defineComponent({
           }
           break;
         case Pages.CONFIRM:
-          // TODO: handle submit
+          await submitAll();
           currentPage.value += 1;
           break;
         case Pages.END:
@@ -161,13 +337,20 @@ export default defineComponent({
     }
 
     return {
+      // Setup
+      groupSlug,
+      // Forms
+      commonSettingsForm,
+      commonSettings,
+      confirmationData,
+      // Page Navigation
       Pages,
       currentPage,
       totalPages,
       activeConfig,
+      // Page Submission
       isSubmitting,
       handleSubmit,
-      groupSlug,
     }
   },
 
diff --git a/frontend/pages/register/index.vue b/frontend/pages/register/index.vue
index fd3ce361669..f75cd73d9de 100644
--- a/frontend/pages/register/index.vue
+++ b/frontend/pages/register/index.vue
@@ -394,7 +394,7 @@ export default defineComponent({
         alert.success(i18n.tc("user-registration.registration-success"));
         router.push("/login");
       } else {
-        alert.error(i18n.t("events.something-went-wrong") as string);
+        alert.error(i18n.tc("events.something-went-wrong"));
       }
     }
     return {

From 85f0ca5c3a2af613c775bb00ec39a8d770c0165f Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 19:30:05 +0000
Subject: [PATCH 09/20] bypass setup in demo

---
 frontend/lib/api/types/admin.ts | 1 +
 frontend/pages/index.vue        | 3 ++-
 frontend/pages/login.vue        | 4 +++-
 mealie/routes/app/app_about.py  | 1 +
 mealie/schema/admin/about.py    | 2 ++
 5 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/lib/api/types/admin.ts b/frontend/lib/api/types/admin.ts
index 0df40dec5f0..dc6b5a8a4a9 100644
--- a/frontend/lib/api/types/admin.ts
+++ b/frontend/lib/api/types/admin.ts
@@ -37,6 +37,7 @@ export interface AppInfo {
 }
 export interface AppStartupInfo {
   isFirstLogin: boolean;
+  isDemo: boolean;
 }
 export interface AppStatistics {
   totalRecipes: number;
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 612ed71ed06..c6fb9dc33ab 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -26,8 +26,9 @@ export default defineComponent({
     useAsync(async () => {
       if (groupSlug.value) {
         const data = await $axios.get<AppStartupInfo>("/api/app/about/startup-info");
+        const isDemo = data.data.isDemo;
         const isFirstLogin = data.data.isFirstLogin;
-        if (isFirstLogin && $auth.user?.admin) {
+        if (!isDemo && isFirstLogin && $auth.user?.admin) {
           router.push("/admin/setup");
         } else {
           router.push(`/g/${groupSlug.value}`);
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 1d9a17f6169..42ad1f9212f 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -132,6 +132,7 @@ export default defineComponent({
     const { $auth, i18n, $axios } = useContext();
     const { loggedIn } = useLoggedInState();
     const groupSlug = computed(() => $auth.user?.groupSlug);
+    const isDemo = ref(false);
     const isFirstLogin = ref(false);
 
     const form = reactive({
@@ -142,13 +143,14 @@ export default defineComponent({
 
     useAsync(async () => {
       const data = await $axios.get<AppStartupInfo>("/api/app/about/startup-info");
+      isDemo.value = data.data.isDemo;
       isFirstLogin.value = data.data.isFirstLogin;
     }, useAsyncKey());
 
     whenever(
       () => loggedIn.value && groupSlug.value,
       () => {
-        if (isFirstLogin.value && $auth.user?.admin) {
+        if (!isDemo.value && isFirstLogin.value && $auth.user?.admin) {
           router.push("/admin/setup");
         } else {
           router.push(`/g/${groupSlug.value || ""}`);
diff --git a/mealie/routes/app/app_about.py b/mealie/routes/app/app_about.py
index 54e11ab8f3a..7591b478b8e 100644
--- a/mealie/routes/app/app_about.py
+++ b/mealie/routes/app/app_about.py
@@ -44,6 +44,7 @@ def get_startup_info(session: Session = Depends(generate_session)):
 
     return AppStartupInfo(
         is_first_login=is_first_login,
+        is_demo=settings.IS_DEMO,
     )
 
 
diff --git a/mealie/schema/admin/about.py b/mealie/schema/admin/about.py
index 0c624772eed..ab16d726766 100644
--- a/mealie/schema/admin/about.py
+++ b/mealie/schema/admin/about.py
@@ -43,6 +43,8 @@ class AppStartupInfo(MealieModel):
     it is removed, this will always return False.
     """
 
+    is_demo: bool
+
 
 class AdminAboutInfo(AppInfo):
     versionLatest: str

From 138a0a0d3c51dfcfb774f7da2461fb76246fcc44 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 20:30:17 +0000
Subject: [PATCH 10/20] add full name to user registration

---
 frontend/components/Domain/User/UserRegistrationForm.vue   | 7 +++++++
 frontend/composables/use-users/user-registration-form.ts   | 3 +++
 frontend/lib/api/types/user.ts                             | 1 +
 frontend/pages/register/index.vue                          | 6 ++++++
 mealie/schema/user/registration.py                         | 5 +++--
 mealie/services/user_services/registration_service.py      | 2 +-
 .../validator_tests/test_registration_validators.py        | 5 +++++
 tests/utils/factories.py                                   | 1 +
 8 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/components/Domain/User/UserRegistrationForm.vue b/frontend/components/Domain/User/UserRegistrationForm.vue
index b0ecfd9a75b..8b1b945f9fd 100644
--- a/frontend/components/Domain/User/UserRegistrationForm.vue
+++ b/frontend/components/Domain/User/UserRegistrationForm.vue
@@ -17,6 +17,13 @@
           :error-messages="usernameErrorMessages"
           @blur="validateUsername"
         />
+        <v-text-field
+          v-model="accountDetails.fullName.value"
+          v-bind="inputAttrs"
+          :label="$tc('user.full-name')"
+          :prepend-icon="$globals.icons.user"
+          :rules="[validators.required]"
+        />
         <v-text-field
           v-model="accountDetails.email.value"
           v-bind="inputAttrs"
diff --git a/frontend/composables/use-users/user-registration-form.ts b/frontend/composables/use-users/user-registration-form.ts
index dfa644b821f..af27549bb1c 100644
--- a/frontend/composables/use-users/user-registration-form.ts
+++ b/frontend/composables/use-users/user-registration-form.ts
@@ -5,6 +5,7 @@ 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("");
@@ -40,6 +41,7 @@ export const useUserRegistrationForm = () => {
   );
   const accountDetails = {
     username,
+    fullName,
     email,
     advancedOptions,
     validate: async () => {
@@ -51,6 +53,7 @@ export const useUserRegistrationForm = () => {
     },
     reset: () => {
       accountDetails.username.value = "";
+      accountDetails.fullName.value = "";
       accountDetails.email.value = "";
       accountDetails.advancedOptions.value = false;
     },
diff --git a/frontend/lib/api/types/user.ts b/frontend/lib/api/types/user.ts
index 6bba730c5f5..24380d4045e 100644
--- a/frontend/lib/api/types/user.ts
+++ b/frontend/lib/api/types/user.ts
@@ -22,6 +22,7 @@ export interface CreateUserRegistration {
   groupToken?: string;
   email: string;
   username: string;
+  fullName: string;
   password: string;
   passwordConfirm: string;
   advanced?: boolean;
diff --git a/frontend/pages/register/index.vue b/frontend/pages/register/index.vue
index f75cd73d9de..a7bf53262dd 100644
--- a/frontend/pages/register/index.vue
+++ b/frontend/pages/register/index.vue
@@ -357,6 +357,11 @@ export default defineComponent({
           text: i18n.tc("user.email"),
           value: accountDetails.email.value,
         },
+        {
+          display: true,
+          text: i18n.tc("user.full-name"),
+          value: accountDetails.fullName.value,
+        },
         {
           display: true,
           text: i18n.tc("user.username"),
@@ -375,6 +380,7 @@ export default defineComponent({
       const payload: CreateUserRegistration = {
         email: accountDetails.email.value,
         username: accountDetails.username.value,
+        fullName: accountDetails.fullName.value,
         password: credentials.password1.value,
         passwordConfirm: credentials.password2.value,
         locale: locale.value,
diff --git a/mealie/schema/user/registration.py b/mealie/schema/user/registration.py
index 7219cd27718..3ce158acf5e 100644
--- a/mealie/schema/user/registration.py
+++ b/mealie/schema/user/registration.py
@@ -10,8 +10,9 @@
 class CreateUserRegistration(MealieModel):
     group: str | None = None
     group_token: Annotated[str | None, Field(validate_default=True)] = None
-    email: Annotated[str, StringConstraints(to_lower=True, strip_whitespace=True)]  # type: ignore
-    username: Annotated[str, StringConstraints(to_lower=True, strip_whitespace=True)]  # type: ignore
+    email: Annotated[str, StringConstraints(to_lower=True, strip_whitespace=True)]
+    username: Annotated[str, StringConstraints(to_lower=True, strip_whitespace=True)]
+    full_name: Annotated[str, StringConstraints(strip_whitespace=True)]
     password: str
     password_confirm: str
     advanced: bool = False
diff --git a/mealie/services/user_services/registration_service.py b/mealie/services/user_services/registration_service.py
index 5873e9c0d91..e6e84b567e3 100644
--- a/mealie/services/user_services/registration_service.py
+++ b/mealie/services/user_services/registration_service.py
@@ -27,7 +27,7 @@ def _create_new_user(self, group: GroupInDB, new_group: bool) -> PrivateUser:
             email=self.registration.email,
             username=self.registration.username,
             password=hash_password(self.registration.password),
-            full_name=self.registration.username,
+            full_name=self.registration.full_name,
             advanced=self.registration.advanced,
             group=group,
             can_invite=new_group,
diff --git a/tests/unit_tests/validator_tests/test_registration_validators.py b/tests/unit_tests/validator_tests/test_registration_validators.py
index 1c3755ffffb..e749ea4a738 100644
--- a/tests/unit_tests/validator_tests/test_registration_validators.py
+++ b/tests/unit_tests/validator_tests/test_registration_validators.py
@@ -9,6 +9,7 @@ def test_create_user_registration() -> None:
         group_token=None,
         email="SomeValidEmail@example.com",
         username="SomeValidUsername",
+        full_name="SomeValidFullName",
         password="SomeValidPassword",
         password_confirm="SomeValidPassword",
         advanced=False,
@@ -20,6 +21,7 @@ def test_create_user_registration() -> None:
         group_token="asdfadsfasdfasdfasdf",
         email="SomeValidEmail@example.com",
         username="SomeValidUsername",
+        full_name="SomeValidFullName",
         password="SomeValidPassword",
         password_confirm="SomeValidPassword",
         advanced=False,
@@ -35,6 +37,7 @@ def test_group_or_token_validator(group, group_token) -> None:
             group_token=group_token,
             email="SomeValidEmail@example.com",
             username="SomeValidUsername",
+            full_name="SomeValidFullName",
             password="SomeValidPassword",
             password_confirm="SomeValidPassword",
             advanced=False,
@@ -47,6 +50,7 @@ def test_group_no_args_passed() -> None:
         CreateUserRegistration(
             email="SomeValidEmail@example.com",
             username="SomeValidUsername",
+            full_name="SomeValidFullName",
             password="SomeValidPassword",
             password_confirm="SomeValidPassword",
             advanced=False,
@@ -61,6 +65,7 @@ def test_password_validator() -> None:
             group_token="asdfadsfasdfasdfasdf",
             email="SomeValidEmail@example.com",
             username="SomeValidUsername",
+            full_name="SomeValidFullName",
             password="SomeValidPassword",
             password_confirm="PasswordDefNotMatch",
             advanced=False,
diff --git a/tests/utils/factories.py b/tests/utils/factories.py
index 57d613b3e2e..ac1ceb56173 100644
--- a/tests/utils/factories.py
+++ b/tests/utils/factories.py
@@ -25,6 +25,7 @@ def user_registration_factory(advanced=None, private=None) -> CreateUserRegistra
         group=random_string(),
         email=random_email(),
         username=random_string(),
+        full_name=random_string(),
         password="fake-password",
         password_confirm="fake-password",
         advanced=advanced or random_bool(),

From 8c77f4e28e4837c63c044f6a3fd205639e76e7b2 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 20:31:11 +0000
Subject: [PATCH 11/20] added fullname and pw handling to setup

---
 frontend/pages/admin/setup.vue | 24 ++++++++++++++++--------
 mealie/routes/users/crud.py    |  7 ++++++-
 mealie/schema/user/user.py     |  2 +-
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index 9bc62595722..d3b6e2c7b66 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -138,6 +138,11 @@ export default defineComponent({
           text: i18n.tc("user.username"),
           value: accountDetails.username.value,
         },
+        {
+          display: true,
+          text: i18n.tc("user.full-name"),
+          value: accountDetails.fullName.value,
+        },
         {
           display: true,
           text: i18n.tc("user.enable-advanced-content"),
@@ -204,19 +209,25 @@ export default defineComponent({
         ...$auth.user,
         email: accountDetails.email.value,
         username: accountDetails.username.value,
+        fullName: accountDetails.fullName.value,
         advancedOptions: accountDetails.advancedOptions.value,
       })
 
       if (!response || response.status !== 200) {
         alert.error(i18n.tc("events.something-went-wrong"));
       } else {
-        // TODO: update $auth.user
+        $auth.setUser({
+          ...$auth.user,
+          email: accountDetails.email.value,
+          username: accountDetails.username.value,
+          fullName: accountDetails.fullName.value,
+        })
       }
     }
 
     async function updatePassword() {
       const { response } = await api.users.changePassword({
-        currentPassword: "",  // TODO: adjust workflow to capture this
+        currentPassword: "",  // the backend will automatically assume the current password is the default password
         newPassword: credentials.password1.value,
       });
 
@@ -226,12 +237,9 @@ export default defineComponent({
     }
 
     async function submitRegistration() {
-      const tasks = [
-        updateUser(),
-        updatePassword(),
-      ]
-
-      await Promise.all(tasks);
+      // the backend will only update the password without the "currentPassword" field if the user is the default user,
+      // so we update the password first, then update the user's details
+      await updatePassword().then(updateUser);
     }
 
     async function updateGroup() {
diff --git a/mealie/routes/users/crud.py b/mealie/routes/users/crud.py
index 07f41582b97..19e4f2c8330 100644
--- a/mealie/routes/users/crud.py
+++ b/mealie/routes/users/crud.py
@@ -70,7 +70,12 @@ def update_password(self, password_change: ChangePassword):
             raise HTTPException(
                 status.HTTP_400_BAD_REQUEST, ErrorResponse.respond(self.t("user.ldap-update-password-unavailable"))
             )
-        if not verify_password(password_change.current_password, self.user.password):
+        if (not password_change.current_password) and self.user.is_default_user:
+            # this might be from the setup wizard, which doesn't require the user's current password
+            password_change.current_password = self.settings._DEFAULT_PASSWORD
+        if not (
+            password_change.current_password and verify_password(password_change.current_password, self.user.password)
+        ):
             raise HTTPException(
                 status.HTTP_400_BAD_REQUEST, ErrorResponse.respond(self.t("user.invalid-current-password"))
             )
diff --git a/mealie/schema/user/user.py b/mealie/schema/user/user.py
index 72e0ab1c87f..a09c8e53c6a 100644
--- a/mealie/schema/user/user.py
+++ b/mealie/schema/user/user.py
@@ -48,7 +48,7 @@ class DeleteTokenResponse(MealieModel):
 
 
 class ChangePassword(MealieModel):
-    current_password: str
+    current_password: str = ""
     new_password: str = Field(..., min_length=8)
 
 

From c9d817926d2a6344e0398f936da91ce1c0d0ecd2 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 20:33:01 +0000
Subject: [PATCH 12/20] fixed wizard indentation

---
 frontend/pages/admin/setup.vue | 88 +++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index d3b6e2c7b66..bac7fe62b62 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -22,50 +22,50 @@
       :is-submitting="isSubmitting"
       @submit="handleSubmit"
     >
-    <v-container v-if="currentPage === Pages.LANDING" class="mb-12">
-      <v-card-title class="text-h4 justify-center">
-        {{ $i18n.tc('admin.welcome-to-mealie-get-started') }}
-      </v-card-title>
-      <v-btn
-        :to="groupSlug ? `/g/${groupSlug}` : '/login'"
-        rounded
-        outlined
-        text
-        color="grey lighten-1"
-        class="text-subtitle-2 d-flex mx-auto"
-        style="width: fit-content;"
-      >
-        {{ $i18n.tc('admin.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">
-        {{ $i18n.tc('admin.common-settings-for-new-sites') }}
-      </v-card-title>
-      <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" :key="idx">
-            <v-list-item-content>
-              <v-list-item-title> {{ item.text }} </v-list-item-title>
-              <v-list-item-subtitle> {{ item.value }} </v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <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-text>End Page</v-card-text>
-    </v-container>
+      <v-container v-if="currentPage === Pages.LANDING" class="mb-12">
+        <v-card-title class="text-h4 justify-center">
+          {{ $i18n.tc('admin.welcome-to-mealie-get-started') }}
+        </v-card-title>
+        <v-btn
+          :to="groupSlug ? `/g/${groupSlug}` : '/login'"
+          rounded
+          outlined
+          text
+          color="grey lighten-1"
+          class="text-subtitle-2 d-flex mx-auto"
+          style="width: fit-content;"
+        >
+          {{ $i18n.tc('admin.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">
+          {{ $i18n.tc('admin.common-settings-for-new-sites') }}
+        </v-card-title>
+        <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" :key="idx">
+              <v-list-item-content>
+                <v-list-item-title> {{ item.text }} </v-list-item-title>
+                <v-list-item-subtitle> {{ item.value }} </v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+            <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-text>End Page</v-card-text>
+      </v-container>
     </Wizard>
   </v-container>
 </template>

From e9c7c287d1724d5919ccbf1d845cfc4f4a021cad Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 21:30:48 +0000
Subject: [PATCH 13/20] added post-setup suggestions

---
 frontend/lang/messages/en-US.json | 18 ++++++--
 frontend/pages/admin/setup.vue    | 71 ++++++++++++++++++++++++++++---
 2 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 6e6e0f1b7e7..8cfcb8ebd10 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -353,6 +353,7 @@
     },
     "recipe-data-migrations": "Recipe Data Migrations",
     "recipe-data-migrations-explanation": "Recipes can be migrated from another supported application to Mealie. This is a great way to get started with Mealie.",
+    "coming-from-another-application-or-an-even-older-version-of-mealie": "Coming from another application or an even older version of Mealie? Check out migrations and see if your data can be imported.",
     "choose-migration-type": "Choose Migration Type",
     "tag-all-recipes": "Tag all recipes with {tag-name} tag",
     "nextcloud-text": "Nextcloud recipes can be imported from a zip file that contains the data stored in Nextcloud. See the example folder structure below to ensure your recipes are able to be imported.",
@@ -533,6 +534,8 @@
     "looking-for-migrations": "Looking For Migrations?",
     "import-with-url": "Import with URL",
     "create-recipe": "Create Recipe",
+    "create-recipe-description": "Create a new recipe from scratch.",
+    "create-recipes": "Create Recipes",
     "import-with-zip": "Import with .zip",
     "create-recipe-from-an-image": "Create recipe from an image",
     "bulk-url-import": "Bulk URL Import",
@@ -838,6 +841,7 @@
     "login": "Login",
     "logout": "Logout",
     "manage-users": "Manage Users",
+    "manage-users-description": "Create and manage users.",
     "new-password": "New Password",
     "new-user": "New User",
     "password-has-been-reset-to-the-default-password": "Password has been reset to the default password",
@@ -1134,10 +1138,16 @@
     "background-tasks-description": "Here you can view all the running background tasks and their status",
     "no-logs-found": "No Logs Found",
     "tasks": "Tasks",
-    "first-time-setup": "First Time Setup",
-    "welcome-to-mealie-get-started": "Welcome to Mealie! Let's get started",
-    "already-set-up-bring-to-homepage": "I'm already set up, just bring me to the homepage",
-    "common-settings-for-new-sites": "Here are some common settings for new sites"
+    "setup": {
+      "first-time-setup": "First Time Setup",
+      "welcome-to-mealie-get-started": "Welcome to Mealie! Let's get started",
+      "already-set-up-bring-to-homepage": "I'm already set up, just bring me to the homepage",
+      "common-settings-for-new-sites": "Here are some common settings for new sites",
+      "setup-complete": "Setup Complete!",
+      "here-are-a-few-things-to-help-you-get-started": "Here are a few things to help you get started with Mealie",
+      "restore-from-v1-backup": "Have a backup from a previous instance of Mealie v1? You can restore it here.",
+      "manage-profile-or-get-invite-link": "Manage your own profile, or grab an invite link to share with others."
+    }
   },
   "profile": {
     "welcome-user": "👋 Welcome, {0}",
diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index bac7fe62b62..e56e3aa1f3d 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -12,7 +12,7 @@
     <Wizard
       v-model="currentPage"
       :max-page-number="totalPages"
-      :title="$i18n.tc('admin.first-time-setup')"
+      :title="$i18n.tc('admin.setup.first-time-setup')"
       :prev-button-show="activeConfig.showPrevButton"
       :next-button-show="activeConfig.showNextButton"
       :next-button-text="activeConfig.nextButtonText"
@@ -24,7 +24,7 @@
     >
       <v-container v-if="currentPage === Pages.LANDING" class="mb-12">
         <v-card-title class="text-h4 justify-center">
-          {{ $i18n.tc('admin.welcome-to-mealie-get-started') }}
+          {{ $i18n.tc('admin.setup.welcome-to-mealie-get-started') }}
         </v-card-title>
         <v-btn
           :to="groupSlug ? `/g/${groupSlug}` : '/login'"
@@ -35,7 +35,7 @@
           class="text-subtitle-2 d-flex mx-auto"
           style="width: fit-content;"
         >
-          {{ $i18n.tc('admin.already-set-up-bring-to-homepage') }}
+          {{ $i18n.tc('admin.setup.already-set-up-bring-to-homepage') }}
         </v-btn>
       </v-container>
       <v-container v-if="currentPage === Pages.USER_INFO">
@@ -43,7 +43,7 @@
       </v-container>
       <v-container v-if="currentPage === Pages.PAGE_2">
         <v-card-title class="headline justify-center">
-          {{ $i18n.tc('admin.common-settings-for-new-sites') }}
+          {{ $i18n.tc('admin.setup.common-settings-for-new-sites') }}
         </v-card-title>
         <AutoForm v-model="commonSettings" :items="commonSettingsForm" />
       </v-container>
@@ -64,7 +64,29 @@
         </v-list>
       </v-container>
       <v-container v-if="currentPage === Pages.END">
-        <v-card-text>End Page</v-card-text>
+        <v-card-title class="text-h4 justify-center">
+          {{ $i18n.tc('admin.setup.setup-complete') }}
+        </v-card-title>
+        <v-card-title class="text-h6 justify-center">
+          {{ $i18n.tc('admin.setup.here-are-a-few-things-to-help-you-get-started') }}
+        </v-card-title>
+        <div v-for="link, idx in setupCompleteLinks" class="px-4 pt-4">
+          <div v-if="link.section">
+            <v-divider v-if="idx" />
+            <v-card-text class="headline pl-0">
+              {{ link.section }}
+            </v-card-text>
+          </div>
+          <v-btn
+            :to="link.to"
+            color="info"
+          >
+            {{ link.text }}
+          </v-btn>
+          <v-card-text class="subtitle px-0 py-2">
+            {{ link.description }}
+          </v-card-text>
+        </div>
       </v-container>
     </Wizard>
   </v-container>
@@ -161,6 +183,42 @@ export default defineComponent({
       ];
     });
 
+    const setupCompleteLinks = ref([
+      {
+        section: i18n.tc("profile.data-migrations"),
+        to: "/admin/backups",
+        text: i18n.tc("settings.backup.backup-restore"),
+        description: i18n.tc("admin.setup.restore-from-v1-backup"),
+      },
+      {
+        to: "/group/migrations",
+        text: i18n.tc("migration.recipe-migration"),
+        description: i18n.tc("migration.coming-from-another-application-or-an-even-older-version-of-mealie"),
+      },
+      {
+        section: i18n.tc("recipe.create-recipes"),
+        to: computed(() => `/g/${groupSlug.value}/r/create/new`),
+        text: i18n.tc("recipe.create-recipe"),
+        description: i18n.tc("recipe.create-recipe-description"),
+      },
+      {
+        to: computed(() => `/g/${groupSlug.value}/r/create/url`),
+        text: i18n.tc("recipe.import-with-url"),
+        description: i18n.tc("recipe.scrape-recipe-description"),
+      },
+      {
+        section: i18n.tc("user.manage-users"),
+        to: "/admin/manage/users",
+        text: i18n.tc("user.manage-users"),
+        description: i18n.tc("user.manage-users-description"),
+      },
+      {
+        to: "/user/profile",
+        text: i18n.tc("profile.manage-user-profile"),
+        description: i18n.tc("admin.setup.manage-profile-or-get-invite-link"),
+      },
+    ]);
+
     // ================================================================
     // Page Navigation
     const currentPage = ref(0);
@@ -351,6 +409,7 @@ export default defineComponent({
       commonSettingsForm,
       commonSettings,
       confirmationData,
+      setupCompleteLinks,
       // Page Navigation
       Pages,
       currentPage,
@@ -364,7 +423,7 @@ export default defineComponent({
 
   head() {
     return {
-      title: this.$i18n.tc("admin.first-time-setup"),
+      title: this.$i18n.tc("admin.setup.first-time-setup"),
     };
   },
 })

From 654dd99962f8a1208d7fdfd7514187901210e36f Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 22:48:01 +0000
Subject: [PATCH 14/20] added tests for backend changes

---
 ...vice.py => test_user_password_services.py} | 63 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 deletions(-)
 rename tests/integration_tests/user_tests/{test_user_password_reset_service.py => test_user_password_services.py} (50%)

diff --git a/tests/integration_tests/user_tests/test_user_password_reset_service.py b/tests/integration_tests/user_tests/test_user_password_services.py
similarity index 50%
rename from tests/integration_tests/user_tests/test_user_password_reset_service.py
rename to tests/integration_tests/user_tests/test_user_password_services.py
index 34dd58ab47e..276194f8447 100644
--- a/tests/integration_tests/user_tests/test_user_password_reset_service.py
+++ b/tests/integration_tests/user_tests/test_user_password_services.py
@@ -3,11 +3,14 @@
 import pytest
 from fastapi.testclient import TestClient
 
+from mealie.core.config import get_app_settings
 from mealie.db.db_setup import session_context
-from mealie.schema.user.user import PrivateUser
+from mealie.repos.repository_factory import AllRepositories
+from mealie.schema.response.pagination import PaginationQuery
+from mealie.schema.user.user import ChangePassword, PrivateUser
 from mealie.services.user_services.password_reset_service import PasswordResetService
 from tests.utils import api_routes
-from tests.utils.factories import random_string
+from tests.utils.factories import random_email, random_string
 from tests.utils.fixture_schemas import TestUser
 
 
@@ -59,6 +62,62 @@ def test_password_reset(api_client: TestClient, unique_user: TestUser, casing: s
     assert response.status_code == 400
 
 
+@pytest.mark.parametrize("use_default_user", [True, False], ids=["default user", "non-default user"])
+def test_update_password_without_current_password(
+    api_client: TestClient, use_default_user: bool, database: AllRepositories
+):
+    settings = get_app_settings()
+    if use_default_user:
+        users = database.users.page_all(PaginationQuery(query_filter=f"email={settings._DEFAULT_EMAIL}"))
+        if not users.items:
+            user = database.users.create(
+                {
+                    "full_name": "Change Me",
+                    "username": "admin",
+                    "email": settings._DEFAULT_EMAIL,
+                    "password": settings._DEFAULT_PASSWORD,
+                    "group": settings.DEFAULT_GROUP,
+                    "admin": True,
+                }
+            )
+        else:
+            user = users.items[0]
+    else:
+        user = database.users.create(
+            {
+                "full_name": "Non Default User",
+                "username": "non-default-user",
+                "email": random_email(),
+                "password": settings._DEFAULT_PASSWORD,
+                "group": settings.DEFAULT_GROUP,
+                "admin": True,
+            }
+        )
+
+    old_form_data = {"username": user.email, "password": settings._DEFAULT_PASSWORD}
+    response = api_client.post(api_routes.auth_token, data=old_form_data)
+    assert response.status_code == 200
+    token = response.json()["access_token"]
+    old_headers = {"Authorization": f"Bearer {token}"}
+
+    new_password = random_string()
+    payload = ChangePassword(new_password=new_password).model_dump()  # current password is not passed here
+    response = api_client.put(api_routes.users_password, json=payload, headers=old_headers)
+    if use_default_user:
+        assert response.status_code == 200
+    else:
+        # even if the default password is correct, we shouldn't authenticate without passing it
+        assert response.status_code == 400
+
+    # Test Login
+    new_form_data = {"username": user.email, "password": new_password}
+    response = api_client.post(api_routes.auth_token, data=new_form_data)
+    if use_default_user:
+        assert response.status_code == 200
+    else:
+        assert response.status_code == 401
+
+
 @pytest.mark.parametrize("casing", ["lower", "upper", "mixed"])
 def test_password_reset_ldap(ldap_user: PrivateUser, casing: str):
     cased_email = ""

From 99e9b75a7e1ff6889f7b4ae5c5d94a9cb4c81e8d Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 23:09:23 +0000
Subject: [PATCH 15/20] renamed Wizard to BaseWizard

---
 frontend/components/global/{Wizard.vue => BaseWizard.vue} | 0
 frontend/pages/admin/setup.vue                            | 4 ++--
 frontend/types/components.d.ts                            | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename frontend/components/global/{Wizard.vue => BaseWizard.vue} (100%)

diff --git a/frontend/components/global/Wizard.vue b/frontend/components/global/BaseWizard.vue
similarity index 100%
rename from frontend/components/global/Wizard.vue
rename to frontend/components/global/BaseWizard.vue
diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index e56e3aa1f3d..8ab3a12a57c 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -9,7 +9,7 @@
       'bg-off-white': !$vuetify.theme.dark,
     }"
   >
-    <Wizard
+    <BaseWizard
       v-model="currentPage"
       :max-page-number="totalPages"
       :title="$i18n.tc('admin.setup.first-time-setup')"
@@ -88,7 +88,7 @@
           </v-card-text>
         </div>
       </v-container>
-    </Wizard>
+    </BaseWizard>
   </v-container>
 </template>
 
diff --git a/frontend/types/components.d.ts b/frontend/types/components.d.ts
index 3cfeee63732..8bc4a1433ad 100644
--- a/frontend/types/components.d.ts
+++ b/frontend/types/components.d.ts
@@ -32,7 +32,7 @@ import ReportTable from "@/components/global/ReportTable.vue";
 import SafeMarkdown from "@/components/global/SafeMarkdown.vue";
 import StatsCards from "@/components/global/StatsCards.vue";
 import ToggleState from "@/components/global/ToggleState.vue";
-import Wizard from "@/components/global/Wizard.vue";
+import BaseWizard from "@/components/global/BaseWizard.vue";
 import DefaultLayout from "@/components/layout/DefaultLayout.vue";
 
 declare module "vue" {
@@ -71,7 +71,7 @@ declare module "vue" {
     SafeMarkdown: typeof SafeMarkdown;
     StatsCards: typeof StatsCards;
     ToggleState: typeof ToggleState;
-    Wizard: typeof Wizard;
+    BaseWizard: typeof BaseWizard;
     // Layout Components
     DefaultLayout: typeof DefaultLayout;
   }

From cea4253d56c36e3f712e40d0bb7fbb25d05f9952 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 23:23:35 +0000
Subject: [PATCH 16/20] lint fixes

---
 frontend/components/global/BaseWizard.vue | 44 ++++++++++++-----------
 frontend/composables/use-setup/index.ts   |  2 +-
 frontend/pages/admin/setup.vue            |  7 ++--
 frontend/pages/register/index.vue         |  3 +-
 4 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/frontend/components/global/BaseWizard.vue b/frontend/components/global/BaseWizard.vue
index 5898cc861fd..f878e8ca899 100644
--- a/frontend/components/global/BaseWizard.vue
+++ b/frontend/components/global/BaseWizard.vue
@@ -37,28 +37,28 @@
           :color="prevButtonColor"
           @click="decrementPage"
         >
-          <v-icon v-if="prevButtonIcon">
-            {{ prevButtonIcon }}
+          <v-icon v-if="prevButtonIconRef">
+            {{ prevButtonIconRef }}
           </v-icon>
-          {{ prevButtonText }}
+          {{ prevButtonTextRef }}
         </v-btn>
         <v-spacer />
         <v-btn
           v-if="nextButtonShow"
           :disabled="!nextButtonEnable"
-          :color="nextButtonColor"
+          :color="nextButtonColorRef"
           @click="incrementPage"
         >
           <div v-if="isSubmitting">
             <v-progress-circular indeterminate color="white" size="24" />
           </div>
           <div v-else>
-            <v-icon v-if="nextButtonIcon && !nextButtonIconAfter">
-              {{ nextButtonIcon }}
+            <v-icon v-if="nextButtonIconRef && !nextButtonIconAfter">
+              {{ nextButtonIconRef }}
             </v-icon>
-            {{ nextButtonText }}
-            <v-icon v-if="nextButtonIcon && nextButtonIconAfter">
-              {{ nextButtonIcon }}
+            {{ nextButtonTextRef }}
+            <v-icon v-if="nextButtonIconRef && nextButtonIconAfter">
+              {{ nextButtonIconRef }}
             </v-icon>
           </div>
         </v-btn>
@@ -164,27 +164,29 @@ export default defineComponent({
     const ready = ref(false);
     const langDialog = ref(false);
 
-    const prevButtonText = computed(() => props.prevButtonText || i18n.tc("general.back"));
-    const prevButtonIcon = computed(() => props.prevButtonIcon || $globals.icons.back);
-    const nextButtonText = computed(
+    const prevButtonTextRef = computed(() => props.prevButtonText || i18n.tc("general.back"));
+    const prevButtonIconRef = computed(() => props.prevButtonIcon || $globals.icons.back);
+    const nextButtonTextRef = computed(
       () => props.nextButtonText || (
           props.nextButtonIsSubmit ? i18n.tc("general.submit") : i18n.tc("general.next")
         )
       );
-    const nextButtonIcon = computed(
+    const nextButtonIconRef = computed(
       () => props.nextButtonIcon || (
           props.nextButtonIsSubmit ? $globals.icons.createAlt : $globals.icons.forward
       )
     );
-    const nextButtonColor = computed(
+    const nextButtonColorRef = computed(
       () => props.nextButtonColor || (props.nextButtonIsSubmit ? "success" : "info")
     );
 
     function goToPage(page: number) {
       if (page < props.minPageNumber) {
-        return goToPage(props.minPageNumber);
+        goToPage(props.minPageNumber);
+        return;
       } else if (page > props.maxPageNumber) {
-        return goToPage(props.maxPageNumber);
+        goToPage(props.maxPageNumber);
+        return;
       }
 
       context.emit("input", page);
@@ -207,11 +209,11 @@ export default defineComponent({
     return {
       ready,
       langDialog,
-      prevButtonText,
-      prevButtonIcon,
-      nextButtonText,
-      nextButtonIcon,
-      nextButtonColor,
+      prevButtonTextRef,
+      prevButtonIconRef,
+      nextButtonTextRef,
+      nextButtonIconRef,
+      nextButtonColorRef,
       decrementPage,
       incrementPage,
     };
diff --git a/frontend/composables/use-setup/index.ts b/frontend/composables/use-setup/index.ts
index 13297ef4b8a..607d0ede618 100644
--- a/frontend/composables/use-setup/index.ts
+++ b/frontend/composables/use-setup/index.ts
@@ -1 +1 @@
-export { useCommonSettingsForm } from './common-settings-form';
+export { useCommonSettingsForm } from "./common-settings-form";
diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index 8ab3a12a57c..9f4a309af7d 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -70,7 +70,7 @@
         <v-card-title class="text-h6 justify-center">
           {{ $i18n.tc('admin.setup.here-are-a-few-things-to-help-you-get-started') }}
         </v-card-title>
-        <div v-for="link, idx in setupCompleteLinks" class="px-4 pt-4">
+        <div v-for="link, idx in setupCompleteLinks" :key="idx" class="px-4 pt-4">
           <div v-if="link.section">
             <v-divider v-if="idx" />
             <v-card-text class="headline pl-0">
@@ -197,12 +197,12 @@ export default defineComponent({
       },
       {
         section: i18n.tc("recipe.create-recipes"),
-        to: computed(() => `/g/${groupSlug.value}/r/create/new`),
+        to: computed(() => `/g/${groupSlug.value || ""}/r/create/new`),
         text: i18n.tc("recipe.create-recipe"),
         description: i18n.tc("recipe.create-recipe-description"),
       },
       {
-        to: computed(() => `/g/${groupSlug.value}/r/create/url`),
+        to: computed(() => `/g/${groupSlug.value || ""}/r/create/url`),
         text: i18n.tc("recipe.import-with-url"),
         description: i18n.tc("recipe.scrape-recipe-description"),
       },
@@ -243,6 +243,7 @@ export default defineComponent({
           config.nextButtonText = i18n.tc("general.next");
           config.nextButtonIcon = $globals.icons.forward;
           config.isSubmit = true;
+          break;
         case Pages.CONFIRM:
           config.isSubmit = true;
           break;
diff --git a/frontend/pages/register/index.vue b/frontend/pages/register/index.vue
index a7bf53262dd..fb42ed396ee 100644
--- a/frontend/pages/register/index.vue
+++ b/frontend/pages/register/index.vue
@@ -209,7 +209,6 @@ import { VForm } from "~/types/vuetify";
 import { usePasswordField } from "~/composables/use-passwords";
 import { usePublicApi } from "~/composables/api/api-client";
 import { useLocales } from "~/composables/use-locales";
-import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
 import UserRegistrationForm from "~/components/Domain/User/UserRegistrationForm.vue";
 
 const inputAttrs = {
@@ -220,7 +219,7 @@ const inputAttrs = {
 };
 
 export default defineComponent({
-  components: { UserPasswordStrength, UserRegistrationForm },
+  components: { UserRegistrationForm },
   layout: "blank",
   setup() {
     const { i18n } = useContext();

From 6256a7a1f797a2b580844f981b4b30fda8644909 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 10 Mar 2024 18:56:28 +0000
Subject: [PATCH 17/20] pass hardcoded default password instead of backend
 nonsense

---
 frontend/pages/admin/setup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/admin/setup.vue b/frontend/pages/admin/setup.vue
index 9f4a309af7d..6541b289b56 100644
--- a/frontend/pages/admin/setup.vue
+++ b/frontend/pages/admin/setup.vue
@@ -286,7 +286,7 @@ export default defineComponent({
 
     async function updatePassword() {
       const { response } = await api.users.changePassword({
-        currentPassword: "",  // the backend will automatically assume the current password is the default password
+        currentPassword: "MyPassword",
         newPassword: credentials.password1.value,
       });
 

From 84fd4144b4083479d8f7721d79cbc566f4d377e1 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 10 Mar 2024 19:08:19 +0000
Subject: [PATCH 18/20] removed old test

---
 .../user_tests/test_user_password_services.py | 56 -------------------
 1 file changed, 56 deletions(-)

diff --git a/tests/integration_tests/user_tests/test_user_password_services.py b/tests/integration_tests/user_tests/test_user_password_services.py
index 276194f8447..0c8433885fe 100644
--- a/tests/integration_tests/user_tests/test_user_password_services.py
+++ b/tests/integration_tests/user_tests/test_user_password_services.py
@@ -62,62 +62,6 @@ def test_password_reset(api_client: TestClient, unique_user: TestUser, casing: s
     assert response.status_code == 400
 
 
-@pytest.mark.parametrize("use_default_user", [True, False], ids=["default user", "non-default user"])
-def test_update_password_without_current_password(
-    api_client: TestClient, use_default_user: bool, database: AllRepositories
-):
-    settings = get_app_settings()
-    if use_default_user:
-        users = database.users.page_all(PaginationQuery(query_filter=f"email={settings._DEFAULT_EMAIL}"))
-        if not users.items:
-            user = database.users.create(
-                {
-                    "full_name": "Change Me",
-                    "username": "admin",
-                    "email": settings._DEFAULT_EMAIL,
-                    "password": settings._DEFAULT_PASSWORD,
-                    "group": settings.DEFAULT_GROUP,
-                    "admin": True,
-                }
-            )
-        else:
-            user = users.items[0]
-    else:
-        user = database.users.create(
-            {
-                "full_name": "Non Default User",
-                "username": "non-default-user",
-                "email": random_email(),
-                "password": settings._DEFAULT_PASSWORD,
-                "group": settings.DEFAULT_GROUP,
-                "admin": True,
-            }
-        )
-
-    old_form_data = {"username": user.email, "password": settings._DEFAULT_PASSWORD}
-    response = api_client.post(api_routes.auth_token, data=old_form_data)
-    assert response.status_code == 200
-    token = response.json()["access_token"]
-    old_headers = {"Authorization": f"Bearer {token}"}
-
-    new_password = random_string()
-    payload = ChangePassword(new_password=new_password).model_dump()  # current password is not passed here
-    response = api_client.put(api_routes.users_password, json=payload, headers=old_headers)
-    if use_default_user:
-        assert response.status_code == 200
-    else:
-        # even if the default password is correct, we shouldn't authenticate without passing it
-        assert response.status_code == 400
-
-    # Test Login
-    new_form_data = {"username": user.email, "password": new_password}
-    response = api_client.post(api_routes.auth_token, data=new_form_data)
-    if use_default_user:
-        assert response.status_code == 200
-    else:
-        assert response.status_code == 401
-
-
 @pytest.mark.parametrize("casing", ["lower", "upper", "mixed"])
 def test_password_reset_ldap(ldap_user: PrivateUser, casing: str):
     cased_email = ""

From de349a125ab2e111c7110410b1cee77ac453296e Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 10 Mar 2024 20:33:00 +0000
Subject: [PATCH 19/20] fix e2e

---
 tests/e2e/login.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts
index 8439e3b9755..d5daef3f740 100644
--- a/tests/e2e/login.spec.ts
+++ b/tests/e2e/login.spec.ts
@@ -11,6 +11,7 @@ test('password login', async ({ page }) => {
     await page.locator('div').filter({ hasText: /^Password$/ }).nth(3).click();
     await page.getByLabel('Password').fill(password);
     await page.getByRole('button', { name: 'Login', exact: true }).click();
+    await page.getByRole('link', { name: "I'm already set up, just bring me to the homepage" }).click();
     await expect(page.getByRole('navigation')).toContainText(name);
 });
 
@@ -113,6 +114,7 @@ test('settings page verify oidc', async ({ page }) => {
     await page.getByLabel('Password').click();
     await page.getByLabel('Password').fill('MyPassword');
     await page.getByRole('button', { name: 'Login', exact: true }).click();
+    await page.getByRole('link', { name: "I'm already set up, just bring me to the homepage" }).click();
     await page.getByRole('link', { name: 'Settings' }).click();
     await page.getByRole('link', { name: 'Users' }).click();
     await page.getByRole('cell', { name: username, exact: true }).click();

From 0e6b12375c57d9db2342b8b6e2a27f59cdb0fc24 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 10 Mar 2024 20:44:44 +0000
Subject: [PATCH 20/20] added setup skip to e2e testing for all admin users

---
 tests/e2e/login.spec.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts
index d5daef3f740..f225bcaa3cb 100644
--- a/tests/e2e/login.spec.ts
+++ b/tests/e2e/login.spec.ts
@@ -11,6 +11,7 @@ test('password login', async ({ page }) => {
     await page.locator('div').filter({ hasText: /^Password$/ }).nth(3).click();
     await page.getByLabel('Password').fill(password);
     await page.getByRole('button', { name: 'Login', exact: true }).click();
+    // skip admin setup page
     await page.getByRole('link', { name: "I'm already set up, just bring me to the homepage" }).click();
     await expect(page.getByRole('navigation')).toContainText(name);
 });
@@ -41,6 +42,8 @@ test('ldap admin login', async ({ page }) => {
     await page.locator('div').filter({ hasText: /^Password$/ }).nth(3).click();
     await page.getByLabel('Password').fill(password);
     await page.getByRole('button', { name: 'Login', exact: true }).click();
+    // skip admin setup page
+    await page.getByRole('link', { name: "I'm already set up, just bring me to the homepage" }).click();
     await expect(page.getByRole('navigation')).toContainText(name);
     await expect(page.getByRole('link', { name: 'Settings' })).toBeVisible();
 });
@@ -114,6 +117,7 @@ test('settings page verify oidc', async ({ page }) => {
     await page.getByLabel('Password').click();
     await page.getByLabel('Password').fill('MyPassword');
     await page.getByRole('button', { name: 'Login', exact: true }).click();
+    // skip admin setup page
     await page.getByRole('link', { name: "I'm already set up, just bring me to the homepage" }).click();
     await page.getByRole('link', { name: 'Settings' }).click();
     await page.getByRole('link', { name: 'Users' }).click();
@@ -137,6 +141,8 @@ test('oidc admin user', async ({ page }) => {
     await page.getByPlaceholder('Enter any user/subject').fill(username);
     await page.getByPlaceholder('Optional claims JSON value,').fill(JSON.stringify(claims));
     await page.getByRole('button', { name: 'Sign-in' }).click();
+    // skip admin setup page
+    await page.getByRole('link', { name: "I'm already set up, just bring me to the homepage" }).click();
     await expect(page.getByRole('navigation')).toContainText(name);
     await expect(page.getByRole('link', { name: 'Settings' })).toBeVisible();
 });