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 IconButton from '@material-ui/core/IconButton';
10import Icon from '@material-ui/core/Icon';
11
12const ResetPassword = ({
13  password,
14  setPassword,
15  passwordConfirmation,
16  setPasswordConfirmation,
17  error,
18  isLoading,
19}) => {
20  const {t} = useTranslation();
21  return (
22    <Card>
23      <CardHeader
24        title={t('profile.actions.change_password')}
25        action={
26          <IconButton
27            color="inherit"
28            edge="end"
29            id="ChangePasswordAction"
30            type="submit"
31            title={t('profile.actions.save')}
32          >
33            <Icon>done</Icon>
34          </IconButton>
35        }
36      />
37      <CardContent>
38        <TextField
39          label={t('lost_password.password')}
40          type="password"
41          fullWidth
42          autoFocus
43          margin="dense"
44          value={password}
45          onChange={({target: {value = ''}}) => setPassword(value)}
46          id="ResetPasswordNewPassword"
47          name="new_password"
48          error={!!error}
49          helperText={error}
50        />
51        <TextField
52          type="password"
53          label={t('lost_password.password_confirmation')}
54          fullWidth
55          margin="dense"
56          value={passwordConfirmation}
57          onChange={({target: {value = ''}}) => setPasswordConfirmation(value)}
58          id="ResetPasswordNewPasswordConfirmation"
59          name="new_password_confirmation"
60        />
61      </CardContent>
62      <CardActions>
63        <Button
64          type="submit"
65          color="primary"
66          size="small"
67          variant="contained"
68          disabled={
69            isLoading ||
70            password.length < 4 ||
71            password !== passwordConfirmation
72          }
73        >
74          {t('lost_password.actions.save_new_password')}
75        </Button>
76      </CardActions>
77    </Card>
78  );
79};
80
81export default ResetPassword;