Merge branch 'mealie-next' into fixes/ui-improvements

.devcontainer/devcontainer.json

@@ -18,31 +18,26 @@
     "source=mealie-devcontainer-workspace,target=/workspaces/mealie/frontend/node_modules,type=volume",
     "source=mealie-bashhistory,target=/home/vscode/commandhistory,type=volume"
   ],
-  // Set *default* container specific settings.json values on container create.
+  "customizations": {
-  "settings": {
+    "vscode": {
-    "python.defaultInterpreterPath": "/usr/local/bin/python",
+      "settings": {
-    "python.linting.enabled": true,
+        "python.defaultInterpreterPath": "/usr/local/bin/python",
-    "python.linting.pylintEnabled": true,
+        "python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
-    "python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
+        "python.formatting.blackPath": "/usr/local/py-utils/bin/black",
-    "python.formatting.blackPath": "/usr/local/py-utils/bin/black",
+        "python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
-    "python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
+      },
-    "python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
+      "extensions": [
-    "python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
+        "dbaeumer.vscode-eslint",
-    "python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
+        "matangover.mypy",
-    "python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
+        "ms-python.black-formatter",
-    "python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
+        "ms-python.isort",
-    "python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
+        "ms-python.pylint",
+        "ms-python.python",
+        "ms-python.vscode-pylance",
+        "Vue.volar"
+      ]
+    }
   },
-  // Add the IDs of extensions you want installed when the container is created.
-  "extensions": [
-    "dbaeumer.vscode-eslint",
-    "matangover.mypy",
-    "ms-python.black-formatter",
-    "ms-python.isort",
-    "ms-python.python",
-    "ms-python.vscode-pylance",
-    "Vue.volar"
-  ],
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   "forwardPorts": [
     3000,

.vscode/settings.json

@@ -36,13 +36,6 @@
   "i18n-ally.localesPaths": "frontend/lang/messages",
   "i18n-ally.sourceLanguage": "en-US",
   "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",
-  "python.formatting.provider": "black",
-  "python.linting.enabled": true,
-  "python.linting.flake8Enabled": false,
-  "python.linting.pylintEnabled": false,
-  "python.linting.pylintArgs": [
-    "--rcfile=${workspaceFolder}/.pylintrc"
-  ],
   "python.testing.autoTestDiscoverOnSaveEnabled": false,
   "python.testing.pytestArgs": [
     "tests"
@@ -50,7 +43,6 @@
   "python.testing.pytestEnabled": true,
   "python.testing.unittestEnabled": false,
   "python.analysis.typeCheckingMode": "off",
-  "python.linting.mypyEnabled": true,
   "search.mode": "reuseEditor",
   "python.testing.unittestArgs": [
     "-v",
@@ -69,4 +61,7 @@
   "[vue]": {
     "editor.formatOnSave": false
   },
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.black-formatter",
+  },
 }

frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue

@@ -190,6 +190,8 @@ export default defineComponent({
 
     const drag = ref(false);
 
+    const { i18n } = useContext();
+
     const { recipeAssetPath } = useStaticRoutes();
 
     function assetURL(assetName: string) {
@@ -198,7 +200,7 @@ export default defineComponent({
 
     const state = reactive({
       loading: true,
-      loadingText: "Loading recipe...",
+      loadingText: i18n.tc("general.loading-recipe"),
       tab: null,
       selectedRecipeField: "" as SelectedRecipeLeaves | "",
       canvasSelectedText: "",
@@ -260,7 +262,7 @@ export default defineComponent({
     onMounted(() => {
       invoke(async () => {
         await until(props.recipe).not.toBeNull();
-        state.loadingText = "Loading OCR data...";
+        state.loadingText = i18n.tc("general.loading-ocr-data");
 
         const assetName = props.recipe.assets[0].fileName;
         const imagesrc = assetURL(assetName);

frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue

@@ -379,7 +379,7 @@ export default defineComponent({
 
     const toolbarIcons = ref<ToolbarIcons<CanvasModes | SelectedTextSplitModes>>([
       {
-        sectionTitle: "Toolbar",
+        sectionTitle: i18n.tc("ocr-editor.toolbar"),
         eventHandler: switchCanvasMode,
         highlight: state.canvasMode,
         icons: [

frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue

@@ -4,11 +4,11 @@
       <v-icon large left>
         {{ $globals.icons.help }}
       </v-icon>
-      <v-toolbar-title class="headline"> Help </v-toolbar-title>
+      <v-toolbar-title class="headline"> {{ $t("ocr-editor.help.help") }} </v-toolbar-title>
       <v-spacer></v-spacer>
     </v-app-bar>
     <v-card-text>
-      <h1>Mouse modes</h1>
+      <h1> {{ $t("ocr-editor.help.mouse-modes") }}</h1>
       <v-divider class="mb-2 mt-1" />
       <h2 class="my-2">
         <v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help.selection-mode") }}

frontend/components/Domain/Recipe/RecipeOrganizerPage.vue

@@ -15,7 +15,7 @@
 
     <BaseDialog v-if="updateTarget" v-model="dialogs.update" :title="$t('general.update')" @confirm="updateOne()">
       <v-card-text>
-        <v-text-field v-model="updateTarget.name" label="Name"> </v-text-field>
+        <v-text-field v-model="updateTarget.name" label="$t('general.name')"> </v-text-field>
         <v-checkbox v-if="itemType === Organizer.Tool" v-model="updateTarget.onHand" :label="$t('tool.on-hand')"></v-checkbox>
       </v-card-text>
     </BaseDialog>

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -142,7 +142,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { $auth, $vuetify } = useContext();
+    const { $auth } = useContext();
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
     const { isOwnGroup } = useLoggedInState();
@@ -168,8 +168,8 @@ export default defineComponent({
       const isSame = JSON.stringify(props.recipe) === JSON.stringify(originalRecipe.value);
       if (isEditMode.value && !isSame && props.recipe?.slug !== undefined) {
         const save = window.confirm(
-          "You have unsaved changes. Do you want to save before leaving?\n\nOkay to save, Cancel to discard changes."
+          i18n.tc("general.unsaved-changes"),
-        );
+          );
 
         if (save) {
           await api.recipes.updateOne(props.recipe.slug, props.recipe);
@@ -247,6 +247,7 @@ export default defineComponent({
     /** =============================================================
      * View Preferences
      */
+    const { $vuetify, i18n } = useContext();
 
     const landscape = computed(() => {
       const preferLandscape = props.recipe.settings.landscapeView;

frontend/components/Domain/SearchFilter.vue

@@ -10,7 +10,7 @@
       </template>
       <v-card width="400">
         <v-card-text>
-          <v-text-field v-model="state.search" class="mb-2" hide-details dense label="Search" clearable />
+          <v-text-field v-model="state.search" class="mb-2" hide-details dense :label="$tc('search.search')" clearable />
           <v-switch
             v-if="requireAll != undefined"
             v-model="requireAllValue"
@@ -35,7 +35,7 @@
             </v-virtual-scroll>
           </v-card>
           <div v-else>
-            <v-alert type="info" text> No results found </v-alert>
+            <v-alert type="info" text> {{ $tc('search.no-results') }} </v-alert>
           </div>
         </v-card-text>
       </v-card>

frontend/components/global/DropZone.vue

@@ -2,7 +2,7 @@
   <div ref="el" :class="isOverDropZone ? 'over' : ''">
     <div v-if="isOverDropZone" class="overlay"></div>
     <div v-if="isOverDropZone" class="absolute text-container">
-      <p class="text-center drop-text">Drop Image</p>
+      <p class="text-center drop-text"> {{ $t("recipe.drop-image") }} </p>
     </div>
     <slot></slot>
   </div>

frontend/lang/messages/en-US.json

@@ -76,7 +76,8 @@
     "cookbook-events": "Cookbook Events",
     "tag-events": "Tag Events",
     "category-events": "Category Events",
-    "when-a-new-user-joins-your-group": "When a new user joins your group"
+    "when-a-new-user-joins-your-group": "When a new user joins your group",
+    "recipe-events": "Recipe Events"
   },
   "general": {
     "cancel": "Cancel",
@@ -114,6 +115,8 @@
     "keyword": "Keyword",
     "link-copied": "Link Copied",
     "loading-events": "Loading Events",
+    "loading-recipe": "Loading recipe...",
+    "loading-ocr-data": "Loading OCR data...",
     "loading-recipes": "Loading Recipes",
     "message": "Message",
     "monday": "Monday",
@@ -193,7 +196,8 @@
     "export-all": "Export All",
     "refresh": "Refresh",
     "upload-file": "Upload File",
-    "created-on-date": "Created on: {0}"
+    "created-on-date": "Created on: {0}",
+    "unsaved-changes": "You have unsaved changes. Do you want to save before leaving? Okay to save, Cancel to discard changes."
   },
   "group": {
     "are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?",
@@ -208,6 +212,7 @@
     "group-id-with-value": "Group ID: {groupID}",
     "group-name": "Group Name",
     "group-not-found": "Group not found",
+    "group-token": "Group Token",
     "group-with-value": "Group: {groupID}",
     "groups": "Groups",
     "manage-groups": "Manage Groups",
@@ -243,6 +248,7 @@
     "general-preferences": "General Preferences",
     "group-recipe-preferences": "Group Recipe Preferences",
     "report": "Report",
+    "report-with-id": "Report ID: {id}",
     "group-management": "Group Management",
     "admin-group-management": "Admin Group Management",
     "admin-group-management-text": "Changes to this group will be reflected immediately.",
@@ -507,6 +513,7 @@
     "message-key": "Message Key",
     "parse": "Parse",
     "attach-images-hint": "Attach images by dragging & dropping them into the editor",
+    "drop-image": "Drop image",
     "enable-ingredient-amounts-to-use-this-feature": "Enable ingredient amounts to use this feature",
     "recipes-with-units-or-foods-defined-cannot-be-parsed": "Recipes with units or foods defined cannot be parsed.",
     "parse-ingredients": "Parse ingredients",
@@ -564,14 +571,17 @@
     "tag-filter": "Tag Filter",
     "search-hint": "Press '/'",
     "advanced": "Advanced",
-    "auto-search": "Auto Search"
+    "auto-search": "Auto Search",
+    "no-results": "No results found"
   },
   "settings": {
     "add-a-new-theme": "Add a New Theme",
     "admin-settings": "Admin Settings",
     "backup": {
+      "backup-created": "Backup created successfully",
       "backup-created-at-response-export_path": "Backup Created at {path}",
       "backup-deleted": "Backup deleted",
+      "restore-success": "Restore successful",
       "backup-tag": "Backup Tag",
       "create-heading": "Create A Backup",
       "delete-backup": "Delete Backup",
@@ -680,11 +690,13 @@
     "configuration": "Configuration",
     "docker-volume": "Docker Volume",
     "docker-volume-help": "Mealie requires that the frontend container and the backend share the same docker volume or storage. This ensures that the frontend container can properly access the images and assets stored on disk.",
-    "volumes-are-misconfigured": "Volumes are misconfigured",
+    "volumes-are-misconfigured": "Volumes are misconfigured.",
     "volumes-are-configured-correctly": "Volumes are configured correctly.",
     "status-unknown-try-running-a-validation": "Status Unknown. Try running a validation.",
     "validate": "Validate",
     "email-configuration-status": "Email Configuration Status",
+    "email-configured": "Email Configured",
+    "email-test-results": "Email Test Results",
     "ready": "Ready",
     "not-ready": "Not Ready - Check Environmental Variables",
     "succeeded": "Succeeded",
@@ -819,6 +831,7 @@
     "password-updated": "Password updated",
     "password": "Password",
     "password-strength": "Password is {strength}",
+    "please-enter-password": "Please enter your new password.",
     "register": "Register",
     "reset-password": "Reset Password",
     "sign-in": "Sign in",
@@ -839,6 +852,7 @@
     "username": "Username",
     "users-header": "USERS",
     "users": "Users",
+    "user-not-found": "User not found",
     "webhook-time": "Webhook Time",
     "webhooks-enabled": "Webhooks Enabled",
     "you-are-not-allowed-to-create-a-user": "You are not allowed to create a user",
@@ -861,6 +875,7 @@
     "user-management": "User Management",
     "reset-locked-users": "Reset Locked Users",
     "admin-user-creation": "Admin User Creation",
+    "admin-user-management": "Admin User Management",
     "user-details": "User Details",
     "user-name": "User Name",
     "authentication-method": "Authentication Method",
@@ -872,7 +887,10 @@
     "user-can-organize-group-data": "User can organize group data",
     "enable-advanced-features": "Enable advanced features",
     "it-looks-like-this-is-your-first-time-logging-in": "It looks like this is your first time logging in.",
-    "dont-want-to-see-this-anymore-be-sure-to-change-your-email": "Don't want to see this anymore? Be sure to change your email in your user settings!"
+    "dont-want-to-see-this-anymore-be-sure-to-change-your-email": "Don't want to see this anymore? Be sure to change your email in your user settings!",
+    "forgot-password": "Forgot Password",
+    "forgot-password-text": "Please enter your email address and we will send you a link to reset your password.",
+    "changes-reflected-immediately": "Changes to this user will be reflected immediately."
   },
   "language-dialog": {
     "translated": "translated",
@@ -974,6 +992,7 @@
   },
   "user-registration": {
     "user-registration": "User Registration",
+    "registration-success": "Registration Success",
     "join-a-group": "Join a Group",
     "create-a-new-group": "Create a New Group",
     "provide-registration-token-description": "Please provide the registration token associated with the group that you'd like to join. You'll need to obtain this from an existing group member.",
@@ -1020,6 +1039,7 @@
   },
   "ocr-editor": {
     "ocr-editor": "Ocr editor",
+    "toolbar": "Toolbar",
     "selection-mode": "Selection mode",
     "pan-and-zoom-picture": "Pan and zoom picture",
     "split-text": "Split text",
@@ -1027,6 +1047,8 @@
     "split-by-block": "Split by text block",
     "flatten": "Flatten regardless of original formating",
     "help": {
+      "help": "Help",
+      "mouse-modes": "Mouse modes",
       "selection-mode": "Selection Mode (default)",
       "selection-mode-desc": "The selection mode is the main mode that can be used to enter data:",
       "selection-mode-steps": {

frontend/pages/admin/maintenance/index.vue

@@ -27,7 +27,7 @@
     </div>
 
     <section>
-      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$t('admin.maintenance.summary-title')">
+      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$tc('admin.maintenance.summary-title')">
       </BaseCardSectionTitle>
       <div class="mb-6 ml-2 d-flex" style="gap: 0.3rem">
         <BaseButton color="info" @click="getSummary">
@@ -55,7 +55,7 @@
       <BaseCardSectionTitle
         class="pb-0 mt-8"
         :icon="$globals.icons.wrench"
-        :title="$t('admin.mainentance.actions-title')"
+        :title="$tc('admin.mainentance.actions-title')"
       >
         <i18n path="admin.maintenance.actions-description">
           <template #destructive-in-bold>
@@ -103,13 +103,14 @@ export default defineComponent({
     });
 
     const adminApi = useAdminApi();
+    const { i18n } = useContext();
 
     // ==========================================================================
     // General Info
 
     const infoResults = ref<MaintenanceSummary>({
-      dataDirSize: "unknown",
+      dataDirSize: i18n.tc("about.unknown-version"),
-      logFileSize: "unknown",
+      logFileSize: i18n.tc("about.unknown-version"),
       cleanableDirs: 0,
       cleanableImages: 0,
     });
@@ -119,8 +120,8 @@ export default defineComponent({
       const { data } = await adminApi.maintenance.getInfo();
 
       infoResults.value = data ?? {
-        dataDirSize: "unknown",
+        dataDirSize: i18n.tc("about.unknown-version"),
-        logFileSize: "unknown",
+        logFileSize: i18n.tc("about.unknown-version"),
         cleanableDirs: 0,
         cleanableImages: 0,
       };
@@ -128,7 +129,6 @@ export default defineComponent({
       state.fetchingInfo = false;
     }
 
-    const { i18n } = useContext();
 
     const info = computed(() => {
       return [
@@ -163,7 +163,7 @@ export default defineComponent({
     };
 
     function storageDetailsText(key: string) {
-      return storageTitles[key] ?? "unknown";
+      return storageTitles[key] ?? i18n.tc("about.unknown-version");
     }
 
     const storageDetails = ref<MaintenanceStorageDetails | null>(null);

frontend/pages/admin/manage/groups/_id.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
+import { defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
 import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
 import { useAdminApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
@@ -39,6 +39,8 @@ export default defineComponent({
   setup() {
     const route = useRoute();
 
+    const { i18n } = useContext();
+
     const groupId = route.value.params.id;
 
     // ==============================================
@@ -56,7 +58,7 @@ export default defineComponent({
       const { data, error } = await adminApi.groups.getOne(groupId);
 
       if (error?.response?.status === 404) {
-        alert.error("User Not Found");
+        alert.error(i18n.tc("user.user-not-found"));
         userError.value = true;
       }
 

frontend/pages/admin/manage/users/_id.vue

@@ -4,15 +4,15 @@
       <template #header>
         <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
       </template>
-      <template #title> Admin User Management </template>
+      <template #title> {{ $t("user.admin-user-management") }} </template>
-      Changes to this user will be reflected immediately.
+      {{ $t("user.changes-reflected-immediately") }}
     </BasePageTitle>
     <AppToolbar back> </AppToolbar>
     <v-form v-if="!userError" ref="refNewUserForm" @submit.prevent="handleSubmit">
       <v-card outlined>
         <v-card-text>
           <div class="d-flex">
-            <p>User Id: {{ user.id }}</p>
+            <p> {{ $t("user.user-id-with-value", {id: user.id} ) }}</p>
           </div>
           <v-select
             v-if="groups"
@@ -24,7 +24,7 @@
             item-value="name"
             :return-object="false"
             filled
-            label="User Group"
+            :label="$tc('group.user-group')"
             :rules="[validators.required]"
           ></v-select>
           <div class="d-flex py-2 pr-2">
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { useGroups } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
@@ -59,6 +59,7 @@ export default defineComponent({
   setup() {
     const { userForm } = useUserForm();
     const { groups } = useGroups();
+    const { i18n } = useContext();
     const route = useRoute();
 
     const userId = route.value.params.id;
@@ -84,7 +85,7 @@ export default defineComponent({
       const { data, error } = await adminApi.users.getOne(userId);
 
       if (error?.response?.status === 404) {
-        alert.error("User Not Found");
+        alert.error(i18n.tc("user.user-not-found"));
         userError.value = true;
       }
 

frontend/pages/admin/site-settings.vue

@@ -37,7 +37,7 @@
     </div>
 
     <section>
-      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$t('settings.configuration')"> </BaseCardSectionTitle>
+      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$tc('settings.configuration')"> </BaseCardSectionTitle>
       <v-card class="mb-4">
         <template v-for="(check, idx) in simpleChecks">
           <v-list-item :key="`list-item-${idx}`">
@@ -61,7 +61,7 @@
     </section>
 
     <section>
-      <BaseCardSectionTitle class="pt-2" :icon="$globals.icons.docker" :title="$t('settings.docker-volume')" />
+      <BaseCardSectionTitle class="pt-2" :icon="$globals.icons.docker" :title="$tc('settings.docker-volume')" />
       <v-alert
         border="left"
         colored-border
@@ -77,7 +77,7 @@
           </HelpIcon>
         </div>
         <div>
-          <template v-if="docker.state === DockerVolumeState.Error"> {{ $t('settings.volumes-are-misconfigured') }}. </template>
+          <template v-if="docker.state === DockerVolumeState.Error"> {{ $t('settings.volumes-are-misconfigured') }} </template>
           <template v-else-if="docker.state === DockerVolumeState.Success">
             {{ $t('settings.volumes-are-configured-correctly') }}
           </template>
@@ -116,7 +116,7 @@
           <template v-if="tested">
             <v-divider class="my-x mt-6"></v-divider>
             <v-card-text class="px-0">
-              <h4>Email Test Results</h4>
+              <h4> {{ $tc("settings.email-test-results") }}</h4>
               <span class="pl-4">
                 {{ success ? $t('settings.succeeded') : $t('settings.failed') }}
               </span>
@@ -128,7 +128,7 @@
 
     <!-- General App Info -->
     <section class="mt-4">
-      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$t('settings.general-about')"> </BaseCardSectionTitle>
+      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$tc('settings.general-about')"> </BaseCardSectionTitle>
       <v-card class="mb-4">
         <template v-for="(property, idx) in appInfo">
           <v-list-item :key="property.name">
@@ -466,12 +466,12 @@ export default defineComponent({
         if (ignoreChecks[item.id]) {
           return;
         }
-        const status = item.status ? "Yes" : "No";
+        const status = item.status ? i18n.tc("general.yes") : i18n.tc("general.no");
         text += `${item.text.toString()}: ${status}\n`;
       });
 
-      text += `Email Configured: ${appConfig.value.emailReady ? "Yes" : "No"}\n`;
+      text += `${i18n.tc("settings.email-configured")}: ${appConfig.value.emailReady ? i18n.tc("general.yes") : i18n.tc("general.no")}\n`;
-      text += `Docker Volumes: ${docker.state}`;
+      text += `${i18n.tc("settings.docker-volume")}: ${docker.state}`;
 
       return text;
     });

frontend/pages/forgot-password.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container fill-height fluid class="d-flex justify-center align-center">
     <v-card color="background d-flex flex-column align-center" flat width="600px">
-      <v-card-title class="headline justify-center"> Forgot Password </v-card-title>
+      <v-card-title class="headline justify-center"> {{ $t('user.forgot-password') }} </v-card-title>
       <BaseDivider />
       <v-card-text>
         <v-form @submit.prevent="requestLink()">
@@ -15,7 +15,7 @@
             :label="$t('user.email')"
             type="text"
           />
-          <p class="text-center">Please enter your email address and we will send you a link to reset your password.</p>
+          <p class="text-center">{{ $t('user.forgot-password-text') }}</p>
           <v-card-actions class="justify-center">
             <div class="max-button">
               <v-btn :loading="loading" color="primary" type="submit" large rounded class="rounded-xl" block>
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, reactive } from "@nuxtjs/composition-api";
+import { defineComponent, toRefs, reactive, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 export default defineComponent({
@@ -47,6 +47,7 @@ export default defineComponent({
       error: false,
     });
 
+    const { i18n } = useContext();
     const api = useUserApi();
 
     async function requestLink() {
@@ -57,11 +58,11 @@ export default defineComponent({
       if (response?.status === 200) {
         state.loading = false;
         state.error = false;
-        alert.success("Link successfully sent");
+        alert.success(i18n.tc("profile.email-sent"));
       } else {
         state.loading = false;
         state.error = true;
-        alert.error("Email failure");
+        alert.error(i18n.tc("profile.error-sending-email"));
       }
     }
 
@@ -73,7 +74,7 @@ export default defineComponent({
 
   head() {
     return {
-      title: this.$t("user.login") as string,
+      title: this.$tc("user.login"),
     };
   },
 });
@@ -83,4 +84,4 @@ export default defineComponent({
 .max-button {
   width: 300px;
 }
-</style>
+</style>

frontend/pages/g/_groupSlug/cookbooks/index.vue

@@ -115,7 +115,7 @@ export default defineComponent({
   },
   head() {
     return {
-      title: this.$t("settings.pages") as string,
+      title: this.$t("cookbook.cookbooks") as string,
     };
   },
 });

frontend/pages/g/_groupSlug/r/create/bulk.vue

@@ -73,7 +73,7 @@
             lockBulkImport = false;
           "
         >
-          Clear
+          {{ $t('general.clear') }}
         </BaseButton>
         <v-spacer></v-spacer>
         <BaseButton class="mr-1 mb-1" color="info" @click="bulkUrls.push({ url: '', categories: [], tags: [] })">

frontend/pages/group/data/categories.vue

@@ -45,10 +45,11 @@
     >
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
+        <p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.name }}</p>
       </v-card-text>
     </BaseDialog>
 
-    <!-- Recipe Data Table -->
+    <!-- Data Table -->
     <BaseCardSectionTitle :icon="$globals.icons.categories" section :title="$tc('data-pages.categories.category-data')"> </BaseCardSectionTitle>
     <CrudTable
       :table-config="tableConfig"

frontend/pages/group/data/foods.vue

@@ -151,10 +151,11 @@
     >
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
+        <p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.name }}</p>
       </v-card-text>
     </BaseDialog>
 
-    <!-- Recipe Data Table -->
+    <!-- Data Table -->
     <BaseCardSectionTitle :icon="$globals.icons.foods" section :title="$tc('data-pages.foods.food-data')"> </BaseCardSectionTitle>
     <CrudTable
       :table-config="tableConfig"
@@ -394,6 +395,7 @@ export default defineComponent({
       deleteEventHandler,
       deleteDialog,
       deleteFood,
+      deleteTarget,
       // Alias Manager
       aliasManagerDialog,
       aliasManagerEventHandler,

frontend/pages/group/data/labels.vue

@@ -39,6 +39,7 @@
     >
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
+        <MultiPurposeLabel v-if="deleteTarget" class="mt-4 ml-4" :label="deleteTarget" />
       </v-card-text>
     </BaseDialog>
 
@@ -79,7 +80,7 @@
       </v-card-text>
     </BaseDialog>
 
-    <!-- Recipe Data Table -->
+    <!-- Data Table -->
     <BaseCardSectionTitle :icon="$globals.icons.tags" section :title="$tc('data-pages.labels.labels')"> </BaseCardSectionTitle>
     <CrudTable
       :table-config="tableConfig"
@@ -228,13 +229,19 @@ export default defineComponent({
       labels: labelStore.labels,
       validators,
 
-      deleteEventHandler,
+      // create
-      deleteLabel,
+      createLabel,
+      createLabelData: labelData.data,
+
+      // edit
       editLabel,
       editEventHandler,
       editSaveLabel,
-      createLabel,
+
-      createLabelData: labelData.data,
+      // delete
+      deleteEventHandler,
+      deleteLabel,
+      deleteTarget,
 
       // Seed
       seedDatabase,

frontend/pages/group/data/recipes.vue

@@ -121,7 +121,7 @@
             <template #icon>
               {{ $globals.icons.database }}
             </template>
-            Import
+            {{ $t('general.import') }}}
           </BaseButton>
           <BaseButton
             color="info"
@@ -140,7 +140,7 @@
     </section>
 
     <section class="mt-10">
-      <!-- Downloads Data Table -->
+      <!-- Data Table -->
       <BaseCardSectionTitle :icon="$globals.icons.database" section :title="$tc('data-pages.recipes.data-exports')">
         {{ $t('data-pages.recipes.data-exports-description') }}
       </BaseCardSectionTitle>

frontend/pages/group/data/tags.vue

@@ -45,10 +45,11 @@
     >
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
+        <p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.name }}</p>
       </v-card-text>
     </BaseDialog>
 
-    <!-- Recipe Data Table -->
+    <!-- Data Table -->
     <BaseCardSectionTitle :icon="$globals.icons.tags" section :title="$tc('data-pages.tags.tag-data')"> </BaseCardSectionTitle>
     <CrudTable
       :table-config="tableConfig"

frontend/pages/group/data/tools.vue

@@ -47,10 +47,11 @@
     >
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
+        <p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.name }}</p>
       </v-card-text>
     </BaseDialog>
 
-    <!-- Tool Data Table -->
+    <!-- Data Table -->
     <BaseCardSectionTitle :icon="$globals.icons.potSteam" section :title="$tc('data-pages.tools.tool-data')"> </BaseCardSectionTitle>
     <CrudTable
       :table-config="tableConfig"

frontend/pages/group/data/units.vue

@@ -125,6 +125,7 @@
     >
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
+        <p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.name }}</p>
       </v-card-text>
     </BaseDialog>
 
@@ -165,7 +166,7 @@
       </v-card-text>
     </BaseDialog>
 
-    <!-- Recipe Data Table -->
+    <!-- Data Table -->
     <BaseCardSectionTitle :icon="$globals.icons.units" section :title="$tc('data-pages.units.unit-data')"> </BaseCardSectionTitle>
     <CrudTable
       :table-config="tableConfig"
@@ -421,6 +422,7 @@ export default defineComponent({
       deleteEventHandler,
       deleteDialog,
       deleteUnit,
+      deleteTarget,
       // Alias Manager
       aliasManagerDialog,
       aliasManagerEventHandler,

frontend/pages/group/migrations.vue

@@ -392,6 +392,11 @@ export default defineComponent({
       getMigrationReports,
     };
   },
+  head() {
+    return {
+      title: this.$tc("settings.migrations"),
+    };
+  },
 });
 </script>
 

frontend/pages/group/notifiers.vue

@@ -181,7 +181,7 @@ export default defineComponent({
     const optionsSections: OptionSection[] = [
       {
         id: 1,
-        text: "Recipe Events",
+        text: i18n.tc("events.recipe-events"),
         options: [
           {
             text: i18n.t("general.create") as string,

frontend/pages/group/reports/_id.vue

@@ -9,7 +9,7 @@
     <v-container v-if="report">
       <BaseCardSectionTitle :title="report.name"> </BaseCardSectionTitle>
 
-      <v-card-text> Report Id: {{ id }} </v-card-text>
+      <v-card-text> {{ $t('group.report-with-id', { id:id }) }} </v-card-text>
 
       <v-data-table :headers="itemHeaders" :items="report.entries" :items-per-page="50" show-expand>
         <template #item.success="{ item }">

frontend/pages/register/index.vue

@@ -63,7 +63,7 @@
             <v-card-text>
               {{ $t("user-registration.provide-registration-token-description") }}
               <v-form ref="domTokenForm" class="mt-4" @submit.prevent>
-                <v-text-field v-model="token" v-bind="inputAttrs" label="Group Token" :rules="[validators.required]" />
+                <v-text-field v-model="token" v-bind="inputAttrs" :label="$t('group.group-token')" :rules="[validators.required]" />
               </v-form>
             </v-card-text>
             <v-divider />
@@ -244,7 +244,7 @@
       </div>
 
       <v-card-actions class="justify-center flex-column py-8">
-        <v-btn text class="mb-2" to="/login"> Login </v-btn>
+        <v-btn text class="mb-2" to="/login"> {{ $t("user.login") }} </v-btn>
         <BaseButton large color="primary" @click="langDialog = true">
           <template #icon> {{ $globals.icons.translate }}</template>
           {{ $t("language-dialog.choose-language") }}
@@ -472,7 +472,7 @@ export default defineComponent({
       }
       const { response } = await api.register.register(payload);
       if (response?.status === 201) {
-        alert.success("Registration Success");
+        alert.success(i18n.tc("user-registration.registration-success"));
         router.push("/login");
       }
     }

frontend/pages/reset-password.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container fill-height fluid class="d-flex justify-center align-center">
     <v-card color="background d-flex flex-column align-center" flat width="600px">
-      <v-card-title class="headline justify-center"> Reset Password </v-card-title>
+      <v-card-title class="headline justify-center"> {{ $t("user.reset-password") }} </v-card-title>
       <BaseDivider />
       <v-card-text>
         <v-form @submit.prevent="requestLink()">
@@ -23,7 +23,7 @@
             class="rounded-lg"
             :prepend-icon="$globals.icons.lock"
             name="password"
-            label="Password"
+            :label="$t('user.password')"
             type="password"
             :rules="[validators.required]"
           />
@@ -35,11 +35,11 @@
             class="rounded-lg"
             :prepend-icon="$globals.icons.lock"
             name="password"
-            label="Confirm Password"
+            :label="$t('user.confirm-password')"
             type="password"
             :rules="[validators.required, passwordMatch]"
           />
-          <p class="text-center">Please enter your new password.</p>
+          <p class="text-center">{{ $t("user.please-enter-password") }}</p>
           <v-card-actions class="justify-center">
             <div class="max-button">
               <v-btn
@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, reactive } from "@nuxtjs/composition-api";
+import { defineComponent, toRefs, reactive, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { validators } from "@/composables/use-validators";
@@ -84,7 +84,8 @@ export default defineComponent({
       error: false,
     });
 
-    const passwordMatch = () => state.password === state.passwordConfirm || "Passwords do not match";
+    const { i18n } = useContext();
+    const passwordMatch = () => state.password === state.passwordConfirm || i18n.tc("user.password-must-match");
 
     // ===================
     // Token Getter
@@ -108,11 +109,11 @@ export default defineComponent({
       if (response?.status === 200) {
         state.loading = false;
         state.error = false;
-        alert.success("Password Reset Successful");
+        alert.success(i18n.tc("user.password-updated"));
       } else {
         state.loading = false;
         state.error = true;
-        alert.error("Something Went Wrong");
+        alert.error(i18n.tc("events.something-went-wrong"));
       }
     }
 
@@ -137,4 +138,4 @@ export default defineComponent({
 .max-button {
   width: 300px;
 }
-</style>
+</style>

frontend/pages/shopping-lists/_id.vue

@@ -393,8 +393,8 @@ export default defineComponent({
     };
 
     const contextMenu = [
-      { title: "Delete", action: contextActions.delete },
+      { title: i18n.tc("general.delete"), action: contextActions.delete },
-      { title: "Ingredient", action: contextActions.setIngredient },
+      { title: i18n.tc("recipe.ingredient"), action: contextActions.setIngredient },
     ];
 
     function contextMenuAction(action: string, item: ShoppingListItemOut, idx: number) {

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

@@ -4,7 +4,7 @@
       <template #header>
         <v-img max-height="200px" max-width="200px" :src="require('~/static/svgs/manage-api-tokens.svg')"></v-img>
       </template>
-      <template #title> API Tokens </template>
+      <template #title> {{ $tc("settings.token.api-tokens") }} </template>
       {{ $tc('settings.token.you-have-token-count', user.tokens.length) }}
     </BasePageTitle>
     <section class="d-flex justify-center">
@@ -42,7 +42,7 @@
         </v-card-actions>
       </v-card>
     </section>
-    <BaseCardSectionTitle class="mt-10" title="Active Tokens"> </BaseCardSectionTitle>
+    <BaseCardSectionTitle class="mt-10" :title="$tc('settings.token.active-tokens')"> </BaseCardSectionTitle>
     <section class="d-flex flex-column">
       <div v-for="(token, index) in $auth.user.tokens" :key="index">
         <v-card outlined class="mb-2">