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