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