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        <CardContent>
 82          <ProfileField
 83            name="firstName"
 84            value={firstName}
 85            label={t('profile.firstName')}
 86            defaultValue={t('profile.not_defined', {
 87              field: '$t(profile.firstName)',
 88            })}
 89            onChange={setFirstName}
 90            isEditing={isEditing}
 91          />
 92          <ProfileField
 93            name="lastName"
 94            value={lastName}
 95            label={t('profile.lastName')}
 96            defaultValue={t('profile.not_defined', {
 97              field: '$t(profile.lastName)',
 98            })}
 99            onChange={setLastName}
100            isEditing={isEditing}
101          />
102          <ProfileField
103            name="email"
104            value={email}
105            label={t('profile.email')}
106            defaultValue={t('profile.not_defined', {
107              field: '$t(profile.email)',
108            })}
109            onChange={setEmail}
110            isEditing={isEditing}
111          />
112          {isEditing && (
113            <Button
114              type="button"
115              className={classes.changePassword}
116              onClick={evt => {
117                if (evt.preventDefault) evt.preventDefault();
118                setIsEditingPassword(true);
119              }}
120            >
121              {t('profile.actions.change_password')}
122            </Button>
123          )}
124        </CardContent>
125        <CardActions className={classes.actions}>
126          {!isEditing && (
127            <Button
128              type="button"
129              color="primary"
130              onClick={() => setIsEditing(true)}
131              variant="contained"
132            >
133              {t('profile.actions.edit')}
134            </Button>
135          )}
136          {isEditing && (
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        </CardActions>
147      </Card>
148    </form>
149  );
150};
151
152const useStyles = makeStyles(theme => ({
153  actions: {
154    marginTop: theme.spacing(2),
155  },
156  changePassword: {
157    marginTop: theme.spacing(2),
158  },
159}));
160export default Profile;