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;