diff --git a/packages/app/components/profile/Profile.story.tsx b/packages/app/components/profile/Profile.story.tsx new file mode 100644 index 0000000..daea51e --- /dev/null +++ b/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 }) => ( +
+
{children}
+
+); + +import Profile from './Profile'; + +storiesOf('Components/Profile', module).add('Profile', () => ( + + + +)); diff --git a/packages/app/components/profile/Profile.tsx b/packages/app/components/profile/Profile.tsx index 60ead7c..794e9ee 100644 --- a/packages/app/components/profile/Profile.tsx +++ b/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,164 +13,16 @@ import profileForm from './profileForm.scss'; type Props = { user: User; - interfaceLocale: string; + activeLocale: string; }; -class Profile extends React.PureComponent { - UUID: HTMLElement | null; - - render() { - const { user, interfaceLocale } = this.props; - - return ( -
- - {(pageTitle: string) => ( -

- - {pageTitle} -

- )} - - -
-
-
- -
-
- -
-
-
-

- -

-

- -

-
- - } - value={user.username} - warningMessage={ - user.hasMojangUsernameCollision ? ( - - - - ), - }} - /> - ) : ( - '' - ) - } - /> - - } - value={user.email} - /> - - } - value={ - , - }} - /> - } - /> - - } - value={} - warningMessage={ - user.lang === interfaceLocale ? ( - '' - ) : ( - - - - ), - }} - /> - ) - } - /> - - } - value={ - user.isOtpEnabled ? ( - - ) : ( - - ) - } - /> - - } - value={ - - {user.uuid} - - } - /> -
-
-
-
- ); - } - - handleUUIDMouseOver() { - if (!this.UUID) { +const Profile: ComponentType = ({ user, activeLocale }) => { + const uuidRef = useRef(); + 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 { } 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 ( +
+ + {(pageTitle: string) => ( +

+ + {pageTitle} +

+ )} + -export default connect(({ user, i18n }: RootState) => ({ - user, - interfaceLocale: i18n.locale, -}))(Profile); +
+
+
+ +
+
+ +
+
+
+

+ +

+

+ +

+
+ + } + value={user.username} + warningMessage={ + user.hasMojangUsernameCollision ? ( + + + + ), + }} + /> + ) : ( + '' + ) + } + /> + + } + value={user.email} + /> + + } + value={ + , + }} + /> + } + /> + + } + value={} + warningMessage={ + user.lang === activeLocale ? ( + '' + ) : ( + + + + ), + }} + /> + ) + } + /> + + } + value={ + user.isOtpEnabled ? ( + + ) : ( + + ) + } + /> + + } + value={ + (uuidRef.current = ref!)} + onMouseOver={onUuidMouseOver} + > + {user.uuid} + + } + /> +
+
+
+
+ ); +}; + +export default Profile; diff --git a/packages/app/components/profile/changeEmail/ChangeEmail.story.tsx b/packages/app/components/profile/changeEmail/ChangeEmail.story.tsx new file mode 100644 index 0000000..2c08750 --- /dev/null +++ b/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) => {story()}) + .add('First step', () => ( + { + action('onSubmit')(step, form); + + return Promise.resolve(); + }} + onChangeStep={action('onChangeStep')} + /> + )) + .add('Second step', () => ( + { + action('onSubmit')(step, form); + + return Promise.resolve(); + }} + onChangeStep={action('onChangeStep')} + /> + )) + .add('Second step with code', () => ( + { + action('onSubmit')(step, form); + + return Promise.resolve(); + }} + onChangeStep={action('onChangeStep')} + /> + )) + .add('Third step', () => ( + { + action('onSubmit')(step, form); + + return Promise.resolve(); + }} + onChangeStep={action('onChangeStep')} + /> + )) + .add('Third step with code', () => ( + { + action('onSubmit')(step, form); + + return Promise.resolve(); + }} + onChangeStep={action('onChangeStep')} + /> + )); diff --git a/packages/app/components/profile/changeEmail/ChangeEmail.tsx b/packages/app/components/profile/changeEmail/ChangeEmail.tsx index debdccb..a34cee5 100644 --- a/packages/app/components/profile/changeEmail/ChangeEmail.tsx +++ b/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; onSubmit: (step: ChangeEmailStep, form: FormModel) => Promise; diff --git a/packages/app/components/profile/changePassword/ChangePassword.story.tsx b/packages/app/components/profile/changePassword/ChangePassword.story.tsx new file mode 100644 index 0000000..a29b1ae --- /dev/null +++ b/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', () => ( + + { + action('onSubmit')(form); + + return Promise.resolve(); + }} + /> + +)); diff --git a/packages/app/components/profile/changeUsername/ChangeUsername.story.tsx b/packages/app/components/profile/changeUsername/ChangeUsername.story.tsx new file mode 100644 index 0000000..7a313f5 --- /dev/null +++ b/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', () => ( + + { + action('onSubmit')(form); + + return Promise.resolve(); + }} + /> + +)); diff --git a/packages/app/components/profile/changeUsername/ChangeUsername.tsx b/packages/app/components/profile/changeUsername/ChangeUsername.tsx index 9d3cc9e..f684a92 100644 --- a/packages/app/components/profile/changeUsername/ChangeUsername.tsx +++ b/packages/app/components/profile/changeUsername/ChangeUsername.tsx @@ -55,7 +55,7 @@ export default class ChangeUsername extends React.Component {
: ; } - onProceed = () => this.setState({ showForm: true }); + onProceed: MouseEventHandler = (event) => { + event.preventDefault(); + this.setState({ showForm: true }); + }; onSubmit = (form: FormModel) => { return this.props diff --git a/packages/app/components/profile/multiFactorAuth/MfaStatus.tsx b/packages/app/components/profile/multiFactorAuth/MfaStatus.tsx index 2e974eb..8935d9e 100644 --- a/packages/app/components/profile/multiFactorAuth/MfaStatus.tsx +++ b/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,45 +6,43 @@ 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; } + +const MfaStatus: ComponentType = ({ onProceed }) => ( +
+ + +
+
+ +
+

+ +

+
+ +
+

+ +

+
+ +
+

+ + + +

+
+
+); + +export default MfaStatus; diff --git a/packages/app/components/profile/multiFactorAuth/MultiFactorAuth.story.tsx b/packages/app/components/profile/multiFactorAuth/MultiFactorAuth.story.tsx new file mode 100644 index 0000000..7048fba --- /dev/null +++ b/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) => {story()}) + .add('First step', () => ( + { + action('onSubmit')(form, sendData); + + return Promise.resolve(); + }} + onComplete={action('onComplete')} + onChangeStep={action('onChangeStep')} + /> + )) + .add('Second step', () => ( + { + action('onSubmit')(form, sendData); + + return Promise.resolve(); + }} + onComplete={action('onComplete')} + onChangeStep={action('onChangeStep')} + /> + )) + .add('Third step', () => ( + { + action('onSubmit')(form, sendData); + + return Promise.resolve(); + }} + onComplete={action('onComplete')} + onChangeStep={action('onChangeStep')} + /> + )) + .add('Enabled', () => ( + { + action('onSubmit')(form, sendData); + + return Promise.resolve(); + }} + onComplete={action('onComplete')} + onChangeStep={action('onChangeStep')} + /> + )); diff --git a/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx b/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx index be2422b..fdb2670 100644 --- a/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx +++ b/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 = ({ 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
); -} +}; function formatSecret(secret: string): string { return (secret.match(/.{1,4}/g) || []).join(' '); } + +export default KeyForm; diff --git a/packages/app/pages/profile/ChangeEmailPage.tsx b/packages/app/pages/profile/ChangeEmailPage.tsx index e94e4cc..7cbad55 100644 --- a/packages/app/pages/profile/ChangeEmailPage.tsx +++ b/packages/app/pages/profile/ChangeEmailPage.tsx @@ -13,7 +13,6 @@ interface RouteParams { } interface Props extends RouteComponentProps { - lang: string; email: string; } @@ -33,7 +32,6 @@ class ChangeEmailPage extends React.Component { ({ email: state.user.email, - lang: state.user.lang, }))(ChangeEmailPage); diff --git a/packages/app/pages/profile/ProfileController.tsx b/packages/app/pages/profile/ProfileController.tsx new file mode 100644 index 0000000..eca8b0c --- /dev/null +++ b/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 }) => Promise; + refreshUserData: () => Promise; +} + +const ProfileController: ComponentType = ({ userId, onSubmit, refreshUserData }) => { + const goToProfile = useCallback(async () => { + await refreshUserData(); + + browserHistory.push('/'); + }, [refreshUserData]); + + return ( +
+ + }> + + + + + + + + + + + + +
+ +
+ +
+ ); +}; + +export default connect( + (state: RootState) => ({ + userId: state.user.id!, + }), + { + refreshUserData, + onSubmit: ({ form, sendData }: { form: FormModel; sendData: () => Promise }) => (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 }) { + 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 ; + }, + // TODO: this property should be automatically extracted from the popup's isClosable prop + disableOverlayClose: true, + }), + ); + }); + } + }, + }, +)(ProfileController); diff --git a/packages/app/pages/profile/ProfilePage.tsx b/packages/app/pages/profile/ProfilePage.tsx index f088407..0d17219 100644 --- a/packages/app/pages/profile/ProfilePage.tsx +++ b/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 }) => Promise; - refreshUserData: () => Promise; -} +const ProfileController: ComponentType = () => { + const [user, activeLocale] = useSelector((state: RootState) => [state.user, state.i18n.locale]); -class ProfilePage extends React.Component { - render() { - const { userId, onSubmit } = this.props; + return ; +}; - return ( -
- - }> - - - - - - - - - - - - -
- -
- -
- ); - } - - 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 }) => (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 }) { - 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 ; - }, - // TODO: this property should be automatically extracted from the popup's isClosable prop - disableOverlayClose: true, - }), - ); - }); - } - }, - }, -)(ProfilePage); +export default ProfileController; diff --git a/packages/app/pages/root/RootPage.tsx b/packages/app/pages/root/RootPage.tsx index 789be5b..98e3561 100644 --- a/packages/app/pages/root/RootPage.tsx +++ b/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<{
}> - + @@ -95,7 +95,7 @@ class RootPage extends React.PureComponent<{ exact path="/" key="indexPage" - component={user.isGuest ? AuthPage : ProfilePage} + component={user.isGuest ? AuthPage : ProfileController} />