ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-06-28 19:33:10 +05:30
Code Issues Packages Projects Releases Wiki Activity

Introduce storybooks for all profile pages

Browse Source
This commit is contained in:
ErickSkrauch 2020-07-21 15:30:18 +03:00
parent 347fd59319
commit 19a9f952ea
No known key found for this signature in database
GPG Key ID: 669339FCBB30EE0E
15 changed files with 601 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/app/components/profile/Profile.story.tsx Normal file
View File

@ -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>
));

316
packages/app/components/profile/Profile.tsx
View File

@ -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,164 +13,16 @@ import profileForm from './profileForm.scss';
type Props = {
user: User;
interfaceLocale: string;
activeLocale: string;
};
class Profile extends React.PureComponent<Props> {
UUID: HTMLElement | null;
render() {
const { user, interfaceLocale } = this.props;
return (
<div data-testid="profile-index">
<Message key="accountPreferencesTitle" defaultMessage="Ely.by account preferences">
{(pageTitle: string) => (
<h2 className={styles.indexTitle}>
<Helmet title={pageTitle} />
{pageTitle}
</h2>
)}
</Message>
<div className={styles.indexContent}>
<div className={styles.descriptionColumn}>
<div className={styles.indexDescription}>
<Message
key="accountDescription"
defaultMessage="Ely.by account allows you to get access to many Minecraft resources. Please, take care of your account safety. Use secure password and change it regularly."
/>
</div>
</div>
<div className={styles.formColumn}>
<div className={profileForm.form}>
<div className={styles.item}>
<h3 className={profileForm.title}>
<Message key="personalData" defaultMessage="Personal data" />
</h3>
<p className={profileForm.description}>
<Message
key="preferencesDescription"
defaultMessage="Here you can change the key preferences of your account. Please note that all actions must be confirmed by entering a password."
/>
</p>
</div>
<ProfileField
link="/profile/change-username"
label={<Message key="nickname" defaultMessage="Nickname:" />}
value={user.username}
warningMessage={
user.hasMojangUsernameCollision ? (
<Message
key="mojangPriorityWarning"
defaultMessage="A Mojang account with the same nickname was found. According to {rules}, account owner has the right to demand the restoration of control over nickname."
values={{
rules: (
<Link
to={{
pathname: '/rules',
hash: `#${RulesPage.getRuleHash(1, 4)}`,
}}
>
<Message key="projectRules" defaultMessage="project rules" />
</Link>
),
}}
/>
) : (
''
)
}
/>
<ProfileField
link="/profile/change-email"
label={<Message key="email" defaultMessage="E‑mail:" />}
value={user.email}
/>
<ProfileField
link="/profile/change-password"
label={<Message key="password" defaultMessage="Password:" />}
value={
<Message
key="changedAt"
defaultMessage="Changed {at}"
values={{
at: <RelativeTime timestamp={user.passwordChangedAt * 1000} />,
}}
/>
}
/>
<ProfileField
label={<Message key="siteLanguage" defaultMessage="Site language:" />}
value={<ChangeLanguageLink />}
warningMessage={
user.lang === interfaceLocale ? (
''
) : (
<Message
key="languageIsUnavailableWarning"
defaultMessage={
'The locale "{locale}" you\'ve used earlier isn\'t currently translated enough. If you want to continue using the selected language, please {participateInTheTranslation} of the project.'
}
values={{
locale: user.lang,
participateInTheTranslation: (
<a href="http://ely.by/translate" target="_blank">
<Message
key="participateInTheTranslation"
defaultMessage="participate in the translation"
/>
</a>
),
}}
/>
)
}
/>
<ProfileField
link="/profile/mfa"
label={<Message key="twoFactorAuth" defaultMessage="Two‑factor auth:" />}
value={
user.isOtpEnabled ? (
<Message key="enabled" defaultMessage="Enabled" />
) : (
<Message key="disabled" defaultMessage="Disabled" />
)
}
/>
<ProfileField
label={<Message key="uuid" defaultMessage="UUID:" />}
value={
<span
className={styles.uuid}
ref={this.setUUID.bind(this)}
onMouseOver={this.handleUUIDMouseOver.bind(this)}
>
{user.uuid}
</span>
}
/>
</div>
</div>
</div>
</div>
);
}
handleUUIDMouseOver() {
if (!this.UUID) {
const Profile: ComponentType<Props> = ({ user, activeLocale }) => {
const uuidRef = useRef<HTMLSpanElement>();
const onUuidMouseOver = useCallback(() => {
if (!uuidRef.current) {
return;
}
const el = this.UUID;
try {
const selection = window.getSelection();
@ -181,20 +31,154 @@ class Profile extends React.PureComponent<Props> {
}
const range = document.createRange();
range.selectNodeContents(el);
range.selectNodeContents(uuidRef.current);
selection.removeAllRanges();
selection.addRange(range);
} catch (err) {
// the browser does not support an API
}
}
}, []);
setUUID(el: HTMLElement | null) {
this.UUID = el;
}
}
return (
<div data-testid="profile-index">
<Message key="accountPreferencesTitle" defaultMessage="Ely.by account preferences">
{(pageTitle: string) => (
<h2 className={styles.indexTitle}>
<Helmet title={pageTitle} />
{pageTitle}
</h2>
)}
</Message>
export default connect(({ user, i18n }: RootState) => ({
user,
interfaceLocale: i18n.locale,
}))(Profile);
<div className={styles.indexContent}>
<div className={styles.descriptionColumn}>
<div className={styles.indexDescription}>
<Message
key="accountDescription"
defaultMessage="Ely.by account allows you to get access to many Minecraft resources. Please, take care of your account safety. Use secure password and change it regularly."
/>
</div>
</div>
<div className={styles.formColumn}>
<div className={profileForm.form}>
<div className={styles.item}>
<h3 className={profileForm.title}>
<Message key="personalData" defaultMessage="Personal data" />
</h3>
<p className={profileForm.description}>
<Message
key="preferencesDescription"
defaultMessage="Here you can change the key preferences of your account. Please note that all actions must be confirmed by entering a password."
/>
</p>
</div>
<ProfileField
link="/profile/change-username"
label={<Message key="nickname" defaultMessage="Nickname:" />}
value={user.username}
warningMessage={
user.hasMojangUsernameCollision ? (
<Message
key="mojangPriorityWarning"
defaultMessage="A Mojang account with the same nickname was found. According to {rules}, account owner has the right to demand the restoration of control over nickname."
values={{
rules: (
<Link
to={{
pathname: '/rules',
hash: `#${RulesPage.getRuleHash(1, 4)}`,
}}
>
<Message key="projectRules" defaultMessage="project rules" />
</Link>
),
}}
/>
) : (
''
)
}
/>
<ProfileField
link="/profile/change-email"
label={<Message key="email" defaultMessage="E‑mail:" />}
value={user.email}
/>
<ProfileField
link="/profile/change-password"
label={<Message key="password" defaultMessage="Password:" />}
value={
<Message
key="changedAt"
defaultMessage="Changed {at}"
values={{
at: <RelativeTime timestamp={user.passwordChangedAt * 1000} />,
}}
/>
}
/>
<ProfileField
label={<Message key="siteLanguage" defaultMessage="Site language:" />}
value={<ChangeLanguageLink />}
warningMessage={
user.lang === activeLocale ? (
''
) : (
<Message
key="languageIsUnavailableWarning"
defaultMessage={
'The locale "{locale}" you\'ve used earlier isn\'t currently translated enough. If you want to continue using the selected language, please {participateInTheTranslation} of the project.'
}
values={{
locale: user.lang,
participateInTheTranslation: (
<a href="http://ely.by/translate" target="_blank">
<Message
key="participateInTheTranslation"
defaultMessage="participate in the translation"
/>
</a>
),
}}
/>
)
}
/>
<ProfileField
link="/profile/mfa"
label={<Message key="twoFactorAuth" defaultMessage="Two‑factor auth:" />}
value={
user.isOtpEnabled ? (
<Message key="enabled" defaultMessage="Enabled" />
) : (
<Message key="disabled" defaultMessage="Disabled" />
)
}
/>
<ProfileField
label={<Message key="uuid" defaultMessage="UUID:" />}
value={
<span
className={styles.uuid}
ref={(ref) => (uuidRef.current = ref!)}
onMouseOver={onUuidMouseOver}
>
{user.uuid}
</span>
}
/>
</div>
</div>
</div>
</div>
);
};
export default Profile;

69
packages/app/components/profile/changeEmail/ChangeEmail.story.tsx Normal file
View File

@ -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')}
/>
));

