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} />
--- a/frontend/src/components/admin/configuration/ConfigurationHeader.tsx
+++ b/frontend/src/components/admin/configuration/ConfigurationHeader.tsx
@@ -9,6 +9,7 @@ import {
 } from "@mantine/core";
 import Link from "next/link";
 import { Dispatch, SetStateAction } from "react";
+import { FormattedMessage } from "react-intl";
 import useConfig from "../../../hooks/config.hook";
 import Logo from "../../Logo";

@@ -42,7 +43,7 @@ const ConfigurationHeader = ({
          </Link>
          <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
            <Button variant="light" component={Link} href="/admin">
-              Go back
+              <FormattedMessage id="common.button.go-back" />
            </Button>
          </MediaQuery>
        </Group>
--- a/frontend/src/components/admin/configuration/ConfigurationNavBar.tsx
+++ b/frontend/src/components/admin/configuration/ConfigurationNavBar.tsx
@@ -12,6 +12,7 @@ import {
 import Link from "next/link";
 import { Dispatch, SetStateAction } from "react";
 import { TbAt, TbMail, TbShare, TbSquare } from "react-icons/tb";
+import { FormattedMessage } from "react-intl";

 const categories = [
  { name: "General", icon: <TbSquare /> },
@@ -53,7 +54,7 @@ const ConfigurationNavBar = ({
    >
      <Navbar.Section>
        <Text size="xs" color="dimmed" mb="sm">
-          Configuration
+          <FormattedMessage id="admin.config.title" />
        </Text>
        <Stack spacing="xs">
          {categories.map((category) => (
@@ -79,7 +80,11 @@ const ConfigurationNavBar = ({
                >
                  {category.icon}
                </ThemeIcon>
-                <Text size="sm">{category.name}</Text>
+                <Text size="sm">
+                  <FormattedMessage
+                    id={`admin.config.category.${category.name.toLowerCase()}`}
+                  />
+                </Text>
              </Group>
            </Box>
          ))}
@@ -87,7 +92,7 @@ const ConfigurationNavBar = ({
      </Navbar.Section>
      <MediaQuery largerThan="sm" styles={{ display: "none" }}>
        <Button mt="xl" variant="light" component={Link} href="/admin">
-          Go back
+          <FormattedMessage id="common.button.go-back" />
        </Button>
      </MediaQuery>
    </Navbar>
--- a/frontend/src/components/admin/configuration/LogoConfigInput.tsx
+++ b/frontend/src/components/admin/configuration/LogoConfigInput.tsx
@@ -2,6 +2,8 @@ import { Box, FileInput, Group, Stack, Text, Title } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import { Dispatch, SetStateAction } from "react";
 import { TbUpload } from "react-icons/tb";
+import { FormattedMessage } from "react-intl";
+import useTranslate from "../../../hooks/useTranslate.hook";

 const LogoConfigInput = ({
  logo,
@@ -11,14 +13,16 @@ const LogoConfigInput = ({
  setLogo: Dispatch<SetStateAction<File | null>>;
 }) => {
  const isMobile = useMediaQuery("(max-width: 560px)");
+  const t = useTranslate();

  return (
    <Group position="apart">
      <Stack style={{ maxWidth: isMobile ? "100%" : "40%" }} spacing={0}>
-        <Title order={6}>Logo</Title>
+        <Title order={6}>
+          <FormattedMessage id="admin.config.general.logo" />
+        </Title>
        <Text color="dimmed" size="sm" mb="xs">
-          Change your logo by uploading a new image. The image must be a PNG and
-          should have the format 1:1.
+          <FormattedMessage id="admin.config.general.logo.description" />
        </Text>
      </Stack>
      <Stack></Stack>
@@ -29,7 +33,7 @@ const LogoConfigInput = ({
          value={logo}
          onChange={(v) => setLogo(v)}
          accept=".png"
-          placeholder="Pick image"
+          placeholder={t("admin.config.general.logo.placeholder")}
        />
      </Box>
    </Group>
--- a/frontend/src/components/admin/configuration/TestEmailButton.tsx
+++ b/frontend/src/components/admin/configuration/TestEmailButton.tsx
@@ -1,6 +1,7 @@
 import { Button, Stack, Text, Textarea } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { useState } from "react";
+import { FormattedMessage } from "react-intl";
 import useUser from "../../../hooks/user.hook";
 import configService from "../../../services/config.service";
 import toast from "../../../utils/toast.util";
@@ -65,7 +66,7 @@ const TestEmailButton = ({
        }
      }}
    >
-      Send test email
+      <FormattedMessage id="admin.config.smtp.button.test" />
    </Button>
  );
 };
--- a/frontend/src/components/admin/users/ManageUserTable.tsx
+++ b/frontend/src/components/admin/users/ManageUserTable.tsx
@@ -3,6 +3,7 @@ import { useModals } from "@mantine/modals";
 import { TbCheck, TbEdit, TbTrash } from "react-icons/tb";
 import User from "../../../types/user.type";
 import showUpdateUserModal from "./showUpdateUserModal";
+import { FormattedMessage, useIntl } from "react-intl";

 const ManageUserTable = ({
  users,
@@ -22,9 +23,15 @@ const ManageUserTable = ({
      <Table verticalSpacing="sm">
        <thead>
          <tr>
-            <th>Username</th>
-            <th>Email</th>
-            <th>Admin</th>
+            <th>
+              <FormattedMessage id="admin.users.table.username" />
+            </th>
+            <th>
+              <FormattedMessage id="admin.users.table.email" />
+            </th>
+            <th>
+              <FormattedMessage id="admin.users.table.admin" />
+            </th>
            <th></th>
          </tr>
        </thead>
--- a/frontend/src/components/admin/users/showCreateUserModal.tsx
+++ b/frontend/src/components/admin/users/showCreateUserModal.tsx
@@ -8,7 +8,9 @@ import {
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { FormattedMessage } from "react-intl";
 import * as yup from "yup";
+import useTranslate from "../../../hooks/useTranslate.hook";
 import userService from "../../../services/user.service";
 import toast from "../../../utils/toast.util";

@@ -34,6 +36,7 @@ const Body = ({
  smtpEnabled: boolean;
  getUsers: () => void;
 }) => {
+  const t = useTranslate();
  const form = useForm({
    initialValues: {
      username: "",
@@ -44,9 +47,14 @@ const Body = ({
    },
    validate: yupResolver(
      yup.object().shape({
-        email: yup.string().email(),
-        username: yup.string().min(3),
-        password: yup.string().min(8).optional(),
+        email: yup.string().email(t("common.error.invalid-email")),
+        username: yup
+          .string()
+          .min(3, t("common.error.too-short", { length: 3 })),
+        password: yup
+          .string()
+          .min(8, t("common.error.too-short", { length: 8 }))
+          .optional(),
      })
    ),
  });
@@ -65,14 +73,22 @@ const Body = ({
        })}
      >
        <Stack>
-          <TextInput label="Username" {...form.getInputProps("username")} />
-          <TextInput label="Email" {...form.getInputProps("email")} />
+          <TextInput
+            label={t("admin.users.modal.create.username")}
+            {...form.getInputProps("username")}
+          />
+          <TextInput
+            label={t("admin.users.modal.create.email")}
+            {...form.getInputProps("email")}
+          />
          {smtpEnabled && (
            <Switch
              mt="xs"
              labelPosition="left"
-              label="Set password manually"
-              description="If not checked, the user will receive an email with a link to set their password."
+              label={t("admin.users.modal.create.manual-password")}
+              description={t(
+                "admin.users.modal.create.manual-password.description"
+              )}
              {...form.getInputProps("setPasswordManually", {
                type: "checkbox",
              })}
@@ -80,7 +96,7 @@ const Body = ({
          )}
          {(form.values.setPasswordManually || !smtpEnabled) && (
            <PasswordInput
-              label="Password"
+              label={t("admin.users.modal.create.password")}
              {...form.getInputProps("password")}
            />
          )}
@@ -93,12 +109,14 @@ const Body = ({
            }}
            mt="xs"
            labelPosition="left"
-            label="Admin privileges"
-            description="If checked, the user will be able to access the admin panel."
+            label={t("admin.users.modal.create.admin")}
+            description={t("admin.users.modal.create.admin.description")}
            {...form.getInputProps("isAdmin", { type: "checkbox" })}
          />
          <Group position="right">
-            <Button type="submit">Create</Button>
+            <Button type="submit">
+              <FormattedMessage id="common.button.create" />
+            </Button>
          </Group>
        </Stack>
      </form>
--- a/frontend/src/components/admin/users/showUpdateUserModal.tsx
+++ b/frontend/src/components/admin/users/showUpdateUserModal.tsx
@@ -9,7 +9,11 @@ import {
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 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 userService from "../../../services/user.service";
 import User from "../../../types/user.type";
 import toast from "../../../utils/toast.util";
@@ -19,8 +23,9 @@ const showUpdateUserModal = (
  user: User,
  getUsers: () => void
 ) => {
+  const t = translateOutsideContext();
  return modals.openModal({
-    title: `Update ${user.username}`,
+    title: t("admin.users.edit.update.title", { username: user.username }),
    children: <Body user={user} modals={modals} getUsers={getUsers} />,
  });
 };
@@ -34,6 +39,8 @@ const Body = ({
  user: User;
  getUsers: () => void;
 }) => {
+  const t = useTranslate();
+
  const accountForm = useForm({
    initialValues: {
      username: user.username,
@@ -42,8 +49,10 @@ const Body = ({
    },
    validate: yupResolver(
      yup.object().shape({
-        email: yup.string().email(),
-        username: yup.string().min(3),
+        email: yup.string().email(t("common.error.invalid-email")),
+        username: yup
+          .string()
+          .min(3, t("common.error.too-short", { length: 3 })),
      })
    ),
  });
@@ -54,7 +63,9 @@ const Body = ({
    },
    validate: yupResolver(
      yup.object().shape({
-        password: yup.string().min(8),
+        password: yup
+          .string()
+          .min(8, t("common.error.too-short", { length: 8 })),
      })
    ),
  });
@@ -75,21 +86,26 @@ const Body = ({
      >
        <Stack>
          <TextInput
-            label="Username"
+            label={t("admin.users.table.username")}
            {...accountForm.getInputProps("username")}
          />
-          <TextInput label="Email" {...accountForm.getInputProps("email")} />
+          <TextInput
+            label={t("admin.users.table.email")}
+            {...accountForm.getInputProps("email")}
+          />
          <Switch
            mt="xs"
            labelPosition="left"
-            label="Admin privileges"
+            label={t("admin.users.edit.update.admin-privileges")}
            {...accountForm.getInputProps("isAdmin", { type: "checkbox" })}
          />
        </Stack>
      </form>
      <Accordion>
        <Accordion.Item sx={{ borderBottom: "none" }} value="changePassword">
-          <Accordion.Control px={0}>Change password</Accordion.Control>
+          <Accordion.Control px={0}>
+            <FormattedMessage id="admin.users.edit.update.change-password.title" />
+          </Accordion.Control>
          <Accordion.Panel>
            <form
              onSubmit={passwordForm.onSubmit(async (values) => {
@@ -97,17 +113,21 @@ const Body = ({
                  .update(user.id, {
                    password: values.password,
                  })
-                  .then(() => toast.success("Password changed successfully"))
+                  .then(() =>
+                    toast.success(
+                      t("admin.users.edit.update.notify.password.success")
+                    )
+                  )
                  .catch(toast.axiosError);
              })}
            >
              <Stack>
                <PasswordInput
-                  label="New password"
+                  label={t("admin.users.edit.update.change-password.field")}
                  {...passwordForm.getInputProps("password")}
                />
                <Button variant="light" type="submit">
-                  Save new password
+                  <FormattedMessage id="admin.users.edit.update.change-password.button" />
                </Button>
              </Stack>
            </form>
@@ -116,7 +136,7 @@ const Body = ({
      </Accordion>
      <Group position="right">
        <Button type="submit" form="accountForm">
-          Save
+          <FormattedMessage id="common.button.save" />
        </Button>
      </Group>
    </Stack>
--- a/frontend/src/components/auth/SignInForm.tsx
+++ b/frontend/src/components/auth/SignInForm.tsx
@@ -15,8 +15,10 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React from "react";
 import { TbInfoCircle } from "react-icons/tb";
+import { FormattedMessage } from "react-intl";
 import * as yup from "yup";
 import useConfig from "../../hooks/config.hook";
+import useTranslate from "../../hooks/useTranslate.hook";
 import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
 import toast from "../../utils/toast.util";
@@ -24,14 +26,18 @@ import toast from "../../utils/toast.util";
 const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
  const config = useConfig();
  const router = useRouter();
+  const t = useTranslate();
  const { refreshUser } = useUser();

  const [showTotp, setShowTotp] = React.useState(false);
  const [loginToken, setLoginToken] = React.useState("");

  const validationSchema = yup.object().shape({
-    emailOrUsername: yup.string().required(),
-    password: yup.string().min(8).required(),
+    emailOrUsername: yup.string().required(t("common.error.field-required")),
+    password: yup
+      .string()
+      .min(8, t("common.error.too-short", { length: 8 }))
+      .required(t("common.error.field-required")),
  });

  const form = useForm({
@@ -54,8 +60,8 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
            icon: <TbInfoCircle />,
            color: "blue",
            radius: "md",
-            title: "Two-factor authentication required",
-            message: "Please enter your two-factor authentication code",
+            title: t("signIn.notify.totp-required.title"),
+            message: t("signIn.notify.totp-required.description"),
          });
          setLoginToken(response.data["loginToken"]);
        } else {
@@ -88,13 +94,13 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
  return (
    <Container size={420} my={40}>
      <Title order={2} align="center" weight={900}>
-        Welcome back
+        <FormattedMessage id="signin.title" />
      </Title>
      {config.get("share.allowRegistration") && (
        <Text color="dimmed" size="sm" align="center" mt={5}>
-          You don't have an account yet?{" "}
+          <FormattedMessage id="signin.description" />{" "}
          <Anchor component={Link} href={"signUp"} size="sm">
-            {"Sign up"}
+            <FormattedMessage id="signin.button.signup" />
          </Anchor>
        </Text>
      )}
@@ -107,20 +113,20 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
          })}
        >
          <TextInput
-            label="Email or username"
-            placeholder="Your email or username"
+            label={t("signin.input.email-or-username")}
+            placeholder={t("signin.input.email-or-username.placeholder")}
            {...form.getInputProps("emailOrUsername")}
          />
          <PasswordInput
-            label="Password"
-            placeholder="Your password"
+            label={t("signin.input.password")}
+            placeholder={t("signin.input.password.placeholder")}
            mt="md"
            {...form.getInputProps("password")}
          />
          {showTotp && (
            <TextInput
              variant="filled"
-              label="Code"
+              label={t("account.modal.totp.code")}
              placeholder="******"
              mt="md"
              {...form.getInputProps("totp")}
@@ -129,12 +135,12 @@ const SignInForm = ({ redirectPath }: { redirectPath: string }) => {
          {config.get("smtp.enabled") && (
            <Group position="right" mt="xs">
              <Anchor component={Link} href="/auth/resetPassword" size="xs">
-                Forgot password?
+                <FormattedMessage id="resetPassword.title" />
              </Anchor>
            </Group>
          )}
          <Button fullWidth mt="xl" type="submit">
-            Sign in
+            <FormattedMessage id="signin.button.submit" />
          </Button>
        </form>
      </Paper>
--- a/frontend/src/components/auth/SignUpForm.tsx
+++ b/frontend/src/components/auth/SignUpForm.tsx
@@ -11,8 +11,10 @@ import {
 import { useForm, yupResolver } from "@mantine/form";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { FormattedMessage } from "react-intl";
 import * as yup from "yup";
 import useConfig from "../../hooks/config.hook";
+import useTranslate from "../../hooks/useTranslate.hook";
 import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
 import toast from "../../utils/toast.util";
@@ -20,12 +22,19 @@ import toast from "../../utils/toast.util";
 const SignUpForm = () => {
  const config = useConfig();
  const router = useRouter();
+  const t = useTranslate();
  const { refreshUser } = useUser();

  const validationSchema = yup.object().shape({
-    email: yup.string().email().required(),
-    username: yup.string().min(3).required(),
-    password: yup.string().min(8).required(),
+    email: yup.string().email(t("common.error.invalid-email")).required(),
+    username: yup
+      .string()
+      .min(3, t("common.error.too-short", { length: 3 }))
+      .required(t("common.error.field-required")),
+    password: yup
+      .string()
+      .min(8, t("common.error.too-short", { length: 8 }))
+      .required(t("common.error.field-required")),
  });

  const form = useForm({
@@ -54,13 +63,13 @@ const SignUpForm = () => {
  return (
    <Container size={420} my={40}>
      <Title order={2} align="center" weight={900}>
-        Sign up
+        <FormattedMessage id="signup.title" />
      </Title>
      {config.get("share.allowRegistration") && (
        <Text color="dimmed" size="sm" align="center" mt={5}>
-          You have an account already?{" "}
+          <FormattedMessage id="signup.description" />{" "}
          <Anchor component={Link} href={"signIn"} size="sm">
-            Sign in
+            <FormattedMessage id="signup.button.signin" />
          </Anchor>
        </Text>
      )}
@@ -71,24 +80,24 @@ const SignUpForm = () => {
          )}
        >
          <TextInput
-            label="Username"
-            placeholder="Your username"
+            label={t("signup.input.username")}
+            placeholder={t("signup.input.username.placeholder")}
            {...form.getInputProps("username")}
          />
          <TextInput
-            label="Email"
-            placeholder="Your email"
+            label={t("signup.input.email")}
+            placeholder={t("signup.input.email.placeholder")}
            mt="md"
            {...form.getInputProps("email")}
          />
          <PasswordInput
-            label="Password"
-            placeholder="Your password"
+            label={t("signin.input.password")}
+            placeholder={t("signin.input.password.placeholder")}
            mt="md"
            {...form.getInputProps("password")}
          />
          <Button fullWidth mt="xl" type="submit">
-            Let's get started
+            <FormattedMessage id="signup.button.submit" />
          </Button>
        </form>
      </Paper>
--- a/frontend/src/components/header/ActionAvatar.tsx
+++ b/frontend/src/components/header/ActionAvatar.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { TbDoorExit, TbSettings, TbUser } from "react-icons/tb";
 import useUser from "../../hooks/user.hook";
 import authService from "../../services/auth.service";
+import { FormattedMessage, useIntl } from "react-intl";

 const ActionAvatar = () => {
  const { user } = useUser();
@@ -16,7 +17,7 @@ const ActionAvatar = () => {
      </Menu.Target>
      <Menu.Dropdown>
        <Menu.Item component={Link} href="/account" icon={<TbUser size={14} />}>
-          My account
+          <FormattedMessage id="navbar.avatar.account" />
        </Menu.Item>
        {user!.isAdmin && (
          <Menu.Item
@@ -24,7 +25,7 @@ const ActionAvatar = () => {
            href="/admin"
            icon={<TbSettings size={14} />}
          >
-            Administration
+            <FormattedMessage id="navbar.avatar.admin" />
          </Menu.Item>
        )}

@@ -34,7 +35,7 @@ const ActionAvatar = () => {
          }}
          icon={<TbDoorExit size={14} />}
        >
-          Sign out
+          <FormattedMessage id="navbar.avatar.signout" />
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
--- a/frontend/src/components/header/Header.tsx
+++ b/frontend/src/components/header/Header.tsx
@@ -16,6 +16,7 @@ import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";
 import useConfig from "../../hooks/config.hook";
 import useUser from "../../hooks/user.hook";
+import useTranslate from "../../hooks/useTranslate.hook";
 import Logo from "../Logo";
 import ActionAvatar from "./ActionAvatar";
 import NavbarShareMenu from "./NavbarShareMenu";
@@ -112,6 +113,7 @@ const Header = () => {
  const { user } = useUser();
  const router = useRouter();
  const config = useConfig();
+  const t = useTranslate();

  const [opened, toggleOpened] = useDisclosure(false);

@@ -124,7 +126,7 @@ const Header = () => {
  const authenticatedLinks: NavLink[] = [
    {
      link: "/upload",
-      label: "Upload",
+      label: t("navbar.upload"),
    },
    {
      component: <NavbarShareMenu />,
@@ -137,27 +139,27 @@ const Header = () => {
  let unauthenticatedLinks: NavLink[] = [
    {
      link: "/auth/signIn",
-      label: "Sign in",
+      label: t("navbar.signin"),
    },
  ];

  if (config.get("share.allowUnauthenticatedShares")) {
    unauthenticatedLinks.unshift({
      link: "/upload",
-      label: "Upload",
+      label: t("navbar.upload"),
    });
  }

  if (config.get("general.showHomePage"))
    unauthenticatedLinks.unshift({
      link: "/",
-      label: "Home",
+      label: t("navbar.home"),
    });

  if (config.get("share.allowRegistration"))
    unauthenticatedLinks.push({
      link: "/auth/signUp",
-      label: "Sign up",
+      label: t("navbar.signup"),
    });

  const { classes, cx } = useStyles();
--- a/frontend/src/components/header/NavbarShareMenu.tsx
+++ b/frontend/src/components/header/NavbarShareMenu.tsx
@@ -1,6 +1,7 @@
 import { ActionIcon, Menu } from "@mantine/core";
 import Link from "next/link";
 import { TbArrowLoopLeft, TbLink } from "react-icons/tb";
+import { FormattedMessage } from "react-intl";

 const NavbarShareMneu = () => {
  return (
@@ -12,14 +13,14 @@ const NavbarShareMneu = () => {
      </Menu.Target>
      <Menu.Dropdown>
        <Menu.Item component={Link} href="/account/shares" icon={<TbLink />}>
-          My shares
+          <FormattedMessage id="navbar.links.shares" />
        </Menu.Item>
        <Menu.Item
          component={Link}
          href="/account/reverseShares"
          icon={<TbArrowLoopLeft />}
        >
-          Reverse shares
+          <FormattedMessage id="navbar.links.reverse" />
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
--- a/frontend/src/components/share/DownloadAllButton.tsx
+++ b/frontend/src/components/share/DownloadAllButton.tsx
@@ -1,11 +1,15 @@
 import { Button } from "@mantine/core";
 import { useEffect, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import useTranslate from "../../hooks/useTranslate.hook";
 import shareService from "../../services/share.service";
 import toast from "../../utils/toast.util";

 const DownloadAllButton = ({ shareId }: { shareId: string }) => {
  const [isZipReady, setIsZipReady] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
+  const t = useTranslate();
+
  const downloadAll = async () => {
    setIsLoading(true);
    await shareService
@@ -39,13 +43,13 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
      loading={isLoading}
      onClick={() => {
        if (!isZipReady) {
-          toast.error("The share is preparing. Try again in a few minutes.");
+          toast.error(t("share.notify.download-all-preparing"));
        } else {
          downloadAll();
        }
      }}
    >
-      Download all
+      <FormattedMessage id="share.download-all" />
    </Button>
  );
 };
--- a/frontend/src/components/share/FileList.tsx
+++ b/frontend/src/components/share/FileList.tsx
@@ -19,6 +19,8 @@ import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import toast from "../../utils/toast.util";
 import TableSortIcon, { TableSort } from "../core/SortIcon";
 import showFilePreviewModal from "./modals/showFilePreviewModal";
+import useTranslate from "../../hooks/useTranslate.hook";
+import { FormattedMessage } from "react-intl";

 const FileList = ({
  files,
@@ -34,6 +36,7 @@ const FileList = ({
  const clipboard = useClipboard();
  const config = useConfig();
  const modals = useModals();
+  const t = useTranslate();

  const [sort, setSort] = useState<TableSort>({
    property: undefined,
@@ -68,10 +71,10 @@ const FileList = ({

    if (window.isSecureContext) {
      clipboard.copy(link);
-      toast.success("Your file link was copied to the keyboard.");
+      toast.success(t("common.notify.copied"));
    } else {
      modals.openModal({
-        title: "File link",
+        title: t("share.modal.file-link"),
        children: (
          <Stack align="stretch">
            <TextInput variant="filled" value={link} />
@@ -90,13 +93,13 @@ const FileList = ({
          <tr>
            <th>
              <Group spacing="xs">
-                Name
+                <FormattedMessage id="share.table.name" />
                <TableSortIcon sort={sort} setSort={setSort} property="name" />
              </Group>
            </th>
            <th>
              <Group spacing="xs">
-                Size
+                <FormattedMessage id="share.table.size" />
                <TableSortIcon sort={sort} setSort={setSort} property="size" />
              </Group>
            </th>
--- a/frontend/src/components/share/FilePreview.tsx
+++ b/frontend/src/components/share/FilePreview.tsx
@@ -2,6 +2,7 @@ import { Button, Center, Stack, Text, Title } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import Link from "next/link";
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { FormattedMessage } from "react-intl";
 import api from "../../services/api.service";

 const FilePreviewContext = React.createContext<{
@@ -144,10 +145,11 @@ const UnSupportedFile = () => {
  return (
    <Center style={{ minHeight: 200 }}>
      <Stack align="center" spacing={10}>
-        <Title order={3}>Preview not supported</Title>
+        <Title order={3}>
+          <FormattedMessage id="share.modal.file-preview.error.not-supported.title" />
+        </Title>
        <Text>
-          A preview for thise file type is unsupported. Please download the file
-          to view it.
+          <FormattedMessage id="share.modal.file-preview.error.not-supported.description" />
        </Text>
      </Stack>
    </Center>
--- a/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
+++ b/frontend/src/components/share/modals/showCompletedReverseShareModal.tsx
@@ -1,6 +1,8 @@
 import { Button, Stack } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { FormattedMessage } from "react-intl";
+import { translateOutsideContext } from "../../../hooks/useTranslate.hook";
 import CopyTextField from "../../upload/CopyTextField";

 const showCompletedReverseShareModal = (
@@ -8,11 +10,12 @@ const showCompletedReverseShareModal = (
  link: string,
  getReverseShares: () => void
 ) => {
+  const t = translateOutsideContext();
  return modals.openModal({
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: "Reverse share link",
+    title: t("account.reverseShares.modal.reverse-share-link"),
    children: <Body link={link} getReverseShares={getReverseShares} />,
  });
 };
@@ -36,7 +39,7 @@ const Body = ({
          getReverseShares();
        }}
      >
-        Done
+        <FormattedMessage id="common.button.done" />
      </Button>
    </Stack>
  );
--- a/frontend/src/components/share/modals/showCreateReverseShareModal.tsx
+++ b/frontend/src/components/share/modals/showCreateReverseShareModal.tsx
@@ -12,6 +12,8 @@ import {
 import { useForm } from "@mantine/form";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { FormattedMessage } from "react-intl";
+import useTranslate from "../../../hooks/useTranslate.hook";
 import shareService from "../../../services/share.service";
 import { getExpirationPreview } from "../../../utils/date.util";
 import toast from "../../../utils/toast.util";
@@ -42,6 +44,7 @@ const Body = ({
  showSendEmailNotificationOption: boolean;
 }) => {
  const modals = useModals();
+  const t = useTranslate();

  const form = useForm({
    initialValues: {
@@ -79,7 +82,7 @@ const Body = ({
                  max={99999}
                  precision={0}
                  variant="filled"
-                  label="Share expiration"
+                  label={t("account.reverseShares.modal.expiration.label")}
                  {...form.getInputProps("expiration_num")}
                />
              </Col>
@@ -91,27 +94,44 @@ const Body = ({
                    {
                      value: "-minutes",
                      label:
-                        "Minute" + (form.values.expiration_num == 1 ? "" : "s"),
+                        form.values.expiration_num == 1
+                          ? t("upload.modal.expires.minute-singular")
+                          : t("upload.modal.expires.minute-plural"),
                    },
                    {
                      value: "-hours",
                      label:
-                        "Hour" + (form.values.expiration_num == 1 ? "" : "s"),
+                        form.values.expiration_num == 1
+                          ? t("upload.modal.expires.hour-singular")
+                          : t("upload.modal.expires.hour-plural"),
                    },
                    {
                      value: "-days",
                      label:
-                        "Day" + (form.values.expiration_num == 1 ? "" : "s"),
+                        form.values.expiration_num == 1
+                          ? t("upload.modal.expires.day-singular")
+                          : t("upload.modal.expires.day-plural"),
                    },
                    {
                      value: "-weeks",
                      label:
-                        "Week" + (form.values.expiration_num == 1 ? "" : "s"),
+                        form.values.expiration_num == 1
+                          ? t("upload.modal.expires.week-singular")
+                          : t("upload.modal.expires.week-plural"),
                    },
                    {
                      value: "-months",
                      label:
-                        "Month" + (form.values.expiration_num == 1 ? "" : "s"),
+                        form.values.expiration_num == 1
+                          ? t("upload.modal.expires.month-singular")
+                          : t("upload.modal.expires.month-plural"),
+                    },
+                    {
+                      value: "-years",
+                      label:
+                        form.values.expiration_num == 1
+                          ? t("upload.modal.expires.year-singular")
+                          : t("upload.modal.expires.year-plural"),
                    },
                  ]}
                />
@@ -125,11 +145,17 @@ const Body = ({
                color: theme.colors.gray[6],
              })}
            >
-              {getExpirationPreview("reverse share", form)}
+              {getExpirationPreview(
+                {
+                  expiresOn: t("account.reverseShare.expires-on"),
+                  neverExpires: t("account.reverseShare.never-expires"),
+                },
+                form
+              )}
            </Text>
          </div>
          <FileSizeInput
-            label="Max share size"
+            label={t("account.reverseShares.modal.max-size.label")}
            value={form.values.maxShareSize}
            onChange={(number) => form.setFieldValue("maxShareSize", number)}
          />
@@ -138,16 +164,18 @@ const Body = ({
            max={1000}
            precision={0}
            variant="filled"
-            label="Max use count"
-            description="The maximum number of times this reverse share link can be used"
+            label={t("account.reverseShares.modal.max-use.label")}
+            description={t("account.reverseShares.modal.max-use.description")}
            {...form.getInputProps("maxUseCount")}
          />
          {showSendEmailNotificationOption && (
            <Switch
              mt="xs"
              labelPosition="left"
-              label="Send email notification"
-              description="Send an email notification when a share is created with this reverse share link"
+              label={t("account.reverseShares.modal.send-email")}
+              description={t(
+                "account.reverseShares.modal.send-email.description"
+              )}
              {...form.getInputProps("sendEmailNotification", {
                type: "checkbox",
              })}
@@ -155,7 +183,7 @@ const Body = ({
          )}

          <Button mt="md" type="submit">
-            Create
+            <FormattedMessage id="common.button.create" />
          </Button>
        </Stack>
      </form>
--- a/frontend/src/components/share/showEnterPasswordModal.tsx
+++ b/frontend/src/components/share/showEnterPasswordModal.tsx
@@ -1,16 +1,21 @@
 import { Button, PasswordInput, Stack, Text } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useState } from "react";
+import { FormattedMessage } from "react-intl";
+import useTranslate, {
+  translateOutsideContext,
+} from "../../hooks/useTranslate.hook";

 const showEnterPasswordModal = (
  modals: ModalsContextProps,
  submitCallback: (password: string) => Promise<void>
 ) => {
+  const t = translateOutsideContext();
  return modals.openModal({
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: "Password required",
+    title: t("share.modal.password.title"),
    children: <Body submitCallback={submitCallback} />,
  });
 };
@@ -22,10 +27,11 @@ const Body = ({
 }) => {
  const [password, setPassword] = useState("");
  const [passwordWrong, setPasswordWrong] = useState(false);
+  const t = useTranslate();
  return (
    <Stack align="stretch">
      <Text size="sm">
-        This access this share please enter the password for the share.
+        <FormattedMessage id="share.modal.password.description" />
      </Text>

      <form
@@ -37,13 +43,15 @@ const Body = ({
        <Stack>
          <PasswordInput
            variant="filled"
-            placeholder="Password"
-            error={passwordWrong && "Wrong password"}
+            placeholder={t("share.modal.password")}
+            error={passwordWrong && t("share.modal.error.invalid-password")}
            onFocus={() => setPasswordWrong(false)}
            onChange={(e) => setPassword(e.target.value)}
            value={password}
          />
-          <Button type="submit">Submit</Button>
+          <Button type="submit">
+            <FormattedMessage id="common.button.submit" />
+          </Button>
        </Stack>
      </form>
    </Stack>
--- a/frontend/src/components/share/showErrorModal.tsx
+++ b/frontend/src/components/share/showErrorModal.tsx
@@ -2,6 +2,7 @@ import { Button, Stack, Text } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useRouter } from "next/router";
+import { FormattedMessage } from "react-intl";

 const showErrorModal = (
  modals: ModalsContextProps,
@@ -31,7 +32,7 @@ const Body = ({ text }: { text: string }) => {
            router.back();
          }}
        >
-          Go back
+          <FormattedMessage id="common.button.go-back" />
        </Button>
      </Stack>
    </>
--- a/frontend/src/components/upload/CopyTextField.tsx
+++ b/frontend/src/components/upload/CopyTextField.tsx
@@ -2,10 +2,13 @@ import { ActionIcon, TextInput } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useRef, useState } from "react";
 import { TbCheck, TbCopy } from "react-icons/tb";
+import useTranslate from "../../hooks/useTranslate.hook";
 import toast from "../../utils/toast.util";

 function CopyTextField(props: { link: string }) {
  const clipboard = useClipboard({ timeout: 500 });
+  const t = useTranslate();
+
  const [checkState, setCheckState] = useState(false);
  const [textClicked, setTextClicked] = useState(false);
  const timerRef = useRef<number | ReturnType<typeof setTimeout> | undefined>(
@@ -14,7 +17,7 @@ function CopyTextField(props: { link: string }) {

  const copyLink = () => {
    clipboard.copy(props.link);
-    toast.success("The link was copied to your clipboard.");
+    toast.success(t("common.notify.copied"));
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      setCheckState(false);
@@ -25,7 +28,7 @@ function CopyTextField(props: { link: string }) {
  return (
    <TextInput
      readOnly
-      label="Link"
+      label={t("common.text.link")}
      variant="filled"
      value={props.link}
      onClick={() => {
--- a/frontend/src/components/upload/Dropzone.tsx
+++ b/frontend/src/components/upload/Dropzone.tsx
@@ -2,7 +2,8 @@ import { Button, Center, createStyles, Group, Text } from "@mantine/core";
 import { Dropzone as MantineDropzone } from "@mantine/dropzone";
 import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
 import { TbCloudUpload, TbUpload } from "react-icons/tb";
-import useConfig from "../../hooks/config.hook";
+import { FormattedMessage } from "react-intl";
+import useTranslate from "../../hooks/useTranslate.hook";
 import { FileUpload } from "../../types/File.type";
 import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import toast from "../../utils/toast.util";
@@ -42,7 +43,7 @@ const Dropzone = ({
  files: FileUpload[];
  setFiles: Dispatch<SetStateAction<FileUpload[]>>;
 }) => {
-  const config = useConfig();
+  const t = useTranslate();

  const { classes } = useStyles();
  const openRef = useRef<() => void>();
@@ -62,9 +63,9 @@ const Dropzone = ({

          if (fileSizeSum > maxShareSize) {
            toast.error(
-              `Your files exceed the maximum share size of ${byteToHumanSizeString(
-                maxShareSize
-              )}.`
+              t("upload.dropzone.notify.file-too-big", {
+                maxSize: byteToHumanSizeString(maxShareSize),
+              })
            );
          } else {
            newFiles = newFiles.map((newFile) => {
@@ -82,12 +83,13 @@ const Dropzone = ({
            <TbCloudUpload size={50} />
          </Group>
          <Text align="center" weight={700} size="lg" mt="xl">
-            Upload files
+            <FormattedMessage id="upload.dropzone.title" />
          </Text>
          <Text align="center" size="sm" mt="xs" color="dimmed">
-            Drag&apos;n&apos;drop files here to start your share. We can accept
-            only files that are less than {byteToHumanSizeString(maxShareSize)}{" "}
-            in total.
+            <FormattedMessage
+              id="upload.dropzone.description"
+              values={{ maxSize: byteToHumanSizeString(maxShareSize) }}
+            />
          </Text>
        </div>
      </MantineDropzone>
--- a/frontend/src/components/upload/FileList.tsx
+++ b/frontend/src/components/upload/FileList.tsx
@@ -4,6 +4,7 @@ import { TbTrash } from "react-icons/tb";
 import { FileUpload } from "../../types/File.type";
 import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import UploadProgressIndicator from "./UploadProgressIndicator";
+import { FormattedMessage } from "react-intl";

 const FileList = ({
  files,
@@ -41,8 +42,12 @@ const FileList = ({
    <Table>
      <thead>
        <tr>
-          <th>Name</th>
-          <th>Size</th>
+          <th>
+            <FormattedMessage id="upload.filelist.name" />
+          </th>
+          <th>
+            <FormattedMessage id="upload.filelist.size" />
+          </th>
          <th></th>
        </tr>
      </thead>
--- a/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCompletedUploadModal.tsx
@@ -3,6 +3,10 @@ import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import moment from "moment";
 import { useRouter } from "next/router";
+import { FormattedMessage } from "react-intl";
+import useTranslate, {
+  translateOutsideContext,
+} from "../../../hooks/useTranslate.hook";
 import { Share } from "../../../types/share.type";
 import CopyTextField from "../CopyTextField";

@@ -11,11 +15,12 @@ const showCompletedUploadModal = (
  share: Share,
  appUrl: string
 ) => {
+  const t = translateOutsideContext();
  return modals.openModal({
    closeOnClickOutside: false,
    withCloseButton: false,
    closeOnEscape: false,
-    title: "Share ready",
+    title: t("upload.modal.completed.share-ready"),
    children: <Body share={share} appUrl={appUrl} />,
  });
 };
@@ -23,6 +28,7 @@ const showCompletedUploadModal = (
 const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
  const modals = useModals();
  const router = useRouter();
+  const t = useTranslate();

  const link = `${appUrl}/share/${share.id}`;

@@ -37,10 +43,10 @@ const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
      >
        {/* If our share.expiration is timestamp 0, show a different message */}
        {moment(share.expiration).unix() === 0
-          ? "This share will never expire."
-          : `This share will expire on ${moment(share.expiration).format(
-              "LLL"
-            )}`}
+          ? t("upload.modal.completed.never-expires")
+          : t("upload.modal.completed.expires-on", {
+              expiration: moment(share.expiration).format("LLL"),
+            })}
      </Text>

      <Button
@@ -49,7 +55,7 @@ const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
          router.push("/upload");
        }}
      >
-        Done
+        <FormattedMessage id="common.button.done" />
      </Button>
    </Stack>
  );
--- a/frontend/src/components/upload/modals/showCreateUploadModal.tsx
+++ b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
@@ -13,14 +13,17 @@ import {
  Text,
  Textarea,
  TextInput,
-  Title,
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useState } from "react";
 import { TbAlertCircle } from "react-icons/tb";
+import { FormattedMessage } from "react-intl";
 import * as yup from "yup";
+import useTranslate, {
+  translateOutsideContext,
+} from "../../../hooks/useTranslate.hook";
 import shareService from "../../../services/share.service";
 import { CreateShare } from "../../../types/share.type";
 import { getExpirationPreview } from "../../../utils/date.util";
@@ -36,8 +39,10 @@ const showCreateUploadModal = (
  },
  uploadCallback: (createShare: CreateShare) => void
 ) => {
+  const t = translateOutsideContext();
+
  return modals.openModal({
-    title: "Share",
+    title: t("upload.modal.title"),
    children: (
      <CreateUploadModalBody
        options={options}
@@ -61,6 +66,7 @@ const CreateUploadModalBody = ({
  };
 }) => {
  const modals = useModals();
+  const t = useTranslate();

  const generatedLink = Buffer.from(Math.random().toString(), "utf8")
    .toString("base64")
@@ -71,11 +77,11 @@ const CreateUploadModalBody = ({
  const validationSchema = yup.object().shape({
    link: yup
      .string()
-      .required()
-      .min(3)
-      .max(50)
+      .required(t("common.error.field-required"))
+      .min(3, t("common.error.too-short", { length: 3 }))
+      .max(50, t("common.error.too-long", { length: 50 }))
      .matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
-        message: "Can only contain letters, numbers, underscores and hyphens",
+        message: t("upload.modal.link.error.invalid"),
      }),
    password: yup.string().min(3).max(30),
    maxViews: yup.number().min(1),
@@ -100,20 +106,19 @@ const CreateUploadModalBody = ({
          withCloseButton
          onClose={() => setShowNotSignedInAlert(false)}
          icon={<TbAlertCircle size={16} />}
-          title="You're not signed in"
+          title={t("upload.modal.not-signed-in")}
          color="yellow"
        >
-          You will be unable to delete your share manually and view the visitor
-          count.
+          <FormattedMessage id="upload.modal.not-signed-in-description" />
        </Alert>
      )}
      <form
        onSubmit={form.onSubmit(async (values) => {
          if (!(await shareService.isShareIdAvailable(values.link))) {
-            form.setFieldError("link", "This link is already in use");
+            form.setFieldError("link", t("upload.modal.link.error.taken"));
          } else {
            const expiration = form.values.never_expires
-              ? "never"
+              ? t("upload.modal.expires.never")
              : form.values.expiration_num + form.values.expiration_unit;
            uploadCallback({
              id: values.link,
@@ -151,7 +156,7 @@ const CreateUploadModalBody = ({
                  )
                }
              >
-                Generate
+                <FormattedMessage id="common.button.generate" />
              </Button>
            </Col>
          </Grid>
@@ -169,18 +174,6 @@ const CreateUploadModalBody = ({
          {!options.isReverseShare && (
            <>
              <Grid align={form.errors.link ? "center" : "flex-end"}>
-                <Col xs={6}>
-                  <NumberInput
-                    min={1}
-                    max={99999}
-                    precision={0}
-                    variant="filled"
-                    label="Expiration"
-                    placeholder="n"
-                    disabled={form.values.never_expires}
-                    {...form.getInputProps("expiration_num")}
-                  />
-                </Col>
                <Col xs={6}>
                  <Select
                    disabled={form.values.never_expires}
@@ -190,41 +183,51 @@ const CreateUploadModalBody = ({
                      {
                        value: "-minutes",
                        label:
-                          "Minute" +
-                          (form.values.expiration_num == 1 ? "" : "s"),
+                          form.values.expiration_num == 1
+                            ? t("upload.modal.expires.minute-singular")
+                            : t("upload.modal.expires.minute-plural"),
                      },
                      {
                        value: "-hours",
                        label:
-                          "Hour" + (form.values.expiration_num == 1 ? "" : "s"),
+                          form.values.expiration_num == 1
+                            ? t("upload.modal.expires.hour-singular")
+                            : t("upload.modal.expires.hour-plural"),
                      },
                      {
                        value: "-days",
                        label:
-                          "Day" + (form.values.expiration_num == 1 ? "" : "s"),
+                          form.values.expiration_num == 1
+                            ? t("upload.modal.expires.day-singular")
+                            : t("upload.modal.expires.day-plural"),
                      },
                      {
                        value: "-weeks",
                        label:
-                          "Week" + (form.values.expiration_num == 1 ? "" : "s"),
+                          form.values.expiration_num == 1
+                            ? t("upload.modal.expires.week-singular")
+                            : t("upload.modal.expires.week-plural"),
                      },
                      {
                        value: "-months",
                        label:
-                          "Month" +
-                          (form.values.expiration_num == 1 ? "" : "s"),
+                          form.values.expiration_num == 1
+                            ? t("upload.modal.expires.month-singular")
+                            : t("upload.modal.expires.month-plural"),
                      },
                      {
                        value: "-years",
                        label:
-                          "Year" + (form.values.expiration_num == 1 ? "" : "s"),
+                          form.values.expiration_num == 1
+                            ? t("upload.modal.expires.year-singular")
+                            : t("upload.modal.expires.year-plural"),
                      },
                    ]}
                  />
                </Col>
              </Grid>
              <Checkbox
-                label="Never Expires"
+                label={t("upload.modal.expires.never-long")}
                {...form.getInputProps("never_expires")}
              />
              <Text
@@ -234,18 +237,28 @@ const CreateUploadModalBody = ({
                  color: theme.colors.gray[6],
                })}
              >
-                {getExpirationPreview("share", form)}
+                {getExpirationPreview(
+                  {
+                    neverExpires: t("upload.modal.completed.never-expires"),
+                    expiresOn: t("upload.modal.completed.expires-on"),
+                  },
+                  form
+                )}
              </Text>
            </>
          )}
          <Accordion>
            <Accordion.Item value="description" sx={{ borderBottom: "none" }}>
-              <Accordion.Control>Description</Accordion.Control>
+              <Accordion.Control>
+                <FormattedMessage id="upload.modal.accordion.description.title" />
+              </Accordion.Control>
              <Accordion.Panel>
                <Stack align="stretch">
                  <Textarea
                    variant="filled"
-                    placeholder="Note for the recepients"
+                    placeholder={t(
+                      "upload.modal.accordion.description.placeholder"
+                    )}
                    {...form.getInputProps("description")}
                  />
                </Stack>
@@ -253,11 +266,13 @@ const CreateUploadModalBody = ({
            </Accordion.Item>
            {options.enableEmailRecepients && (
              <Accordion.Item value="recipients" sx={{ borderBottom: "none" }}>
-                <Accordion.Control>Email recipients</Accordion.Control>
+                <Accordion.Control>
+                  <FormattedMessage id="upload.modal.accordion.email.tile" />
+                </Accordion.Control>
                <Accordion.Panel>
                  <MultiSelect
                    data={form.values.recipients}
-                    placeholder="Enter email recipients"
+                    placeholder={t("upload.modal.accordion.email.placeholder")}
                    searchable
                    {...form.getInputProps("recipients")}
                    creatable
@@ -266,7 +281,7 @@ const CreateUploadModalBody = ({
                      if (!query.match(/^\S+@\S+\.\S+$/)) {
                        form.setFieldError(
                          "recipients",
-                          "Invalid email address"
+                          t("upload.modal.accordion.email.invalid-email")
                        );
                      } else {
                        form.setFieldError("recipients", null);
@@ -283,28 +298,36 @@ const CreateUploadModalBody = ({
            )}

            <Accordion.Item value="security" sx={{ borderBottom: "none" }}>
-              <Accordion.Control>Security options</Accordion.Control>
+              <Accordion.Control>
+                <FormattedMessage id="upload.modal.accordion.security.title" />
+              </Accordion.Control>
              <Accordion.Panel>
                <Stack align="stretch">
                  <PasswordInput
                    variant="filled"
-                    placeholder="No password"
-                    label="Password protection"
+                    placeholder={t(
+                      "upload.modal.accordion.security.password.placeholder"
+                    )}
+                    label={t("upload.modal.accordion.security.password.label")}
                    {...form.getInputProps("password")}
                  />
                  <NumberInput
                    min={1}
                    type="number"
                    variant="filled"
-                    placeholder="No limit"
-                    label="Maximal views"
+                    placeholder={t(
+                      "upload.modal.accordion.security.max-views.placeholder"
+                    )}
+                    label={t("upload.modal.accordion.security.max-views.label")}
                    {...form.getInputProps("maxViews")}
                  />
                </Stack>
              </Accordion.Panel>
            </Accordion.Item>
          </Accordion>
-          <Button type="submit">Share</Button>
+          <Button type="submit">
+            <FormattedMessage id="common.button.share" />
+          </Button>
        </Stack>
      </form>
    </>