From 2bbb45f8234b07f5c9b40e98650b2a6eead352c1 Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Tue, 15 Jun 2021 14:11:17 +0530
Subject: Fixed login screen issues

---
 modern/src/components/registration/LoginForm.js    | 142 +++++++++++----------
 modern/src/components/registration/RegisterForm.js |  19 ++-
 2 files changed, 83 insertions(+), 78 deletions(-)

(limited to 'modern/src/components')

diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index 235f0ef..8de8b5e 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -5,8 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { sessionActions } from '../../store';
 import t from '../../common/localization';
-import RegisterForm from './RegisterForm';
-import ResetPasswordForm from './ResetPasswordForm';
+import LoginPage from './../../LoginPage';
 
 const useStyles = makeStyles(theme => ({
   logoContainer: {
@@ -18,12 +17,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const forms = {
-  register: () => RegisterForm,
-  resetPassword: () => ResetPasswordForm,
-};
-
-const LoginForm = ({ setCurrentForm }) => {
+const LoginForm = () => {
 
   const classes = useStyles();
   const dispatch = useDispatch();
@@ -34,6 +28,7 @@ const LoginForm = ({ setCurrentForm }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const registrationEnabled =  useSelector(state => state.session.server ? state.session.server['registration'] : false);
+  const emailEnabled =  useSelector(state => state.session.server ? state.session.server['emailEnabled'] : false);
 
   const handleEmailChange = (event) => {
     setEmail(event.target.value);
@@ -56,73 +51,84 @@ const LoginForm = ({ setCurrentForm }) => {
     }
   }
 
+  const handleSpecialKey = e => {
+    if (e.keyCode === 13 && email && password) {
+      handleLogin(e);
+    }
+  }
+
   return (
-    <Grid container direction='column' spacing={3}>
-      {useMediaQuery(theme.breakpoints.down('md')) &&
-        <Grid item className={classes.logoContainer}>
-          <svg height="64" width="240">
-            <use xlinkHref="/logo.svg#img"></use>
-          </svg>
+    <LoginPage>
+      <Grid container direction='column' spacing={3}>
+        {useMediaQuery(theme.breakpoints.down('md')) &&
+          <Grid item className={classes.logoContainer}>
+            <svg height="64" width="240">
+              <use xlinkHref="/logo.svg#img"></use>
+            </svg>
+          </Grid>
+        }
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            error={failed}
+            label={t('userEmail')}
+            name='email'
+            value={email}
+            autoComplete='email'
+            autoFocus
+            onChange={handleEmailChange}
+            onKeyUp={handleSpecialKey}
+            helperText={failed && 'Invalid username or password'}
+            variant='filled' />
+        </Grid>
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            error={failed}
+            label={t('userPassword')}
+            name='password'
+            value={password}
+            type='password'
+            autoComplete='current-password'
+            onChange={handlePasswordChange}
+            onKeyUp={handleSpecialKey}
+            variant='filled' />
         </Grid>
-      }
-      <Grid item>
-        <TextField
-          required
-          fullWidth
-          error={failed}
-          label={t('userEmail')}
-          name='email'
-          value={email}
-          autoComplete='email'
-          autoFocus
-          onChange={handleEmailChange}
-          helperText={failed && 'Invalid username or password'}
-          variant='filled' />
-      </Grid>
-      <Grid item>
-        <TextField
-          required
-          fullWidth
-          error={failed}
-          label={t('userPassword')}
-          name='password'
-          value={password}
-          type='password'
-          autoComplete='current-password'
-          onChange={handlePasswordChange}
-          variant='filled' />
-      </Grid>
-      <Grid item>
-        <Button 
-          onClick={handleLogin}
-          variant='contained' 
-          color='secondary'
-          disabled={!email || !password}
-          fullWidth>
-          {t('loginLogin')}
-        </Button>
-      </Grid>
-      <Grid item container>
         <Grid item>
-          <Button onClick={() => setCurrentForm(forms.register)} disabled={!registrationEnabled} color="secondary">
-            {t('loginRegister')}
+          <Button 
+            onClick={handleLogin}
+            onKeyUp={handleSpecialKey}
+            variant='contained' 
+            color='secondary'
+            disabled={!email || !password}
+            fullWidth>
+            {t('loginLogin')}
           </Button>
         </Grid>
-        <Grid item xs>
-          <FormControl variant="filled" fullWidth>
-            <InputLabel>{t('loginLanguage')}</InputLabel>
-            <Select>
-              <MenuItem value="en">English</MenuItem>
-            </Select>
-          </FormControl>
+        <Grid item container>
+          <Grid item>
+            <Button onClick={() => history.push('/register')} disabled={!registrationEnabled} color="secondary">
+              {t('loginRegister')}
+            </Button>
+          </Grid>
+          <Grid item xs>
+            <FormControl variant="filled" fullWidth>
+              <InputLabel>{t('loginLanguage')}</InputLabel>
+              <Select>
+                <MenuItem value="en">English</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
         </Grid>
+        {emailEnabled && <Grid item container justify="flex-end">
+          <Grid item>
+            <Link onClick={() => history.push('/resetpassword')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>              
+          </Grid>
+        </Grid>}           
       </Grid>
-      <Grid item container justify="flex-end">
-        <Grid item>
-          <Link onClick={() => setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>              
-        </Grid>
-      </Grid>            
-    </Grid>
+    </LoginPage>
   )
 }
 
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index c2af04b..62605eb 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import LoginForm from './LoginForm';
+import LoginPage from './../../LoginPage';
 import t from './../../common/localization';
 
 const useStyles = makeStyles(theme => ({
@@ -17,13 +18,11 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const forms = {
-  login: () => LoginForm,
-};
-
-const RegisterForm = ({ setCurrentForm }) => {
+const RegisterForm = () => {
 
   const classes = useStyles();
+  const history = useHistory();
+
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -46,18 +45,18 @@ const RegisterForm = ({ setCurrentForm }) => {
   }
 
   return (
-    <>
+    <LoginPage>
       <Snackbar
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={snackbarOpen}
-        onClose={() => setCurrentForm(forms.login)}
+        onClose={() => history.push('/login')}
         autoHideDuration={6000}
         message={t('loginCreated')} />    
       <Grid container direction='column' spacing={3}>
         <Grid container item>
           <Grid item>
             <Typography className={classes.link} color='primary'>
-              <Link onClick={() => setCurrentForm(forms.login)}>
+              <Link onClick={() => history.push('/login')}>
                 <ArrowBackIcon />
               </Link>
             </Typography>
@@ -115,7 +114,7 @@ const RegisterForm = ({ setCurrentForm }) => {
           </Button>
         </Grid>
       </Grid>
-    </>
+    </LoginPage>
   )
 }
 
-- 
cgit v1.2.3