Category -> Profile. Создал ProfileField

src/components/profile/Category.jsx

@@ -1,105 +0,0 @@
-import React, { Component } from 'react';
-
-import { FormattedMessage as Message, FormattedRelative as Relative } from 'react-intl';
-
-import styles from './category.scss';
-
-export class Category extends Component {
-    static displayName = 'Logout';
-
-    render() {
-        var { user } = this.props;
-        console.log(user);
-
-        return (
-            <div>
-                <h2 className={styles.title}>
-                    Настройки аккаунта Ely.by
-                </h2>
-                <div className={styles.content}>
-                    <div className={styles.description}>
-                        Благодаря аккаунту Ely.by вы можете получить доступ ко многим ресурсам, связанным с Minecraft.
-                        Берегите свой аккаунт, используйте надёжный пароль и регулярно его меняйте.
-                    </div>
-
-                    <div className={styles.options}>
-                        <div className={styles.item}>
-                            <h3 className={styles.optionsTitle}>Персональные данные</h3>
-                            <p className={styles.optionsDescription}>
-                                Здесь вы можете сменить ключевые параметры вашего аккаунта. Обратите внимание, что для
-                                всех действий необходимо подтверждение при помощи ввода пароля.
-                            </p>
-                        </div>
-
-                        <div className={styles.paramItem}>
-                            <div className={styles.paramRow}>
-                                <div className={styles.paramName}>Ник:</div>
-                                <div className={styles.paramValue}>{user.username}</div>
-                                <div className={styles.paramAction}>
-                                    <a href="#">
-                                        <span className={styles.paramEditIcon} />
-                                    </a>
-                                </div>
-                            </div>
-                            <div className={styles.paramMessage}>
-                                Найден аккаунт Mojang с таким же ником и, по правилам проекта, его владелец вправе
-                                потребовать восстановления контроля над ником.
-                            </div>
-                        </div>
-
-                        <div className={styles.paramItem}>
-                            <div className={styles.paramRow}>
-                                <div className={styles.paramName}>E-mail:</div>
-                                <div className={styles.paramValue}>{user.email}</div>
-                                <div className={styles.paramAction}>
-                                    <a href="#">
-                                        <span className={styles.paramEditIcon} />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className={styles.paramItem}>
-                            <div className={styles.paramRow}>
-                                <div className={styles.paramName}>Пароль:</div>
-                                <div className={styles.paramValue}>
-                                    Изменён <Relative value={user.passwordChangedAt} />
-                                </div>
-                                <div className={styles.paramAction}>
-                                    <a href="#">
-                                        <span className={styles.paramEditIcon} />
-                                    </a>
-                                </div>
-                            </div>
-                            {user.shouldChangePassword ? (
-                                <div className={styles.paramMessage}>
-                                    Для пароля применяется старый алгоритм хэширования<br />
-                                    Пожалуйста, смените пароль.
-                                </div>
-                            ) : ''}
-                        </div>
-
-                        <div className={styles.paramItem}>
-                            <div className={styles.paramRow}>
-                                <div className={styles.paramName}>Двухфакторная аутентификация:</div>
-                                <div className={styles.paramValue}>Не включена</div>
-                                <div className={styles.paramAction}>
-                                    <a href="#">
-                                        <span className={styles.paramEditIcon} />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className={styles.paramItem}>
-                            <div className={styles.paramRow}>
-                                <div className={styles.paramName}>UUID:</div>
-                                <div className={styles.uuidValue}>{user.uuid}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}

src/components/profile/Profile.jsx

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+
+import { FormattedMessage as Message, FormattedRelative as Relative } from 'react-intl';
+import Helmet from 'react-helmet';
+
+import { userShape } from 'components/user/User';
+
+import ProfileField from './ProfileField';
+import styles from './profile.scss';
+
+export class Profile extends Component {
+    static displayName = 'Profile';
+    static propTypes = {
+        user: userShape
+    };
+
+    render() {
+        const { user } = this.props;
+
+        const pageTitle = 'Настройки аккаунта Ely.by';
+
+        return (
+            <div className={styles.container}>
+                <Helmet title={pageTitle} />
+                <h2 className={styles.title}>
+                    {pageTitle}
+                </h2>
+
+                <div className={styles.content}>
+                    <div className={styles.description}>
+                        Благодаря аккаунту Ely.by вы можете получить доступ ко многим ресурсам, связанным с Minecraft.
+                        Берегите свой аккаунт, используйте надёжный пароль и регулярно его меняйте.
+                    </div>
+
+                    <div className={styles.options}>
+                        <div className={styles.item}>
+                            <h3 className={styles.optionsTitle}>
+                                Персональные данные
+                            </h3>
+                            <p className={styles.optionsDescription}>
+                                Здесь вы можете сменить ключевые параметры вашего аккаунта. Обратите внимание, что для
+                                всех действий необходимо подтверждение при помощи ввода пароля.
+                            </p>
+                        </div>
+
+                        <ProfileField
+                            label={'Ник'}
+                            value={user.username}
+                            warningMessage={'Найден аккаунт Mojang с таким же ником и, по правилам проекта, его владелец вправе потребовать восстановления контроля над ником.'}
+                        />
+
+                        <ProfileField
+                            label={'E-mail'}
+                            value={user.email}
+                        />
+
+                        <ProfileField
+                            label={'Пароль'}
+                            value={<span>Изменён <Relative value={user.passwordChangedAt} /></span>}
+                            warningMessage={user.shouldChangePassword ? (
+                                <span>
+                                    Для пароля применяется старый алгоритм хэширования<br />
+                                    Пожалуйста, смените пароль.
+                                </span>
+                            ) : ''}
+                        />
+
+                        <ProfileField
+                            label={'Двухфакторная аутентификация'}
+                            value={'Не включена'}
+                        />
+
+                        <ProfileField
+                            label={'UUID'}
+                            value={user.uuid}
+                            readonly
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/components/profile/ProfileField.jsx

@@ -0,0 +1,40 @@
+import React, { Component, PropTypes } from 'react';
+
+import styles from './profile.scss';
+
+export default class ProfileField extends Component {
+    static displayName = 'ProfileField';
+    static propTypes = {
+        label: PropTypes.string.isRequired,
+        value: React.PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+        warningMessage: React.PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+        readonly: PropTypes.bool
+    };
+
+    render() {
+        const {label, value, warningMessage, readonly} = this.props;
+
+        return (
+            <div className={styles.paramItem}>
+                <div className={styles.paramRow}>
+                    <div className={styles.paramName}>{label}:</div>
+                    <div className={styles.paramValue}>{value}</div>
+
+                    {readonly ? '' : (
+                        <div className={styles.paramAction}>
+                            <a href="#">
+                                <span className={styles.paramEditIcon} />
+                            </a>
+                        </div>
+                    )}
+                </div>
+
+                {warningMessage ? (
+                    <div className={styles.paramMessage}>
+                        {warningMessage}
+                    </div>
+                ) : ''}
+            </div>
+        );
+    }
+}

src/components/profile/profile.scss

@@ -1,6 +1,11 @@
 @import '~components/ui/fonts.scss';
 @import '~components/ui/colors.scss';
 
+.container {
+    margin-top: 55px;
+}
+
+
 .title {
     font-family: $font-family-title;
     font-size: 30px;

src/pages/index/IndexPage.jsx

@@ -2,17 +2,13 @@ import React, { Component } from 'react';
 
 import { connect } from 'react-redux';
 
-import ProfilePage from 'pages/profile/ProfilePage';
+import { Profile } from 'components/profile/Profile';
 
 class IndexPage extends Component {
     displayName = 'IndexPage';
 
     render() {
-        return (
-            <div>
-                <ProfilePage {...this.props} />
-            </div>
-        );
+        return (<Profile {...this.props} />);
     }
 }
 

src/pages/profile/ProfilePage.jsx

@@ -1,33 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-import { connect } from 'react-redux';
-
-import { Category } from 'components/profile/Category';
-
-import styles from './profile.scss';
-
-class ProfilePage extends Component {
-    static displayName = 'AuthPage';
-    static propTypes = {
-        /*client: PropTypes.shape({
-            id: PropTypes.string.isRequired,
-            name: PropTypes.string.isRequired,
-            description: PropTypes.string.isRequired
-        })*/
-    };
-
-    state = {
-    };
-
-    render() {
-        return (
-            <div className={styles.content}>
-                <Category {...this.props} />
-            </div>
-        );
-    }
-}
-
-export default connect((state) => ({
-    //client: state.auth.client
-}))(ProfilePage);

src/pages/profile/profile.scss

@@ -1,5 +0,0 @@
-@import "~components/ui/colors.scss";
-
-.content {
-    margin-top: 55px;
-}