1import React from 'react';
 2import Card from '@material-ui/core/Card';
 3import CardContent from '@material-ui/core/CardContent';
 4import CardActions from '@material-ui/core/CardActions';
 5import Button from '@material-ui/core/Button';
 6import {useTranslation} from 'react-i18next';
 7import TextField from '@material-ui/core/TextField';
 8
 9const EditPassword = ({
10  oldPassword,
11  setOldPassword,
12  newPassword,
13  setNewPassword,
14  error,
15  save,
16  cancel,
17}) => {
18  const {t} = useTranslation();
19
20  return (
21    <form
22      onSubmit={evt => {
23        // Stop editing
24        if (evt.preventDefault) 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>
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
72export default EditPassword;