diff options
Diffstat (limited to 'modern/src/components/registration')
| -rw-r--r-- | modern/src/components/registration/LoginForm.js | 71 | ||||
| -rw-r--r-- | modern/src/components/registration/RegisterForm.js | 82 | ||||
| -rw-r--r-- | modern/src/components/registration/ResetPasswordForm.js | 13 |
3 files changed, 87 insertions, 79 deletions
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js index 382b4fdc..e083541c 100644 --- a/modern/src/components/registration/LoginForm.js +++ b/modern/src/components/registration/LoginForm.js @@ -1,24 +1,25 @@ import React, { useState } from 'react'; -import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core'; +import { + Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, +} from '@material-ui/core'; 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 StartPage from './../../StartPage'; +import StartPage from '../../StartPage'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ logoContainer: { textAlign: 'center', color: theme.palette.primary.main, }, resetPassword: { cursor: 'pointer', - } + }, })); const LoginForm = () => { - const classes = useStyles(); const dispatch = useDispatch(); const history = useHistory(); @@ -27,16 +28,16 @@ const LoginForm = () => { const [failed, setFailed] = useState(false); 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 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); - } + }; const handlePasswordChange = (event) => { setPassword(event.target.value); - } + }; const handleLogin = async (event) => { event.preventDefault(); @@ -49,38 +50,40 @@ const LoginForm = () => { setFailed(true); setPassword(''); } - } + }; - const handleSpecialKey = e => { + const handleSpecialKey = (e) => { if (e.keyCode === 13 && email && password) { handleLogin(e); } - } + }; return ( <StartPage> - <Grid container direction='column' spacing={2}> - {useMediaQuery(theme.breakpoints.down('md')) && + <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"></use> + <use xlinkHref="/logo.svg#img" /> </svg> </Grid> - } + )} <Grid item> <TextField required fullWidth error={failed} label={t('userEmail')} - name='email' + name="email" value={email} - autoComplete='email' + autoComplete="email" autoFocus onChange={handleEmailChange} onKeyUp={handleSpecialKey} helperText={failed && 'Invalid username or password'} - variant='filled' /> + variant="filled" + /> </Grid> <Grid item> <TextField @@ -88,22 +91,24 @@ const LoginForm = () => { fullWidth error={failed} label={t('userPassword')} - name='password' + name="password" value={password} - type='password' - autoComplete='current-password' + type="password" + autoComplete="current-password" onChange={handlePasswordChange} onKeyUp={handleSpecialKey} - variant='filled' /> + variant="filled" + /> </Grid> <Grid item> - <Button + <Button onClick={handleLogin} onKeyUp={handleSpecialKey} - variant='contained' - color='secondary' + variant="contained" + color="secondary" disabled={!email || !password} - fullWidth> + fullWidth + > {t('loginLogin')} </Button> </Grid> @@ -122,14 +127,16 @@ const LoginForm = () => { </FormControl> </Grid> </Grid> - {emailEnabled && <Grid item container justify="flex-end"> + {emailEnabled && ( + <Grid item container justify="flex-end"> <Grid item> - <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> + <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> </Grid> - </Grid>} + </Grid> + )} </Grid> </StartPage> - ) -} + ); +}; export default LoginForm; diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js index b2a8222a..06f53551 100644 --- a/modern/src/components/registration/RegisterForm.js +++ b/modern/src/components/registration/RegisterForm.js @@ -1,27 +1,28 @@ import React, { useState } from 'react'; -import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core'; +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 StartPage from './../../StartPage'; -import t from './../../common/localization'; +import StartPage from '../../StartPage'; +import t from '../../common/localization'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ register: { fontSize: theme.spacing(3), fontWeight: 500, marginLeft: theme.spacing(2), - textTransform: "uppercase" + textTransform: 'uppercase', }, link: { fontSize: theme.spacing(3), fontWeight: 500, marginTop: theme.spacing(0.5), - cursor: 'pointer' - } + cursor: 'pointer', + }, })); const RegisterForm = () => { - const classes = useStyles(); const history = useHistory(); @@ -30,21 +31,19 @@ const RegisterForm = () => { const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); - const submitDisabled = () => { - return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; - } + const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; const handleRegister = async () => { const response = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({name, email, password}) + body: JSON.stringify({ name, email, password }), }); if (response.ok) { setSnackbarOpen(true); - } - } + } + }; return ( <StartPage> @@ -53,18 +52,19 @@ const RegisterForm = () => { open={snackbarOpen} onClose={() => history.push('/login')} autoHideDuration={6000} - message={t('loginCreated')} /> - <Grid container direction='column' spacing={2}> + message={t('loginCreated')} + /> + <Grid container direction="column" spacing={2}> <Grid container item> <Grid item> - <Typography className={classes.link} color='primary'> + <Typography className={classes.link} color="primary"> <Link onClick={() => history.push('/login')}> <ArrowBackIcon /> </Link> </Typography> </Grid> <Grid item xs> - <Typography className={classes.register} color='primary'> + <Typography className={classes.register} color="primary"> {t('loginRegister')} </Typography> </Grid> @@ -74,50 +74,54 @@ const RegisterForm = () => { required fullWidth label={t('sharedName')} - name='name' + name="name" value={name || ''} - autoComplete='name' + autoComplete="name" autoFocus - onChange={event => setName(event.target.value)} - variant='filled' /> + onChange={(event) => setName(event.target.value)} + variant="filled" + /> </Grid> <Grid item> <TextField required fullWidth - type='email' + type="email" label={t('userEmail')} - name='email' + name="email" value={email || ''} - autoComplete='email' - onChange={event => setEmail(event.target.value)} - variant='filled' /> + autoComplete="email" + onChange={(event) => setEmail(event.target.value)} + variant="filled" + /> </Grid> <Grid item> <TextField required fullWidth label={t('userPassword')} - name='password' + name="password" value={password || ''} - type='password' - autoComplete='current-password' - onChange={event => setPassword(event.target.value)} - variant='filled' /> + type="password" + autoComplete="current-password" + onChange={(event) => setPassword(event.target.value)} + variant="filled" + /> </Grid> <Grid item> <Button - variant='contained' - color="secondary" - onClick={handleRegister} + variant="contained" + color="secondary" + onClick={handleRegister} disabled={submitDisabled()} - fullWidth> - {t('loginRegister')} + fullWidth + > + {t('loginRegister')} </Button> </Grid> </Grid> </StartPage> - ) -} + ); +}; export default RegisterForm; diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js index c268f808..f4dd2e4d 100644 --- a/modern/src/components/registration/ResetPasswordForm.js +++ b/modern/src/components/registration/ResetPasswordForm.js @@ -1,12 +1,9 @@ import React from 'react'; -const ResetPasswordForm = () => { - - return ( - <> - <div>Reset Password Comming Soon!!!</div> - </> - ) -} +const ResetPasswordForm = () => ( + <> + <div>Reset Password Comming Soon!!!</div> + </> +); export default ResetPasswordForm; |