Merge pull request #861 from mail2bishnoi/login_screen_fixes

Fixed login screen issues

4 files changed, 95 insertions, 88 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index 7db5f128..3641339e 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -3,7 +3,6 @@ import { ThemeProvider } from '@material-ui/core/styles';
 import { Switch, Route } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline';
 import MainPage from './MainPage';
-import LoginPage from './LoginPage';
 import RouteReportPage from './reports/RouteReportPage';
 import ServerPage from './admin/ServerPage';
 import UsersPage from './admin/UsersPage';
@@ -32,6 +31,10 @@ import MaintenancePage from './settings/MaintenancePage';
 import StatisticsPage from './admin/StatisticsPage';
 import CachingController from './CachingController';
 
+import LoginForm from './components/registration/LoginForm';
+import RegisterForm from './components/registration/RegisterForm';
+import ResetPasswordForm from './components/registration/ResetPasswordForm';
+
 import theme from './theme';
 
 const App = () => {
@@ -43,7 +46,9 @@ const App = () => {
       <SocketController />
       <CachingController />
       <Switch>
-        <Route exact path='/login' component={LoginPage} />
+        <Route exact path='/login' component={LoginForm} />
+        <Route exact path='/register' component={RegisterForm} />
+        <Route exact path='/reset-password' component={ResetPasswordForm} />
         <Route>
           {!initialized ? (<LinearProgress />) : (
             <Switch>
diff --git a/modern/src/LoginPage.js b/modern/src/StartPage.js
index 6843e12b..0a086179 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/StartPage.js
@@ -1,9 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useMediaQuery, makeStyles, Paper } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 
-import LoginForm from './components/registration/LoginForm';
-
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
@@ -42,12 +40,10 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const LoginPage = () => {
+const StartPage = ({ children }) => {
   const classes = useStyles();
   const theme = useTheme();
 
-  const [CurrentForm, setCurrentForm] = useState(() => LoginForm);
-
   return (
     <main className={classes.root}>
       <div className={classes.sidebar}>
@@ -59,10 +55,11 @@ const LoginPage = () => {
       </div>
       <Paper className={classes.paper}>
         <form className={classes.form}>
-          <CurrentForm setCurrentForm={setCurrentForm} />
+          { children }
         </form>
       </Paper>
     </main>
   )
 }
-export default LoginPage;
+
+export default StartPage;
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index 235f0efa..d2a57a2c 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 StartPage from './../../StartPage';
 
 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>
+    <StartPage>
+      <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('/reset-password')} 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>
+    </StartPage>
   )
 }
 
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index c2af04ba..a532d09c 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 StartPage from './../../StartPage';
 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 (
-    <>
+    <StartPage>
       <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>
-    </>
+    </StartPage>
   )
 }