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