Introduce storybooks for all profile pages

packages/app/components/profile/Profile.story.tsx

@@ -0,0 +1,36 @@
+import React, { ComponentType } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import rootStyles from 'app/pages/root/root.scss';
+import profileStyles from 'app/pages/profile/profile.scss';
+
+export const ProfileLayout: ComponentType = ({ children }) => (
+    <div className={rootStyles.wrapper}>
+        <div className={profileStyles.container}>{children}</div>
+    </div>
+);
+
+import Profile from './Profile';
+
+storiesOf('Components/Profile', module).add('Profile', () => (
+    <ProfileLayout>
+        <Profile
+            user={{
+                id: 1,
+                username: 'ErickSkrauch',
+                email: 'erickskrauch@ely.by',
+                hasMojangUsernameCollision: true,
+                isActive: true,
+                isGuest: false,
+                isOtpEnabled: true,
+                lang: 'unknown',
+                passwordChangedAt: 1595328712,
+                uuid: 'f82f5f58-918c-4b22-8232-b28849775547',
+                shouldAcceptRules: false,
+                avatar: '',
+                token: '',
+            }}
+            interfaceLocale={'en'}
+        />
+    </ProfileLayout>
+));

packages/app/components/profile/Profile.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { connect } from 'react-redux';
+import React, { ComponentType, useCallback, useRef } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
@@ -7,7 +6,6 @@ import { ChangeLanguageLink } from 'app/components/languageSwitcher';
 import { RelativeTime } from 'app/components/ui';
 import { User } from 'app/components/user';
 import RulesPage from 'app/pages/rules/RulesPage';
-import { RootState } from 'app/reducers';
 
 import ProfileField from './ProfileField';
 import styles from './profile.scss';
@@ -15,14 +13,31 @@ import profileForm from './profileForm.scss';
 
 type Props = {
     user: User;
-    interfaceLocale: string;
+    activeLocale: string;
 };
 
