More localization (#393)

* Translate sidebar

* Do not force 12-hour format worldwide

Vue-i18n knows which locales prefer 12-hour format over 24-hour format

* Translate new tiles in profile page

* Translate new tiles in dashboard

frontend/src/components/FormHelpers/ImportOptions.vue

@@ -36,11 +36,11 @@ export default {
         },
         users: {
           value: true,
-          text: this.$t("general.users"),
+          text: this.$t("user.users"),
         },
         groups: {
           value: true,
-          text: this.$t("general.groups"),
+          text: this.$t("group.groups"),
         },
       },
     };

frontend/src/components/ImportSummaryDialog/index.vue

@@ -29,8 +29,8 @@
           <v-tab>{{ $t("general.themes") }}</v-tab>
           <v-tab>{{ $t("general.settings") }}</v-tab>
           <v-tab> {{ $t("settings.pages") }} </v-tab>
-          <v-tab>{{ $t("general.users") }}</v-tab>
-          <v-tab>{{ $t("general.groups") }}</v-tab>
+          <v-tab>{{ $t("user.users") }}</v-tab>
+          <v-tab>{{ $t("group.groups") }}</v-tab>
         </v-tabs>
         <v-tabs-items v-model="tab">
           <v-tab-item v-for="(table, index) in allTables" :key="index">
@@ -92,10 +92,10 @@ export default {
       return this.calculateNumbers(this.$t("general.themes"), this.themeData);
     },
     userNumbers() {
-      return this.calculateNumbers(this.$t("general.users"), this.userData);
+      return this.calculateNumbers(this.$t("user.users"), this.userData);
     },
     groupNumbers() {
-      return this.calculateNumbers(this.$t("general.groups"), this.groupData);
+      return this.calculateNumbers(this.$t("group.groups"), this.groupData);
     },
     pageNumbers() {
       return this.calculateNumbers(this.$t("settings.pages"), this.pageData);

frontend/src/components/UI/Dialogs/BackupDialog.vue

@@ -8,7 +8,7 @@
       :loading="loading"
     >
       <template v-slot:open="{ open }">
-        <v-btn @click="open" class="mx-2" small :color="color"> <v-icon left> mdi-plus </v-icon> Custom </v-btn>
+        <v-btn @click="open" class="mx-2" small :color="color"> <v-icon left> mdi-plus </v-icon> {{$t('general.custom')}} </v-btn>
       </template>
       <v-card-text class="mt-6">
         <v-text-field dense :label="$t('settings.backup.backup-tag')" v-model="tag"></v-text-field>

frontend/src/components/UI/TheSidebar.vue

@@ -12,7 +12,7 @@
 
           <v-list-item-content>
             <v-list-item-title> {{ user.fullName }}</v-list-item-title>
-            <v-list-item-subtitle> {{ user.admin ? "Admin" : "User" }}</v-list-item-subtitle>
+            <v-list-item-subtitle> {{ user.admin ? $t('user.admin') : $t('user.user') }}</v-list-item-subtitle>
           </v-list-item-content>
         </v-list-item>
       </template>
@@ -155,7 +155,7 @@ export default {
         {
           icon: "mdi-account-group",
           to: "/admin/manage-users",
-          title: this.$t("settings.manage-users"),
+          title: this.$t("user.manage-users"),
         },
         {
           icon: "mdi-database-import",

frontend/src/locales/dateTimeFormats/en-US.json

@@ -16,7 +16,6 @@
     "day": "numeric",
     "weekday": "long",
     "hour": "numeric",
-    "minute": "numeric",
-    "hour12": true
+    "minute": "numeric"
   }
 }

frontend/src/locales/messages/en-US.json

@@ -9,6 +9,7 @@
     "api-port": "API Port",
     "application-mode": "Application Mode",
     "database-type": "Database Type",
+    "database-url": "Database URL",
     "default-group": "Default Group",
     "demo": "Demo",
     "demo-status": "Demo Status",
@@ -17,10 +18,10 @@
     "download-recipe-json": "Last Scraped JSON",
     "not-demo": "Not Demo",
     "production": "Production",
-    "database-url": "Database URL",
     "version": "Version"
   },
   "category": {
+    "category": "Category",
     "category-created": "Category created",
     "category-creation-failed": "Category creation failed",
     "category-deleted": "Category Deleted",
@@ -28,16 +29,18 @@
     "category-filter": "Category Filter",
     "category-update-failed": "Category update failed",
     "category-updated": "Category updated",
-    "category": "Category"
+    "uncategorized-count": "Uncategorized {count}"
   },
   "general": {
     "apply": "Apply",
     "cancel": "Cancel",
+    "clear": "Clear",
     "close": "Close",
     "confirm": "Confirm",
     "create": "Create",
     "created": "Created",
     "current-parenthesis": "(Current)",
+    "custom": "Custom",
     "dashboard": "Dashboard",
     "delete": "Delete",
     "disabled": "Disabled",
@@ -53,7 +56,6 @@
     "filter": "Filter",
     "friday": "Friday",
     "get": "Get",
-    "groups": "Groups",
     "image": "Image",
     "image-upload-failed": "Image upload failed",
     "import": "Import",
@@ -61,11 +63,12 @@
     "link": "Link",
     "monday": "Monday",
     "name": "Name",
+    "new": "New",
     "no": "No",
     "ok": "OK",
     "options": "Options:",
-    "rating": "Rating",
     "random": "Random",
+    "rating": "Rating",
     "recent": "Recent",
     "recipes": "Recipes",
     "rename-object": "Rename {0}",
@@ -73,13 +76,13 @@
     "saturday": "Saturday",
     "save": "Save",
     "settings": "Settings",
+    "shuffle": "Shuffle",
     "sort": "Sort",
     "sort-alphabetically": "Alphabetical",
     "status": "Status",
     "submit": "Submit",
     "success-count": "Success: {count}",
     "sunday": "Sunday",
-    "shuffle": "Shuffle",
     "templates": "Templates:",
     "themes": "Themes",
     "thursday": "Thursday",
@@ -89,7 +92,6 @@
     "updated": "Updated",
     "upload": "Upload",
     "url": "URL",
-    "users": "Users",
     "wednesday": "Wednesday",
     "yes": "Yes"
   },
