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