Реализована панель пользователя, если он авторизован

src/components/ui/button-groups.scss

@@ -0,0 +1,18 @@
+.group {
+    position: relative; // это нужно только чтобы postcss не удалял пустой класс и composes мог его схавать
+}
+
+.horizontalGroup {
+    composes: group;
+}
+
+.item {
+    $borderConfig: 1px solid rgba(#fff, 0.15);
+
+    float: left;
+    border-left: $borderConfig;
+
+    &:last-child {
+        border-right: $borderConfig;
+    }
+}

src/components/userbar/LoggedInPanel.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+
+import classNames from 'classnames';
+import { Link } from 'react-router';
+import { intlShape, FormattedMessage as Message } from 'react-intl';
+
+import buttons from 'components/ui/buttons.scss';
+import buttonGroups from 'components/ui/button-groups.scss';
+
+import messages from './LoggedInPanel.messages.js';
+import styles from './loggedInPanel.scss';
+
+import { userShape } from 'components/user/User';
+
+export default class LoggedInPanel extends Component {
+    static displayName = 'LoggedInPanel';
+    static propTypes = {
+        user: userShape
+    };
+
+    static contextTypes = {
+        intl: intlShape.isRequired
+    };
+
+    render() {
+        const { user } = this.props;
+
+        return (
+            <div className={buttonGroups.horizontalGroup}>
+                <Link to="/profile" className={classNames(buttons.green, buttonGroups.item)}>
+                    <span className={styles.userIcon} />
+                    <span className={styles.userName}>{user.username}</span>
+                </Link>
+                <Link
+                    to="/logout"
+                    className={classNames(buttons.green, buttonGroups.item)}
+                    title={this.context.intl.formatMessage(messages.logout)}
+                >
+                    <span className={styles.logoutIcon} />
+                </Link>
+            </div>
+        );
+    }
+}

src/components/userbar/LoggedInPanel.messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    logout: {
+        id: 'logout',
+        defaultMessage: 'Logout'
+    }
+});

src/components/userbar/Userbar.jsx

@@ -10,6 +10,8 @@ import styles from './userbar.scss';
 
 import { userShape } from 'components/user/User';
 
+import LoggedInPanel from './LoggedInPanel';
+
 export default class Userbar extends Component {
     static displayName = 'Userbar';
     static propTypes = {
@@ -28,9 +30,7 @@ export default class Userbar extends Component {
                         </Link>
                     )
                     : (
-                        <Link to="/logout" className={buttons.blue}>
+                        <LoggedInPanel {...this.props} />
-                            <Message {...messages.logout} />
-                        </Link>
                     )
                 }
             </div>

src/components/userbar/Userbar.messages.js

@@ -4,10 +4,5 @@ export default defineMessages({
     register: {
         id: 'register',
         defaultMessage: 'Join'
-    },
-
-    logout: {
-        id: 'logout',
-        defaultMessage: 'Logout'
     }
 });

src/components/userbar/loggedInPanel.scss

@@ -0,0 +1,19 @@
+
+.userIcon {
+    composes: user from 'components/ui/icons.scss';
+
+    position: relative;
+    bottom: 2px;
+
+    padding-right: 5px;
+}
+
+.userName {
+
+}
+
+.logoutIcon {
+    composes: exit from 'components/ui/icons.scss';
+
+    color: #cdcdcd;
+}

src/icons/webfont/exit.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!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="32" height="32" viewBox="0 0 32 32">
+<path fill="#444" d="M24 20v-4h-10v-4h10v-4l6 6zM22 18v8h-10v6l-12-6v-26h22v10h-2v-8h-16l8 4v18h8v-6z"></path>
+</svg>