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 <CardHeader
82 action={
83 <IconButton
84 color="inherit"
85 id="EditProfileAction"
86 type="submit"
87 title={
88 isEditing
89 ? t('profile.actions.save')
90 : t('profile.actions.edit')
91 }
92 >
93 <Icon>{isEditing ? 'done' : 'edit'}</Icon>
94 </IconButton>
95 }
96 title={t('profile.title')}
97 />
98 <CardContent>
99 <ProfileField
100 name="firstName"
101 value={firstName}
102 label={t('profile.firstName')}
103 defaultValue={t('profile.not_defined', {
104 field: '$t(profile.firstName)',
105 })}
106 onChange={setFirstName}
107 isEditing={isEditing}
108 />
109 <ProfileField
110 name="lastName"
111 value={lastName}
112 label={t('profile.lastName')}
113 defaultValue={t('profile.not_defined', {
114 field: '$t(profile.lastName)',
115 })}
116 onChange={setLastName}
117 isEditing={isEditing}
118 />
119 <ProfileField
120 name="email"
121 value={email}
122 label={t('profile.email')}
123 defaultValue={t('profile.not_defined', {
124 field: '$t(profile.email)',
125 })}
126 onChange={setEmail}
127 isEditing={isEditing}
128 />
129 </CardContent>
130 <CardActions className={classes.actions}>
131 {isEditing && (
132 <Button
133 type="button"
134 color="primary"
135 onClick={evt => {
136 if (evt.preventDefault) evt.preventDefault();
137 setIsEditingPassword(true);
138 }}
139 >
140 {t('profile.actions.change_password')}
141 </Button>
142 )}
143 {!isEditing && (
144 <Button type="button" color="default" onClick={() => logout()}>
145 {t('profile.actions.logout')}
146 </Button>
147 )}
148 </CardActions>
149 </Card>
150 </form>
151 );
152};
153
154const useStyles = makeStyles(theme => ({
155 actions: {
156 marginTop: theme.spacing(2),
157 },
158}));
159export default Profile;