1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import React, { useState } from 'react';
import {
Button, TextField, Typography, Snackbar, IconButton,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useNavigate } from 'react-router-dom';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import LoginLayout from './LoginLayout';
import { useTranslation } from '../common/components/LocalizationProvider';
import useQuery from '../common/util/useQuery';
import { snackBarDurationShortMs } from '../common/util/duration';
import { useCatch } from '../reactHelper';
const useStyles = makeStyles((theme) => ({
container: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
},
header: {
display: 'flex',
alignItems: 'center',
},
title: {
fontSize: theme.spacing(3),
fontWeight: 500,
marginLeft: theme.spacing(1),
textTransform: 'uppercase',
},
}));
const ResetPasswordPage = () => {
const classes = useStyles();
const navigate = useNavigate();
const t = useTranslation();
const query = useQuery();
const token = query.get('passwordReset');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [snackbarOpen, setSnackbarOpen] = useState(false);
const handleSubmit = useCatch(async (event) => {
event.preventDefault();
let response;
if (!token) {
response = await fetch('/api/password/reset', {
method: 'POST',
body: new URLSearchParams(`email=${encodeURIComponent(email)}`),
});
} else {
response = await fetch('/api/password/update', {
method: 'POST',
body: new URLSearchParams(`token=${encodeURIComponent(token)}&password=${encodeURIComponent(password)}`),
});
}
if (response.ok) {
setSnackbarOpen(true);
} else {
throw Error(await response.text());
}
});
return (
<LoginLayout>
<div className={classes.container}>
<div className={classes.header}>
<IconButton color="primary" onClick={() => navigate('/login')}>
<ArrowBackIcon />
</IconButton>
<Typography className={classes.title} color="primary">
{t('loginReset')}
</Typography>
</div>
{!token ? (
<TextField
required
type="email"
label={t('userEmail')}
name="email"
value={email}
autoComplete="email"
onChange={(event) => setEmail(event.target.value)}
/>
) : (
<TextField
required
label={t('userPassword')}
name="password"
value={password}
type="password"
autoComplete="current-password"
onChange={(event) => setPassword(event.target.value)}
/>
)}
<Button
variant="contained"
color="secondary"
onClick={handleSubmit}
disabled={!/(.+)@(.+)\.(.{2,})/.test(email) && !password}
fullWidth
>
{t('loginReset')}
</Button>
</div>
<Snackbar
open={snackbarOpen}
onClose={() => navigate('/login')}
autoHideDuration={snackBarDurationShortMs}
message={!token ? t('loginResetSuccess') : t('loginUpdateSuccess')}
/>
</LoginLayout>
);
};
export default ResetPasswordPage;
|