@@ -108,6 +110,7 @@
     "group-not-found": "Group not found",
     "groups": "Groups",
     "groups-can-only-be-set-by-administrators": "Groups can only be set by administrators",
+    "manage-groups": "Manage Groups",
     "user-group": "User Group",
     "user-group-created": "User Group Created",
     "user-group-creation-failed": "User Group Creation Failed"
@@ -116,15 +119,18 @@
     "create-a-new-meal-plan": "Create a New Meal Plan",
     "dinner-this-week": "Dinner This Week",
     "dinner-today": "Dinner Today",
+    "dinner-tonight": "DINNER TONIGHT",
     "edit-meal-plan": "Edit Meal Plan",
     "end-date": "End Date",
     "group": "Group (Beta)",
     "meal-planner": "Meal Planner",
     "meal-plans": "Meal Plans",
+    "mealplan-categories": "MEALPLAN CATEGORIES",
     "mealplan-created": "Mealplan created",
     "mealplan-creation-failed": "Mealplan creation failed",
     "mealplan-deleted": "Mealplan Deleted",
     "mealplan-deletion-failed": "Mealplan deletion failed",
+    "mealplan-settings": "Mealplan Settings",
     "mealplan-update-failed": "Mealplan update failed",
     "mealplan-updated": "Mealplan Updated",
     "no-meal-plan-defined-yet": "No meal plan defined yet",
@@ -254,6 +260,7 @@
     "current": "Version:",
     "custom-pages": "Custom Pages",
     "edit-page": "Edit Page",
