app/src/containers/Profile/EditPassword.js (view raw)
1import React from 'react';
2import Card from '@material-ui/core/Card';
3import {makeStyles} from '@material-ui/core/styles';
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';
9
10const EditPassword = ({
11 oldPassword,
12 setOldPassword,
13 newPassword,
14 setNewPassword,
15 error,
16 save,
17 cancel,
18}) => {
19 const {t} = useTranslation();
20 const classes = useStyles();
21 return (
22 <form
23 onSubmit={evt => {
24 // Stop editing
25 if (evt.preventDefault) evt.preventDefault();
26 save();
27 }}
28 >
29 <Card>
30 <CardContent>
31 <TextField
32 label={t('profile.current_password')}
33 type="password"
34 fullWidth
35 autoFocus
36 margin="dense"
37 value={oldPassword}
38 onChange={({target: {value = ''}}) => setOldPassword(value)}
39 id="ProfileCurrentPassword"
40 name="current_password"
41 error={!!error}
42 helperText={error}
43 />
44 <TextField
45 type="password"
46 label={t('profile.new_password')}
47 fullWidth
48 margin="dense"
49 value={newPassword}
50 onChange={({target: {value = ''}}) => setNewPassword(value)}
51 id="ProfileNewPassword"
52 name="new_password"
53 />
54 </CardContent>
55 <CardActions className={classes.actions}>
56 <Button type="button" onClick={cancel}>
57 {t('profile.actions.cancel')}
58 </Button>
59 <Button
60 type="submit"
61 color="primary"
62 variant="contained"
63 disabled={oldPassword.length < 4 || newPassword.length < 4}
64 >
65 {t('profile.actions.save_new_password')}
66 </Button>
67 </CardActions>
68 </Card>
69 </form>
70 );
71};
72
73const useStyles = makeStyles(theme => ({
74 actions: {
75 justifyContent: 'flex-end',
76 },
77}));
78export default EditPassword;