added multiple language support with related layout directions

1 files changed, 18 insertions, 12 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;