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;