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