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        </CardContent>
110        <CardActions className={classes.actions}>
111          {!isEditing && (
112            <>
113              <Button type="button" onClick={() => logout()}>
114                {t('profile.actions.logout')}
115              </Button>
116              <Button
117                type="button"
118                color="primary"
119                onClick={() => setIsEditing(true)}
120                variant="contained"
121              >
122                {t('profile.actions.edit')}
123              </Button>
124            </>
125          )}
126          {isEditing && (
127            <>
128              <Button
129                type="button"
130                onClick={evt => {
131                  if (evt.preventDefault) evt.preventDefault();
132                  setIsEditingPassword(true);
133                }}
134              >
135                {t('profile.actions.change_password')}
136              </Button>
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          )}
147        </CardActions>
148      </Card>
149    </form>
150  );
151};
152
153const useStyles = makeStyles(theme => ({
154  actions: {
155    marginTop: theme.spacing(2),
156    justifyContent: 'flex-end',
157  },
158}));
159export default Profile;