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>