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/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>

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>

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>

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