feat: localization (#196)

* Started adding locale translations :) * Added some more translations * Working on translating even more pages * More translations * Added test default locale retrieval * replace `intl.formatMessage` with custom `t` hook * add more translations * improve title syntax * add more translations * translate admin config page * translated error messages * add language selecter * minor fixes * improve language handling * add upcoming languages * add `crowdin.yml` * run formatter --------- Co-authored-by: Steve Tautonico <stautonico@gmail.com>
2023-07-20 15:32:07 +02:00
parent 7c5ec8d0ea
commit b9f6e3bd08
68 changed files with 4712 additions and 461 deletions
--- a/frontend/src/components/account/LanguagePicker.tsx
+++ b/frontend/src/components/account/LanguagePicker.tsx
@@ -0,0 +1,33 @@
+import { Select } from "@mantine/core";
+import { getCookie, setCookie } from "cookies-next";
+import { useState } from "react";
+import { LOCALES } from "../../i18n/locales";
+
+const LanguagePicker = () => {
+  const [selectedLanguage, setSelectedLanguage] = useState(
+    getCookie("language")?.toString()
+  );
+
+  const languages = Object.values(LOCALES).map((locale) => ({
+    value: locale.code,
+    label: locale.name,
+  }));
+  return (
+    <Select
+      value={selectedLanguage}
+      onChange={(value) => {
+        setSelectedLanguage(value ?? "en");
+        setCookie("language", value, {
+          sameSite: "lax",
+          expires: new Date(
+            new Date().setFullYear(new Date().getFullYear() + 1)
+          ),
+        });
+        location.reload();
+      }}
+      data={languages}
+    />
+  );
+};
+
+export default LanguagePicker;
--- a/frontend/src/components/account/ThemeSwitcher.tsx
+++ b/frontend/src/components/account/ThemeSwitcher.tsx
@@ -9,12 +9,12 @@ import {
 import { useColorScheme } from "@mantine/hooks";
 import { useState } from "react";
 import { TbDeviceLaptop, TbMoon, TbSun } from "react-icons/tb";
-import usePreferences from "../../hooks/usePreferences";
+import { FormattedMessage } from "react-intl";
+import userPreferences from "../../utils/userPreferences.util";

 const ThemeSwitcher = () => {
-  const preferences = usePreferences();
  const [colorScheme, setColorScheme] = useState(
-    preferences.get("colorScheme")
+    userPreferences.get("colorScheme")
  );
  const { toggleColorScheme } = useMantineColorScheme();
  const systemColorScheme = useColorScheme();
@@ -23,7 +23,7 @@ const ThemeSwitcher = () => {
      <SegmentedControl
        value={colorScheme}
        onChange={(value) => {
-          preferences.set("colorScheme", value);
+          userPreferences.set("colorScheme", value);
          setColorScheme(value);
          toggleColorScheme(
            value == "system" ? systemColorScheme : (value as ColorScheme)
@@ -34,7 +34,9 @@ const ThemeSwitcher = () => {
            label: (
              <Center>
                <TbMoon size={16} />
-                <Box ml={10}>Dark</Box>
+                <Box ml={10}>
+                  <FormattedMessage id="account.theme.dark" />
+                </Box>
              </Center>
            ),
            value: "dark",
@@ -43,7 +45,9 @@ const ThemeSwitcher = () => {
            label: (
              <Center>
                <TbSun size={16} />
-                <Box ml={10}>Light</Box>
+                <Box ml={10}>
+                  <FormattedMessage id="account.theme.light" />
+                </Box>
              </Center>
            ),
            value: "light",
@@ -52,7 +56,9 @@ const ThemeSwitcher = () => {
            label: (
              <Center>
                <TbDeviceLaptop size={16} />
-                <Box ml={10}>System</Box>
+                <Box ml={10}>
+                  <FormattedMessage id="account.theme.system" />
+                </Box>
              </Center>
            ),
            value: "system",
--- a/frontend/src/components/account/showEnableTotpModal.tsx
+++ b/frontend/src/components/account/showEnableTotpModal.tsx
@@ -12,7 +12,11 @@ import {
 import { useForm, yupResolver } from "@mantine/form";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { FormattedMessage } from "react-intl";
 import * as yup from "yup";
+import useTranslate, {
+  translateOutsideContext,
+} from "../../hooks/useTranslate.hook";
 import authService from "../../services/auth.service";
 import toast from "../../utils/toast.util";

@@ -25,8 +29,9 @@ const showEnableTotpModal = (
    password: string;
  }
 ) => {
+  const t = translateOutsideContext();
  return modals.openModal({
-    title: "Enable TOTP",
+    title: t("account.modal.totp.title"),
    children: (
      <CreateEnableTotpModal options={options} refreshUser={refreshUser} />
    ),
@@ -45,6 +50,7 @@ const CreateEnableTotpModal = ({
  refreshUser: () => {};
 }) => {
  const modals = useModals();
+  const t = useTranslate();

  const validationSchema = yup.object().shape({
    code: yup
@@ -66,14 +72,19 @@ const CreateEnableTotpModal = ({
    <div>
      <Center>
        <Stack>
-          <Text>Step 1: Add your authenticator</Text>
+          <Text>
+            <FormattedMessage id="account.modal.totp.step1" />
+          </Text>
          <Image src={options.qrCode} alt="QR Code" />

          <Center>
-            <span>OR</span>
+            <span>
+              {" "}
+              <FormattedMessage id="common.text.or" />
+            </span>
          </Center>

-          <Tooltip label="Click to copy">
+          <Tooltip label={t("account.modal.totp.clickToCopy")}>
            <Button
              onClick={() => {
                navigator.clipboard.writeText(options.secret);
@@ -84,17 +95,19 @@ const CreateEnableTotpModal = ({
            </Button>
          </Tooltip>
          <Center>
-            <Text fz="xs">Enter manually</Text>
+            <Text fz="xs"></Text>
          </Center>

-          <Text>Step 2: Validate your code</Text>
+          <Text>
+            <FormattedMessage id="account.modal.totp.step2" />
+          </Text>

          <form
            onSubmit={form.onSubmit((values) => {
              authService
                .verifyTOTP(values.code, options.password)
                .then(() => {
-                  toast.success("Successfully enabled TOTP");
+                  toast.success(t("account.notify.totp.enable"));
                  modals.closeAll();
                  refreshUser();
                })
@@ -105,14 +118,14 @@ const CreateEnableTotpModal = ({
              <Col xs={9}>
                <TextInput
                  variant="filled"
-                  label="Code"
+                  label={t("account.modal.totp.code")}
                  placeholder="******"
                  {...form.getInputProps("code")}
                />
              </Col>
              <Col xs={3}>
                <Button variant="outline" type="submit">
-                  Verify
+                  <FormattedMessage id="account.modal.totp.verify" />
                </Button>
              </Col>
            </Grid>
--- a/frontend/src/components/account/showReverseShareLinkModal.tsx
+++ b/frontend/src/components/account/showReverseShareLinkModal.tsx
@@ -1,14 +1,16 @@
 import { Stack, TextInput } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { translateOutsideContext } from "../../hooks/useTranslate.hook";

 const showReverseShareLinkModal = (
  modals: ModalsContextProps,
  reverseShareToken: string,
  appUrl: string
 ) => {
+  const t = translateOutsideContext();
  const link = `${appUrl}/upload/${reverseShareToken}`;
  return modals.openModal({
-    title: "Reverse share link",
+    title: t("account.reverseShares.modal.reverse-share-link"),
    children: (
      <Stack align="stretch">
        <TextInput variant="filled" value={link} />
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -1,10 +1,12 @@
-import { Text, Divider, Progress, Stack, Group, Flex } from "@mantine/core";
+import { Divider, Flex, Progress, Stack, Text } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
-import { MyShare } from "../../types/share.type";
 import moment from "moment";
+import { FormattedMessage } from "react-intl";
+import { translateOutsideContext } from "../../hooks/useTranslate.hook";
+import { FileMetaData } from "../../types/File.type";
+import { MyShare } from "../../types/share.type";
 import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import CopyTextField from "../upload/CopyTextField";
-import { FileMetaData } from "../../types/File.type";

 const showShareInformationsModal = (
  modals: ModalsContextProps,
@@ -12,6 +14,7 @@ const showShareInformationsModal = (
  appUrl: string,
  maxShareSize: number
 ) => {
+  const t = translateOutsideContext();
  const link = `${appUrl}/share/${share.id}`;

  let shareSize: number = 0;
@@ -29,34 +32,45 @@ const showShareInformationsModal = (
      : moment(share.expiration).format("LLL");

  return modals.openModal({
-    title: "Share informations",
+    title: t("account.shares.modal.share-informations"),

    children: (
      <Stack align="stretch" spacing="md">
        <Text size="sm" color="lightgray">
-          <b>ID:</b> {share.id}
+          <b>
+            <FormattedMessage id="account.shares.table.id" />:{" "}
+          </b>
+          {share.id}
        </Text>

        <Text size="sm" color="lightgray">
-          <b>Description:</b> {share.description || "No description"}
+          <b>
+            <FormattedMessage id="account.shares.table.description" />:{" "}
+          </b>
+          {share.description || "No description"}
        </Text>

        <Text size="sm" color="lightgray">
-          <b>Created at:</b> {formattedCreatedAt}
+          <b>
+            <FormattedMessage id="account.shares.table.createdAt" />:{" "}
+          </b>
+          {formattedCreatedAt}
        </Text>

        <Text size="sm" color="lightgray">
-          <b>Expires at:</b> {formattedExpiration}
+          <b>
+            <FormattedMessage id="account.shares.table.expiresAt" />:{" "}
+          </b>
+          {formattedExpiration}
        </Text>
-
        <Divider />
-
        <CopyTextField link={link} />
-
        <Divider />
-
        <Text size="sm" color="lightgray">
-          <b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} (
+          <b>
+            <FormattedMessage id="account.shares.table.size" />:{" "}
+          </b>
+          {formattedShareSize} / {formattedMaxShareSize} (
          {shareSizeProgress.toFixed(1)}%)
        </Text>

--- a/frontend/src/components/account/showShareLinkModal.tsx
+++ b/frontend/src/components/account/showShareLinkModal.tsx
@@ -1,14 +1,16 @@
 import { Stack, TextInput } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { translateOutsideContext } from "../../hooks/useTranslate.hook";

 const showShareLinkModal = (
  modals: ModalsContextProps,
  shareId: string,
  appUrl: string
 ) => {
+  const t = translateOutsideContext();
  const link = `${appUrl}/share/${shareId}`;
  return modals.openModal({
-    title: "Share link",
+    title: t("account.shares.modal.share-link"),
    children: (
      <Stack align="stretch">
        <TextInput variant="filled" value={link} />