1
packages/app/components/profile/changeEmail/ChangeEmail.tsx
View File

@ -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>;

21
packages/app/components/profile/changePassword/ChangePassword.story.tsx Normal file
View File

@ -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>
));

23
packages/app/components/profile/changeUsername/ChangeUsername.story.tsx Normal file
View File

@ -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>
));

2
packages/app/components/profile/changeUsername/ChangeUsername.tsx
View File

@ -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"

7
packages/app/components/profile/multiFactorAuth/MfaDisable.tsx
View File

@ -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

82
packages/app/components/profile/multiFactorAuth/MfaStatus.tsx
View File

@ -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,45 +6,43 @@ import icons from 'app/components/ui/icons.scss';
import mfaStyles from './mfa.scss';
export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
return (
<div className={styles.formBody}>
<ScrollIntoView />
<div className={styles.formRow}>
<div className={mfaStyles.bigIcon}>
<span className={icons.lock} />
</div>
<p className={`${styles.description} ${mfaStyles.mfaTitle}`}>
<Message
key="mfaEnabledForYourAcc"
defaultMessage="Two‑factor authentication for your account is active now"
/>
</p>
</div>
<div className={styles.formRow}>
<p className={styles.description}>
<Message
key="mfaLoginFlowDesc"
defaultMessage="Additional code will be requested next time you log in. Please note, that Minecraft authorization won't work when two‑factor auth is enabled."
/>
</p>
</div>
<div className={`${styles.formRow} ${mfaStyles.disableMfa}`}>
<p className={styles.description}>
<a
href="#"
onClick={(event) => {
event.preventDefault();
onProceed();
}}
>
<Message key="disable" defaultMessage="Disable" />
</a>
</p>
</div>
</div>
);
interface Props {
onProceed?: MouseEventHandler<HTMLAnchorElement>;
}
const MfaStatus: ComponentType<Props> = ({ onProceed }) => (
<div className={styles.formBody}>
<ScrollIntoView />
<div className={styles.formRow}>
<div className={mfaStyles.bigIcon}>
<span className={icons.lock} />
</div>
<p className={`${styles.description} ${mfaStyles.mfaTitle}`}>
<Message
key="mfaEnabledForYourAcc"
defaultMessage="Two‑factor authentication for your account is active now"
/>
</p>
</div>
<div className={styles.formRow}>
<p className={styles.description}>
<Message
key="mfaLoginFlowDesc"
defaultMessage="Additional code will be requested next time you log in. Please note, that Minecraft authorization won't work when two‑factor auth is enabled."
/>
</p>
</div>
<div className={`${styles.formRow} ${mfaStyles.disableMfa}`}>
<p className={styles.description}>
<a href="#" onClick={onProceed}>
<Message key="disable" defaultMessage="Disable" />
</a>
</p>
</div>
</div>
);
export default MfaStatus;

62
packages/app/components/profile/multiFactorAuth/MultiFactorAuth.story.tsx Normal file
View File

@ -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')}
/>
));

13
packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx
View File

@ -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;

3
packages/app/pages/profile/ChangeEmailPage.tsx
View File

@ -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);

171
packages/app/pages/profile/ProfileController.tsx Normal file
View File

@ -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);

178
packages/app/pages/profile/ProfilePage.tsx
View File

@ -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 <Profile user={user} activeLocale={activeLocale} />;
};
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 <PasswordRequestForm form={form} onSubmit={onSubmit} />;
},
// TODO: this property should be automatically extracted from the popup's isClosable prop
disableOverlayClose: true,
}),
);
});
}
},
},
)(ProfilePage);
export default ProfileController;

8
packages/app/pages/root/RootPage.tsx
View File

@ -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} />