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/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>