feat(lang): more localization(#2219)

* feat(lang): localize some views

* fix: typo

* fix: Localization broke bug report generation

* feat(lang): localize recipe page instructions

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

@@ -4,15 +4,15 @@
       <template #header>
         <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
       </template>
-      <template #title> Admin Group Management </template>
-      Changes to this group will be reflected immediately.
+      <template #title> {{ $t('group.admin-group-management') }} </template>
+      {{ $t('group.admin-group-management-text') }}
     </BasePageTitle>
     <AppToolbar back> </AppToolbar>
-    <v-card-text> Group Id: {{ group.id }} </v-card-text>
+    <v-card-text> {{ $t('group.group-id-value', [group.id]) }} </v-card-text>
     <v-form v-if="!userError" ref="refGroupEditForm" @submit.prevent="handleSubmit">
       <v-card outlined>
         <v-card-text>
-          <v-text-field v-model="group.name" label="Group Name"> </v-text-field>
+          <v-text-field v-model="group.name" :label="$t('group.group-name')"> </v-text-field>
           <GroupPreferencesEditor v-if="group.preferences" v-model="group.preferences" />
         </v-card-text>
       </v-card>

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

@@ -25,7 +25,7 @@
       </v-card-text>
     </BaseDialog>
 
-    <BaseCardSectionTitle title="Group Management"> </BaseCardSectionTitle>
+    <BaseCardSectionTitle :title="$tc('group.group-management')"> </BaseCardSectionTitle>
     <section>
       <v-toolbar flat color="background" class="justify-between">
         <BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
@@ -102,7 +102,7 @@ export default defineComponent({
       createUserForm: {
         items: [
           {
-            label: "Group Name",
+            label: i18n.t("group.group-name"),
             varName: "name",
             type: fieldTypes.TEXT,
             rules: ["required"],

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

@@ -4,7 +4,7 @@
       <template #header>
         <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
       </template>
-      <template #title> Admin User Creation </template>
+      <template #title> {{ $t('user.admin-user-creation') }} </template>
     </BasePageTitle>
     <AppToolbar back> </AppToolbar>
     <v-form ref="refNewUserForm" @submit.prevent="handleSubmit">
@@ -20,7 +20,7 @@
             item-value="name"
             :return-object="false"
             filled
-            label="User Group"
+            :label="$t('group.user-group')"
             :rules="[validators.required]"
           ></v-select>
           <AutoForm v-model="newUserData" :items="userForm" />

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

@@ -16,24 +16,14 @@
       </v-card-text>
     </BaseDialog>
 
-    <BaseCardSectionTitle title="User Management"> </BaseCardSectionTitle>
+    <BaseCardSectionTitle :title="$tc('user.user-management')"> </BaseCardSectionTitle>
     <section>
       <v-toolbar color="background" flat class="justify-between">
         <BaseButton to="/admin/manage/users/create" class="mr-2">
           {{ $t("general.create") }}
         </BaseButton>
 
-        <BaseOverflowButton
-          mode="event"
-          :items="[
-            {
-              text: 'Reset Locked Users',
-              icon: $globals.icons.lock,
-              event: 'unlock-all-users',
-            },
-          ]"
-          @unlock-all-users="unlockAllUsers"
-        >
+        <BaseOverflowButton mode="event" :items="ACTIONS_OPTIONS" @unlock-all-users="unlockAllUsers">
         </BaseOverflowButton>
       </v-toolbar>
       <v-data-table
@@ -89,7 +79,7 @@ export default defineComponent({
 
     const user = computed(() => $auth.user as UserOut | null);
 
-    const { i18n } = useContext();
+    const { $globals, i18n } = useContext();
 
     const router = useRouter();
 
@@ -97,6 +87,14 @@ export default defineComponent({
       return state.deleteTargetId === user.value?.id;
     });
 
+    const ACTIONS_OPTIONS = [
+      {
+        text: i18n.t("user.reset-locked-users"),
+        icon: $globals.icons.lock,
+        event: "unlock-all-users",
+      },
+    ];
+
     const state = reactive({
       deleteDialog: false,
       deleteTargetId: "",
@@ -158,6 +156,7 @@ export default defineComponent({
       users,
       user,
       handleRowClick,
+      ACTIONS_OPTIONS,
     };
   },
   head() {