added multiple language support with related layout directions

2 files changed, 22 insertions, 14 deletions

diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index e6da05e3..c5c1d6f2 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 06f53551..3a249c60 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>