2020-07-21 18:00:18 +05:30
|
|
|
import React, { ComponentType, useCallback } from 'react';
|
|
|
|
import { Route, Switch, Redirect } from 'react-router-dom';
|
|
|
|
|
2020-07-22 15:31:12 +05:30
|
|
|
import { connect } from 'app/functions';
|
|
|
|
import { Dispatch } from 'app/types';
|
2020-07-21 18:00:18 +05:30
|
|
|
import { refreshUserData } from 'app/components/accounts/actions';
|
|
|
|
import { create as createPopup } from 'app/components/ui/popup/actions';
|
|
|
|
import PasswordRequestForm from 'app/components/profile/passwordRequestForm';
|
|
|
|
import logger from 'app/services/logger';
|
|
|
|
import { browserHistory } from 'app/services/history';
|
|
|
|
import { FooterMenu } from 'app/components/footerMenu';
|
|
|
|
import { FormModel } from 'app/components/ui/form';
|
|
|
|
import { Provider } from 'app/components/profile/Context';
|
2020-07-27 12:58:37 +05:30
|
|
|
import { User } from 'app/components/user';
|
2020-07-21 18:00:18 +05:30
|
|
|
|
|
|
|
import styles from './profile.scss';
|
|
|
|
|
2020-07-21 18:23:34 +05:30
|
|
|
import Profile from 'app/pages/profile/ProfilePage';
|
|
|
|
import ChangePasswordPage from 'app/pages/profile/ChangePasswordPage';
|
|
|
|
import ChangeUsernamePage from 'app/pages/profile/ChangeUsernamePage';
|
|
|
|
import ChangeEmailPage from 'app/pages/profile/ChangeEmailPage';
|
|
|
|
import MultiFactorAuthPage from 'app/pages/profile/MultiFactorAuthPage';
|
2020-07-26 22:36:25 +05:30
|
|
|
import DeleteAccountPage from 'app/pages/profile/DeleteAccountPage';
|
2020-07-27 12:58:37 +05:30
|
|
|
import AccountDeletedPage from 'app/pages/profile/AccountDeletedPage';
|
2020-07-21 18:00:18 +05:30
|
|
|
|
|
|
|
interface Props {
|
2020-07-27 12:58:37 +05:30
|
|
|
user: User;
|
2020-07-21 18:00:18 +05:30
|
|
|
onSubmit: (options: { form: FormModel; sendData: () => Promise<any> }) => Promise<void>;
|
|
|
|
refreshUserData: () => Promise<any>;
|
|
|
|
}
|
|
|
|
|
2020-07-27 12:58:37 +05:30
|
|
|
const ProfileController: ComponentType<Props> = ({ user, onSubmit, refreshUserData }) => {
|
2020-07-21 18:00:18 +05:30
|
|
|
const goToProfile = useCallback(async () => {
|
|
|
|
await refreshUserData();
|
|
|
|
|
|
|
|
browserHistory.push('/');
|
|
|
|
}, [refreshUserData]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={styles.container}>
|
|
|
|
<Provider
|
|
|
|
value={{
|
2020-07-27 12:58:37 +05:30
|
|
|
userId: user.id!,
|
2020-07-21 18:00:18 +05:30
|
|
|
onSubmit,
|
|
|
|
goToProfile,
|
|
|
|
}}
|
|
|
|
>
|
2020-07-27 12:58:37 +05:30
|
|
|
{user.isDeleted ? (
|
2020-07-28 03:12:45 +05:30
|
|
|
<Switch>
|
|
|
|
<Route path="/" exact component={AccountDeletedPage} />
|
|
|
|
<Redirect to="/" />
|
|
|
|
</Switch>
|
2020-07-27 12:58:37 +05:30
|
|
|
) : (
|
2020-07-21 18:00:18 +05:30
|
|
|
<Switch>
|
|
|
|
<Route path="/profile/mfa/step:step([1-3])" component={MultiFactorAuthPage} />
|
|
|
|
<Route path="/profile/mfa" exact component={MultiFactorAuthPage} />
|
|
|
|
<Route path="/profile/change-password" exact component={ChangePasswordPage} />
|
|
|
|
<Route path="/profile/change-username" exact component={ChangeUsernamePage} />
|
|
|
|
<Route path="/profile/change-email/:step?/:code?" component={ChangeEmailPage} />
|
2020-07-26 22:36:25 +05:30
|
|
|
<Route path="/profile/delete" component={DeleteAccountPage} />
|
2020-07-21 18:00:18 +05:30
|
|
|
<Route path="/profile" exact component={Profile} />
|
|
|
|
<Route path="/" exact component={Profile} />
|
|
|
|
<Redirect to="/404" />
|
|
|
|
</Switch>
|
2020-07-27 12:58:37 +05:30
|
|
|
)}
|
2020-07-21 18:00:18 +05:30
|
|
|
|
|
|
|
<div className={styles.footer}>
|
|
|
|
<FooterMenu />
|
|
|
|
</div>
|
|
|
|
</Provider>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default connect(
|
2020-07-22 15:31:12 +05:30
|
|
|
(state) => ({
|
2020-07-27 12:58:37 +05:30
|
|
|
user: state.user,
|
2020-07-21 18:00:18 +05:30
|
|
|
}),
|
|
|
|
{
|
|
|
|
refreshUserData,
|
|
|
|
onSubmit: ({ form, sendData }: { form: FormModel; sendData: () => Promise<any> }) => (dispatch: Dispatch) => {
|
|
|
|
form.beginLoading();
|
|
|
|
|
|
|
|
return sendData()
|
|
|
|
.catch((resp) => {
|
|
|
|
const requirePassword = resp.errors && !!resp.errors.password;
|
|
|
|
|
|
|
|
// prevalidate user input, because requestPassword popup will block the
|
|
|
|
// entire form from input, so it must be valid
|
|
|
|
if (resp.errors) {
|
|
|
|
delete resp.errors.password;
|
|
|
|
|
|
|
|
if (resp.errors.email && resp.data && resp.data.canRepeatIn) {
|
|
|
|
resp.errors.email = {
|
|
|
|
type: resp.errors.email,
|
|
|
|
payload: {
|
|
|
|
msLeft: resp.data.canRepeatIn * 1000,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
if (Object.keys(resp.errors).length) {
|
|
|
|
form.setErrors(resp.errors);
|
|
|
|
|
|
|
|
return Promise.reject(resp);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (requirePassword) {
|
|
|
|
return requestPassword(form);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return Promise.reject(resp);
|
|
|
|
})
|
|
|
|
.catch((resp) => {
|
|
|
|
if (!resp || !resp.errors) {
|
|
|
|
logger.warn('Unexpected profile editing error', {
|
|
|
|
resp,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
return Promise.reject(resp);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.finally(() => form.endLoading());
|
|
|
|
|
|
|
|
function requestPassword(form: FormModel) {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
dispatch(
|
|
|
|
createPopup({
|
|
|
|
Popup(props: { onClose: () => Promise<any> }) {
|
|
|
|
const onSubmit = () => {
|
|
|
|
form.beginLoading();
|
|
|
|
|
|
|
|
sendData()
|
|
|
|
.then(resolve)
|
|
|
|
.then(props.onClose)
|
|
|
|
.catch((resp) => {
|
|
|
|
if (resp.errors) {
|
|
|
|
form.setErrors(resp.errors);
|
|
|
|
|
|
|
|
const parentFormHasErrors =
|
|
|
|
Object.keys(resp.errors).filter((name) => name !== 'password')
|
|
|
|
.length > 0;
|
|
|
|
|
|
|
|
if (parentFormHasErrors) {
|
|
|
|
// something wrong with parent form, hiding popup and show that form
|
|
|
|
props.onClose();
|
|
|
|
reject(resp);
|
|
|
|
logger.warn(
|
|
|
|
'Profile: can not submit password popup due to errors in source form',
|
|
|
|
{ resp },
|
|
|
|
);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return Promise.reject(resp);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.finally(() => form.endLoading());
|
|
|
|
};
|
|
|
|
|
|
|
|
return <PasswordRequestForm form={form} onSubmit={onSubmit} />;
|
|
|
|
},
|
|
|
|
// TODO: this property should be automatically extracted from the popup's isClosable prop
|
|
|
|
disableOverlayClose: true,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
)(ProfileController);
|