diff options
| -rw-r--r-- | modern/src/components/registration/LoginForm.js | 6 | ||||
| -rw-r--r-- | modern/src/components/registration/RegisterForm.js | 19 | ||||
| -rw-r--r-- | modern/src/components/registration/ResetPasswordForm.js | 100 |
3 files changed, 105 insertions, 20 deletions
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js index e5e5b30b..8775a98e 100644 --- a/modern/src/components/registration/LoginForm.js +++ b/modern/src/components/registration/LoginForm.js @@ -35,7 +35,7 @@ const LoginForm = () => { 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 handleLogin = async (event) => { + const handleSubmit = async (event) => { event.preventDefault(); const response = await fetch('/api/session', { method: 'POST', @@ -53,7 +53,7 @@ const LoginForm = () => { const handleSpecialKey = (e) => { if (e.keyCode === 13 && email && password) { - handleLogin(e); + handleSubmit(e); } }; @@ -101,7 +101,7 @@ const LoginForm = () => { </Grid> <Grid item> <Button - onClick={handleLogin} + onClick={handleSubmit} onKeyUp={handleSpecialKey} variant="contained" color="secondary" diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js index 2da33a28..d515b641 100644 --- a/modern/src/components/registration/RegisterForm.js +++ b/modern/src/components/registration/RegisterForm.js @@ -8,7 +8,7 @@ import StartPage from '../../StartPage'; import { useTranslation } from '../../LocalizationProvider'; const useStyles = makeStyles((theme) => ({ - register: { + title: { fontSize: theme.spacing(3), fontWeight: 500, marginLeft: theme.spacing(2), @@ -32,15 +32,12 @@ const RegisterForm = () => { const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); - const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; - - const handleRegister = async () => { + const handleSubmit = async () => { const response = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, email, password }), }); - if (response.ok) { setSnackbarOpen(true); } @@ -65,7 +62,7 @@ const RegisterForm = () => { </Typography> </Grid> <Grid item xs> - <Typography className={classes.register} color="primary"> + <Typography className={classes.title} color="primary"> {t('loginRegister')} </Typography> </Grid> @@ -76,7 +73,7 @@ const RegisterForm = () => { fullWidth label={t('sharedName')} name="name" - value={name || ''} + value={name} autoComplete="name" autoFocus onChange={(event) => setName(event.target.value)} @@ -90,7 +87,7 @@ const RegisterForm = () => { type="email" label={t('userEmail')} name="email" - value={email || ''} + value={email} autoComplete="email" onChange={(event) => setEmail(event.target.value)} variant="filled" @@ -102,7 +99,7 @@ const RegisterForm = () => { fullWidth label={t('userPassword')} name="password" - value={password || ''} + value={password} type="password" autoComplete="current-password" onChange={(event) => setPassword(event.target.value)} @@ -113,8 +110,8 @@ const RegisterForm = () => { <Button variant="contained" color="secondary" - onClick={handleRegister} - disabled={submitDisabled()} + onClick={handleSubmit} + disabled={!name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password} fullWidth > {t('loginRegister')} diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js index f4dd2e4d..c581b5e5 100644 --- a/modern/src/components/registration/ResetPasswordForm.js +++ b/modern/src/components/registration/ResetPasswordForm.js @@ -1,9 +1,97 @@ -import React from 'react'; +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 StartPage from '../../StartPage'; +import { useTranslation } from '../../LocalizationProvider'; -const ResetPasswordForm = () => ( - <> - <div>Reset Password Comming Soon!!!</div> - </> -); +const useStyles = makeStyles((theme) => ({ + title: { + fontSize: theme.spacing(3), + fontWeight: 500, + marginLeft: theme.spacing(2), + textTransform: 'uppercase', + }, + link: { + fontSize: theme.spacing(3), + fontWeight: 500, + marginTop: theme.spacing(0.5), + cursor: 'pointer', + }, +})); + +const ResetPasswordForm = () => { + const classes = useStyles(); + const history = useHistory(); + const t = useTranslation(); + + const [email, setEmail] = useState(''); + const [snackbarOpen, setSnackbarOpen] = useState(false); + + const handleSubmit = async (event) => { + event.preventDefault(); + const response = await fetch('/api/password/reset', { + method: 'POST', + body: new URLSearchParams(`email=${encodeURIComponent(email)}`), + }); + if (response.ok) { + setSnackbarOpen(true); + } + }; + + return ( + <StartPage> + <Snackbar + anchorOrigin={{ vertical: 'top', horizontal: 'center' }} + open={snackbarOpen} + onClose={() => history.push('/login')} + autoHideDuration={6000} + message={t('loginResetSuccess')} + /> + <Grid container direction="column" spacing={2}> + <Grid container item> + <Grid item> + <Typography className={classes.link} color="primary"> + <Link onClick={() => history.push('/login')}> + <ArrowBackIcon /> + </Link> + </Typography> + </Grid> + <Grid item xs> + <Typography className={classes.title} color="primary"> + {t('loginReset')} + </Typography> + </Grid> + </Grid> + <Grid item> + <TextField + required + fullWidth + type="email" + label={t('userEmail')} + name="email" + value={email} + autoComplete="email" + onChange={(event) => setEmail(event.target.value)} + variant="filled" + /> + </Grid> + <Grid item> + <Button + variant="contained" + color="secondary" + onClick={handleSubmit} + disabled={!/(.+)@(.+)\.(.{2,})/.test(email)} + fullWidth + > + {t('loginReset')} + </Button> + </Grid> + </Grid> + </StartPage> + ); +}; export default ResetPasswordForm; |