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>

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>

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();

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>