app/src/containers/Profile/index.js (view raw)
1import React, {useState} from 'react';
2import Card from '@material-ui/core/Card';
3import CardHeader from '@material-ui/core/CardHeader';
4import CardContent from '@material-ui/core/CardContent';
5import IconButton from '@material-ui/core/IconButton';
6import Icon from '@material-ui/core/Icon';
7import CardActions from '@material-ui/core/CardActions';
8import Button from '@material-ui/core/Button';
9import {useTranslation} from 'react-i18next';
10import EditPassword from './EditPassword';
11import {useToast} from '../../contexts/Toast';
12import ProfileField from './ProfileField';
13import {makeStyles} from '@material-ui/core';
14
15const Profile = ({profile, updateProfile, logout}) => {
16 const {t} = useTranslation();
17 const {addToast} = useToast();
18 const classes = useStyles();
19 const [isEditing, setIsEditing] = useState(false);
20 const [isEditingPassword, setIsEditingPassword] = useState(false);
21 const [firstName, setFirstName] = useState(profile.firstName);
22 const [lastName, setLastName] = useState(profile.lastName);
23 const [email, setEmail] = useState(profile.email);
24 const [oldPassword, setOldPassword] = useState('');
25 const [newPassword, setNewPassword] = useState('');
26 const [errorPassword, setErrorPassword] = useState('');
27
28 const resetPassword = () => {
29 setIsEditingPassword(false);
30 setNewPassword('');
31 setOldPassword('');
32 setErrorPassword('');
33 };
34
35 const savePassword = async () => {
36 try {
37 await updateProfile({
38 old_password: oldPassword,
39 password: newPassword,
40 });
41 addToast(t('profile.password_changed'));
42 resetPassword();
43 } catch (err) {
44 if (err.kind === 'bad_data') {
45 setErrorPassword(t('profile.errors.password_nomatch'));
46 return;
47 }
48 }
49 };
50
51 if (isEditingPassword)
52 return (
53 <EditPassword
54 oldPassword={oldPassword}
55 newPassword={newPassword}
56 setOldPassword={setOldPassword}
57 setNewPassword={setNewPassword}
58 error={errorPassword}
59 save={savePassword}
60 cancel={resetPassword}
61 />
62 );
63
64 return (
65 <form
66 onSubmit={evt => {
67 if (evt.preventDefault) evt.preventDefault();
68 if (isEditing) {
69 try {
70 updateProfile({firstName, lastName, email});
71 } catch (err) {
72 console.log(err);
73 return;
74 }
75 addToast(t('profile.updated'));
76 }
77 setIsEditing(!isEditing);
78 }}
79 >
80 <Card>
81 <CardContent>
82 <ProfileField
83 name="firstName"
84 value={firstName}
85 label={t('profile.firstName')}
86 defaultValue={t('profile.not_defined', {
87 field: '$t(profile.firstName)',
88 })}
89 onChange={setFirstName}
90 isEditing={isEditing}
91 />
92 <ProfileField
93 name="lastName"
94 value={lastName}
95 label={t('profile.lastName')}
96 defaultValue={t('profile.not_defined', {
97 field: '$t(profile.lastName)',
98 })}
99 onChange={setLastName}
100 isEditing={isEditing}
101 />
102 <ProfileField
103 name="email"
104 value={email}
105 label={t('profile.email')}
106 defaultValue={t('profile.not_defined', {
107 field: '$t(profile.email)',
108 })}
109 onChange={setEmail}
110 isEditing={isEditing}
111 />
112 {isEditing && (
113 <Button
114 type="button"
115 className={classes.changePassword}
116 onClick={evt => {
117 if (evt.preventDefault) evt.preventDefault();
118 setIsEditingPassword(true);
119 }}
120 >
121 {t('profile.actions.change_password')}
122 </Button>
123 )}
124 </CardContent>
125 <CardActions className={classes.actions}>
126 {!isEditing && (
127 <Button
128 type="button"
129 color="primary"
130 onClick={() => setIsEditing(true)}
131 variant="contained"
132 >
133 {t('profile.actions.edit')}
134 </Button>
135 )}
136 {isEditing && (
137 <Button
138 type="submit"
139 color="primary"
140 onClick={() => setIsEditing(false)}
141 variant="contained"
142 >
143 {t('profile.actions.save')}
144 </Button>
145 )}
146 </CardActions>
147 </Card>
148 </form>
149 );
150};
151
152const useStyles = makeStyles(theme => ({
153 actions: {
154 marginTop: theme.spacing(2),
155 },
156 changePassword: {
157 marginTop: theme.spacing(2),
158 },
159}));
160export default Profile;