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