frontend/containers/Profile/index.js (view raw)
1import {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 {makeStyles} from '@material-ui/core';
7import {useTranslation} from 'react-i18next';
8import EditPassword from './EditPassword';
9import ProfileField from './ProfileField';
10import useToastStore from '../../stores/useToastStore';
11
12const Profile = ({profile, updateProfile, logout}) => {
13 const {t} = useTranslation();
14 const addToast = useToastStore(s => s.addToast);
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.message === 'Auth.form.error.password.matching') {
42 setErrorPassword(t('profile.errors.password_nomatch'));
43 return;
44 }
45 }
46 };
47
48 const onSave = async () => {
49 try {
50 await updateProfile({firstName, lastName, email});
51 setIsEditing(false);
52 } catch (error) {
53 console.error(error);
54 }
55 };
56
57 if (isEditingPassword)
58 return (
59 <EditPassword
60 oldPassword={oldPassword}
61 newPassword={newPassword}
62 setOldPassword={setOldPassword}
63 setNewPassword={setNewPassword}
64 error={errorPassword}
65 save={savePassword}
66 cancel={resetPassword}
67 />
68 );
69
70 return (
71 <form>
72 <Card className={classes.container}>
73 <CardContent>
74 <ProfileField
75 name="firstName"
76 value={firstName}
77 label={t('profile.firstName')}
78 defaultValue={t('profile.not_defined', {
79 field: '$t(profile.firstName)',
80 })}
81 onChange={setFirstName}
82 isEditing={isEditing}
83 />
84 <ProfileField
85 name="lastName"
86 value={lastName}
87 label={t('profile.lastName')}
88 defaultValue={t('profile.not_defined', {
89 field: '$t(profile.lastName)',
90 })}
91 onChange={setLastName}
92 isEditing={isEditing}
93 />
94 <ProfileField
95 name="email"
96 value={email}
97 label={t('profile.email')}
98 defaultValue={t('profile.not_defined', {
99 field: '$t(profile.email)',
100 })}
101 onChange={setEmail}
102 isEditing={isEditing}
103 />
104 </CardContent>
105 <CardActions className={classes.actions}>
106 {!isEditing && (
107 <>
108 <Button type="button" onClick={() => logout()}>
109 {t('profile.actions.logout')}
110 </Button>
111 <Button
112 type="button"
113 color="primary"
114 onClick={() => setIsEditing(true)}
115 variant="contained"
116 >
117 {t('profile.actions.edit')}
118 </Button>
119 </>
120 )}
121 {isEditing && (
122 <>
123 <Button
124 type="button"
125 onClick={evt => {
126 if (evt.preventDefault) evt.preventDefault();
127 setIsEditingPassword(true);
128 }}
129 >
130 {t('profile.actions.change_password')}
131 </Button>
132 <Button
133 type="submit"
134 color="primary"
135 onClick={onSave}
136 variant="contained"
137 >
138 {t('profile.actions.save')}
139 </Button>
140 </>
141 )}
142 </CardActions>
143 </Card>
144 </form>
145 );
146};
147
148const useStyles = makeStyles(theme => ({
149 actions: {
150 marginTop: theme.spacing(2),
151 justifyContent: 'flex-end',
152 },
153}));
154
155export default Profile;