app/src/containers/Profile/EditPassword.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 EditPassword = ({
13 oldPassword,
14 setOldPassword,
15 newPassword,
16 setNewPassword,
17 error,
18 save,
19 cancel,
20}) => {
21 const {t} = useTranslation();
22
23 return (
24 <form
25 onSubmit={evt => {
26 // Stop editing
27 if (evt.preventDefault) evt.preventDefault();
28 save();
29 }}
30 >
31 <Card>
32 <CardHeader
33 title={t('profile.actions.change_password')}
34 action={
35 <IconButton
36 color="inherit"
37 edge="end"
38 id="ChangePasswordAction"
39 type="submit"
40 title={t('profile.actions.save')}
41 >
42 <Icon>done</Icon>
43 </IconButton>
44 }
45 />
46 <CardContent>
47 <TextField
48 label={t('profile.current_password')}
49 type="password"
50 fullWidth
51 autoFocus
52 margin="dense"
53 value={oldPassword}
54 onChange={({target: {value = ''}}) => setOldPassword(value)}
55 id="ProfileCurrentPassword"
56 name="current_password"
57 error={!!error}
58 helperText={error}
59 />
60 <TextField
61 type="password"
62 label={t('profile.new_password')}
63 fullWidth
64 margin="dense"
65 value={newPassword}
66 onChange={({target: {value = ''}}) => setNewPassword(value)}
67 id="ProfileNewPassword"
68 name="new_password"
69 />
70 </CardContent>
71 <CardActions>
72 <Button
73 type="button"
74 color="secondary"
75 size="small"
76 variant="contained"
77 onClick={cancel}
78 >
79 {t('profile.actions.cancel')}
80 </Button>
81 <Button
82 type="submit"
83 color="primary"
84 size="small"
85 variant="contained"
86 disabled={oldPassword.length < 4 || newPassword.length < 4}
87 >
88 {t('profile.actions.save_new_password')}
89 </Button>
90 </CardActions>
91 </Card>
92 </form>
93 );
94};
95
96export default EditPassword;