diff options
author | rahighi <rahighi> | 2021-08-26 11:46:48 +0430 |
---|---|---|
committer | rahighi <rahighi> | 2021-08-26 11:46:48 +0430 |
commit | eed89f02a9219417fa5f94c0d6c08f5981d23823 (patch) | |
tree | 78b378e1b1bcc54a068c304b1b9af73aa0e8c3a9 /modern/src/components | |
parent | db406fcc787df2fa865e5c5fe333f152e533cda1 (diff) | |
download | etbsa-traccar-web-eed89f02a9219417fa5f94c0d6c08f5981d23823.tar.gz etbsa-traccar-web-eed89f02a9219417fa5f94c0d6c08f5981d23823.tar.bz2 etbsa-traccar-web-eed89f02a9219417fa5f94c0d6c08f5981d23823.zip |
added multiple language support with related layout directions
Diffstat (limited to 'modern/src/components')
-rw-r--r-- | modern/src/components/registration/LoginForm.js | 30 | ||||
-rw-r--r-- | modern/src/components/registration/RegisterForm.js | 6 |
2 files changed, 22 insertions, 14 deletions
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js index e6da05e..c5c1d6f 100644 --- a/modern/src/components/registration/LoginForm.js +++ b/modern/src/components/registration/LoginForm.js @@ -6,7 +6,7 @@ import { useTheme } from '@material-ui/core/styles'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { sessionActions } from '../../store'; -import t from '../../common/localization'; +import t, { useLocalization } from '../../common/localization'; import StartPage from '../../StartPage'; const useStyles = makeStyles((theme) => ({ @@ -24,6 +24,7 @@ const LoginForm = () => { const dispatch = useDispatch(); const history = useHistory(); const theme = useTheme(); + const { language, languageList, setLanguage } = useLocalization(); const [failed, setFailed] = useState(false); const [email, setEmail] = useState(''); @@ -61,16 +62,20 @@ const LoginForm = () => { } }; + const handleLanguageChange = e => { + setLanguage(e.target.value); + } + return ( <StartPage> <Grid container direction="column" spacing={2}> {useMediaQuery(theme.breakpoints.down('md')) && ( - <Grid item className={classes.logoContainer}> - <svg height="64" width="240"> - <use xlinkHref="/logo.svg#img" /> - </svg> - </Grid> + <Grid item className={classes.logoContainer}> + <svg height="64" width="240"> + <use xlinkHref="/logo.svg#img" /> + </svg> + </Grid> )} <Grid item> <TextField @@ -124,22 +129,23 @@ const LoginForm = () => { <Grid item xs> <FormControl variant="filled" fullWidth> <InputLabel>{t('loginLanguage')}</InputLabel> - <Select> - <MenuItem value="en">English</MenuItem> + <Select value={language} onChange={handleLanguageChange}> + {languageList.map(lang => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)} </Select> </FormControl> </Grid> </Grid> {emailEnabled && ( - <Grid item container justify="flex-end"> - <Grid item> - <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> + <Grid item container justify="flex-end"> + <Grid item> + <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> + </Grid> </Grid> - </Grid> )} </Grid> </StartPage> ); + }; export default LoginForm; diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js index 06f5355..3a249c6 100644 --- a/modern/src/components/registration/RegisterForm.js +++ b/modern/src/components/registration/RegisterForm.js @@ -1,11 +1,12 @@ import React, { useState } from 'react'; import { - Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, + Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, useTheme, } from '@material-ui/core'; import { useHistory } from 'react-router-dom'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import StartPage from '../../StartPage'; import t from '../../common/localization'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; const useStyles = makeStyles((theme) => ({ register: { @@ -30,6 +31,7 @@ const RegisterForm = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); + const theme = useTheme(); const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; @@ -59,7 +61,7 @@ const RegisterForm = () => { <Grid item> <Typography className={classes.link} color="primary"> <Link onClick={() => history.push('/login')}> - <ArrowBackIcon /> + {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />} </Link> </Typography> </Grid> |