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        <CardHeader
33          title={t('profile.actions.change_password')}
34          action={
35            <IconButton
36              color="inherit"
37              id="ChangePasswordAction"
38              type="submit"
39              title={t('profile.actions.save')}
40              disabled={oldPassword.length < 4 || newPassword.length < 4}
41            >
42              <Icon>done</Icon>
43            </IconButton>
44          }
45        />
46        <CardContent>
47          <TextField
48            label={t('profile.current_password')}
49            type="password"
50            fullWidth
51            autoFocus
52            margin="dense"
53            value={oldPassword}
54            onChange={({target: {value = ''}}) => setOldPassword(value)}
55            id="ProfileCurrentPassword"
56            name="current_password"
57            error={!!error}
58            helperText={error}
59          />
60          <TextField
61            type="password"
62            label={t('profile.new_password')}
63            fullWidth
64            margin="dense"
65            value={newPassword}
66            onChange={({target: {value = ''}}) => setNewPassword(value)}
67            id="ProfileNewPassword"
68            name="new_password"
69          />
70        </CardContent>
71        <CardActions>
72          <Button type="button" onClick={cancel}>
73            {t('profile.actions.cancel')}
74          </Button>
75          <Button
76            type="submit"
77            color="primary"
78            variant="contained"
79            disabled={oldPassword.length < 4 || newPassword.length < 4}
80          >
81            {t('profile.actions.save_new_password')}
82          </Button>
83        </CardActions>
84      </Card>
85    </form>
86  );
87};
88
89export default EditPassword;