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