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