Merge pull request #238 from adcpm/unlogged

Unlogged

src/app/Sidebar.js

@@ -11,7 +11,7 @@ import api from '../steemAPI';
 import { hideSidebar } from '../actions';
 import Loading from '../widgets/Loading';
 import Icon from '../widgets/Icon';
-import Avatar from '../widgets/Avatar';
+import SidebarHeader from './Sidebar/SidebarHeader';
 import SidebarTabs from './Sidebar/SidebarTabs';
 import SidebarUsers from './Sidebar/SidebarUsers';
 import './Sidebar.scss';
@@ -157,7 +157,8 @@ export default class Sidebar extends Component {
 
   render() {
     const { search, props, menu } = this.state;
-    const { auth: { user }, app: { rate } } = this.props;
+    const { auth, app: { rate }, hideSidebar } = this.props;
+    const { user } = auth;
 
     const power = props
       ? formatter.vestToSteem(
@@ -174,24 +175,12 @@ export default class Sidebar extends Component {
 
     return (
       <nav className="Sidebar">
-        <div className="sidebar-header">
-          <a className="hide-sidebar" onClick={() => this.props.hideSidebar()}>
-            <Icon name="arrow_back" className="Icon--menu" />
-          </a>
-          <div className="Sidebar__log">
-            <div>
-              <Link to={`/@${user.name}`} className="my-1">
-                <Avatar sm username={user.name} reputation={user.reputation} />
-              </Link>
-              <div className="Sidebar__username">
-                @{ `${user.name} ` }
-                <a onClick={() => this.setState({ menu: 'settings' })}>
-                  <Icon name="settings" xs />
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
+        <SidebarHeader
+          auth={auth}
+          user={user}
+          hideSidebar={hideSidebar}
+          onClickMenu={this.onClickMenu}
+        />
 
         <SidebarTabs
           onClickMenu={this.onClickMenu}

src/app/Sidebar.scss

@@ -45,12 +45,6 @@
     color: #FFFFFF;
   }
 
-  .sidebar-header {
-    height: 111px;
-    min-height: 111px;
-    overflow: hidden;
-  }
-
   .Sidebar__unreadCount {
     display: inline-block;
     height: 1.5em;
@@ -168,18 +162,3 @@
     box-shadow: 0 0 40px rgba(0, 0, 0, 0.3) !important;
   }
 }
-
-.Sidebar__log {
-  height: 111px;
-  min-height: 111px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  justify-content: center;
-  font-size: 20px;
-}
-
-.Sidebar__username {
-  margin-top: 0.25em;
-}

src/app/Sidebar/SidebarHeader.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { FormattedMessage } from 'react-intl';
+import steemconnect from 'steemconnect';
+import Loading from '../../widgets/Loading';
+import Icon from '../../widgets/Icon';
+import Avatar from '../../widgets/Avatar';
+import './SidebarHeader.scss';
+
+const SidebarHeader = ({
+  auth,
+  user,
+  hideSidebar,
+  onClickMenu,
+}) =>
+  <div className="SidebarHeader">
+    <a className="hide-sidebar" onClick={() => hideSidebar()}>
+      <Icon name="arrow_back" className="Icon--menu" />
+    </a>
+    <div className="SidebarHeader__log">
+      {
+        auth.isFetching &&
+          <Loading color="white" />
+      }
+      {
+        !auth.isAuthenticated && !auth.isFetching &&
+          <a href={steemconnect.getLoginURL()}>
+            <Icon name="lock_outline" />
+            { ' ' }<FormattedMessage id="login" />
+          </a>
+      }
+      {
+        auth.isAuthenticated &&
+          <div>
+            <Link to={`/@${user.name}`} className="my-1">
+              <Avatar sm username={user.name} reputation={user.reputation}/>
+            </Link>
+            <div className="SidebarHeader__username">
+              @{ `${user.name} ` }
+              <a onClick={() => onClickMenu({menu: 'settings'})}>
+                <Icon name="settings" xs />
+              </a>
+            </div>
+          </div>
+      }
+    </div>
+  </div>;
+
+export default SidebarHeader;

src/app/Sidebar/SidebarHeader.scss

@@ -0,0 +1,20 @@
+.SidebarHeader {
+  height: 111px;
+  min-height: 111px;
+  overflow: hidden;
+}
+
+.SidebarHeader__log {
+  height: 111px;
+  min-height: 111px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.SidebarHeader__username {
+  margin-top: 0.25em;
+}

src/translations/en.json

@@ -39,5 +39,6 @@
   "dislikes": "Dislikes",
   "comments": "Comments",
   "card": "Card",
-  "list": "List"
+  "list": "List",
+  "login": "Log In"
 }

src/wrapper.js

@@ -2,16 +2,12 @@ import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { IntlProvider } from 'react-intl';
-
 import { login } from './auth/authActions';
 import { getConfig, getRate } from './actions';
 import { getStoredBookmarks } from './bookmarks/bookmarksActions';
 import { notify } from './app/Notification/notificationActions';
 import Notification from './app/Notification/Notification';
 import Sidebar from './app/Sidebar';
-import Splash from './app/Splash';
-import Loading from './widgets/Loading';
-import Modal from './widgets/Modal';
 import * as messages from './translations/Translations';
 import * as reblogActions from './app/Reblog/reblogActions';
 
@@ -44,21 +40,14 @@ export default class Wrapper extends Component {
     const className = (!app.sidebarIsVisible) ? 'app-wrapper full-width' : 'app-wrapper';
     return (
       <IntlProvider locale={app.locale} messages={messages[app.locale]}>
-        { auth.isFetching ?
-          <Modal>
-            <Loading />
-          </Modal>
-          : auth.isAuthenticated
-            ? <div className={className}>
-              <Sidebar />
-              <Notification />
-              {React.cloneElement(
-                this.props.children,
-                { auth, notify }
-              )}
-            </div>
-            : <Splash />
-        }
+        <div className={className}>
+          <Sidebar />
+          <Notification />
+          { React.cloneElement(
+            this.props.children,
+            { auth, notify }
+          )}
+        </div>
       </IntlProvider>
     );
   }