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>
This commit is contained in:
Elias Schneider
2023-07-20 15:32:07 +02:00
committed by GitHub
parent 7c5ec8d0ea
commit b9f6e3bd08
68 changed files with 4712 additions and 461 deletions

View File

@@ -1,16 +1,21 @@
import { Button, PasswordInput, Stack, Text } from "@mantine/core";
import { ModalsContextProps } from "@mantine/modals/lib/context";
import { useState } from "react";
import { FormattedMessage } from "react-intl";
import useTranslate, {
translateOutsideContext,
} from "../../hooks/useTranslate.hook";
const showEnterPasswordModal = (
modals: ModalsContextProps,
submitCallback: (password: string) => Promise<void>
) => {
const t = translateOutsideContext();
return modals.openModal({
closeOnClickOutside: false,
withCloseButton: false,
closeOnEscape: false,
title: "Password required",
title: t("share.modal.password.title"),
children: <Body submitCallback={submitCallback} />,
});
};
@@ -22,10 +27,11 @@ const Body = ({
}) => {
const [password, setPassword] = useState("");
const [passwordWrong, setPasswordWrong] = useState(false);
const t = useTranslate();
return (
<Stack align="stretch">
<Text size="sm">
This access this share please enter the password for the share.
<FormattedMessage id="share.modal.password.description" />
</Text>
<form
@@ -37,13 +43,15 @@ const Body = ({
<Stack>
<PasswordInput
variant="filled"
placeholder="Password"
error={passwordWrong && "Wrong password"}
placeholder={t("share.modal.password")}
error={passwordWrong && t("share.modal.error.invalid-password")}
onFocus={() => setPasswordWrong(false)}
onChange={(e) => setPassword(e.target.value)}
value={password}
/>
<Button type="submit">Submit</Button>
<Button type="submit">
<FormattedMessage id="common.button.submit" />
</Button>
</Stack>
</form>
</Stack>