Добавлена первичная вёрстка для профиля пользователя

src/components/profile/Category.jsx

@@ -0,0 +1,105 @@
+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;
+        var changePassDate = Date.now() - (1000 * 60 * 60 * 24 * 30 * 3);
+
+        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={changePassDate} />
+                                </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 || 'df936908-b2e1-544d-96f8-2977ec213022'}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

src/components/profile/category.scss

@@ -0,0 +1,121 @@
+@import '~components/ui/fonts.scss';
+@import '~components/ui/colors.scss';
+
+.title {
+    font-family: $font-family-title;
+    font-size: 30px;
+    margin-bottom: 12px;
+}
+
+.content {
+    display: flex;
+}
+
+.description {
+    font-size: 14px;
+    line-height: 1.4;
+    color: #9a9a9a;
+    width: 340px;
+    padding: 12px 20px 0 0;
+    box-sizing: border-box;
+}
+
+.options {
+    background: #fff;
+    flex-grow: 1;
+    max-width: 416px;
+    border-bottom: 10px solid #ddd8ce;
+}
+
+.optionsTitle {
+    position: relative;
+    font-size: 24px;
+    font-family: $font-family-title;
+    padding-bottom: 9px;
+
+    &:after {
+        content: '';
+        display: block;
+
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 3px;
+        width: 86px;
+
+        background: $green;
+    }
+}
+
+.optionsDescription {
+    font-size: 13px;
+    color: #9a9a9a;
+    line-height: 1.25;
+    margin-top: 25px;
+}
+
+.item {
+    padding: 30px;
+    border-bottom: 1px solid #eee;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.paramItem {
+    composes: item;
+
+    $padding: 20px;
+
+    padding-top: $padding;
+    padding-bottom: $padding;
+
+    color: #666666;
+}
+
+.paramRow {
+    display: flex;
+    align-items: baseline;
+    flex-basis: 0;
+    flex-grow: 1;
+
+    font-size: 14px;
+}
+
+.paramName {
+    width: 125px;
+    font-family: $font-family-title;
+}
+
+.paramValue {
+    flex-grow: 1;
+}
+
+.uuidValue {
+    composes: paramName;
+    composes: paramValue;
+}
+
+.paramAction {
+    text-align: center;
+}
+
+.paramEditIcon {
+    composes: pencil from 'components/ui/icons.scss';
+
+    color: $light;
+    transition: .4s;
+
+    a:hover & {
+        color: #444;
+    }
+}
+
+.paramMessage {
+    padding: 10px 40px 0 0;
+
+    color: $red;
+    font-size: 11px;
+    line-height: 1.2;
+}

src/components/user/User.js

@@ -24,7 +24,7 @@ export default class User {
             goal: null, // the goal with wich user entered site
             isGuest: true,
             isActive: true,
-            shouldChangePassword: false
+            shouldChangePassword: false // TODO: нужно ещё пробросить причину необходимости смены
         };
 
         const user = Object.keys(defaults).reduce((user, key) => {

src/components/userbar/LoggedInPanel.js

@@ -27,7 +27,7 @@ export default class LoggedInPanel extends Component {
 
         return (
             <div className={buttonGroups.horizontalGroup}>
-                <Link to="/profile" className={classNames(buttons.green, buttonGroups.item)}>
+                <Link to="/" className={classNames(buttons.green, buttonGroups.item)}>
                     <span className={styles.userIcon} />
                     <span className={styles.userName}>{user.username}</span>
                 </Link>

src/icons/webfont/pencil.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+<path d="M13.5 0c1.381 0 2.5 1.119 2.5 2.5 0 0.563-0.186 1.082-0.5 1.5l-1 1-3.5-3.5 1-1c0.418-0.314 0.937-0.5 1.5-0.5zM1 11.5l-1 4.5 4.5-1 9.25-9.25-3.5-3.5-9.25 9.25zM11.181 5.681l-7 7-0.862-0.862 7-7 0.862 0.862z"></path>
+</svg>

src/pages/index/IndexPage.jsx

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 
 import { connect } from 'react-redux';
 
+import ProfilePage from 'pages/profile/ProfilePage';
+
 import authFlow from 'services/authFlow';
 
 class IndexPage extends Component {
@@ -14,14 +16,9 @@ class IndexPage extends Component {
     }
 
     render() {
-        const {user, children} = this.props;
-
         return (
             <div>
-                <h1>
-                    Hello {user.username}!
-                </h1>
-                {children}
+                <ProfilePage {...this.props} />
             </div>
         );
     }

src/pages/profile/ProfilePage.jsx

@@ -0,0 +1,33 @@
+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

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