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

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>