+    "events": "Events",
     "first-day-of-week": "First day of the week",
     "group-settings-updated": "Group Settings Updated",
     "homepage": {
@@ -267,7 +274,6 @@
     "latest": "Latest",
     "local-api": "Local API",
     "locale-settings": "Locale settings",
-    "manage-users": "Manage Users",
     "migrations": "Migrations",
     "new-page": "New Page",
     "page-name": "Page Name",
@@ -305,6 +311,14 @@
       "theme-updated": "Theme updated",
       "warning": "Warning"
     },
+    "token": {
+      "active-tokens": "ACTIVE TOKENS",
+      "api-token": "API Token",
+      "api-tokens": "API Tokens",
+      "copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again": "Copy this token for use with an external application. This token will not be viewable again.",
+      "create-an-api-token": "Create an API Token",
+      "token-name": "Token Name"
+    },
     "toolbox": {
       "assign-all": "Assign All",
       "bulk-assign": "Bulk Assign",
@@ -319,7 +333,8 @@
       "meal-planner-webhooks": "Meal Planner Webhooks",
       "test-webhooks": "Test Webhooks",
       "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at": "The URLs listed below will receive webhooks containing the recipe data for the meal plan on it's scheduled day. Currently Webhooks will execute at",
-      "webhook-url": "Webhook URL"
+      "webhook-url": "Webhook URL",
+      "webhooks-caps": "WEBHOOKS"
     }
   },
   "signup": {
@@ -340,7 +355,8 @@
     "tag-deletion-failed": "Tag deletion failed",
     "tag-update-failed": "Tag update failed",
     "tag-updated": "Tag updated",
-    "tags": "Tags"
+    "tags": "Tags",
+    "untagged-count": "Untagged {count}"
   },
   "user": {
     "admin": "Admin",
@@ -364,6 +380,7 @@
     "link-name": "Link Name",
     "login": "Login",
     "logout": "Logout",
+    "manage-users": "Manage Users",
     "new-password": "New Password",
     "new-user": "New User",
     "password": "Password",
@@ -377,6 +394,7 @@
     "total-users": "Total Users",
     "upload-photo": "Upload Photo",
     "use-8-characters-or-more-for-your-password": "Use 8 characters or more for your password",
+    "user": "User",
     "user-created": "User created",
     "user-creation-failed": "User creation failed",
     "user-deleted": "User deleted",

frontend/src/pages/Admin/Dashboard/BackupViewer.vue

@@ -11,7 +11,9 @@
     <StatCard icon="mdi-backup-restore" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
-          <div class="body-3 grey--text font-weight-light" v-text="'Backups'" />
+          <h2 class="body-3 grey--text font-weight-light">
+            {{$t('settings.backup-and-exports')}}
+          </h2>
 
           <h3 class="display-2 font-weight-light text--primary">
             <small> {{ total }}</small>
@@ -22,14 +24,14 @@
         <TheUploadBtn url="/api/backups/upload" @uploaded="getAvailableBackups">
           <template v-slot="{ isSelecting, onButtonClick }">
             <v-btn :loading="isSelecting" class="mx-2" small :color="color" @click="onButtonClick">
-              <v-icon left> mdi-cloud-upload </v-icon> Upload
+              <v-icon left> mdi-cloud-upload </v-icon> {{$t('general.upload')}}
             </v-btn>
           </template>
         </TheUploadBtn>
         <BackupDialog :color="color" />
 
         <v-btn :loading="loading" class="mx-2" small :color="color" @click="createBackup">
-          <v-icon left> mdi-plus </v-icon> Create
+          <v-icon left> mdi-plus </v-icon> {{$t('general.create')}}
         </v-btn>
       </div>
       <template v-slot:bottom>

frontend/src/pages/Admin/Dashboard/EventViewer.vue

@@ -3,7 +3,9 @@
     <StatCard icon="mdi-bell-ring" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
-          <div class="body-3 grey--text font-weight-light" v-text="'Events'" />
+          <h2 class="body-3 grey--text font-weight-light">
+            {{$t('settings.events')}}
+          </h2>
 
           <h3 class="display-2 font-weight-light text--primary">
             <small> {{ total }} </small>
@@ -12,7 +14,7 @@
       </template>
       <div class="d-flex row py-3 justify-end">
         <v-btn class="mx-2" small :color="color" @click="deleteAll">
-          <v-icon left> mdi-notification-clear-all </v-icon> Clear
+          <v-icon left> mdi-notification-clear-all </v-icon> {{$t('general.clear')}}
         </v-btn>
       </div>
       <template v-slot:bottom>

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

@@ -5,7 +5,9 @@
         <StatCard icon="mdi-silverware-fork-knife">
           <template v-slot:after-heading>
             <div class="ml-auto text-right">
-              <div class="body-3 grey--text font-weight-light" v-text="'Recipes'" />
+              <h2 class="body-3 grey--text font-weight-light">
+                {{$t('general.recipes')}}
+              </h2>
 
               <h3 class="display-2 font-weight-light text--primary">
                 <small> {{ statistics.totalRecipes }}</small>
@@ -15,14 +17,14 @@
           <template v-slot:actions>
             <div class="d-flex row py-3 justify-space-around">
               <v-btn small color="primary" :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'tag' } }">
