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