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;