localization: more translations/keys

client/src/pages/authentication/Login.jsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import { Trans } from 'react-i18next';
 
 // material-ui
 import { Grid, Stack, Typography } from '@mui/material';
@@ -19,7 +20,7 @@ const Login = () => (
         <Grid container spacing={3}>
             <Grid item xs={12}>
                 <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                    <Typography variant="h3">Login</Typography>
+                    <Typography variant="h3"><Trans i18nKey='auth.login' /></Typography>
                     {/* <Typography component={Link} to="/register" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                         Don&apos;t have an account?
                     </Typography> */}

client/src/pages/authentication/Register.jsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 // material-ui
 import { Grid, Stack, Typography } from '@mui/material';
@@ -10,6 +11,7 @@ import AuthWrapper from './AuthWrapper';
 // ================================|| REGISTER ||================================ //
 
 const Register = () => {
+    const { t } = useTranslation();
     const urlSearchParams = new URLSearchParams(window.location.search);
     const formType = urlSearchParams.get('t');
     const isInviteLink = formType === '2';
@@ -22,7 +24,7 @@ const Register = () => {
             <Grid item xs={12}>
                 <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                     <Typography variant="h3">{
-                        isInviteLink ? 'Invitation' : 'Password Reset'
+                        isInviteLink ? t('auth.invite.isInvite') : t('auth.pwdReset.pwdResetTitle')
                     }</Typography>
                 </Stack>
             </Grid>

client/src/pages/authentication/Signup.jsx

@@ -14,9 +14,9 @@ const Signup = () => (
         <Grid container spacing={3}>
             <Grid item xs={12}>
                 <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                    <Typography variant="h3">Sign up</Typography>
+                    <Typography variant="h3">{t('auth.signUp.signUpTitle')}</Typography>
                     <Typography component={Link} to="/cosmos-ui/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
-                        Already have an account?
+                        {t('auth.signUp.signUpCancelToLogin')}
                     </Typography>
                 </Stack>
             </Grid>

client/src/pages/authentication/auth-forms/AuthRegister.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 // material-ui
 import {
@@ -71,13 +71,13 @@ const AuthRegister = ({nickname, isRegister, isInviteLink, regkey}) => {
                     submit: null
                 }}
                 validationSchema={Yup.object().shape({
-                    nickname: Yup.string().max(255).required('Nickname is required'),
+                    nickname: Yup.string().max(255).required(t('global.nicknameRequiredValidation')),
                     password: Yup.string()
                         .max(255)
-                        .required('Password is required')
+                        .required(t('auth.pwdRequired'))
                         .matches(
                             /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@#$%\^&\*\(\)_\+=\-\{\[\}\]:;"'<,>\/])(?=.{9,})/,
-                            'Must Contain 9 Characters, One Uppercase, One Lowercase, One Number and one special case Character (~!@#$%^&*()_+=-{[}]:;"\'<>.?/)'
+                            t('auth.pwd.validation')
                         ),
                 })}
                 onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
@@ -101,12 +101,12 @@ const AuthRegister = ({nickname, isRegister, isInviteLink, regkey}) => {
                         <Grid container spacing={3}>
                             {isInviteLink ? <Grid item xs={12}>
                                 <Alert severity="info">
-                                    <strong>Invite Link</strong> - You have been invited to join this Cosmos instance. This Nickname has been provided to us by your administrator. Keep note of it, you will need it to login. 
+                                     <Trans i18nKey='auth.invite.inviteTitle'/>
                                 </Alert>
                             </Grid> : ''}
                             {isInviteLink ? <Grid item xs={12}>
                                 <Stack spacing={1}>
-                                    <InputLabel htmlFor="nickname-signup">Nickname</InputLabel>
+                                    <InputLabel htmlFor="nickname-signup">{t('global.nicknameLabel')}</InputLabel>
                                     <OutlinedInput
                                         id="nickname-login"
                                         type="nickname"
@@ -128,7 +128,7 @@ const AuthRegister = ({nickname, isRegister, isInviteLink, regkey}) => {
                             </Grid> : ''}
                             <Grid item xs={12}>
                                 <Stack spacing={1}>
-                                    <InputLabel htmlFor="password-signup">Password</InputLabel>
+                                    <InputLabel htmlFor="password-signup">{t('auth.pwd')}</InputLabel>
                                     <OutlinedInput
                                         fullWidth
                                         error={Boolean(touched.password && errors.password)}
@@ -144,7 +144,7 @@ const AuthRegister = ({nickname, isRegister, isInviteLink, regkey}) => {
                                         endAdornment={
                                             <InputAdornment position="end">
                                                 <IconButton
-                                                    aria-label="toggle password visibility"
+                                                    aria-label={t('auth.pwd.visibilityToggle.visibilityToggleLabel')}
                                                     onClick={handleClickShowPassword}
                                                     onMouseDown={handleMouseDownPassword}
                                                     edge="end"
@@ -192,7 +192,7 @@ const AuthRegister = ({nickname, isRegister, isInviteLink, regkey}) => {
                                         color="primary"
                                     >
                                         {
-                                            isRegister ? 'Register' : 'Reset Password'
+                                            isRegister ? t('auth.invite.submitButton.register') : t('auth.forgotPassword.resetPassword')
                                         }
                                     </LoadingButton>
                             </Grid>

client/src/pages/authentication/forgotPassword.jsx

@@ -24,7 +24,7 @@ const ForgotPassword = () => {
         <Grid container spacing={3}>
             <Grid item xs={12}>
                 <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                    <Typography variant="h3">Password Reset</Typography>
+                    <Typography variant="h3"> {t('auth.pwdReset.pwdResetTitle')}</Typography>
                     {/* <Typography component={Link} to="/register" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                         Don&apos;t have an account?
                     </Typography> */}

client/src/pages/authentication/newMFA.jsx

@@ -106,7 +106,7 @@ const MFASetup = () => {
   const canvasRef = useRef(null);
   const theme = useTheme();
   const isDark = theme.palette.mode === 'dark';
-  const { t, Trans } = useTranslation();
+  const { t } = useTranslation();
 
   const getCode = () => {
     return API.users.new2FA().then(({data}) => {

client/src/pages/authentication/openid.jsx

@@ -10,10 +10,12 @@ import { getFaviconURL } from '../../utils/routes';
 import { LoadingButton } from '@mui/lab';
 import { Field, useFormik } from 'formik';
 import { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 // ================================|| LOGIN ||================================ //
 
 const OpenID = () => {
+  const { t } = useTranslation();
   const [searchParams, setSearchParams] = useSearchParams();
   const client_id = searchParams.get("client_id")
   const redirect_uri = searchParams.get("redirect_uri")
@@ -54,14 +56,13 @@ const OpenID = () => {
     <Grid container spacing={3}>
       <Grid item xs={12}>
         <Stack spacing={2}>
-          <Typography variant="h3">Login with OpenID - {client_id}</Typography>
+          <Typography variant="h3">{t('oidc.title', {client_id: client_id})}</Typography>
           <Stack direction="row" justifyContent="space-between" alignItems="baseline" spacing={2} style={{
             alignItems: 'center',
           }}>
             <img src={icon} alt={'icon'} width="64px" />
             <div>
-              You are about to login into <b>{client_id}</b>. <br />
-              Check which permissions you are giving to this application. <br />
+              <Trans i18nKey='oidc.loginDescription' values={{client_id: client_id}} />
             </div>
           </Stack>
         </Stack>
@@ -74,7 +75,7 @@ const OpenID = () => {
             return scope == "openid" ? <div>
               <input type="checkbox" name="scopes" value={scope} checked hidden />
               <Checkbox checked disabled />
-              account
+              {t('oidc.account')}
             </div>
               : <div>
                 <input type="checkbox" name="scopes" hidden value={scope} checked={checkedScopes.includes(scope)} />
@@ -89,7 +90,7 @@ const OpenID = () => {
             opacity: '0.8',
             fontStyle: 'italic',
           }}>
-            You will be redirected to <b>{redirect_uri}</b> after login. <br />
+            <Trans i18nkey='oidc.redirectInfo' values={{redirect_uri: redirect_uri}} />
           </div>
 
           <LoadingButton
@@ -100,7 +101,7 @@ const OpenID = () => {
             variant="contained"
             color="primary"
           >
-            OpenID Login
+            {t('oidc.loginTitle')}
           </LoadingButton>
         </form>
       </Grid>

client/src/pages/config/routes/newRoute.jsx

@@ -81,7 +81,7 @@ const NewRouteCreate = ({ openNewModal, setOpenNewModal, config }) => {
             </Stack>}
             <Button onClick={() => setOpenNewModal(false)}>{t('global.cancelAction')}</Button>
             <Button onClick={() => {
-              let errors = ValidateRoute(newRoute, config);
+              let errors = ValidateRoute(newRoute, config, t);
               if (errors && errors.length > 0) {
                 setSubmitErrors(errors);
               } else {