More localization (#358)

* Translate missing items on About page

* Localize import summary dialog

* Make site menu translation reactive

* Localize import options

* Include semi colon in string

* Move API texts to frontend + better status codes

* Provide feedback to user when no meal is planned

* Fix API tests after latest rework

* Add warning for API changes in changelog

* Refactor API texts handling

* Refactor API texts handling #2

* Better API feedback

* Rearrange strings hierarchy

* Add messages upon recipe updated

* Fix 'recipe effected' typo

* Remove snackbar usage in backend

* Translate toolbox

* Provide feedback for tags CRUD

* Fix messed up merge

* Translate sign-up form

* Better feedback for sign-up CRUD

* Refactor log-in API texts handling

* No error message when user is not authenticated

* Remove unimportant console log

frontend/src/pages/Admin/About/index.vue

@@ -23,11 +23,11 @@
       <v-card-actions>
         <v-spacer></v-spacer>
         <TheDownloadBtn
-          button-text="Download Recipe JSON"
+          :button-text="$t('about.download-recipe-json')"
           download-url="/api/debug/last-recipe-json"
         />
         <TheDownloadBtn
-          button-text="Download Log"
+          :button-text="$t('about.download-log')"
           download-url="/api/debug/log"
         />
       </v-card-actions>

frontend/src/pages/Admin/Backup/AvailableBackupCard.vue

@@ -62,17 +62,21 @@ export default {
     },
     async importBackup(data) {
       this.$emit("loading");
-      let response = await api.backups.import(data.name, data);
+      const response = await api.backups.import(data.name, data);
+      if(response) {
+        let importData = response.data;
+        this.$emit("finished", importData);
+      } else {
+        this.$emit("finished");
+      }
 
-      let importData = response.data;
-
-      this.$emit("finished", importData);
     },
-    deleteBackup(data) {
+    async deleteBackup(data) {
       this.$emit("loading");
 
-      api.backups.delete(data.name);
-      this.selectedBackup = null;
+      if (await api.backups.delete(data.name)) {
+        this.selectedBackup = null;
+      }
       this.backupLoading = false;
 
       this.$emit("finished");

frontend/src/pages/Admin/Backup/ImportOptions.vue

@@ -28,7 +28,7 @@ export default {
         },
         pages: {
           value: true,
-          text: "Pages",
+          text: this.$t("settings.pages"),
         },
         themes: {
           value: true,

frontend/src/pages/Admin/Backup/NewBackupCard.vue

@@ -20,11 +20,11 @@
         <v-card-text class="mt-n4">
           <v-row>
             <v-col sm="4">
-              <p>{{ $t("general.options") }}:</p>
+              <p>{{ $t("general.options") }}</p>
               <ImportOptions @update-options="updateOptions" class="mt-5" />
             </v-col>
             <v-col>
-              <p>{{ $t("general.templates") }}:</p>
+              <p>{{ $t("general.templates") }}</p>
               <v-checkbox
                 v-for="template in availableTemplates"
                 :key="template"
@@ -97,10 +97,11 @@ export default {
         templates: this.selectedTemplates,
       };
 
-      await api.backups.create(data);
+      if (await api.backups.create(data)) {
+        this.$emit("created");
+      }
       this.loading = false;
 
-      this.$emit("created");
     },
     appendTemplate(templateName) {
       if (this.selectedTemplates.includes(templateName)) {

frontend/src/pages/Admin/ManageUsers/GroupCard.vue

@@ -2,9 +2,9 @@
   <div>
     <ConfirmationDialog
       ref="deleteGroupConfirm"
-      :title="$t('user.confirm-group-deletion')"
+      :title="$t('group.confirm-group-deletion')"
       :message="
-        $t('user.are-you-sure-you-want-to-delete-the-group', {
+        $t('group.are-you-sure-you-want-to-delete-the-group', {
           groupName: group.name,
         })
       "
@@ -18,7 +18,7 @@
         <v-card-title class="py-1">{{ group.name }}</v-card-title>
         <v-divider></v-divider>
         <v-subheader>{{
-          $t("user.group-id-with-value", { groupID: group.id })
+          $t("group.group-id-with-value", { groupID: group.id })
         }}</v-subheader>
         <v-list-item-group color="primary">
           <v-list-item v-for="property in groupProps" :key="property.text">
@@ -91,8 +91,9 @@ export default {
       this.$refs.deleteGroupConfirm.open();
     },
     async deleteGroup() {
-      await api.groups.delete(this.group.id);
-      this.$emit(RENDER_EVENT);
+      if (await api.groups.delete(this.group.id)) {
+        this.$emit(RENDER_EVENT);
+      }
     },
     closeGroupDelete() {
       console.log("Close Delete");

frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue

@@ -24,7 +24,7 @@
               v-bind="attrs"
               v-on="on"
             >
-              {{ $t("user.create-group") }}
+              {{ $t("group.create-group") }}
             </v-btn>
           </template>
           <v-card>
@@ -34,7 +34,7 @@
               </v-icon>
 
               <v-toolbar-title class="headline">
-                {{ $t("user.create-group") }}
+                {{ $t("group.create-group") }}
               </v-toolbar-title>
 
               <v-spacer></v-spacer>
@@ -43,7 +43,7 @@
               <v-card-text>
                 <v-text-field
                   v-model="newGroupName"
-                  :label="$t('user.group-name')"
+                  :label="$t('group.group-name')"
                   :rules="[existsRule]"
                 ></v-text-field>
               </v-card-text>
@@ -104,12 +104,11 @@ export default {
   methods: {
     async createGroup() {
       this.groupLoading = true;
-      let response = await api.groups.create(this.newGroupName);
-      if (response.created) {
-        this.groupLoading = false;
+      if (await api.groups.create(this.newGroupName)) {
         this.groupDialog = false;
         this.$store.dispatch("requestAllGroups");
       }
+      this.groupLoading = false;
     },
   },
 };

frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card outlined class="mt-n1">
     <ConfirmationDialog
-      ref="deleteUserDialog"
+      ref="deleteTokenDialog"
       :title="$t('user.confirm-link-deletion')"
       :message="
         $t('user.are-you-sure-you-want-to-delete-the-link', {
@@ -9,7 +9,7 @@
         })
       "
       icon="mdi-alert"
-      @confirm="deleteUser"
+      @confirm="deleteToken"
       :width="450"
       @close="closeDelete"
     />
@@ -18,7 +18,7 @@
         mdi-link-variant
       </v-icon>
       <v-toolbar-title class="headine">
-        {{ $t("user.sign-up-links") }}
+        {{ $t("signup.sign-up-links") }}
       </v-toolbar-title>
 
       <v-spacer> </v-spacer>
@@ -181,9 +181,10 @@ export default {
       this.links = await api.signUps.getAll();
     },
 
-    async deleteUser() {
-      await api.signUps.deleteToken(this.activeId);
-      this.initialize();
+    async deleteToken() {
+      if (await api.signUps.deleteToken(this.activeId)) {
+        this.initialize();
+      }
     },
 
     editItem(item) {
@@ -197,7 +198,7 @@ export default {
       this.activeName = item.name;
       this.editedIndex = this.links.indexOf(item);
       this.editedItem = Object.assign({}, item);
-      this.$refs.deleteUserDialog.open();
+      this.$refs.deleteTokenDialog.open();
     },
 
     deleteItemConfirm() {

frontend/src/pages/Admin/ManageUsers/TheUserTable.vue

@@ -72,7 +72,7 @@
                     dense
                     v-model="editedItem.group"
                     :items="existingGroups"
-                    :label="$t('user.user-group')"
+                    :label="$t('group.user-group')"
                   ></v-select>
                 </v-col>
                 <v-col cols="12" sm="12" md="6" v-if="showPassword">
@@ -94,7 +94,7 @@
 
             <v-card-actions>
               <v-btn color="info" text @click="resetPassword">
-                Reset Password
+                {{$t('user.reset-password')}}
               </v-btn>
               <v-spacer></v-spacer>
               <v-btn color="grey" text @click="close">
@@ -165,7 +165,7 @@ export default {
         },
         { text: this.$t("user.full-name"), value: "fullName" },
         { text: this.$t("user.email"), value: "email" },
-        { text: this.$t("user.group"), value: "group" },
+        { text: this.$t("group.group"), value: "group" },
         { text: this.$t("user.admin"), value: "admin" },
         { text: "", value: "actions", sortable: false, align: "center" },
       ],
@@ -223,8 +223,9 @@ export default {
     },
 
     async deleteUser() {
-      await api.users.delete(this.activeId);
-      this.initialize();
+      if (await api.users.delete(this.activeId)) {
+        this.initialize();
+      }
     },
 
     editItem(item) {
@@ -264,17 +265,27 @@ export default {
 
     async save() {
       if (this.editedIndex > -1) {
-        await api.users.update(this.editedItem);
-        this.close();
+        this.updateUser();
       } else if (this.$refs.newUser.validate()) {
-        await api.users.create(this.editedItem);
-        this.close();
+        this.createUser();
       }
       await this.initialize();
     },
     resetPassword() {
       api.users.resetPassword(this.editedItem.id);
     },
+    
+    async createUser() {
+      if(await api.users.create(this.editedItem)) {
+        this.close();
+      }
+    },
+
+    async updateUser() {
+      if(await api.users.update(this.editedItem)) {
+        this.close();
+      }
+    }
   },
 };
 </script>

frontend/src/pages/Admin/ManageUsers/index.vue

@@ -16,12 +16,12 @@
         </v-tab>
 
         <v-tab>
-          {{ $t("user.sign-up-links") }}
+          {{ $t("signup.sign-up-links") }}
           <v-icon>mdi-account-plus-outline</v-icon>
         </v-tab>
 
         <v-tab>
-          {{ $t("user.groups") }}
+          {{ $t("group.groups") }}
           <v-icon>mdi-account-group</v-icon>
         </v-tab>
       </v-tabs>

frontend/src/pages/Admin/MealPlanner/index.vue

@@ -135,9 +135,10 @@ export default {
       this.groupSettings.webhookUrls.splice(index, 1);
     },
     async saveGroupSettings() {
-      await api.groups.update(this.groupSettings);
-      await this.$store.dispatch("requestCurrentGroup");
-      this.getSiteSettings();
+      if (await api.groups.update(this.groupSettings)) {
+        await this.$store.dispatch("requestCurrentGroup");
+        this.getSiteSettings();
+      }
     },
     testWebhooks() {
       api.settings.testWebhooks();

frontend/src/pages/Admin/Migration/MigrationCard.vue

@@ -86,9 +86,10 @@ export default {
     };
   },
   methods: {
-    deleteMigration(file_name) {
-      api.migrations.delete(this.folder, file_name);
-      this.$emit("refresh");
+    async deleteMigration(file_name) {
+      if (await api.migrations.delete(this.folder, file_name)) {
+        this.$emit("refresh");
+      }
     },
     async importMigration(file_name) {
       this.loading = true;

frontend/src/pages/Admin/Profile/index.vue

@@ -55,11 +55,11 @@
                 >
                 </v-text-field>
                 <v-text-field
-                  :label="$t('user.group')"
+                  :label="$t('group.group')"
                   readonly
                   v-model="user.group"
                   persistent-hint
-                  :hint="$t('user.groups-can-only-be-set-by-administrators')"
+                  :hint="$t('group.groups-can-only-be-set-by-administrators')"
                 >
                 </v-text-field>
               </v-form>
@@ -201,11 +201,13 @@ export default {
     },
     async updateUser() {
       this.loading = true;
-      let newKey = await api.users.update(this.user);
-      this.$store.commit("setToken", newKey.access_token);
-      this.refreshProfile();
-      this.loading = false;
-      this.$store.dispatch("requestUserData");
+      const response = await api.users.update(this.user);
+      if(response) {
+        this.$store.commit("setToken", response.data.access_token);
+        this.refreshProfile();
+        this.loading = false;
+        this.$store.dispatch("requestUserData");
+      }
     },
     async changePassword() {
       this.paswordLoading = true;
@@ -215,7 +217,9 @@ export default {
       };
 
       if (this.$refs.passChange.validate()) {
-        await api.users.changePassword(this.user.id, data);
+        if (await api.users.changePassword(this.user.id, data)) {
+          this.$emit("refresh");
+        }
       }
       this.paswordLoading = false;
     },

frontend/src/pages/Admin/Settings/CreatePageDialog.vue

@@ -82,14 +82,18 @@ export default {
       this.$refs.categoryFormSelector.setInit(this.page.categories);
     },
     async submitForm() {
+      let response;
       if (this.create) {
-        await api.siteSettings.createPage(this.page);
+        response = await api.siteSettings.createPage(this.page);
       } else {
-        await api.siteSettings.updatePage(this.page);
+        response = await api.siteSettings.updatePage(this.page);
+      }
+      
+      if (response) {
+        this.pageDialog = false;
+        this.page.categories = [];
+        this.$emit(NEW_PAGE_EVENT);
       }
-      this.pageDialog = false;
-      this.page.categories = [];
-      this.$emit(NEW_PAGE_EVENT);
     },
   },
 };

frontend/src/pages/Admin/Settings/CustomPageCreator.vue

@@ -109,9 +109,10 @@ export default {
         element.position = index;
       });
 
-      await api.siteSettings.updateAllPages(this.customPages);
+      if (await api.siteSettings.updateAllPages(this.customPages)) {
+        this.getPages();
+      }
 
-      this.getPages();
     },
     editPage(index) {
       this.editPageData.data = this.customPages[index];

frontend/src/pages/Admin/Settings/HomePageSettings.vue

@@ -214,7 +214,7 @@ export default {
       this.settings.language = val;
     },
     deleteCategoryfromDatabase(category) {
-      api.categories.delete(category);
+      api.categories.delete(category); 
     },
     async getOptions() {
       this.settings = await api.siteSettings.get();
@@ -223,8 +223,9 @@ export default {
       this.settings.categories.splice(index, 1);
     },
     async saveSettings() {
-      await api.siteSettings.update(this.settings);
-      this.getOptions();
+      if (await api.siteSettings.update(this.settings)) {
+        this.getOptions();
+      } 
     },
   },
 };

frontend/src/pages/Admin/Theme/ThemeCard.vue

@@ -70,11 +70,11 @@ export default {
     },
     async deleteSelectedTheme() {
       //Delete Theme from DB
-      await api.themes.delete(this.theme.name);
-
-      //Get the new list of available from DB
-      this.availableThemes = await api.themes.requestAll();
-      this.$emit(DELETE_EVENT);
+      if (await api.themes.delete(this.theme.name)) {
+        //Get the new list of available from DB
+        this.availableThemes = await api.themes.requestAll();
+        this.$emit(DELETE_EVENT);
+      }
     },
     async saveThemes() {
       this.$store.commit("setTheme", this.theme);

frontend/src/pages/Admin/Theme/index.vue

@@ -171,9 +171,11 @@ export default {
      * Create the new Theme and select it.
      */
     async appendTheme(NewThemeDialog) {
-      await api.themes.create(NewThemeDialog);
-      this.availableThemes.push(NewThemeDialog);
-      this.$store.commit("setTheme", NewThemeDialog);
+      const response = await api.themes.create(NewThemeDialog);
+      if (response) {
+        this.availableThemes.push(NewThemeDialog);
+        this.$store.commit("setTheme", NewThemeDialog);
+      }
     },
     setStoresDarkMode() {
       this.$store.commit("setDarkMode", this.selectedDarkMode);
@@ -181,8 +183,8 @@ export default {
     /**
      * This will save the current colors and make the selected theme live.
      */
-    async saveThemes() {
-      await api.themes.update(
+    saveThemes() {
+      api.themes.update(
         this.selectedTheme.name,
         this.selectedTheme.colors
       );

frontend/src/pages/Admin/ToolBox/CategoryTagEditor/BulkAssign.vue

@@ -4,7 +4,7 @@
       ref="assignDialog"
       title-icon="mdi-tag"
       color="primary"
-      title="Bulk Assign"
+      :title="$t('settings.toolbox.bulk-assign')"
       :loading="loading"
       modal-width="700"
       :top="true"
@@ -13,7 +13,7 @@
         <v-text-field
           v-model="search"
           autocomplete="off"
-          label="Keyword"
+          :label="$t('general.keyword')"
         ></v-text-field>
         <CategoryTagSelector
           :tag-selector="false"
@@ -44,7 +44,7 @@
         <v-card-title class="headline"> </v-card-title>
         <CardSection
           class="px-2 pb-2"
-          :title="`${results.length || 0} Recipes Effected`"
+          :title="$tc('settings.toolbox.recipes-affected', results.length || 0)"
           :mobile-cards="true"
           :recipes="results"
           :single-column="true"

frontend/src/pages/Admin/ToolBox/CategoryTagEditor/RemoveUnused.vue

@@ -7,7 +7,7 @@
       :title="
         $t('general.delete') +
           ' ' +
-          (isTags ? $t('recipe.tags') : $t('recipe.categories'))
+          (isTags ? $t('tag.tags') : $t('recipe.categories'))
       "
       :loading="loading"
       modal-width="400"

frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue

@@ -18,8 +18,7 @@
       </v-form>
       <template slot="below-actions">
         <v-card-title class="headline">
-          {{ renameTarget.recipes.length || 0 }}
-          {{ $t("settings.toolbox.recipes-effected") }}
+          {{ $tc("settings.toolbox.recipes-affected", renameTarget.recipes.length || 0) }}
         </v-card-title>
         <MobileRecipeCard
           class="ml-2 mr-2 mt-2 mb-2"
@@ -94,10 +93,10 @@
               <v-card-title class="py-1">{{ item.name }}</v-card-title>
               <v-spacer></v-spacer>
               <v-btn small text color="info" @click="openEditDialog(item)">
-                Edit
+                {{$t('general.edit')}}
               </v-btn>
-              <v-btn small text color="error" @click="deleteItem(item.slug)"
-                >Delete
+              <v-btn small text color="error" @click="deleteItem(item.slug)">
+                {{$t('general.delete')}}
               </v-btn>
             </v-card-actions>
           </v-card>
@@ -177,7 +176,7 @@ export default {
       }
 
       this.renameTarget = {
-        title: `Rename ${item.name}`,
+        title:this.$t('general.rename-object', [item.name]),
         name: item.name,
         slug: item.slug,
         newName: "",

frontend/src/pages/Admin/ToolBox/index.vue

@@ -16,7 +16,7 @@
         </v-tab>
 
         <v-tab>
-          {{ $t("recipe.tags") }}
+          {{ $t("tag.tags") }}
           <v-icon>mdi-tag-multiple-outline</v-icon>
         </v-tab>
       </v-tabs>