1import React from 'react';
 2import Card from '@material-ui/core/Card';
 3import {makeStyles} from '@material-ui/core/styles';
 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';
 9
10const EditPassword = ({
11  oldPassword,
12  setOldPassword,
13  newPassword,
14  setNewPassword,
15  error,
16  save,
17  cancel,
18}) => {
19  const {t} = useTranslation();
20  const classes = useStyles();
21  return (
22    <form
23      onSubmit={evt => {
24        evt?.preventDefault?.();
25        save();
26      }}
27    >
28      <Card>
29        <CardContent>
30          <TextField
31            label={t('profile.current_password')}
32            type="password"
33            fullWidth
34            autoFocus
35            margin="dense"
36            value={oldPassword}
37            onChange={({target: {value = ''}}) => setOldPassword(value)}
38            id="ProfileCurrentPassword"
39            name="current_password"
40            error={!!error}
41            helperText={error}
42          />
43          <TextField
44            type="password"
45            label={t('profile.new_password')}
46            fullWidth
47            margin="dense"
48            value={newPassword}
49            onChange={({target: {value = ''}}) => setNewPassword(value)}
50            id="ProfileNewPassword"
51            name="new_password"
52          />
53        </CardContent>
54        <CardActions className={classes.actions}>
55          <Button type="button" onClick={cancel}>
56            {t('profile.actions.cancel')}
57          </Button>
58          <Button
59            type="submit"
60            color="primary"
61            variant="contained"
62            disabled={oldPassword.length < 4 || newPassword.length < 4}
63          >
64            {t('profile.actions.save_new_password')}
65          </Button>
66        </CardActions>
67      </Card>
68    </form>
69  );
70};
71
72const useStyles = makeStyles(theme => ({
73  actions: {
74    justifyContent: 'flex-end',
75  },
76}));
77export default EditPassword;