chore: Nuxt 4 upgrade (#7426)

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

@@ -0,0 +1,170 @@
+<template>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img
+          width="100%"
+          max-height="200px"
+          max-width="200px"
+          src="/svgs/manage-api-tokens.svg"
+        />
+      </template>
+      <template #title>
+        {{ $t("settings.token.api-tokens") }}
+      </template>
+      {{ $t('settings.token.you-have-token-count', user.tokens!.length) }}
+    </BasePageTitle>
+    <section class="d-flex justify-center">
+      <v-card
+        class="mt-4 pa-4"
+        width="100%"
+        flat
+      >
+        <v-card-title class="px-0">
+          {{ $t("settings.token.create-an-api-token") }}
+        </v-card-title>
+        <v-card-text class="px-0">
+          <v-form
+            ref="domNewTokenForm"
+            @submit.prevent
+          >
+            <v-text-field
+              v-model="name"
+              :label="$t('settings.token.token-name')"
+            />
+          </v-form>
+
+          <template v-if="createdToken != ''">
+            <v-textarea
+              v-model="createdToken"
+              class="mb-0 pb-0"
+              :label="$t('settings.token.api-token')"
+              readonly
+              rows="3"
+            />
+            <p>
+              {{
+                $t(
+                  "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again",
+                )
+              }}
+            </p>
+          </template>
+        </v-card-text>
+        <v-card-actions class="px-0">
+          <BaseButton
+            v-if="createdToken"
+            cancel
+            @click="resetCreate()"
+          >
+            {{ $t('general.close') }}
+          </BaseButton>
+          <v-spacer />
+          <AppButtonCopy
+            v-if="createdToken"
+            :icon="false"
+            color="info"
+            :copy-text="createdToken"
+          />
+          <BaseButton
+            v-else
+            key="generate-button"
+            :disabled="name == ''"
+            @click="createToken(name)"
+          >
+            {{ $t('settings.token.generate') }}
+          </BaseButton>
+        </v-card-actions>
+      </v-card>
+    </section>
+    <BaseCardSectionTitle
+      class="mt-10"
+      :title="$t('settings.token.active-tokens')"
+    />
+    <section class="d-flex flex-column">
+      <v-list>
+        <div
+          v-for="(token, index) in user.tokens"
+          :key="index"
+        >
+          <v-list-item>
+            <v-list-item-title>
+              {{ token.name }}
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              {{ $t('general.created-on-date', [$d(new Date(token.createdAt!))]) }}
+            </v-list-item-subtitle>
+            <template #append>
+              <BaseButton
+                delete
+                small
+                @click="deleteToken(token.id)"
+              />
+            </template>
+          </v-list-item>
+          <v-divider class="mx-2 my-2" />
+        </div>
+      </v-list>
+    </section>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import type { VForm } from "~/types/auto-forms";
+
+definePageMeta({
+  middleware: ["advanced-only"],
+});
+
+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()) {
+    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>