frontend/containers/Profile/EditPassword.tsx (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 evt?.preventDefault?.();
25 save();
26 }}
27 >
28 <Card>
29 <CardContent>
30 <TextField
31 label={t('profile.current_password')}
32 type="password"
33 fullWidth
34 autoFocus
35 margin="dense"
36 value={oldPassword}
37 onChange={({target: {value = ''}}) => setOldPassword(value)}
38 id="ProfileCurrentPassword"
39 name="current_password"
40 error={!!error}
41 helperText={error}
42 />
43 <TextField
44 type="password"
45 label={t('profile.new_password')}
46 fullWidth
47 margin="dense"
48 value={newPassword}
49 onChange={({target: {value = ''}}) => setNewPassword(value)}
50 id="ProfileNewPassword"
51 name="new_password"
52 />
53 </CardContent>
54 <CardActions className={classes.actions}>
55 <Button type="button" onClick={cancel}>
56 {t('profile.actions.cancel')}
57 </Button>
58 <Button
59 type="submit"
60 color="primary"
61 variant="contained"
62 disabled={oldPassword.length < 4 || newPassword.length < 4}
63 >
64 {t('profile.actions.save_new_password')}
65 </Button>
66 </CardActions>
67 </Card>
68 </form>
69 );
70};
71
72const useStyles = makeStyles(theme => ({
73 actions: {
74 justifyContent: 'flex-end',
75 },
76}));
77export default EditPassword;