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';
 11
 12const Profile = ({profile, updateProfile, logout}) => {
 13  const {t} = useTranslation();
 14  const {addToast} = useToast();
 15  const classes = useStyles();
 16  const [isEditing, setIsEditing] = useState(false);
 17  const [isEditingPassword, setIsEditingPassword] = useState(false);
 18  const [firstName, setFirstName] = useState(profile.firstName);
 19  const [lastName, setLastName] = useState(profile.lastName);
 20  const [email, setEmail] = useState(profile.email);
 21  const [oldPassword, setOldPassword] = useState('');
 22  const [newPassword, setNewPassword] = useState('');
 23  const [errorPassword, setErrorPassword] = useState('');
 24
 25  const resetPassword = () => {
 26    setIsEditingPassword(false);
 27    setNewPassword('');
 28    setOldPassword('');
 29    setErrorPassword('');
 30  };
 31
 32  const savePassword = async () => {
 33    try {
 34      await updateProfile({
 35        old_password: oldPassword,
 36        password: newPassword,
 37      });
 38      addToast(t('profile.password_changed'));
 39      resetPassword();
 40    } catch (err) {
 41      if (err.kind === 'bad_data') {
 42        setErrorPassword(t('profile.errors.password_nomatch'));
 43        return;
 44      }
 45    }
 46  };
 47
 48  if (isEditingPassword)
 49    return (
 50      <EditPassword
 51        oldPassword={oldPassword}
 52        newPassword={newPassword}
 53        setOldPassword={setOldPassword}
 54        setNewPassword={setNewPassword}
 55        error={errorPassword}
 56        save={savePassword}
 57        cancel={resetPassword}
 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        <CardContent>
 79          <ProfileField
 80            name="firstName"
 81            value={firstName}
 82            label={t('profile.firstName')}
 83            defaultValue={t('profile.not_defined', {
 84              field: '$t(profile.firstName)',
 85            })}
 86            onChange={setFirstName}
 87            isEditing={isEditing}
 88          />
 89          <ProfileField
 90            name="lastName"
 91            value={lastName}
 92            label={t('profile.lastName')}
 93            defaultValue={t('profile.not_defined', {
 94              field: '$t(profile.lastName)',
 95            })}
 96            onChange={setLastName}
 97            isEditing={isEditing}
 98          />
 99          <ProfileField
100            name="email"
101            value={email}
102            label={t('profile.email')}
103            defaultValue={t('profile.not_defined', {
104              field: '$t(profile.email)',
105            })}
106            onChange={setEmail}
107            isEditing={isEditing}
108          />
109          {isEditing && (
110            <Button
111              type="button"
112              className={classes.changePassword}
113              onClick={evt => {
114                if (evt.preventDefault) evt.preventDefault();
115                setIsEditingPassword(true);
116              }}
117            >
118              {t('profile.actions.change_password')}
119            </Button>
120          )}
121        </CardContent>
122        <CardActions className={classes.actions}>
123          {!isEditing && (
124            <>
125              <Button type="button" onClick={() => logout()}>
126                {t('profile.actions.logout')}
127              </Button>
128              <Button
129                type="button"
130                color="primary"
131                onClick={() => setIsEditing(true)}
132                variant="contained"
133              >
134                {t('profile.actions.edit')}
135              </Button>
136            </>
137          )}
138          {isEditing && (
139            <Button
140              type="submit"
141              color="primary"
142              onClick={() => setIsEditing(false)}
143              variant="contained"
144            >
145              {t('profile.actions.save')}
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  changePassword: {
159    marginTop: theme.spacing(2),
160  },
161}));
162export default Profile;