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 savePassword = async () => {
29 try {
30 await updateProfile({
31 old_password: oldPassword,
32 password: newPassword,
33 });
34 addToast(t('profile.password_changed'));
35 } catch (err) {
36 if (err.kind === 'bad_data') {
37 setErrorPassword(t('profile.errors.password_nomatch'));
38 return;
39 }
40 }
41 setIsEditingPassword(false);
42 };
43
44 if (isEditingPassword)
45 return (
46 <EditPassword
47 oldPassword={oldPassword}
48 newPassword={newPassword}
49 setOldPassword={setOldPassword}
50 setNewPassword={setNewPassword}
51 error={errorPassword}
52 save={savePassword}
53 cancel={() => {
54 setIsEditingPassword(false);
55 setNewPassword('');
56 setOldPassword('');
57 }}
58 />
59 );
60
61 return (
62 <form
63 onSubmit={evt => {
64 if (evt.preventDefault) evt.preventDefault();
65 if (isEditing) {
66 try {
67 updateProfile({firstName, lastName, email});
68 } catch (err) {
69 console.log(err);
70 return;
71 }
72 addToast(t('profile.updated'));
73 }
74 setIsEditing(!isEditing);
75 }}
76 >
77 <Card>
78 <CardHeader
79 action={
80 <IconButton
81 color="inherit"
82 edge="end"
83 id="EditProfileAction"
84 type="submit"
85 title={
86 isEditing
87 ? t('profile.actions.save')
88 : t('profile.actions.edit')
89 }
90 >
91 <Icon>{isEditing ? 'done' : 'edit'}</Icon>
92 </IconButton>
93 }
94 title={t('profile.title')}
95 />
96 <CardContent>
97 <ProfileField
98 name="firstName"
99 value={firstName}
100 label={t('profile.firstName')}
101 defaultValue={t('profile.not_defined', {
102 field: '$t(profile.firstName)',
103 })}
104 onChange={setFirstName}
105 isEditing={isEditing}
106 />
107 <ProfileField
108 name="lastName"
109 value={lastName}
110 label={t('profile.lastName')}
111 defaultValue={t('profile.not_defined', {
112 field: '$t(profile.lastName)',
113 })}
114 onChange={setLastName}
115 isEditing={isEditing}
116 />
117 <ProfileField
118 name="email"
119 value={email}
120 label={t('profile.email')}
121 defaultValue={t('profile.not_defined', {
122 field: '$t(profile.email)',
123 })}
124 onChange={setEmail}
125 isEditing={isEditing}
126 />
127 </CardContent>
128 <CardActions className={classes.actions}>
129 {isEditing && (
130 <Button
131 type="button"
132 color="primary"
133 size="small"
134 onClick={evt => {
135 if (evt.preventDefault) evt.preventDefault();
136 setIsEditingPassword(true);
137 }}
138 >
139 {t('profile.actions.change_password')}
140 </Button>
141 )}
142 {!isEditing && (
143 <Button
144 type="button"
145 color="secondary"
146 size="small"
147 onClick={() => logout()}
148 >
149 {t('profile.actions.logout')}
150 </Button>
151 )}
152 </CardActions>
153 </Card>
154 </form>
155 );
156};
157
158const useStyles = makeStyles(theme => ({
159 actions: {
160 marginTop: theme.spacing(2),
161 },
162}));
163export default Profile;