Localize hard-coded texts (#2044)

* feat(lang): localize some views

* feat(lang): an attempt at localizing vuetify (WIP)

* feat(lang): localized some more screens

* feat(lang): localized some more screens again

* feat(lang): hack to localize vuetify

* feat(lang): localize data management pages

* fix linting errors

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/composables/use-copy.ts

@@ -1,16 +1,18 @@
+import { useContext } from "@nuxtjs/composition-api";
 import { useClipboard } from "@vueuse/core";
 import { alert } from "./use-toast";
 
 export function useCopy() {
   const { copy, copied, isSupported } = useClipboard();
+  const { i18n } = useContext();
 
   function copyText(text: string) {
     if (!isSupported) {
-      alert.error("Clipboard not supported");
+      alert.error(i18n.tc("general.clipboard-not-supported"));
       return;
     }
     copy(text);
-    alert.success("Copied to clipboard");
+    alert.success(i18n.tc("general.copied-to-clipboard"));
   }
 
   return { copyText, copied };
@@ -18,10 +20,11 @@ export function useCopy() {
 
 export function useCopyList() {
   const { copy, isSupported } = useClipboard();
+  const { i18n } = useContext();
 
   function checkClipboard() {
     if (!isSupported) {
-      alert.error("Your browser does not support clipboard");
+      alert.error(i18n.tc("general.your-browser-does-not-support-clipboard"));
       return false;
     }
 
@@ -51,7 +54,7 @@ export function useCopyList() {
 
   function copyText(text: string, len: number) {
     copy(text).then(() => {
-      alert.success(`Copied ${len} items to clipboard`);
+      alert.success(i18n.tc("general.copied-items-to-clipboard", len));
     });
   }
 

frontend/composables/use-group-cookbooks.ts

@@ -1,4 +1,4 @@
-import { useAsync, ref, Ref } from "@nuxtjs/composition-api";
+import { useAsync, ref, Ref, useContext } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "./use-utils";
 import { useUserApi } from "~/composables/api";
 import { ReadCookBook, UpdateCookBook } from "~/lib/api/types/cookbook";
@@ -25,6 +25,8 @@ export const useCookbooks = function () {
   const api = useUserApi();
   const loading = ref(false);
 
+  const { i18n } = useContext();
+
   const actions = {
     getAll() {
       loading.value = true;
@@ -54,7 +56,7 @@ export const useCookbooks = function () {
     async createOne() {
       loading.value = true;
       const { data } = await api.cookbooks.createOne({
-        name: "Cookbook " + String((cookbookStore?.value?.length ?? 0) + 1),
+        name: i18n.t("cookbook.cookbook-with-name", [String((cookbookStore?.value?.length ?? 0) + 1)]) as string,
       });
       if (data && cookbookStore?.value) {
         cookbookStore.value.push(data);

frontend/composables/use-locales/use-locales.ts

@@ -2,14 +2,17 @@ import { computed, useContext } from "@nuxtjs/composition-api";
 import { LOCALES } from "./available-locales";
 
 export const useLocales = () => {
-  const { i18n } = useContext();
+  const { i18n, $vuetify } = useContext();
 
   const locale = computed<string>({
     get() {
+      $vuetify.lang.current = i18n.locale; // dirty hack
       return i18n.locale;
     },
     set(value) {
       i18n.setLocale(value);
+      $vuetify.lang.current = value; // this does not persist after window reload :-(
+
       // Reload the page to update the language - not all strings are reactive
       window.location.reload();
     },

frontend/composables/use-passwords.ts

@@ -23,19 +23,22 @@ export function usePasswordField() {
 }
 
 export const usePasswordStrength = (password: Ref<string>) => {
+  const { i18n } = useContext();
+
   const score = computed(() => {
     return scorePassword(password.value);
   });
 
+
   const strength = computed(() => {
     if (score.value < 50) {
-      return "Weak";
+      return i18n.tc("user.password-strength-values.weak");
     } else if (score.value < 80) {
-      return "Good";
+      return i18n.tc("user.password-strength-values.good");
     } else if (score.value < 100) {
-      return "Strong";
+      return i18n.tc("user.password-strength-values.strong");
     } else {
-      return "Very Strong";
+      return i18n.tc("user.password-strength-values.very-strong");
     }
   });