aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/components/registration/LoginForm.js6
-rw-r--r--modern/src/components/registration/RegisterForm.js19
-rw-r--r--modern/src/components/registration/ResetPasswordForm.js100
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;