From 2bbb45f8234b07f5c9b40e98650b2a6eead352c1 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Tue, 15 Jun 2021 14:11:17 +0530 Subject: Fixed login screen issues --- modern/src/App.js | 9 +- modern/src/LoginPage.js | 11 +- modern/src/components/registration/LoginForm.js | 142 +++++++++++---------- modern/src/components/registration/RegisterForm.js | 19 ++- 4 files changed, 94 insertions(+), 87 deletions(-) (limited to 'modern/src') diff --git a/modern/src/App.js b/modern/src/App.js index 7db5f12..36cd2b5 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 = () => { - + + + {!initialized ? () : ( diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 6843e12..4c19dff 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.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 LoginPage = ({ children }) => { const classes = useStyles(); const theme = useTheme(); - const [CurrentForm, setCurrentForm] = useState(() => LoginForm); - return (
@@ -59,10 +55,11 @@ const LoginPage = () => {
- + { children }
) } + export default LoginPage; 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 ( - - {useMediaQuery(theme.breakpoints.down('md')) && - - - - + + + {useMediaQuery(theme.breakpoints.down('md')) && + + + + + + } + + + + + - } - - - - - - - - - - - - - - {t('loginLanguage')} - - + + + + + + + {t('loginLanguage')} + + + + {emailEnabled && + + history.push('/resetpassword')} className={classes.resetPassword} underline="none">{t('loginReset')} + + } - - - setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')} - - - + ) } 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 ( - <> + setCurrentForm(forms.login)} + onClose={() => history.push('/login')} autoHideDuration={6000} message={t('loginCreated')} /> - setCurrentForm(forms.login)}> + history.push('/login')}> @@ -115,7 +114,7 @@ const RegisterForm = ({ setCurrentForm }) => { - + ) } -- cgit v1.2.3