Localize hard-coded texts (#2044)

* feat(lang): localize some views

* feat(lang): an attempt at localizing vuetify (WIP)

* feat(lang): localized some more screens

* feat(lang): localized some more screens again

* feat(lang): hack to localize vuetify

* feat(lang): localize data management pages

* fix linting errors

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/pages/recipe/create/bulk.vue

@@ -1,11 +1,9 @@
 <template>
   <div>
     <div>
-      <v-card-title class="headline"> Recipe Bulk Importer </v-card-title>
+      <v-card-title class="headline"> {{ $t('recipe.recipe-bulk-importer') }} </v-card-title>
       <v-card-text>
-        The Bulk recipe importer allows you to import multiple recipes at once by queueing the sites on the backend and
-        running the task in the background. This can be useful when initially migrating to Mealie, or when you want to
-        import a large number of recipes.
+        {{ $t('recipe.recipe-bulk-importer-description') }}
       </v-card-text>
     </div>
     <section class="mt-2">
@@ -85,24 +83,24 @@
         <RecipeDialogBulkAdd v-model="bulkDialog" @bulk-data="assignUrls" />
       </v-card-actions>
       <div class="px-1">
-        <v-checkbox v-model="showCatTags" hide-details label="Set Categories and Tags " />
+        <v-checkbox v-model="showCatTags" hide-details :label="$t('recipe.set-categories-and-tags')" />
       </div>
       <v-card-actions class="justify-end">
         <BaseButton :disabled="bulkUrls.length === 0 || lockBulkImport" @click="bulkCreate">
           <template #icon> {{ $globals.icons.check }} </template>
-          Submit
+          {{ $t('general.submit') }}
         </BaseButton>
       </v-card-actions>
     </section>
     <section class="mt-12">
-      <BaseCardSectionTitle title="Bulk Imports"> </BaseCardSectionTitle>
+      <BaseCardSectionTitle :title="$tc('recipe.bulk-imports')"> </BaseCardSectionTitle>
       <ReportTable :items="reports" @delete="deleteReport" />
     </section>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref } from "@nuxtjs/composition-api";
