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