-                <v-icon left> mdi-tag </v-icon> Untagged {{ statistics.untaggedRecipes }}
+                <v-icon left> mdi-tag </v-icon> {{$tc('tag.untagged-count', [statistics.untaggedRecipes])}}
               </v-btn>
               <v-btn
                 small
                 color="primary"
                 :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'category' } }"
               >
-                <v-icon left> mdi-tag </v-icon> Uncategorized {{ statistics.uncategorizedRecipes }}
+                <v-icon left> mdi-tag </v-icon> {{$tc('category.uncategorized-count', [statistics.uncategorizedRecipes])}}
               </v-btn>
             </div>
           </template>
@@ -32,8 +34,9 @@
         <StatCard icon="mdi-account">
           <template v-slot:after-heading>
             <div class="ml-auto text-right">
-              <div class="body-3 grey--text font-weight-light" v-text="'Users'" />
-
+              <h2 class="body-3 grey--text font-weight-light">
+                 {{$t('user.users')}}
+              </h2>
               <h3 class="display-2 font-weight-light text--primary">
                 <small> {{ statistics.totalUsers }}</small>
               </h3>
@@ -43,7 +46,7 @@
             <div class="ml-auto">
               <v-btn color="primary" small to="/admin/manage-users?tab=users">
                 <v-icon left>mdi-account</v-icon>
-                Manage Users
+                {{$t('user.manage-users')}}
               </v-btn>
             </div>
           </template>
@@ -53,7 +56,9 @@
         <StatCard icon="mdi-account-group">
           <template v-slot:after-heading>
             <div class="ml-auto text-right">
-              <div class="body-3 grey--text font-weight-light" v-text="'Groups'" />
+              <h2 class="body-3 grey--text font-weight-light">
+                {{$t('group.groups')}}
+              </h2>
 
               <h3 class="display-2 font-weight-light text--primary">
                 <small> {{ statistics.totalGroups }}</small>
@@ -64,7 +69,7 @@
             <div class="ml-auto">
               <v-btn color="primary" small to="/admin/manage-users?tab=groups">
                 <v-icon left>mdi-account-group</v-icon>
-                Manage Groups
+                {{$t('group.manage-groups')}}
               </v-btn>
             </div>
           </template>

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

@@ -2,14 +2,16 @@
   <StatCard icon="mdi-api" color="accent">
     <template v-slot:after-heading>
       <div class="ml-auto text-right">
-        <div class="body-3 grey--text font-weight-light" v-text="'API Tokens'" />
+        <h2 class="body-3 grey--text font-weight-light">
+          {{$t('settings.token.api-tokens')}}
+        </h2>
         <h3 class="display-2 font-weight-light text--primary">
           <small> {{ user.tokens.length }} </small>
         </h3>
       </div>
     </template>
     <template v-slot:bottom>