-class Profile extends React.PureComponent<Props> {
-    UUID: HTMLElement | null;
+const Profile: ComponentType<Props> = ({ user, activeLocale }) => {
+    const uuidRef = useRef<HTMLSpanElement>();
+    const onUuidMouseOver = useCallback(() => {
+        if (!uuidRef.current) {
+            return;
+        }
 
-    render() {
-        const { user, interfaceLocale } = this.props;
+        try {
+            const selection = window.getSelection();
+
+            if (!selection) {
+                return;
+            }
+
+            const range = document.createRange();
+            range.selectNodeContents(uuidRef.current);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        } catch (err) {
+            // the browser does not support an API
+        }
+    }, []);
 
     return (
         <div data-testid="profile-index">
@@ -111,7 +126,7 @@ class Profile extends React.PureComponent<Props> {
                             label={<Message key="siteLanguage" defaultMessage="Site language:" />}
                             value={<ChangeLanguageLink />}
                             warningMessage={
-                                    user.lang === interfaceLocale ? (
+                                user.lang === activeLocale ? (
                                     ''
                                 ) : (
                                     <Message
@@ -152,8 +167,8 @@ class Profile extends React.PureComponent<Props> {
                             value={
                                 <span
                                     className={styles.uuid}
-                                        ref={this.setUUID.bind(this)}
-                                        onMouseOver={this.handleUUIDMouseOver.bind(this)}
+                                    ref={(ref) => (uuidRef.current = ref!)}
+                                    onMouseOver={onUuidMouseOver}
                                 >
                                     {user.uuid}
                                 </span>
@@ -164,37 +179,6 @@ class Profile extends React.PureComponent<Props> {
             </div>
         </div>
     );
-    }
+};
 
-    handleUUIDMouseOver() {
-        if (!this.UUID) {
-            return;
-        }
-
-        const el = this.UUID;
-
-        try {
-            const selection = window.getSelection();
-
-            if (!selection) {
-                return;
-            }
-
-            const range = document.createRange();
-            range.selectNodeContents(el);
-            selection.removeAllRanges();
-            selection.addRange(range);
-        } catch (err) {
-            // the browser does not support an API
-        }
-    }
-
-    setUUID(el: HTMLElement | null) {
-        this.UUID = el;
-    }
-}
-
-export default connect(({ user, i18n }: RootState) => ({
-    user,
-    interfaceLocale: i18n.locale,
-}))(Profile);
+export default Profile;

packages/app/components/profile/changeEmail/ChangeEmail.story.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ProfileLayout } from 'app/components/profile/Profile.story';
+
+import ChangeEmail from './ChangeEmail';
+
+storiesOf('Components/Profile/ChangeEmail', module)
+    .addDecorator((story) => <ProfileLayout>{story()}</ProfileLayout>)
+    .add('First step', () => (
+        <ChangeEmail
+            step={0}
+            email="initial-email@ely.by"
+            onSubmit={(step, form) => {
+                action('onSubmit')(step, form);
+
+                return Promise.resolve();
+            }}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Second step', () => (
+        <ChangeEmail
+            step={1}
+            email="email-from-prev-step@ely.by"
+            onSubmit={(step, form) => {
+                action('onSubmit')(step, form);
+
+                return Promise.resolve();
+            }}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Second step with code', () => (
+        <ChangeEmail
+            step={1}
+            code="I7SP06BUTLLM8MA03O"
+            onSubmit={(step, form) => {
+                action('onSubmit')(step, form);
+
+                return Promise.resolve();
+            }}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Third step', () => (
+        <ChangeEmail
+            step={2}
+            onSubmit={(step, form) => {
+                action('onSubmit')(step, form);
+
+                return Promise.resolve();
+            }}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Third step with code', () => (
+        <ChangeEmail
+            step={2}
+            code="I7SP06BUTLLM8MA03O"
+            onSubmit={(step, form) => {
+                action('onSubmit')(step, form);
+
+                return Promise.resolve();
+            }}
+            onChangeStep={action('onChangeStep')}
+        />
+    ));

packages/app/components/profile/changeEmail/ChangeEmail.tsx

@@ -17,7 +17,6 @@ export type ChangeEmailStep = 0 | 1 | 2;
 
 interface Props {
     onChangeStep: (step: ChangeEmailStep) => void;
-    lang: string;
     email: string;
     stepForms: Array<FormModel>;
     onSubmit: (step: ChangeEmailStep, form: FormModel) => Promise<void>;

packages/app/components/profile/changePassword/ChangePassword.story.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { FormModel } from 'app/components/ui/form';
+import { ProfileLayout } from 'app/components/profile/Profile.story';
+
+import ChangePassword from './ChangePassword';
+
+storiesOf('Components/Profile', module).add('ChangePassword', () => (
+    <ProfileLayout>
+        <ChangePassword
+            form={new FormModel()}
+            onSubmit={(form) => {
+                action('onSubmit')(form);
+
+                return Promise.resolve();
+            }}
+        />
+    </ProfileLayout>
+));

packages/app/components/profile/changeUsername/ChangeUsername.story.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { FormModel } from 'app/components/ui/form';
+import { ProfileLayout } from 'app/components/profile/Profile.story';
+
+import ChangeUsername from './ChangeUsername';
+
+storiesOf('Components/Profile', module).add('ChangeUsername', () => (
+    <ProfileLayout>
+        <ChangeUsername
+            form={new FormModel()}
+            username="InitialUsername"
+            onChange={action('onChange')}
+            onSubmit={(form) => {
+                action('onSubmit')(form);
+
+                return Promise.resolve();
+            }}
+        />
+    </ProfileLayout>
+));

packages/app/components/profile/changeUsername/ChangeUsername.tsx

@@ -55,7 +55,7 @@ export default class ChangeUsername extends React.Component<Props> {
                             <div className={styles.formRow}>
                                 <Input
                                     {...form.bindField('username')}
-                                    value={username}
+                                    defaultValue={username}
                                     onChange={this.onUsernameChange}
                                     required
                                     skin="light"

packages/app/components/profile/multiFactorAuth/MfaDisable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import logger from 'app/services/logger';
 import { disable as disableMFA } from 'app/services/api/mfa';
 import { FormModel } from 'app/components/ui/form';
@@ -29,7 +29,10 @@ export default class MfaDisable extends React.Component<
         return showForm ? <MfaDisableForm onSubmit={this.onSubmit} /> : <MfaStatus onProceed={this.onProceed} />;
     }
 
-    onProceed = () => this.setState({ showForm: true });
+    onProceed: MouseEventHandler<HTMLAnchorElement> = (event) => {
+        event.preventDefault();
+        this.setState({ showForm: true });
+    };
 
     onSubmit = (form: FormModel) => {
         return this.props

packages/app/components/profile/multiFactorAuth/MfaStatus.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType, MouseEventHandler } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { ScrollIntoView } from 'app/components/ui/scroll';
 import styles from 'app/components/profile/profileForm.scss';
@@ -6,8 +6,11 @@ import icons from 'app/components/ui/icons.scss';
 
 import mfaStyles from './mfa.scss';
 
-export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
-    return (
+interface Props {
+    onProceed?: MouseEventHandler<HTMLAnchorElement>;
+}
+
+const MfaStatus: ComponentType<Props> = ({ onProceed }) => (
     <div className={styles.formBody}>
         <ScrollIntoView />
 
@@ -34,17 +37,12 @@ export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
 
         <div className={`${styles.formRow} ${mfaStyles.disableMfa}`}>
             <p className={styles.description}>
-                    <a
-                        href="#"
-                        onClick={(event) => {
-                            event.preventDefault();
-                            onProceed();
-                        }}
-                    >
+                <a href="#" onClick={onProceed}>
                     <Message key="disable" defaultMessage="Disable" />
                 </a>
             </p>
         </div>
     </div>
 );
-}
+
+export default MfaStatus;

packages/app/components/profile/multiFactorAuth/MultiFactorAuth.story.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ProfileLayout } from 'app/components/profile/Profile.story';
+
+import MultiFactorAuth from './MultiFactorAuth';
+
+storiesOf('Components/Profile/MultiFactorAuth', module)
+    .addDecorator((story) => <ProfileLayout>{story()}</ProfileLayout>)
+    .add('First step', () => (
+        <MultiFactorAuth
+            isMfaEnabled={false}
+            step={0}
+            onSubmit={(form, sendData) => {
+                action('onSubmit')(form, sendData);
+
+                return Promise.resolve();
+            }}
+            onComplete={action('onComplete')}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Second step', () => (
+        <MultiFactorAuth
+            isMfaEnabled={false}
+            step={1}
+            onSubmit={(form, sendData) => {
+                action('onSubmit')(form, sendData);
+
+                return Promise.resolve();
+            }}
+            onComplete={action('onComplete')}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Third step', () => (
+        <MultiFactorAuth
+            isMfaEnabled={false}
+            step={2}
+            onSubmit={(form, sendData) => {
+                action('onSubmit')(form, sendData);
+
+                return Promise.resolve();
+            }}
+            onComplete={action('onComplete')}
+            onChangeStep={action('onChangeStep')}
+        />
+    ))
+    .add('Enabled', () => (
+        <MultiFactorAuth
+            isMfaEnabled={true}
+            step={0}
+            onSubmit={(form, sendData) => {
+                action('onSubmit')(form, sendData);
+
+                return Promise.resolve();
+            }}
+            onComplete={action('onComplete')}
+            onChangeStep={action('onChangeStep')}
+        />
+    ));

packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
 import { ImageLoader } from 'app/components/ui/loader';
@@ -7,7 +7,12 @@ import profileForm from 'app/components/profile/profileForm.scss';
 import messages from '../keyForm.intl';
 import styles from './key-form.scss';
 
-export default function KeyForm({ secret, qrCodeSrc }: { secret: string; qrCodeSrc: string }) {
+interface Props {
+    secret: string;
+    qrCodeSrc: string;
+}
+
+const KeyForm: ComponentType<Props> = ({ secret, qrCodeSrc }) => {
     const formattedSecret = formatSecret(secret || new Array(24).join('X'));
 
     return (
@@ -46,8 +51,10 @@ export default function KeyForm({ secret, qrCodeSrc }: { secret: string; qrCodeS
             </div>
         </div>
     );
-}
+};
 
 function formatSecret(secret: string): string {
     return (secret.match(/.{1,4}/g) || []).join(' ');
 }
+
+export default KeyForm;

packages/app/pages/profile/ChangeEmailPage.tsx

@@ -13,7 +13,6 @@ interface RouteParams {
 }
 
 interface Props extends RouteComponentProps<RouteParams> {
-    lang: string;
     email: string;
 }
 
@@ -33,7 +32,6 @@ class ChangeEmailPage extends React.Component<Props> {
             <ChangeEmail
                 onSubmit={this.onSubmit}
                 email={this.props.email}
-                lang={this.props.lang}
                 step={(Number(step.slice(-1)) - 1) as ChangeEmailStep}
                 onChangeStep={this.onChangeStep}
                 code={code}
@@ -96,5 +94,4 @@ function handleErrors(repeatUrl?: string): <T extends { errors: Record<string, a
 
 export default connect((state: RootState) => ({
     email: state.user.email,
-    lang: state.user.lang,
 }))(ChangeEmailPage);

packages/app/pages/profile/ProfileController.tsx

@@ -0,0 +1,171 @@
+import React, { ComponentType, useCallback } from 'react';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+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 { Dispatch, RootState } from 'app/reducers';
+import { Provider } from 'app/components/profile/Context';
+import { ComponentLoader } from 'app/components/ui/loader';
+
+import styles from './profile.scss';
+
+const Profile = React.lazy(() => import(/* webpackChunkName: "page-profile-index" */ 'app/pages/profile/ProfilePage'));
+const ChangePasswordPage = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-change-password" */ 'app/pages/profile/ChangePasswordPage'),
+);
+const ChangeUsernamePage = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-change-username" */ 'app/pages/profile/ChangeUsernamePage'),
+);
+const ChangeEmailPage = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-change-email" */ 'app/pages/profile/ChangeEmailPage'),
+);
+const MultiFactorAuthPage = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-mfa" */ 'app/pages/profile/MultiFactorAuthPage'),
+);
+
+interface Props {
+    userId: number;
+    onSubmit: (options: { form: FormModel; sendData: () => Promise<any> }) => Promise<void>;
+    refreshUserData: () => Promise<any>;
+}
+
+const ProfileController: ComponentType<Props> = ({ userId, onSubmit, refreshUserData }) => {
+    const goToProfile = useCallback(async () => {
+        await refreshUserData();
+
+        browserHistory.push('/');
+    }, [refreshUserData]);
+
+    return (
+        <div className={styles.container}>
+            <Provider
+                value={{
+                    userId,
+                    onSubmit,
+                    goToProfile,
+                }}
+            >
+                <React.Suspense fallback={<ComponentLoader />}>
+                    <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} />
+                        <Route path="/profile" exact component={Profile} />
+                        <Route path="/" exact component={Profile} />
+                        <Redirect to="/404" />
+                    </Switch>
+                </React.Suspense>
+
+                <div className={styles.footer}>
+                    <FooterMenu />
+                </div>
+            </Provider>
+        </div>
+    );
+};
+
+export default connect(
+    (state: RootState) => ({
+        userId: state.user.id!,
+    }),
+    {
+        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);

packages/app/pages/profile/ProfilePage.tsx

@@ -1,174 +1,14 @@
-import React from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
-import { connect } from 'react-redux';
-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 { Dispatch, RootState } from 'app/reducers';
-import { Provider } from 'app/components/profile/Context';
-import { ComponentLoader } from 'app/components/ui/loader';
+import React, { ComponentType } from 'react';
+import { useSelector } from 'react-redux';
 
-import styles from './profile.scss';
+import { RootState } from 'app/reducers';
 
-const Profile = React.lazy(() => import(/* webpackChunkName: "page-profile-index" */ 'app/components/profile/Profile'));
-const ChangePasswordPage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-change-password" */ 'app/pages/profile/ChangePasswordPage'),
-);
-const ChangeUsernamePage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-change-username" */ 'app/pages/profile/ChangeUsernamePage'),
-);
-const ChangeEmailPage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-change-email" */ 'app/pages/profile/ChangeEmailPage'),
-);
-const MultiFactorAuthPage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-mfa" */ 'app/pages/profile/MultiFactorAuthPage'),
-);
+import Profile from 'app/components/profile/Profile';
 
-interface Props {
-    userId: number;
-    onSubmit: (options: { form: FormModel; sendData: () => Promise<any> }) => Promise<void>;
-    refreshUserData: () => Promise<any>;
-}
+const ProfileController: ComponentType = () => {
+    const [user, activeLocale] = useSelector((state: RootState) => [state.user, state.i18n.locale]);
 
-class ProfilePage extends React.Component<Props> {
-    render() {
-        const { userId, onSubmit } = this.props;
-
-        return (
-            <div className={styles.container}>
-                <Provider
-                    value={{
-                        userId,
-                        onSubmit,
-                        goToProfile: this.goToProfile,
-                    }}
-                >
-                    <React.Suspense fallback={<ComponentLoader />}>
-                        <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} />
-                            <Route path="/profile" exact component={Profile} />
-                            <Route path="/" exact component={Profile} />
-                            <Redirect to="/404" />
-                        </Switch>
-                    </React.Suspense>
-
-                    <div className={styles.footer}>
-                        <FooterMenu />
-                    </div>
-                </Provider>
-            </div>
-        );
-    }
-
-    goToProfile = async () => {
-        await this.props.refreshUserData();
-
-        browserHistory.push('/');
-    };
-}
-
-export default connect(
-    (state: RootState) => ({
-        userId: state.user.id!,
-    }),
-    {
-        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 <Profile user={user} activeLocale={activeLocale} />;
 };
 
-                                return <PasswordRequestForm form={form} onSubmit={onSubmit} />;
-                            },
-                            // TODO: this property should be automatically extracted from the popup's isClosable prop
-                            disableOverlayClose: true,
-                        }),
-                    );
-                });
-            }
-        },
-    },
-)(ProfilePage);
+export default ProfileController;

