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/composables/use-group-mealplan.ts

@@ -1,4 +1,4 @@
-import { useAsync, ref, Ref, watch } from "@nuxtjs/composition-api";
+import { useAsync, ref, Ref, watch, useContext } from "@nuxtjs/composition-api";
 import { format } from "date-fns";
 import { useAsyncKey } from "./use-utils";
 import { useUserApi } from "~/composables/api";
@@ -8,14 +8,21 @@ type PlanOption = {
   text: string;
   value: PlanEntryType;
 };
+export function usePlanTypeOptions() {
+  const { i18n } = useContext();
 
-export const planTypeOptions: PlanOption[] = [
-  { text: "Breakfast", value: "breakfast" },
-  { text: "Lunch", value: "lunch" },
-  { text: "Dinner", value: "dinner" },
-  { text: "Side", value: "side" },
-];
+  return [
+    { text: i18n.tc("meal-plan.breakfast"), value: "breakfast" },
+    { text: i18n.tc("meal-plan.lunch"), value: "lunch" },
+    { text: i18n.tc("meal-plan.dinner"), value: "dinner" },
+    { text: i18n.tc("meal-plan.side"), value: "side" },
+  ] as PlanOption[];
+}
 
+export function getEntryTypeText(value: PlanEntryType) {
+  const { i18n } = useContext();
+  return i18n.tc("meal-plan." + value);
+}
 export interface DateRange {
   start: Date;
   end: Date;

frontend/composables/use-group-webhooks.ts

@@ -99,11 +99,16 @@ function pad(num: number, size: number) {
   return numStr;
 }
 
-export function timeUTCToLocal(time: string): string {
+export function timeUTC(time: string): Date {
   const [hours, minutes] = time.split(":");
   const dt = new Date();
   dt.setUTCMinutes(Number(minutes));
   dt.setUTCHours(Number(hours));
+  return dt;
+}
+
+export function timeUTCToLocal(time: string): string {
+  const dt = timeUTC(time);
   return `${pad(dt.getHours(), 2)}:${pad(dt.getMinutes(), 2)}`;
 }
 

frontend/composables/use-users/user-form.ts

@@ -1,69 +1,72 @@
+import { useContext } from "@nuxtjs/composition-api";
 import { fieldTypes } from "../forms";
 import { AutoFormItems } from "~/types/auto-forms";
 
 export const useUserForm = () => {
+  const { i18n } = useContext();
+
   const userForm: AutoFormItems = [
     {
-      section: "User Details",
-      label: "User Name",
+      section: i18n.tc("user.user-details"),
+      label: i18n.tc("user.user-name"),
       varName: "username",
       type: fieldTypes.TEXT,
       rules: ["required"],
     },
     {
-      label: "Full Name",
+      label: i18n.tc("user.full-name"),
       varName: "fullName",
       type: fieldTypes.TEXT,
       rules: ["required"],
     },
     {
-      label: "Email",
+      label: i18n.tc("user.email"),
       varName: "email",
       type: fieldTypes.TEXT,
       rules: ["required"],
     },
     {
-      label: "Password",
+      label: i18n.tc("user.password"),
       varName: "password",
       disableUpdate: true,
       type: fieldTypes.PASSWORD,
       rules: ["required", "minLength:8"],
     },
     {
-      label: "Authentication Method",
+      label: i18n.tc("user.authentication-method"),
       varName: "authMethod",
       type: fieldTypes.SELECT,
-      hint: "This specifies how a user will authenticate with Mealie. If you're not sure, choose 'Mealie'",
+      hint: i18n.tc("user.authentication-method-hint"),
       disableCreate: true,
       options: [{ text: "Mealie" }, { text: "LDAP" }],
     },
     {
-      section: "Permissions",
-      label: "Administrator",
+      section: i18n.tc("user.permissions"),
+      label: i18n.tc("user.administrator"),
       varName: "admin",
       type: fieldTypes.BOOLEAN,
       rules: ["required"],
     },
     {
-      label: "User can invite other to group",
+      label: i18n.tc("user.user-can-invite-other-to-group"),
       varName: "canInvite",
       type: fieldTypes.BOOLEAN,
       rules: ["required"],
     },
     {
-      label: "User can manage group",
+      label: i18n.tc("user.user-can-manage-group"),
       varName: "canManage",
       type: fieldTypes.BOOLEAN,
       rules: ["required"],
     },
     {
-      label: "User can organize group data",
+      label: i18n.tc("user.user-can-organize-group-data"),
       varName: "canOrganize",
       type: fieldTypes.BOOLEAN,
       rules: ["required"],
     },
     {
-      label: "Enable advanced features",
+      label: i18n.tc("user.enable-advanced-features"),
       varName: "advanced",
       type: fieldTypes.BOOLEAN,
       rules: ["required"],