-      <v-subheader class="mb-n2">ACTIVE TOKENS</v-subheader>
+      <v-subheader class="mb-n2">{{$t('settings.token.active-tokens')}}</v-subheader>
       <v-virtual-scroll height="210" item-height="70" :items="user.tokens" class="mt-2">
         <template v-slot:default="{ item }">
           <v-divider></v-divider>
@@ -38,7 +40,7 @@
       <v-card-actions class="pb-1 pt-3">
         <v-spacer></v-spacer>
         <BaseDialog
-          :title="'Create an API Token'"
+          :title="$t('settings.token.create-an-api-token')"
           title-icon="mdi-api"
           @submit="createToken"
           :submit-text="buttonText"
@@ -46,13 +48,13 @@
         >
           <v-card-text>
             <v-form ref="newTokenForm">
-              <v-text-field v-model="name" label="Token Name" required> </v-text-field>
+              <v-text-field v-model="name" :label="$t('settings.token.token-name')" required> </v-text-field>
             </v-form>
 
             <div v-if="createdToken != ''">
               <v-textarea
                 class="mb-0 pb-0"
-                label="API Token"
+                :label="$t('settings.token.api-token')"
                 readonly
                 v-model="createdToken"
                 append-outer-icon="mdi-content-copy"
@@ -60,7 +62,7 @@
               >
               </v-textarea>
               <v-subheader class="text-center">
-                Copy this token for use with an external application. This token will not be viewable again.
+                {{$t('settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again')}}
               </v-subheader>
             </div>
           </v-card-text>
@@ -107,9 +109,9 @@ export default {
     },
     buttonText() {
       if (this.createdToken === "") {
-        return "Create";
+        return this.$t('general.create');
       } else {
-        return "Close";
+        return this.$t('general.close');
       }
     },
   },

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

@@ -11,7 +11,7 @@
     </template>
     <template v-slot:bottom>
       <div v-if="todaysMeal">
-        <v-subheader>DINNER TONIGHT</v-subheader>
+        <v-subheader>{{$t('meal-plan.dinner-tonight')}}</v-subheader>
         <MobileRecipeCard
           :name="todaysMeal.name"
           :slug="todaysMeal.slug"
@@ -48,12 +48,12 @@
           <v-icon x-large>
             mdi-food-variant
           </v-icon>
-          <small> Mealplan Settings </small>
+          <small> {{$t('meal-plan.mealplan-settings')}} </small>
         </h3>
       </div>
       <v-divider></v-divider>
 
-      <v-subheader>MEALPLAN CATEGORIES</v-subheader>
+      <v-subheader>{{$t('meal-plan.mealplan-categories')}}</v-subheader>
       <v-card-text class="mt-0 pt-0">
         {{ $t("meal-plan.only-recipes-with-these-categories-will-be-used-in-meal-plans") }}
       </v-card-text>
@@ -66,7 +66,7 @@
       />
 
       <v-divider></v-divider>
-      <v-subheader>WEBHOOKS</v-subheader>
+      <v-subheader>{{$t('settings.webhooks.webhooks-caps')}}</v-subheader>
       <v-card-text class="mt-0 pt-0">
         {{
           $t(
@@ -93,7 +93,7 @@
           <v-spacer></v-spacer>
           <v-btn small color="success" @click="addWebhook">
             <v-icon left> mdi-webhook </v-icon>
-            New
+            {{$t('general.new')}}
           </v-btn>
         </v-card-actions>
       </v-card-text>

frontend/src/routes/admin.js

@@ -39,7 +39,7 @@ export const adminRoutes = {
       path: "manage-users",
       component: ManageUsers,
       meta: {
-        title: "settings.manage-users",
+        title: "user.manage-users",
       },
     },
     {