packages/app/pages/root/RootPage.tsx

@@ -21,8 +21,8 @@ import { ComponentLoader } from 'app/components/ui/loader';
 import styles from './root.scss';
 import siteName from './siteName.intl';
 
-const ProfilePage = React.lazy(() =>
-    import(/* webpackChunkName: "page-profile-all" */ 'app/pages/profile/ProfilePage'),
+const ProfileController = React.lazy(() =>
+    import(/* webpackChunkName: "page-profile-all" */ 'app/pages/profile/ProfileController'),
 );
 const PageNotFound = React.lazy(() => import(/* webpackChunkName: "page-not-found" */ 'app/pages/404/PageNotFound'));
 const RulesPage = React.lazy(() => import(/* webpackChunkName: "page-rules" */ 'app/pages/rules/RulesPage'));
@@ -86,7 +86,7 @@ class RootPage extends React.PureComponent<{
                     <div className={styles.body}>
                         <React.Suspense fallback={<ComponentLoader />}>
                             <Switch>
-                                <PrivateRoute path="/profile" component={ProfilePage} />
+                                <PrivateRoute path="/profile" component={ProfileController} />
                                 <Route path="/404" component={PageNotFound} />
                                 <Route path="/rules" component={RulesPage} />
                                 <Route path="/dev" component={DevPage} />
@@ -95,7 +95,7 @@ class RootPage extends React.PureComponent<{
                                     exact
                                     path="/"
                                     key="indexPage"
-                                    component={user.isGuest ? AuthPage : ProfilePage}
+                                    component={user.isGuest ? AuthPage : ProfileController}
                                 />
                                 <AuthFlowRoute path="/" component={AuthPage} />