Use internationalization feature for added text
GitLab: #81
Change-Id: Ie8c3b62545d954922f5c90387c5d361d07cb8cf2
diff --git a/client/src/components/AlertSnackbar.tsx b/client/src/components/AlertSnackbar.tsx
index c32eca8..287cd60 100644
--- a/client/src/components/AlertSnackbar.tsx
+++ b/client/src/components/AlertSnackbar.tsx
@@ -38,6 +38,10 @@
}}
>
<Alert severity={severity} {...alertProps}>
+ {/* For i18n-parser.
+ t('severity_error')
+ t('severity_success')
+ */}
<AlertTitle>{t(`severity_${severity}`)}</AlertTitle>
{children}
</Alert>
diff --git a/client/src/components/Input.tsx b/client/src/components/Input.tsx
index 063b350..db11fb6 100644
--- a/client/src/components/Input.tsx
+++ b/client/src/components/Input.tsx
@@ -28,6 +28,7 @@
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { ChangeEvent, ReactElement, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { InfoButton, ToggleVisibilityButton } from './Button';
import RulesDialog from './RulesDialog';
@@ -60,6 +61,7 @@
tooltipTitle,
...props
}: InputProps) => {
+ const { t } = useTranslation();
const [isSelected, setIsSelected] = useState(false);
const [input, setInput] = useState(props.defaultValue);
const [startAdornment, setStartAdornment] = useState<ReactElement | undefined>();
@@ -89,13 +91,17 @@
return (
<>
- <RulesDialog openDialog={isDialogOpened} title="Username rules :" closeDialog={() => setIsDialogOpened(false)}>
+ <RulesDialog
+ openDialog={isDialogOpened}
+ title={t('username_rules_dialog_title')}
+ closeDialog={() => setIsDialogOpened(false)}
+ >
<UsernameRules />
</RulesDialog>
<TextField
{...props}
color={inputColor(props.error, success)}
- label={'Choose an identifier'}
+ label={t('username_input_label')}
variant="standard"
InputLabelProps={{ shrink: !!(isSelected || input) }}
onChange={onChange}
@@ -119,6 +125,7 @@
tooltipTitle,
...props
}: InputProps) => {
+ const { t } = useTranslation();
const [showPassword, setShowPassword] = useState(false);
const [isSelected, setIsSelected] = useState(false);
const [input, setInput] = useState(props.defaultValue);
@@ -153,13 +160,17 @@
return (
<>
- <RulesDialog openDialog={isDialogOpened} title="Password rules :" closeDialog={() => setIsDialogOpened(false)}>
+ <RulesDialog
+ openDialog={isDialogOpened}
+ title={t('password_rules_dialog_title')}
+ closeDialog={() => setIsDialogOpened(false)}
+ >
<PasswordRules />
</RulesDialog>
<TextField
{...props}
color={inputColor(props.error, success)}
- label="Password"
+ label={t('password_input_label')}
type={showPassword ? 'text' : 'password'}
variant="standard"
autoComplete="current-password"
@@ -257,73 +268,73 @@
}
const PasswordRules = () => {
+ const { t } = useTranslation();
+
return (
- <Typography variant="body1">
- <List>
- <ListItem>
- <ListItemIcon>
- <GppMaybe />
- </ListItemIcon>
- The password must contain at least 1 lowercase alphabetical character.
- </ListItem>
- <ListItem>
- <ListItemIcon>
- <GppMaybe />
- </ListItemIcon>
- The password must contain at least 1 uppercase alphabetical character.
- </ListItem>
- <ListItem>
- <ListItemIcon>
- <GppMaybe />
- </ListItemIcon>
- The password must contain at least 1 numeric character.
- </ListItem>
- <ListItem>
- <ListItemIcon>
- <GppMaybe />
- </ListItemIcon>
- The password must contain at least 1 special character.
- </ListItem>
- <ListItem>
- <ListItemIcon>
- <GppMaybe />
- </ListItemIcon>
- The password must be 10 characters or longer to be considered strong.
- </ListItem>
- </List>
- </Typography>
+ <List>
+ <ListItem>
+ <ListItemIcon>
+ <GppMaybe />
+ </ListItemIcon>
+ <Typography variant="body1">{t('password_rule_one')}</Typography>
+ </ListItem>
+ <ListItem>
+ <ListItemIcon>
+ <GppMaybe />
+ </ListItemIcon>
+ <Typography variant="body1">{t('password_rule_two')}</Typography>
+ </ListItem>
+ <ListItem>
+ <ListItemIcon>
+ <GppMaybe />
+ </ListItemIcon>
+ <Typography variant="body1">{t('password_rule_three')}</Typography>
+ </ListItem>
+ <ListItem>
+ <ListItemIcon>
+ <GppMaybe />
+ </ListItemIcon>
+ <Typography variant="body1">{t('password_rule_four')}</Typography>
+ </ListItem>
+ <ListItem>
+ <ListItemIcon>
+ <GppMaybe />
+ </ListItemIcon>
+ <Typography variant="body1">{t('password_rule_five')}</Typography>
+ </ListItem>
+ </List>
);
};
const UsernameRules = () => {
+ const { t } = useTranslation();
+
return (
- <Typography variant="body1">
- <List>
- <ListItem>
- <ListItemIcon>
- <Warning />
- </ListItemIcon>
- The username must be 3 to 32 characters long.
- </ListItem>
- <ListItem>
- <ListItemIcon>
- <Warning />
- </ListItemIcon>
- The username may contain lowercase and uppercase alphabetical characters.
- </ListItem>
- <ListItem>
- <ListItemIcon>
- <Warning />
- </ListItemIcon>
- The username may contain hyphens {'(-)'}.
- </ListItem>
- <ListItem>
- <ListItemIcon>
- <Warning />
- </ListItemIcon>
- The username may contain underscores {'(_)'}.
- </ListItem>
- </List>
- </Typography>
+ <List>
+ <ListItem>
+ <ListItemIcon>
+ <Warning />
+ </ListItemIcon>
+ <Typography variant="body1">{t('username_rule_one')}</Typography>
+ </ListItem>
+ <ListItem>
+ <ListItemIcon>
+ <Warning />
+ </ListItemIcon>
+ <Typography variant="body1">{t('username_rule_two')}</Typography>
+ </ListItem>
+ <ListItem>
+ <ListItemIcon>
+ <Warning />
+ </ListItemIcon>
+ <Typography variant="body1">{t('username_rule_three')}</Typography>
+ </ListItem>
+ <ListItem>
+ <ListItemIcon>
+ <Warning />
+ </ListItemIcon>
+ <Typography variant="body1">{t('username_rule_four')}</Typography>
+ </ListItem>
+ </List>
);
};
diff --git a/client/src/components/JamiWelcomeLogo.tsx b/client/src/components/JamiWelcomeLogo.tsx
index 31311b6..8e66172 100644
--- a/client/src/components/JamiWelcomeLogo.tsx
+++ b/client/src/components/JamiWelcomeLogo.tsx
@@ -16,6 +16,7 @@
* <https://www.gnu.org/licenses/>.
*/
import { Stack, StackProps, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
import { ReactComponent as JamiLogo } from '../icons/jami-logo-icon.svg';
import { jamiLogoDefaultSize } from '../utils/constants';
@@ -26,6 +27,8 @@
}
export default function JamiWelcomeLogo({ logoWidth, logoHeight, ...stackProps }: WelcomeLogoProps) {
+ const { t } = useTranslation();
+
return (
<Stack
{...stackProps}
@@ -37,7 +40,7 @@
}}
>
<JamiLogo width={logoWidth ?? jamiLogoDefaultSize} height={logoHeight ?? jamiLogoDefaultSize} />
- <Typography variant="h1">Welcome to Jami!</Typography>
+ <Typography variant="h1">{t('welcome_text')}</Typography>
</Stack>
);
}
diff --git a/client/src/components/RulesDialog.tsx b/client/src/components/RulesDialog.tsx
index 5e1e929..3b65f33 100644
--- a/client/src/components/RulesDialog.tsx
+++ b/client/src/components/RulesDialog.tsx
@@ -16,6 +16,7 @@
* <https://www.gnu.org/licenses/>.
*/
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import { useTranslation } from 'react-i18next';
interface RulesDialogProps {
openDialog: boolean;
@@ -25,6 +26,8 @@
}
export default function RulesDialog(props: RulesDialogProps) {
+ const { t } = useTranslation();
+
return (
<Dialog open={props.openDialog} onClose={props.closeDialog}>
<DialogTitle>
@@ -34,7 +37,7 @@
<DialogContent>{props.children}</DialogContent>
<DialogActions>
<Button onClick={props.closeDialog} autoFocus>
- Close
+ {t('dialog_close')}
</Button>
</DialogActions>
</Dialog>
diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx
index 9f3978d..66edb9f 100644
--- a/client/src/components/welcome.jsx
+++ b/client/src/components/welcome.jsx
@@ -18,6 +18,7 @@
import { Container } from '@mui/material';
import { AnimatePresence, motion } from 'framer-motion';
import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { ReactComponent as JamiLogo } from '../icons/jami-logo-icon.svg';
@@ -37,6 +38,7 @@
};
export default function WelcomeAnimation(props) {
+ const { t } = useTranslation();
const [visible, setVisible] = useState(true);
return (
@@ -59,7 +61,7 @@
<motion.div variants={item}>
<JamiLogo width="95%" />
</motion.div>
- <motion.h1 variants={item}>Welcome to Jami</motion.h1>
+ <motion.h1 variants={item}>{t('welcome_text')}</motion.h1>
</motion.div>
)}
</AnimatePresence>