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