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

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

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;