Merge branch 'mealie-next' into mealie-next

frontend/pages/admin/maintenance/index.vue

@@ -243,7 +243,7 @@ export default defineComponent({
   },
   head() {
     return {
-      title: this.$t("settings.site-settings") as string,
+      title: this.$t("admin.maintenance.page-title") as string,
     };
   },
 });

frontend/pages/g/_groupSlug/recipes/categories/index.vue

@@ -30,8 +30,10 @@ export default defineComponent({
       actions,
     };
   },
-  head: {
-    title: "Categories",
+  head() {
+    return {
+      title: this.$tc("category.categories"),
+    };
   },
 });
 </script>

frontend/pages/group/data.vue

@@ -44,6 +44,9 @@ export default defineComponent({
       foods: i18n.tc("general.foods"),
       units: i18n.tc("general.units"),
       labels: i18n.tc("data-pages.labels.labels"),
+      categories: i18n.tc("category.categories"),
+      tags: i18n.tc("tag.tags"),
+      tools: i18n.tc("tool.tools"),
     };
 
     const route = useRoute();
@@ -53,6 +56,7 @@ export default defineComponent({
         text: i18n.t("general.recipes"),
         value: "new",
         to: "/group/data/recipes",
+        divider: true,
       },
       {
         text: i18n.t("general.foods"),
@@ -68,7 +72,23 @@ export default defineComponent({
         text: i18n.t("data-pages.labels.labels"),
         value: "new",
         to: "/group/data/labels",
+        divider: true,
       },
+      {
+        text: i18n.t("category.categories"),
+        value: "new",
+        to: "/group/data/categories",
+      },
+      {
+        text: i18n.t("tag.tags"),
+        value: "new",
+        to: "/group/data/tags",
+      },
+      {
+        text: i18n.t("tool.tools"),
+        value: "new",
+        to: "/group/data/tools",
+      }
     ]);
 
     const buttonText = computed(() => {

frontend/pages/group/data/categories.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-model="state.createDialog"
+      :title="$t('data-pages.categories.new-category')"
+      :icon="$globals.icons.categories"
+      @submit="createCategory"
+    >
+      <v-card-text>
+        <v-form ref="domNewCategoryForm">
+          <v-text-field
+            v-model="createTarget.name"
+            autofocus
+            :label="$t('general.name')"
+            :rules="[validators.required]"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+
+    </BaseDialog>
+
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-model="state.editDialog"
+      :icon="$globals.icons.categories"
+      :title="$t('data-pages.categories.edit-category')"
+      :submit-text="$tc('general.save')"
+      @submit="editSaveCategory"
+    >
+      <v-card-text v-if="editTarget">
+        <div class="mt-4">
+          <v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
+        </div>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="state.deleteDialog"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteCategory"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Recipe Data Table -->
+    <BaseCardSectionTitle :icon="$globals.icons.categories" section :title="$tc('data-pages.categories.category-data')"> </BaseCardSectionTitle>
+    <CrudTable
+      :table-config="tableConfig"
+      :headers.sync="tableHeaders"
+      :data="categories || []"
+      :bulk-actions="[]"
+      @delete-one="deleteEventHandler"
+      @edit-one="editEventHandler"
+    >
+      <template #button-row>
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { useCategoryStore, useCategoryData } from "~/composables/store";
+import { RecipeCategory } from "~/lib/api/types/admin";
+
+export default defineComponent({
+  setup() {
+    const { i18n } = useContext();
+    const tableConfig = {
+      hideColumns: true,
+      canExport: true,
+    };
+    const tableHeaders = [
+      {
+        text: i18n.t("general.id"),
+        value: "id",
+        show: false,
+      },
+      {
+        text: i18n.t("general.name"),
+        value: "name",
+        show: true,
+      },
+    ];
+
+    const state = reactive({
+      createDialog: false,
+      editDialog: false,
+      deleteDialog: false,
+    });
+    const categoryData = useCategoryData();
+    const categoryStore = useCategoryStore();
+
+
+    // ============================================================
+    // Create Category
+
+    async function createCategory() {
+      // @ts-ignore - only property really required is the name (RecipeOrganizerPage)
+      await categoryStore.actions.createOne({ name: categoryData.data.name });
+      categoryData.reset();
+      state.createDialog = false;
+    }
+
+
+    // ============================================================
+    // Edit Category
+
+    const editTarget = ref<RecipeCategory | null>(null);
+
+    function editEventHandler(item: RecipeCategory) {
+      state.editDialog = true;
+      editTarget.value = item;
+    }
+
+    async function editSaveCategory() {
+      if (!editTarget.value) {
+        return;
+      }
+      await categoryStore.actions.updateOne(editTarget.value);
+      state.editDialog = false;
+    }
+
+
+    // ============================================================
+    // Delete Category
+
+    const deleteTarget = ref<RecipeCategory | null>(null);
+
+    function deleteEventHandler(item: RecipeCategory) {
+      state.deleteDialog = true;
+      deleteTarget.value = item;
+    }
+
+    async function deleteCategory() {
+      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
+        return;
+      }
+      await categoryStore.actions.deleteOne(deleteTarget.value.id);
+      state.deleteDialog = false;
+    }
+
+    return {
+      state,
+      tableConfig,
+      tableHeaders,
+      categories: categoryStore.items,
+      validators,
+
+      // create
+      createTarget: categoryData.data,
+      createCategory,
+
+      // edit
+      editTarget,
+      editEventHandler,
+      editSaveCategory,
+
+      // delete
+      deleteTarget,
+      deleteEventHandler,
+      deleteCategory
+    };
+  },
+});
+</script>

frontend/pages/group/data/foods.vue

@@ -168,7 +168,7 @@
       <template #button-row>
         <BaseButton create @click="createDialog = true" />
         <BaseButton @click="mergeDialog = true">
-          <template #icon> {{ $globals.icons.foods }} </template>
+          <template #icon> {{ $globals.icons.externalLink }} </template>
           {{ $t('data-pages.combine') }}
         </BaseButton>
       </template>

frontend/pages/group/data/labels.vue

@@ -90,10 +90,7 @@
       @edit-one="editEventHandler"
     >
       <template #button-row>
-        <BaseButton create @click="state.createDialog = true">
-          <template #icon> {{ $globals.icons.tags }} </template>
-          {{ $t("general.create") }}
-        </BaseButton>
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
       </template>
       <template #item.name="{ item }">
         <MultiPurposeLabel v-if="item" :label="item">

frontend/pages/group/data/tags.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-model="state.createDialog"
+      :title="$t('data-pages.tags.new-tag')"
+      :icon="$globals.icons.tags"
+      @submit="createTag"
+    >
+      <v-card-text>
+        <v-form ref="domNewTagForm">
+          <v-text-field
+            v-model="createTarget.name"
+            autofocus
+            :label="$t('general.name')"
+            :rules="[validators.required]"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+
+    </BaseDialog>
+
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-model="state.editDialog"
+      :icon="$globals.icons.tags"
+      :title="$t('data-pages.tags.edit-tag')"
+      :submit-text="$tc('general.save')"
+      @submit="editSaveTag"
+    >
+      <v-card-text v-if="editTarget">
+        <div class="mt-4">
+          <v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
+        </div>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="state.deleteDialog"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteTag"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Recipe Data Table -->
+    <BaseCardSectionTitle :icon="$globals.icons.tags" section :title="$tc('data-pages.tags.tag-data')"> </BaseCardSectionTitle>
+    <CrudTable
+      :table-config="tableConfig"
+      :headers.sync="tableHeaders"
+      :data="tags || []"
+      :bulk-actions="[]"
+      @delete-one="deleteEventHandler"
+      @edit-one="editEventHandler"
+    >
+      <template #button-row>
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { useTagStore, useTagData } from "~/composables/store";
+import { RecipeTag } from "~/lib/api/types/admin";
+
+export default defineComponent({
+  setup() {
+    const { i18n } = useContext();
+    const tableConfig = {
+      hideColumns: true,
+      canExport: true,
+    };
+    const tableHeaders = [
+      {
+        text: i18n.t("general.id"),
+        value: "id",
+        show: false,
+      },
+      {
+        text: i18n.t("general.name"),
+        value: "name",
+        show: true,
+      },
+    ];
+
+    const state = reactive({
+      createDialog: false,
+      editDialog: false,
+      deleteDialog: false,
+    });
+
+    const tagData = useTagData();
+    const tagStore = useTagStore();
+
+
+    // ============================================================
+    // Create Tag
+
+    async function createTag() {
+      // @ts-ignore - only property really required is the name (RecipeOrganizerPage)
+      await tagStore.actions.createOne({ name: tagData.data.name });
+      tagData.reset();
+      state.createDialog = false;
+    }
+
+
+    // ============================================================
+    // Edit Tag
+
+    const editTarget = ref<RecipeTag | null>(null);
+
+    function editEventHandler(item: RecipeTag) {
+      state.editDialog = true;
+      editTarget.value = item;
+    }
+
+    async function editSaveTag() {
+      if (!editTarget.value) {
+        return;
+      }
+      await tagStore.actions.updateOne(editTarget.value);
+      state.editDialog = false;
+    }
+
+
+    // ============================================================
+    // Delete Tag
+
+    const deleteTarget = ref<RecipeTag | null>(null);
+
+    function deleteEventHandler(item: RecipeTag) {
+      state.deleteDialog = true;
+      deleteTarget.value = item;
+    }
+
+    async function deleteTag() {
+      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
+        return;
+      }
+      await tagStore.actions.deleteOne(deleteTarget.value.id);
+      state.deleteDialog = false;
+    }
+
+    return {
+      state,
+      tableConfig,
+      tableHeaders,
+      tags: tagStore.items,
+      validators,
+
+      // create
+      createTarget: tagData.data,
+      createTag,
+
+      // edit
+      editTarget,
+      editEventHandler,
+      editSaveTag,
+
+      // delete
+      deleteTarget,
+      deleteEventHandler,
+      deleteTag
+    };
+  },
+});
+</script>

frontend/pages/group/data/tools.vue

@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-model="state.createDialog"
+      :title="$t('data-pages.tools.new-tool')"
+      :icon="$globals.icons.potSteam"
+      @submit="createTool"
+    >
+      <v-card-text>
+        <v-form ref="domNewToolForm">
+          <v-text-field
+            v-model="createTarget.name"
+            autofocus
+            :label="$t('general.name')"
+            :rules="[validators.required]"
+          ></v-text-field>
+          <v-checkbox v-model="createTarget.onHand" :label="$t('tool.on-hand')">
+          </v-checkbox>
+        </v-form>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-model="state.editDialog"
+      :icon="$globals.icons.potSteam"
+      :title="$t('data-pages.tools.edit-tool')"
+      :submit-text="$tc('general.save')"
+      @submit="editSaveTool"
+    >
+      <v-card-text v-if="editTarget">
+        <div class="mt-4">
+          <v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
+          <v-checkbox v-model="editTarget.onHand" :label="$t('tool.on-hand')"> </v-checkbox>
+        </div>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="state.deleteDialog"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteTool"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Tool Data Table -->
+    <BaseCardSectionTitle :icon="$globals.icons.potSteam" section :title="$tc('data-pages.tools.tool-data')"> </BaseCardSectionTitle>
+    <CrudTable
+      :table-config="tableConfig"
+      :headers.sync="tableHeaders"
+      :data="tools || []"
+      :bulk-actions="[]"
+      @delete-one="deleteEventHandler"
+      @edit-one="editEventHandler"
+    >
+      <template #button-row>
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
+      </template>
+      <template #item.onHand="{ item }">
+        <v-icon :color="item.onHand ? 'success' : undefined">
+          {{ item.onHand ? $globals.icons.check : $globals.icons.close }}
+        </v-icon>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { useToolStore, useToolData } from "~/composables/store";
+import { RecipeTool } from "~/lib/api/types/admin";
+
+export default defineComponent({
+  setup() {
+    const { i18n } = useContext();
+    const tableConfig = {
+      hideColumns: true,
+      canExport: true,
+    };
+    const tableHeaders = [
+      {
+        text: i18n.t("general.id"),
+        value: "id",
+        show: false,
+      },
+      {
+        text: i18n.t("general.name"),
+        value: "name",
+        show: true,
+      },
+      {
+        text: i18n.t("tool.on-hand"),
+        value: "onHand",
+        show: true,
+      },
+    ];
+
+    const state = reactive({
+      createDialog: false,
+      editDialog: false,
+      deleteDialog: false,
+    });
+
+    const toolData = useToolData();
+    const toolStore = useToolStore();
+
+
+    // ============================================================
+    // Create Tag
+
+    async function createTool() {
+      // @ts-ignore - only property really required is the name and onHand (RecipeOrganizerPage)
+      await toolStore.actions.createOne({ name: toolData.data.name, onHand: toolData.data.onHand });
+      toolData.reset();
+      state.createDialog = false;
+    }
+
+
+    // ============================================================
+    // Edit Tag
+
+    const editTarget = ref<RecipeTool | null>(null);
+
+    function editEventHandler(item: RecipeTool) {
+      state.editDialog = true;
+      editTarget.value = item;
+    }
+
+    async function editSaveTool() {
+      if (!editTarget.value) {
+        return;
+      }
+      await toolStore.actions.updateOne(editTarget.value);
+      state.editDialog = false;
+    }
+
+
+    // ============================================================
+    // Delete Tag
+
+    const deleteTarget = ref<RecipeTool | null>(null);
+
+    function deleteEventHandler(item: RecipeTool) {
+      state.deleteDialog = true;
+      deleteTarget.value = item;
+    }
+
+    async function deleteTool() {
+      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
+        return;
+      }
+      await toolStore.actions.deleteOne(deleteTarget.value.id);
+      state.deleteDialog = false;
+    }
+
+    return {
+      state,
+      tableConfig,
+      tableHeaders,
+      tools: toolStore.items,
+      validators,
+
+      // create
+      createTarget: toolData.data,
+      createTool,
+
+      // edit
+      editTarget,
+      editEventHandler,
+      editSaveTool,
+
+      // delete
+      deleteTarget,
+      deleteEventHandler,
+      deleteTool
+    };
+  },
+});
+</script>

frontend/pages/group/data/units.vue

@@ -180,7 +180,7 @@
         <BaseButton create @click="createDialog = true" />
 
         <BaseButton @click="mergeDialog = true">
-          <template #icon> {{ $globals.icons.units }} </template>
+          <template #icon> {{ $globals.icons.externalLink }} </template>
           {{ $t('data-pages.combine') }}
         </BaseButton>
       </template>

frontend/pages/group/mealplan/planner/view.vue

@@ -1,51 +1,65 @@
 <template>
-  <v-row>
-    <v-col
-      v-for="(day, index) in plan"
-      :key="index"
-      cols="12"
-      sm="12"
-      md="4"
-      lg="4"
-      xl="2"
-      class="col-borders my-1 d-flex flex-column"
-    >
-      <v-card class="mb-2 border-left-primary rounded-sm pa-2">
-        <p class="pl-2 mb-1">
-          {{ $d(day.date, "short") }}
-        </p>
-      </v-card>
-      <div v-for="section in day.sections" :key="section.title">
-        <div class="py-2 d-flex flex-column">
-          <div class="primary" style="width: 50px; height: 2.5px"></div>
-          <p class="text-overline my-0">
-            {{ section.title }}
-          </p>
-        </div>
+  <v-container class="mx-0 my-3 pa">
+    <v-row>
+      <v-col
+        v-for="(day, index) in plan"
+        :key="index"
+        cols="12"
+        sm="12"
+        md="4"
+        lg="4"
+        xl="2"
+        class="col-borders my-1 d-flex flex-column"
+      >
+        <v-card class="mb-2 border-left-primary rounded-sm px-2">
+          <v-container class="px-0">
+            <v-row no-gutters style="width: 100%;">
+              <v-col cols="10">
+                <p class="pl-2 my-1">
+                  {{ $d(day.date, "short") }}
+                </p>
+              </v-col>
+              <v-col class="d-flex justify-top" cols="2">
+                <GroupMealPlanDayContextMenu v-if="day.recipes.length" :recipes="day.recipes" />
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card>
+        <div v-for="section in day.sections" :key="section.title">
+          <div class="py-2 d-flex flex-column">
+            <div class="primary" style="width: 50px; height: 2.5px"></div>
+            <p class="text-overline my-0">
+              {{ section.title }}
+            </p>
+          </div>
 
-        <RecipeCardMobile
-          v-for="mealplan in section.meals"
-          :key="mealplan.id"
-          :recipe-id="mealplan.recipe ? mealplan.recipe.id : ''"
-          class="mb-2"
-          :route="mealplan.recipe ? true : false"
-          :slug="mealplan.recipe ? mealplan.recipe.slug : mealplan.title"
-          :description="mealplan.recipe ? mealplan.recipe.description : mealplan.text"
-          :name="mealplan.recipe ? mealplan.recipe.name : mealplan.title"
-        />
-      </div>
-    </v-col>
-  </v-row>
+          <RecipeCardMobile
+            v-for="mealplan in section.meals"
+            :key="mealplan.id"
+            :recipe-id="mealplan.recipe ? mealplan.recipe.id : ''"
+            class="mb-2"
+            :route="mealplan.recipe ? true : false"
+            :slug="mealplan.recipe ? mealplan.recipe.slug : mealplan.title"
+            :description="mealplan.recipe ? mealplan.recipe.description : mealplan.text"
+            :name="mealplan.recipe ? mealplan.recipe.name : mealplan.title"
+          />
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
 import { MealsByDate } from "./types";
 import { ReadPlanEntry } from "~/lib/api/types/meal-plan";
+import GroupMealPlanDayContextMenu from "~/components/Domain/Group/GroupMealPlanDayContextMenu.vue";
 import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue";
+import { RecipeSummary } from "~/lib/api/types/recipe";
 
 export default defineComponent({
   components: {
+    GroupMealPlanDayContextMenu,
     RecipeCardMobile,
   },
   props: {
@@ -63,6 +77,7 @@ export default defineComponent({
     type Days = {
       date: Date;
       sections: DaySection[];
+      recipes: RecipeSummary[];
     };
 
   const { i18n } = useContext();
@@ -77,6 +92,7 @@ export default defineComponent({
             { title: i18n.tc("meal-plan.dinner"), meals: [] },
             { title: i18n.tc("meal-plan.side"), meals: [] },
           ],
+          recipes: [],
         };
 
         for (const meal of day.meals) {
@@ -89,6 +105,10 @@ export default defineComponent({
           } else if (meal.entryType === "side") {
             out.sections[3].meals.push(meal);
           }
+
+          if (meal.recipe) {
+            out.recipes.push(meal.recipe);
+          }
         }
 
         // Drop empty sections

frontend/pages/login.vue

@@ -7,6 +7,18 @@
       'bg-off-white': !$vuetify.theme.dark && !isDark,
     }"
   >
+    <v-alert v-if="isFirstLogin" class="my-4" type="info" icon="mdi-information">
+      <div>
+        <p class="mb-3">
+          {{ $tc('user.it-looks-like-this-is-your-first-time-logging-in')}}
+        </p>
+        <p class="mb-1"><strong>{{ $tc('user.username') }}:</strong> changeme@example.com</p>
+        <p class="mb-3"><strong>{{  $tc('user.password') }}:</strong> MyPassword</p>
+        <p>
+          {{  $tc('user.dont-want-to-see-this-anymore-be-sure-to-change-your-email') }}
+        </p>
+      </div>
+    </v-alert>
     <v-card tag="section" class="d-flex flex-column align-center" width="600px">
       <v-toolbar width="100%" color="primary" class="d-flex justify-center mb-4" dark>
         <v-toolbar-title class="headline text-h4"> Mealie </v-toolbar-title>
@@ -101,12 +113,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useContext, computed, reactive, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, ref, useContext, computed, reactive, useRouter, useAsync } from "@nuxtjs/composition-api";
 import { useDark, whenever } from "@vueuse/core";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useAppInfo } from "~/composables/api";
 import { usePasswordField } from "~/composables/use-passwords";
 import { alert } from "~/composables/use-toast";
+import { useAsyncKey } from "~/composables/use-utils";
+import { AppStartupInfo } from "~/lib/api/types/admin";
 
 export default defineComponent({
   layout: "blank",
@@ -115,7 +129,7 @@ export default defineComponent({
     const isDark = useDark();
 
     const router = useRouter();
-    const { $auth, i18n } = useContext();
+    const { $auth, i18n, $axios } = useContext();
     const { loggedIn } = useLoggedInState();
     const groupSlug = computed(() => $auth.user?.groupSlug);
 
@@ -133,6 +147,13 @@ 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());
+
     const loggingIn = ref(false);
 
     const appInfo = useAppInfo();
@@ -182,6 +203,7 @@ export default defineComponent({
       passwordIcon,
       inputType,
       togglePasswordShow,
+      isFirstLogin
     };
   },