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/pages/auth/resetPassword/[resetPasswordToken].tsx

@@ -10,7 +10,9 @@ import {
 } from "@mantine/core";
 import { useForm, yupResolver } from "@mantine/form";
 import { useRouter } from "next/router";
+import { FormattedMessage } from "react-intl";
 import * as yup from "yup";
+import useTranslate from "../../../hooks/useTranslate.hook";
 import authService from "../../../services/auth.service";
 import toast from "../../../utils/toast.util";
 
@@ -25,6 +27,7 @@ const useStyles = createStyles((theme) => ({
 const ResetPassword = () => {
   const { classes } = useStyles();
   const router = useRouter();
+  const t = useTranslate();
 
   const form = useForm({
     initialValues: {
@@ -32,7 +35,10 @@ const ResetPassword = () => {
     },
     validate: yupResolver(
       yup.object().shape({
-        password: yup.string().min(8).required(),
+        password: yup
+          .string()
+          .min(8, t("common.error.too-short", { length: 8 }))
+          .required(t("common.error.field-required")),
       })
     ),
   });
@@ -42,10 +48,10 @@ const ResetPassword = () => {
   return (
     <Container size={460} my={30}>
       <Title order={2} weight={900} align="center">
-        Reset password
+        <FormattedMessage id="resetPassword.text.resetPassword" />
       </Title>
       <Text color="dimmed" size="sm" align="center">
-        Enter your new password
+        <FormattedMessage id="resetPassword.text.enterNewPassword" />
       </Text>
 
       <Paper withBorder shadow="md" p={30} radius="md" mt="xl">
@@ -54,7 +60,7 @@ const ResetPassword = () => {
             authService
               .resetPassword(resetPasswordToken, values.password)
               .then(() => {
-                toast.success("Your password has been reset successfully.");
+                toast.success(t("resetPassword.notify.passwordReset"));
 
                 router.push("/auth/signIn");
               })
@@ -62,13 +68,13 @@ const ResetPassword = () => {
           })}
         >
           <PasswordInput
-            label="New password"
+            label={t("resetPassword.text.password")}
             placeholder="••••••••••"
             {...form.getInputProps("password")}
           />
           <Group position="right" mt="lg">
             <Button type="submit" className={classes.control}>
-              Reset password
+              <FormattedMessage id="resetPassword.button.resetPassword" />
             </Button>
           </Group>
         </form>

frontend/src/pages/auth/resetPassword/index.tsx

@@ -15,7 +15,9 @@ import { useForm, yupResolver } from "@mantine/form";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { TbArrowLeft } from "react-icons/tb";
+import { FormattedMessage } from "react-intl";
 import * as yup from "yup";
+import useTranslate from "../../../hooks/useTranslate.hook";
 import authService from "../../../services/auth.service";
 import toast from "../../../utils/toast.util";
 
@@ -43,6 +45,7 @@ const useStyles = createStyles((theme) => ({
 const ResetPassword = () => {
   const { classes } = useStyles();
   const router = useRouter();
+  const t = useTranslate();
 
   const form = useForm({
     initialValues: {
@@ -50,7 +53,10 @@ const ResetPassword = () => {
     },
     validate: yupResolver(
       yup.object().shape({
-        email: yup.string().email().required(),
+        email: yup
+          .string()
+          .email(t("common.error.invalid-email"))
+          .required(t("common.error.field-required")),
       })
     ),
   });
@@ -58,10 +64,10 @@ const ResetPassword = () => {
   return (
     <Container size={460} my={30}>
       <Title order={2} weight={900} align="center">
-        Forgot your password?
+        <FormattedMessage id="resetPassword.title" />
       </Title>
       <Text color="dimmed" size="sm" align="center">
-        Enter your email to get a reset link
+        <FormattedMessage id="resetPassword.description" />
       </Text>
 
       <Paper withBorder shadow="md" p={30} radius="md" mt="xl">
@@ -70,15 +76,15 @@ const ResetPassword = () => {
             authService
               .requestResetPassword(values.email)
               .then(() => {
-                toast.success("The email has been sent.");
+                toast.success(t("resetPassword.notify.success"));
                 router.push("/auth/signIn");
               })
               .catch(toast.axiosError)
           )}
         >
           <TextInput
-            label="Your email"
-            placeholder="Your email"
+            label={t("signup.input.email")}
+            placeholder={t("signup.input.email.placeholder")}
             {...form.getInputProps("email")}
           />
           <Group position="apart" mt="lg" className={classes.controls}>
@@ -91,11 +97,13 @@ const ResetPassword = () => {
             >
               <Center inline>
                 <TbArrowLeft size={12} />
-                <Box ml={5}>Back to login page</Box>
+                <Box ml={5}>
+                  <FormattedMessage id="resetPassword.button.back" />
+                </Box>
               </Center>
             </Anchor>
             <Button type="submit" className={classes.control}>
-              Reset password
+              <FormattedMessage id="resetPassword.text.resetPassword" />
             </Button>
           </Group>
         </form>

frontend/src/pages/auth/signIn.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import SignInForm from "../../components/auth/SignInForm";
 import Meta from "../../components/Meta";
 import useUser from "../../hooks/user.hook";
+import useTranslate from "../../hooks/useTranslate.hook";
 
 export function getServerSideProps(context: GetServerSidePropsContext) {
   return {
@@ -15,6 +16,7 @@ export function getServerSideProps(context: GetServerSidePropsContext) {
 const SignIn = ({ redirectPath }: { redirectPath?: string }) => {
   const { refreshUser } = useUser();
   const router = useRouter();
+  const t = useTranslate();
 
   const [isLoading, setIsLoading] = useState(redirectPath ? true : false);
 
@@ -34,7 +36,7 @@ const SignIn = ({ redirectPath }: { redirectPath?: string }) => {
 
   return (
     <>
-      <Meta title="Sign In" />
+      <Meta title={t("signin.title")} />
       <SignInForm redirectPath={redirectPath ?? "/upload"} />
     </>
   );

frontend/src/pages/auth/signUp.tsx

@@ -1,10 +1,12 @@
 import SignUpForm from "../../components/auth/SignUpForm";
 import Meta from "../../components/Meta";
+import useTranslate from "../../hooks/useTranslate.hook";
 
 const SignUp = () => {
+  const t = useTranslate();
   return (
     <>
-      <Meta title="Sign Up" />
+      <Meta title={t("signup.title")} />
       <SignUpForm />
     </>
   );