frontend/containers/ResetPassword/index.tsx (view raw)
1import React from 'react';
2import Card from '@material-ui/core/Card';
3import CardHeader from '@material-ui/core/CardHeader';
4import CardContent from '@material-ui/core/CardContent';
5import CardActions from '@material-ui/core/CardActions';
6import Button from '@material-ui/core/Button';
7import {useTranslation} from 'react-i18next';
8import TextField from '@material-ui/core/TextField';
9import {makeStyles} from '@material-ui/core/styles';
10const ResetPassword = ({
11 password,
12 setPassword,
13 passwordConfirmation,
14 setPasswordConfirmation,
15 error,
16 isLoading,
17}) => {
18 const {t} = useTranslation();
19 const classes = useStyles();
20 return (
21 <Card>
22 <CardHeader title={t('profile.actions.change_password')} />
23 <CardContent>
24 <TextField
25 label={t('lost_password.password')}
26 type="password"
27 fullWidth
28 autoFocus
29 margin="dense"
30 value={password}
31 onChange={({target: {value = ''}}) => setPassword(value)}
32 id="ResetPasswordNewPassword"
33 name="new_password"
34 error={!!error}
35 helperText={error}
36 />
37 <TextField
38 type="password"
39 label={t('lost_password.password_confirmation')}
40 fullWidth
41 margin="dense"
42 value={passwordConfirmation}
43 onChange={({target: {value = ''}}) => setPasswordConfirmation(value)}
44 id="ResetPasswordNewPasswordConfirmation"
45 name="new_password_confirmation"
46 />
47 </CardContent>
48 <CardActions className={classes.actions}>
49 <Button
50 type="submit"
51 color="primary"
52 variant="contained"
53 disabled={
54 isLoading ||
55 password.length < 4 ||
56 password !== passwordConfirmation
57 }
58 >
59 {t('lost_password.actions.save_new_password')}
60 </Button>
61 </CardActions>
62 </Card>
63 );
64};
65const useStyles = makeStyles(theme => ({
66 actions: {
67 justifyContent: 'flex-end',
68 marginTop: theme.spacing(2),
69 },
70}));
71export default ResetPassword;