diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-06-15 14:11:17 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-06-15 14:11:17 +0530 |
commit | 2bbb45f8234b07f5c9b40e98650b2a6eead352c1 (patch) | |
tree | 66bbaa2decf8fb24bfc6e32069a5ad22a0ec59e2 /modern/src/components/registration | |
parent | b7928f760ab557be29ade8c4b8e1605feed6fd7f (diff) | |
download | trackermap-web-2bbb45f8234b07f5c9b40e98650b2a6eead352c1.tar.gz trackermap-web-2bbb45f8234b07f5c9b40e98650b2a6eead352c1.tar.bz2 trackermap-web-2bbb45f8234b07f5c9b40e98650b2a6eead352c1.zip |
Fixed login screen issues
Diffstat (limited to 'modern/src/components/registration')
-rw-r--r-- | modern/src/components/registration/LoginForm.js | 142 | ||||
-rw-r--r-- | modern/src/components/registration/RegisterForm.js | 19 |
2 files changed, 83 insertions, 78 deletions
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js index 235f0efa..8de8b5e6 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 c2af04ba..62605eb3 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> ) } |