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
@@ -13,25 +13,28 @@ import { useMediaQuery } from "@mantine/hooks";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import Meta from "../../../components/Meta";
|
||||
import AdminConfigInput from "../../../components/admin/configuration/AdminConfigInput";
|
||||
import ConfigurationHeader from "../../../components/admin/configuration/ConfigurationHeader";
|
||||
import ConfigurationNavBar from "../../../components/admin/configuration/ConfigurationNavBar";
|
||||
import LogoConfigInput from "../../../components/admin/configuration/LogoConfigInput";
|
||||
import TestEmailButton from "../../../components/admin/configuration/TestEmailButton";
|
||||
import CenterLoader from "../../../components/core/CenterLoader";
|
||||
import Meta from "../../../components/Meta";
|
||||
import useConfig from "../../../hooks/config.hook";
|
||||
import configService from "../../../services/config.service";
|
||||
import { AdminConfig, UpdateConfig } from "../../../types/config.type";
|
||||
import {
|
||||
camelToKebab,
|
||||
capitalizeFirstLetter,
|
||||
configVariableToFriendlyName,
|
||||
} from "../../../utils/string.util";
|
||||
import toast from "../../../utils/toast.util";
|
||||
import useTranslate from "../../../hooks/useTranslate.hook";
|
||||
|
||||
export default function AppShellDemo() {
|
||||
const theme = useMantineTheme();
|
||||
const router = useRouter();
|
||||
const t = useTranslate();
|
||||
|
||||
const [isMobileNavBarOpened, setIsMobileNavBarOpened] = useState(false);
|
||||
const isMobile = useMediaQuery("(max-width: 560px)");
|
||||
@@ -94,7 +97,7 @@ export default function AppShellDemo() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta title="Configuration" />
|
||||
<Meta title={t("admin.config.title")} />
|
||||
<AppShell
|
||||
styles={{
|
||||
main: {
|
||||
@@ -134,26 +137,28 @@ export default function AppShellDemo() {
|
||||
spacing={0}
|
||||
>
|
||||
<Title order={6}>
|
||||
{configVariableToFriendlyName(configVariable.name)}
|
||||
<FormattedMessage
|
||||
id={`admin.config.${camelToKebab(
|
||||
configVariable.key
|
||||
)}`}
|
||||
/>
|
||||
</Title>
|
||||
{configVariable.description.split("\n").length == 1 ? (
|
||||
<Text color="dimmed" size="sm" mb="xs">
|
||||
{configVariable.description}
|
||||
</Text>
|
||||
) : (
|
||||
configVariable.description.split("\n").map((line) => (
|
||||
<Text
|
||||
key={line}
|
||||
color="dimmed"
|
||||
size="sm"
|
||||
style={{
|
||||
marginBottom: line === "" ? "1rem" : "0",
|
||||
}}
|
||||
>
|
||||
{line}
|
||||
</Text>
|
||||
))
|
||||
)}
|
||||
|
||||
<Text
|
||||
sx={{
|
||||
whiteSpace: "pre-line",
|
||||
}}
|
||||
color="dimmed"
|
||||
size="sm"
|
||||
mb="xs"
|
||||
>
|
||||
<FormattedMessage
|
||||
id={`admin.config.${camelToKebab(
|
||||
configVariable.key
|
||||
)}.description`}
|
||||
values={{ br: <br /> }}
|
||||
/>
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack></Stack>
|
||||
<Box style={{ width: isMobile ? "100%" : "50%" }}>
|
||||
@@ -176,7 +181,9 @@ export default function AppShellDemo() {
|
||||
saveConfigVariables={saveConfigVariables}
|
||||
/>
|
||||
)}
|
||||
<Button onClick={saveConfigVariables}>Save</Button>
|
||||
<Button onClick={saveConfigVariables}>
|
||||
<FormattedMessage id="common.button.save" />
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -11,7 +11,9 @@ import {
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { TbRefresh, TbSettings, TbUsers } from "react-icons/tb";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import Meta from "../../components/Meta";
|
||||
import useTranslate from "../../hooks/useTranslate.hook";
|
||||
import configService from "../../services/config.service";
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
@@ -31,15 +33,16 @@ const useStyles = createStyles((theme) => ({
|
||||
|
||||
const Admin = () => {
|
||||
const { classes, theme } = useStyles();
|
||||
const t = useTranslate();
|
||||
|
||||
const [managementOptions, setManagementOptions] = useState([
|
||||
{
|
||||
title: "User management",
|
||||
title: t("admin.button.users"),
|
||||
icon: TbUsers,
|
||||
route: "/admin/users",
|
||||
},
|
||||
{
|
||||
title: "Configuration",
|
||||
title: t("admin.button.config"),
|
||||
icon: TbSettings,
|
||||
route: "/admin/config/general",
|
||||
},
|
||||
@@ -63,9 +66,9 @@ const Admin = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta title="Administration" />
|
||||
<Meta title={t("admin.title")} />
|
||||
<Title mb={30} order={3}>
|
||||
Administration
|
||||
<FormattedMessage id="admin.title" />
|
||||
</Title>
|
||||
<Stack justify="space-between" style={{ height: "calc(100vh - 180px)" }}>
|
||||
<Paper withBorder p={40}>
|
||||
@@ -91,7 +94,7 @@ const Admin = () => {
|
||||
|
||||
<Center>
|
||||
<Text size="xs" color="dimmed">
|
||||
Version {process.env.VERSION}
|
||||
<FormattedMessage id="admin.version" /> {process.env.VERSION}
|
||||
</Text>
|
||||
</Center>
|
||||
</Stack>
|
||||
|
||||
@@ -2,10 +2,12 @@ import { Button, Group, Space, Text, Title } from "@mantine/core";
|
||||
import { useModals } from "@mantine/modals";
|
||||
import { useEffect, useState } from "react";
|
||||
import { TbPlus } from "react-icons/tb";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import Meta from "../../components/Meta";
|
||||
import ManageUserTable from "../../components/admin/users/ManageUserTable";
|
||||
import showCreateUserModal from "../../components/admin/users/showCreateUserModal";
|
||||
import Meta from "../../components/Meta";
|
||||
import useConfig from "../../hooks/config.hook";
|
||||
import useTranslate from "../../hooks/useTranslate.hook";
|
||||
import userService from "../../services/user.service";
|
||||
import User from "../../types/user.type";
|
||||
import toast from "../../utils/toast.util";
|
||||
@@ -16,6 +18,7 @@ const Users = () => {
|
||||
|
||||
const config = useConfig();
|
||||
const modals = useModals();
|
||||
const t = useTranslate();
|
||||
|
||||
const getUsers = () => {
|
||||
setIsLoading(true);
|
||||
@@ -27,14 +30,18 @@ const Users = () => {
|
||||
|
||||
const deleteUser = (user: User) => {
|
||||
modals.openConfirmModal({
|
||||
title: `Delete ${user.username}?`,
|
||||
title: t("admin.users.edit.delete.title", {
|
||||
username: user.username,
|
||||
}),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
Do you really want to delete <b>{user.username}</b> and all his
|
||||
shares?
|
||||
<FormattedMessage id="admin.users.edit.delete.description" />
|
||||
</Text>
|
||||
),
|
||||
labels: { confirm: "Delete", cancel: "Cancel" },
|
||||
labels: {
|
||||
confirm: t("common.button.delete"),
|
||||
cancel: t("common.button.cancel"),
|
||||
},
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: async () => {
|
||||
userService
|
||||
@@ -51,10 +58,10 @@ const Users = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta title="User management" />
|
||||
<Meta title={t("admin.users.title")} />
|
||||
<Group position="apart" align="baseline" mb={20}>
|
||||
<Title mb={30} order={3}>
|
||||
User management
|
||||
<FormattedMessage id="admin.users.title" />
|
||||
</Title>
|
||||
<Button
|
||||
onClick={() =>
|
||||
@@ -62,7 +69,7 @@ const Users = () => {
|
||||
}
|
||||
leftIcon={<TbPlus size={20} />}
|
||||
>
|
||||
Create
|
||||
<FormattedMessage id="common.button.create" />
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user