1import React, {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 {useTranslation} from 'react-i18next';
  7import EditPassword from './EditPassword';
  8import {useToast} from '../../contexts/Toast';
  9import ProfileField from './ProfileField';
 10import {makeStyles} from '@material-ui/core';
 11const Profile = ({profile, updateProfile, logout}) => {
 12  const {t} = useTranslation();
 13  const {addToast} = useToast();
 14  const classes = useStyles();
 15  const [isEditing, setIsEditing] = useState(false);
 16  const [isEditingPassword, setIsEditingPassword] = useState(false);
 17  const [firstName, setFirstName] = useState(profile.firstName);
 18  const [lastName, setLastName] = useState(profile.lastName);
 19  const [email, setEmail] = useState(profile.email);
 20  const [oldPassword, setOldPassword] = useState('');
 21  const [newPassword, setNewPassword] = useState('');
 22  const [errorPassword, setErrorPassword] = useState('');
 23
 24  const resetPassword = () => {
 25    setIsEditingPassword(false);
 26    setNewPassword('');
 27    setOldPassword('');
 28    setErrorPassword('');
 29  };
 30
 31  const savePassword = async () => {
 32    try {
 33      await updateProfile({
 34        old_password: oldPassword,
 35        password: newPassword,
 36      });
 37      addToast(t('profile.password_changed'));
 38      resetPassword();
 39    } catch (err) {
 40      if (err.kind === 'bad_data') {
 41        setErrorPassword(t('profile.errors.password_nomatch'));
 42        return;
 43      }
 44    }
 45  };
 46
 47  if (isEditingPassword)
 48    return (
 49      <EditPassword
 50        oldPassword={oldPassword}
 51        newPassword={newPassword}
 52        setOldPassword={setOldPassword}
 53        setNewPassword={setNewPassword}
 54        error={errorPassword}
 55        save={savePassword}
 56        cancel={resetPassword}
 57      />
 58    );
 59
 60  return (
 61    <form
 62      onSubmit={evt => {
 63        if (evt.preventDefault) evt.preventDefault();
 64        if (isEditing) {
 65          try {
 66            updateProfile({firstName, lastName, email});
 67          } catch (err) {
 68            console.log(err);
 69            return;
 70          }
 71          addToast(t('profile.updated'));
 72        }
 73        setIsEditing(!isEditing);
 74      }}
 75    >
 76      <Card>
 77        <CardContent>
 78          <ProfileField
 79            name="firstName"
 80            value={firstName}
 81            label={t('profile.firstName')}
 82            defaultValue={t('profile.not_defined', {
 83              field: '$t(profile.firstName)',
 84            })}
 85            onChange={setFirstName}
 86            isEditing={isEditing}
 87          />
 88          <ProfileField
 89            name="lastName"
 90            value={lastName}
 91            label={t('profile.lastName')}
 92            defaultValue={t('profile.not_defined', {
 93              field: '$t(profile.lastName)',
 94            })}
 95            onChange={setLastName}
 96            isEditing={isEditing}
 97          />
 98          <ProfileField
 99            name="email"
100            value={email}
101            label={t('profile.email')}
102            defaultValue={t('profile.not_defined', {
103              field: '$t(profile.email)',
104            })}
105            onChange={setEmail}
106            isEditing={isEditing}
107          />
108        </CardContent>
109        <CardActions className={classes.actions}>
110          {!isEditing && (
111            <>
112              <Button type="button" onClick={() => logout()}>
113                {t('profile.actions.logout')}
114              </Button>
115              <Button
116                type="button"
117                color="primary"
118                onClick={() => setIsEditing(true)}
119                variant="contained"
120              >
121                {t('profile.actions.edit')}
122              </Button>
123            </>
124          )}
125          {isEditing && (
126            <>
127              <Button
128                type="button"
129                onClick={evt => {
130                  if (evt.preventDefault) evt.preventDefault();
131                  setIsEditingPassword(true);
132                }}
133              >
134                {t('profile.actions.change_password')}
135              </Button>
136              <Button
137                type="submit"
138                color="primary"
139                onClick={() => setIsEditing(false)}
140                variant="contained"
141              >
142                {t('profile.actions.save')}
143              </Button>
144            </>
145          )}
146        </CardActions>
147      </Card>
148    </form>
149  );
150};
151
152const useStyles = makeStyles(theme => ({
153  actions: {
154    marginTop: theme.spacing(2),
155    justifyContent: 'flex-end',
156  },
157}));
158export default Profile;