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