chore: migrate remaining pages to script setup (#7310)

frontend/pages/user/[id]/favorites.vue

@@ -14,37 +14,22 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useLazyRecipes } from "~/composables/recipes";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
-export default defineNuxtComponent({
-  components: { RecipeCardSection },
-  setup() {
-    const route = useRoute();
-    const i18n = useI18n();
-    const { isOwnGroup } = useLoggedInState();
+const route = useRoute();
+const i18n = useI18n();
+const { isOwnGroup } = useLoggedInState();
 
-    useSeoMeta({
-      title: i18n.t("general.favorites"),
-    });
-
-    const userId = route.params.id;
-    const query = { queryFilter: `favoritedBy.id = "${userId}"` };
-    const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
-
-    return {
-      query,
-      recipes,
-      isOwnGroup,
-      appendRecipes,
-      assignSorted,
-      removeRecipe,
-      replaceRecipes,
-    };
-  },
+useSeoMeta({
+  title: i18n.t("general.favorites"),
 });
+
+const userId = route.params.id;
+const query = { queryFilter: `favoritedBy.id = "${userId}"` };
+const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
 </script>
 
 <style scoped></style>

frontend/pages/user/profile/api-tokens.vue

@@ -106,66 +106,63 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useUserApi } from "~/composables/api";
 import type { VForm } from "~/types/auto-forms";
 
-export default defineNuxtComponent({
+definePageMeta({
   middleware: ["advanced-only"],
-  setup() {
-    const i18n = useI18n();
-    const auth = useMealieAuth();
-
-    useSeoMeta({
-      title: i18n.t("settings.token.api-tokens"),
-    });
-
-    const user = computed(() => {
-      return auth.user.value;
-    });
-
-    const api = useUserApi();
-
-    const domNewTokenForm = ref<VForm | null>(null);
-
-    const createdToken = ref("");
-    const name = ref("");
-    const loading = ref(false);
-
-    function resetCreate() {
-      createdToken.value = "";
-      loading.value = false;
-      name.value = "";
-      auth.refresh();
-    }
-
-    async function createToken(name: string) {
-      if (loading.value) {
-        resetCreate();
-        return;
-      }
-
-      loading.value = true;
-
-      if (domNewTokenForm?.value?.validate()) {
-        console.log("Created");
-        return;
-      }
-
-      const { data } = await api.users.createAPIToken({ name });
-
-      if (data) {
-        createdToken.value = data.token;
-      }
-    }
-
-    async function deleteToken(id: number) {
-      const { data } = await api.users.deleteAPIToken(id);
-      auth.refresh();
-      return data;
-    }
-
-    return { createToken, deleteToken, createdToken, loading, name, user, resetCreate };
-  },
 });
+
+const i18n = useI18n();
+const auth = useMealieAuth();
+
+useSeoMeta({
+  title: i18n.t("settings.token.api-tokens"),
+});
+
+const user = computed(() => {
+  return auth.user.value;
+});
+
+const api = useUserApi();
+
+const domNewTokenForm = ref<VForm | null>(null);
+
+const createdToken = ref("");
+const name = ref("");
+const loading = ref(false);
+
+function resetCreate() {
+  createdToken.value = "";
+  loading.value = false;
+  name.value = "";
+  auth.refresh();
+}
+
+async function createToken(name: string) {
+  if (loading.value) {
+    resetCreate();
+    return;
+  }
+
+  loading.value = true;
+
+  if (domNewTokenForm?.value?.validate()) {
+    console.log("Created");
+    return;
+  }
+
+  const { data } = await api.users.createAPIToken({ name });
+
+  if (data) {
+    createdToken.value = data.token;
+  }
+}
+
+async function deleteToken(id: number) {
+  const { data } = await api.users.deleteAPIToken(id);
+  auth.refresh();
+  return data;
+}
 </script>

frontend/pages/user/profile/edit.vue

@@ -24,9 +24,9 @@
 
     <section class="mt-5">
       <ToggleState tag="article">
-        <template #activator="{ toggle, state }">
+        <template #activator="{ toggle, modelValue: toggleState }">
           <v-btn
-            v-if="!state && $appInfo.allowPasswordLogin"
+            v-if="!toggleState && $appInfo.allowPasswordLogin"
             color="info"
             class="mt-2 mb-n3"
             @click="toggle"
@@ -48,13 +48,13 @@
             {{ $t("settings.profile") }}
           </v-btn>
         </template>
-        <template #default="{ state }">
+        <template #default="{ modelValue: toggleState }">
           <v-slide-x-transition
             leave-absolute
             hide-on-leave
           >
             <div
-              v-if="!state"
+              v-if="!toggleState"
               key="personal-info"
             >
               <BaseCardSectionTitle
@@ -214,97 +214,84 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useUserApi } from "~/composables/api";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
 import { validators } from "~/composables/use-validators";
-import type { VForm } from "~/types/auto-forms";
 import { useUserActivityPreferences } from "~/composables/use-users/preferences";
 import useDefaultActivity from "~/composables/use-default-activity";
 import { ActivityKey } from "~/lib/api/types/activity";
+import type { UserBase } from "~/lib/api/types/user";
 
-export default defineNuxtComponent({
-  components: {
-    UserAvatar,
-    UserPasswordStrength,
-  },
-  setup() {
-    const i18n = useI18n();
-    const auth = useMealieAuth();
-    const { getDefaultActivityLabels, getActivityLabel, getActivityKey } = useDefaultActivity();
-    const user = computed(() => auth.user.value);
+const i18n = useI18n();
+const auth = useMealieAuth();
+const { getDefaultActivityLabels, getActivityLabel, getActivityKey } = useDefaultActivity();
+const user = computed(() => auth.user.value);
 
-    useSeoMeta({
-      title: i18n.t("settings.profile"),
-    });
-
-    const activityPreferences = useUserActivityPreferences();
-    const activityOptions = getDefaultActivityLabels(i18n);
-    const selectedDefaultActivity = ref(getActivityLabel(i18n, activityPreferences.value.defaultActivity));
-    watch(selectedDefaultActivity, () => {
-      activityPreferences.value.defaultActivity = getActivityKey(i18n, selectedDefaultActivity.value) ?? ActivityKey.RECIPES;
-    });
-
-    watch(user, () => {
-      userCopy.value = { ...user.value };
-    });
-
-    const userCopy = ref({ ...user.value });
-
-    const api = useUserApi();
-
-    const domUpdatePassword = ref<VForm | null>(null);
-    const password = reactive({
-      current: "",
-      newOne: "",
-      newTwo: "",
-    });
-
-    const passwordsMatch = computed(() => password.newOne === password.newTwo && password.newOne.length > 0);
-
-    async function updateUser() {
-      if (!userCopy.value?.id) return;
-      const { response } = await api.users.updateOne(userCopy.value.id, userCopy.value);
-      if (response?.status === 200) {
-        auth.refresh();
-      }
-    }
-
-    async function updatePassword() {
-      if (!userCopy.value?.id) {
-        return;
-      }
-      const { response } = await api.users.changePassword({
-        currentPassword: password.current,
-        newPassword: password.newOne,
-      });
-
-      if (response?.status === 200) {
-        console.log("Password Changed");
-      }
-    }
-
-    const state = reactive({
-      hideImage: false,
-      passwordLoading: false,
-      showPassword: false,
-      loading: false,
-    });
-
-    return {
-      ...toRefs(state),
-      updateUser,
-      updatePassword,
-      userCopy,
-      selectedDefaultActivity,
-      activityOptions,
-      password,
-      domUpdatePassword,
-      passwordsMatch,
-      validators,
-      auth,
-    };
-  },
+useSeoMeta({
+  title: i18n.t("settings.profile"),
 });
+
+const activityPreferences = useUserActivityPreferences();
+const activityOptions = getDefaultActivityLabels(i18n);
+const selectedDefaultActivity = ref(getActivityLabel(i18n, activityPreferences.value.defaultActivity));
+watch(selectedDefaultActivity, () => {
+  activityPreferences.value.defaultActivity = getActivityKey(i18n, selectedDefaultActivity.value) ?? ActivityKey.RECIPES;
+});
+
+const userCopy = ref({ ...user.value });
+watch(user, () => {
+  userCopy.value = { ...user.value };
+});
+
+const api = useUserApi();
+const showPassword = ref(false);
+const password = reactive({
+  current: "",
+  newOne: "",
+  newTwo: "",
+});
+
+const passwordsMatch = computed(() => password.newOne === password.newTwo && password.newOne.length > 0);
+
+async function updateUser() {
+  const userData = userCopy.value;
+  if (!userData?.id || !userData.email) return;
+
+  const updatePayload: UserBase = {
+    id: userData.id,
+    username: userData.username,
+    fullName: userData.fullName,
+    email: userData.email,
+    authMethod: userData.authMethod,
+    admin: userData.admin,
+    group: userData.group,
+    household: userData.household,
+    advanced: userData.advanced,
+    canInvite: userData.canInvite,
+    canManage: userData.canManage,
+    canManageHousehold: userData.canManageHousehold,
+    canOrganize: userData.canOrganize,
+  };
+
+  const { response } = await api.users.updateOne(userData.id, updatePayload);
+  if (response?.status === 200) {
+    auth.refresh();
+  }
+}
+
+async function updatePassword() {
+  if (!userCopy.value?.id) {
+    return;
+  }
+  const { response } = await api.users.changePassword({
+    currentPassword: password.current,
+    newPassword: password.newOne,
+  });
+
+  if (response?.status === 200) {
+    console.log("Password Changed");
+  }
+}
 </script>

frontend/pages/user/profile/index.vue

@@ -274,7 +274,7 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
 import { useUserApi } from "~/composables/api";
 import UserAvatar from "@/components/Domain/User/UserAvatar.vue";
@@ -283,98 +283,81 @@ import StatsCards from "~/components/global/StatsCards.vue";
 import type { UserOut } from "~/lib/api/types/user";
 import UserInviteDialog from "~/components/Domain/User/UserInviteDialog.vue";
 
-export default defineNuxtComponent({
+definePageMeta({
   name: "UserProfile",
-  components: {
-    UserInviteDialog,
-    UserProfileLinkCard,
-    UserAvatar,
-    StatsCards,
-  },
   scrollToTop: true,
-  async setup() {
-    const i18n = useI18n();
-    const auth = useMealieAuth();
-    const { $appInfo } = useNuxtApp();
-    const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug || auth.user.value?.groupSlug || "");
-
-    useSeoMeta({
-      title: i18n.t("settings.profile"),
-    });
-
-    const user = computed<UserOut | null>(() => {
-      const authUser = auth.user.value;
-      if (!authUser) return null;
-
-      // Override canInvite if password login is disabled
-      const canInvite = !$appInfo.allowPasswordLogin ? false : authUser.canInvite;
-
-      return {
-        ...authUser,
-        canInvite,
-      };
-    });
-
-    const inviteDialog = ref(false);
-    const api = useUserApi();
-
-    const { data: stats } = useAsyncData(useAsyncKey(), async () => {
-      const { data } = await api.households.statistics();
-
-      if (data) {
-        return data;
-      }
-    });
-
-    const statsText: { [key: string]: string } = {
-      totalRecipes: i18n.t("general.recipes"),
-      totalUsers: i18n.t("user.users"),
-      totalCategories: i18n.t("sidebar.categories"),
-      totalTags: i18n.t("sidebar.tags"),
-      totalTools: i18n.t("tool.tools"),
-    };
-
-    function getStatsTitle(key: string) {
-      return statsText[key] ?? "unknown";
-    }
-
-    const { $globals } = useNuxtApp();
-
-    const iconText: { [key: string]: string } = {
-      totalUsers: $globals.icons.user,
-      totalCategories: $globals.icons.categories,
-      totalTags: $globals.icons.tags,
-      totalTools: $globals.icons.potSteam,
-    };
-
-    function getStatsIcon(key: string) {
-      return iconText[key] ?? $globals.icons.primary;
-    }
-
-    const statsTo = computed<{ [key: string]: string }>(() => {
-      return {
-        totalRecipes: `/g/${groupSlug.value}/`,
-        totalUsers: "/household/members",
-        totalCategories: `/g/${groupSlug.value}/recipes/categories`,
-        totalTags: `/g/${groupSlug.value}/recipes/tags`,
-        totalTools: `/g/${groupSlug.value}/recipes/tools`,
-      };
-    });
-
-    function getStatsTo(key: string) {
-      return statsTo.value[key] ?? "unknown";
-    }
-
-    return {
-      groupSlug,
-      getStatsTitle,
-      getStatsIcon,
-      getStatsTo,
-      inviteDialog,
-      stats,
-      user,
-    };
-  },
 });
+
+const i18n = useI18n();
+const auth = useMealieAuth();
+const { $appInfo } = useNuxtApp();
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug || auth.user.value?.groupSlug || "");
+
+useSeoMeta({
+  title: i18n.t("settings.profile"),
+});
+
+const user = computed<UserOut | null>(() => {
+  const authUser = auth.user.value;
+  if (!authUser) return null;
+
+  // Override canInvite if password login is disabled
+  const canInvite = !$appInfo.allowPasswordLogin ? false : authUser.canInvite;
+
+  return {
+    ...authUser,
+    canInvite,
+  };
+});
+
+const inviteDialog = ref(false);
+const api = useUserApi();
+
+const { data: stats } = useAsyncData(useAsyncKey(), async () => {
+  const { data } = await api.households.statistics();
+
+  if (data) {
+    return data;
+  }
+});
+
+const statsText: { [key: string]: string } = {
+  totalRecipes: i18n.t("general.recipes"),
+  totalUsers: i18n.t("user.users"),
+  totalCategories: i18n.t("sidebar.categories"),
+  totalTags: i18n.t("sidebar.tags"),
+  totalTools: i18n.t("tool.tools"),
+};
+
+function getStatsTitle(key: string) {
+  return statsText[key] ?? "unknown";
+}
+
+const { $globals } = useNuxtApp();
+
+const iconText: { [key: string]: string } = {
+  totalUsers: $globals.icons.user,
+  totalCategories: $globals.icons.categories,
+  totalTags: $globals.icons.tags,
+  totalTools: $globals.icons.potSteam,
+};
+
+function getStatsIcon(key: string) {
+  return iconText[key] ?? $globals.icons.primary;
+}
+
+const statsTo = computed<{ [key: string]: string }>(() => {
+  return {
+    totalRecipes: `/g/${groupSlug.value}/`,
+    totalUsers: "/household/members",
+    totalCategories: `/g/${groupSlug.value}/recipes/categories`,
+    totalTags: `/g/${groupSlug.value}/recipes/tags`,
+    totalTools: `/g/${groupSlug.value}/recipes/tools`,
+  };
+});
+
+function getStatsTo(key: string) {
+  return statsTo.value[key] ?? "unknown";
+}
 </script>