+import { defineComponent, reactive, toRefs, ref, useContext } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/shared";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
@@ -128,6 +126,7 @@ export default defineComponent({
     );
 
     const api = useUserApi();
+    const { i18n } = useContext();
 
     const bulkUrls = ref([{ url: "", categories: [], tags: [] }]);
     const lockBulkImport = ref(false);
@@ -140,10 +139,10 @@ export default defineComponent({
       const { response } = await api.recipes.createManyByUrl({ imports: bulkUrls.value });
 
       if (response?.status === 202) {
-        alert.success("Bulk Import process has started");
+        alert.success(i18n.tc("recipe.bulk-import-process-has-started"));
         lockBulkImport.value = true;
       } else {
-        alert.error("Bulk import process has failed");
+        alert.error(i18n.tc("recipe.bulk-import-process-has-failed"));
       }
 
       fetchReports();
@@ -166,7 +165,7 @@ export default defineComponent({
       if (response?.status === 200) {
         fetchReports();
       } else {
-        alert.error("Report deletion failed");
+        alert.error(i18n.tc("recipe.report-deletion-failed"));
       }
     }
 

frontend/pages/recipe/create/debug.vue

@@ -2,11 +2,9 @@
   <div>
     <v-form ref="domUrlForm" @submit.prevent="debugUrl(recipeUrl)">
       <div>
-        <v-card-title class="headline"> Recipe Debugger </v-card-title>
+        <v-card-title class="headline"> {{ $t('recipe.recipe-debugger') }} </v-card-title>
         <v-card-text>
-          Grab the URL of the recipe you want to debug and paste it here. The URL will be scraped by the recipe scraper
-          and the results will be displayed. If you don't see any data returned, the site you are trying to scrape is
-          not supported by Mealie or its scraper library.
+          {{ $t('recipe.recipe-debugger-description') }}
           <v-text-field
             v-model="recipeUrl"
             :label="$t('new-recipe.recipe-url')"
@@ -28,14 +26,14 @@
               <template #icon>
                 {{ $globals.icons.robot }}
               </template>
-              Debug
+              {{ $t('recipe.debug') }}
             </BaseButton>
           </div>
         </v-card-actions>
       </div>
     </v-form>
     <section v-if="debugData">
-      <v-checkbox v-model="debugTreeView" label="Tree View"></v-checkbox>
+      <v-checkbox v-model="debugTreeView" :label="$t('recipe.tree-view')"></v-checkbox>
       <LazyRecipeJsonEditor
         v-model="debugData"
         class="primary"

frontend/pages/recipe/create/new.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <v-card-title class="headline"> Create Recipe </v-card-title>
+    <v-card-title class="headline"> {{ $t('recipe.create-recipe') }} </v-card-title>
     <v-card-text>
-      Create a recipe by providing the name. All recipes must have unique names.
+      {{ $t('recipe.create-a-recipe-by-providing-the-name-all-recipes-must-have-unique-names') }}
       <v-form ref="domCreateByName">
         <v-text-field
           v-model="newRecipeName"
@@ -15,7 +15,7 @@
           class="rounded-lg mt-2"
           rounded
           :rules="[validators.required]"
-          hint="New recipe names must be unique"
+          :hint="$t('recipe.new-recipe-names-must-be-unique')"
           persistent-hint
         ></v-text-field>
       </v-form>

frontend/pages/recipe/create/ocr.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <v-card-title class="headline"> Create Recipe from an Image </v-card-title>
+    <v-card-title class="headline"> {{ $t('recipe.create-recipe-from-an-image') }} </v-card-title>
     <v-card-text>
-      Create a recipe by uploading a scan.
+      {{ $t('recipe.create-a-recipe-by-uploading-a-scan') }}
       <v-form ref="domCreateByOcr"> </v-form>
     </v-card-text>
     <v-card-actions class="justify-center">
@@ -15,7 +15,7 @@
         class="rounded-lg mt-2"
         rounded
         truncate-length="100"
-        hint="Upload a png image from a recipe book"
+        :hint="$t('recipe.upload-a-png-image-from-a-recipe-book')"
         persistent-hint
         prepend-icon=""
         :prepend-inner-icon="$globals.icons.fileImage"

frontend/pages/recipe/create/url.vue

@@ -2,10 +2,9 @@
   <div>
     <v-form ref="domUrlForm" @submit.prevent="createByUrl(recipeUrl, importKeywordsAsTags, stayInEditMode)">
       <div>
-        <v-card-title class="headline"> Scrape Recipe </v-card-title>
+        <v-card-title class="headline"> {{ $t('recipe.scrape-recipe') }} </v-card-title>
         <v-card-text>
-          Scrape a recipe by url. Provide the url for the site you want to scrape, and Mealie will attempt to scrape the
-          recipe from that site and add it to your collection.
+          {{ $t('recipe.scrape-recipe-description') }}
           <v-text-field
             v-model="recipeUrl"
             :label="$t('new-recipe.recipe-url')"
@@ -20,8 +19,8 @@
             :hint="$t('new-recipe.url-form-hint')"
             persistent-hint
           ></v-text-field>
-          <v-checkbox v-model="importKeywordsAsTags" hide-details label="Import original keywords as tags" />
-          <v-checkbox v-model="stayInEditMode" hide-details label="Stay in Edit mode" />
+          <v-checkbox v-model="importKeywordsAsTags" hide-details :label="$t('recipe.import-original-keywords-as-tags')" />
+          <v-checkbox v-model="stayInEditMode" hide-details :label="$t('recipe.stay-in-edit-mode')" />
         </v-card-text>
         <v-card-actions class="justify-center">
           <div style="width: 250px">

frontend/pages/recipe/create/zip.vue

@@ -1,9 +1,9 @@
 <template>
   <v-form>
     <div>
-      <v-card-title class="headline"> Import from Zip </v-card-title>
+      <v-card-title class="headline"> {{ $t('recipe.import-from-zip') }} </v-card-title>
       <v-card-text>
-        Import a single recipe that was exported from another Mealie instance.
+        {{ $t('recipe.import-from-zip-description') }}
         <v-file-input
           v-model="newRecipeZip"
           accept=".zip"
@@ -13,7 +13,7 @@
           class="rounded-lg mt-2"
           rounded
           truncate-length="100"
-          hint=".zip files must have been exported from Mealie"
+          :hint="$t('recipe.zip-files-must-have-been-exported-from-mealie')"
           persistent-hint
           prepend-icon=""
           :prepend-inner-icon="$globals.icons.zip"