frontend/containers/ResetPassword/index.tsx (view raw)
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;