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        />
 97        <CardContent>
 98          <ProfileField
 99            name="firstName"
100            value={firstName}
101            label={t('profile.firstName')}
102            defaultValue={t('profile.not_defined', {
103              field: '$t(profile.firstName)',
104            })}
105            onChange={setFirstName}
106            isEditing={isEditing}
107          />
108          <ProfileField
109            name="lastName"
110            value={lastName}
111            label={t('profile.lastName')}
112            defaultValue={t('profile.not_defined', {
113              field: '$t(profile.lastName)',
114            })}
115            onChange={setLastName}
116            isEditing={isEditing}
117          />
118          <ProfileField
119            name="email"
120            value={email}
121            label={t('profile.email')}
122            defaultValue={t('profile.not_defined', {
123              field: '$t(profile.email)',
124            })}
125            onChange={setEmail}
126            isEditing={isEditing}
127          />
128        </CardContent>
129        <CardActions className={classes.actions}>
130          {isEditing && (
131            <Button
132              type="button"
133              color="primary"
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 type="button" color="default" onClick={() => logout()}>
144              {t('profile.actions.logout')}
145            </Button>
146          )}
147        </CardActions>
148      </Card>
149    </form>
150  );
151};
152
153const useStyles = makeStyles(theme => ({
154  actions: {
155    marginTop: theme.spacing(2),
156  },
157}));
158export default Profile;