Merge branch 'master' of https://github.com/moecube/moecube-accounts-web

# Conflicts:
#	.idea/workspace.xml

.gitignore

@@ -8,6 +8,7 @@
 
 # misc
 .DS_Store
-*.log*
+npm-debug.log*
 
 /utils/config.js
+.idea/workspace.xml

.roadhogrc.js

-
-let publicPath = 'https://cdn01.moecube.com/accounts/'
+let publicPath = 'https://cdn01.moecube.com/accounts/';
 
 const API_ROOT = {
-  test: 'http://192.168.1.9:3000',
-  dev: 'http://114.215.243.95:8082',
-  prod: 'https://api.moeube.com/accounts'
-}
+  development: 'http://192.168.1.9:3000',
+  test: 'http://114.215.243.95:8082',
+  production: 'https://api.moeube.com/accounts'
+};
 
 let defineConf = {
-  apiRoot: API_ROOT[process.env["ENV"]],
-}
+  apiRoot: API_ROOT[process.env['ENV']],
+};
 
 export default {
-  "entry": "src/index.js",
+  'entry': 'src/index.js',
   publicPath,
-  define: {...defineConf},
-  "env": {
-    "development": {
-      "extraBabelPlugins": [
-        "dva-hmr",
-        "transform-runtime",
-        ["import", { "libraryName": "antd", "style": "css" }]
+  define: { ...defineConf },
+  'env': {
+    'development': {
+      'extraBabelPlugins': [
+        'dva-hmr',
+        'transform-runtime',
+        ['import', { 'libraryName': 'antd', 'style': 'css' }]
       ]
     },
-    "production": {
-      "extraBabelPlugins": [
-        "transform-runtime",
-        ["import", { "libraryName": "antd", "style": "css" }]
+    'production': {
+      'extraBabelPlugins': [
+        'transform-runtime',
+        ['import', { 'libraryName': 'antd', 'style': 'css' }]
       ]
     }
   }
-}
+};

.travis.yml

 language: node_js
 node_js: node
 env:
-  NODE_ENV: development
   global:
     secure: NObcZ6fY1VQuoDfxRxKVOZ+p7g3LTDkonG4Ow4HIbx2g8wJ24mMqs9gN0J3Asbdbz68isDMpkKy7IW1mK9+N9fM0pBauqD1YMbglnEv+HhYjhiEsQdRdDM2nzDIjS4PCwavI1Da5TLhaUjSAM4lrHx7bVOK4YsvF3s8JEApS54QgSlbeJgvSbPcCiapl0VwwaL36cGndChc3tawq4xseuk4bP2NrTEd7ifYZMt+iojId+UuhRQk4w0HUlBhEDKiT/fLxeQDwMRv2WIdIPW7D7+Wo01iX+T0Ti629QhQBe/S76affkG6G085HIPin3VvXDQaiYbK4ALbc79O+9jqSxEFd9nwG8xbp2jezzvclUSXPhIyZe7VSRS6z1MdevlyQa56AUEP7My7IMqj8j7NPoUgrnVlKtR8WPHQacfAVkrcOIX+Tzwl2IMOCqonamDtJjUNX5xpYB+IEj+INvQmRqT2NicExGWj9LZp3L3kscwq1u+0hPzgoQ9yovE+OvLFNE/R5AE90GIaSlwXw4MqOeB+8l+ou2JzNZFJhHBvAsOFwQTloFz/pu7ichJ+P0KsMPteLFA4Btuo6bBu31K7R310CmlIdYJIeeybMuM6e6bG8IkbVcMq5skg9LNa64KuDG46oopwGLiWkdRwDzG3VmXGwVm+OF2EWZi/B0wIcTwY=
 
-script: npm run build
+script: npm run build:test
 before_deploy:
 - curl --location --retry 5 --output ossutil 'https://github.com/mycard/ossutil/releases/download/1.0.0.Beta2/ossutil'
 - chmod +x ossutil

package.json

 {
   "private": true,
   "scripts": {
-    "start": "cross-env ENV=test roadhog server",
-    "build:dev": "cross-env ENV=dev roadhog build",
-    "build": "cross-env ENV=prod roadhog build",
+    "start": "cross-env ENV=development roadhog server",
+    "build:test": "cross-env ENV=test roadhog build",
+    "build": "cross-env ENV=production roadhog build",
     "lint": "eslint --ext .js src test",
     "precommit": "npm run lint"
   },

src/components/UserPanel.css

+
+.normal {
+}

src/components/UserPanel.js

+import { Dropdown, Menu } from 'antd';
+import { connect } from 'dva';
+import { Link } from 'dva/router';
+import React from 'react';
+import { FormattedMessage as Format } from 'react-intl';
+
+const defaultAvatar = require('../../public/default_avatar.jpg');
+
+function UserPanel({ dispatch, user, token }) {
+  const { avatar } = user;
+  const menu = (
+    <Menu trigger={['click']}>
+      <Menu.Item>
+        {
+          // i18n
+          token ? <Link to="/profiles">个人中心</Link> : <Link to="/signin">登录</Link>
+        }
+      </Menu.Item>
+
+      <Menu.Divider/>
+      {
+        token &&
+        <Menu.Item >
+          <div
+            onClick={() => {
+              dispatch({ type: 'auth/signOut' });
+            }}
+          >
+            <Format id="sign-out"/>
+          </div>
+        </Menu.Item>
+      }
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu} placement="bottomCenter">
+      <div className="ant-dropdown-link" style={{ display: 'flex', alignItems: 'center' }}>
+        <img
+          alt="avatar" src={avatar || defaultAvatar}
+          style={{ borderRadius: '40px', height: '40px', weight: 'auto' }}
+        />
+      </div>
+    </Dropdown>
+  );
+}
+
+function mapStateToProps(state) {
+  const {
+    common: { messages, client, language },
+    user: { user, token },
+  } = state;
+  return {
+    token,
+    user,
+    language,
+    messages,
+    client,
+  };
+}
+
+export default connect(mapStateToProps)(UserPanel);

src/router.js

@@ -17,6 +17,7 @@ import Reset from './routes/Reset.js';
 
 import Verify from './routes/Verify.js';
 
+
 function RouterConfig({ history }) {
   return (
     <Router history={history}>

src/routes/Index.js

@@ -6,11 +6,12 @@ import DocumentTitle from 'react-document-title';
 import { FormattedMessage as Format } from 'react-intl';
 import Particles from 'react-particles-js';
 import logo from '../assets/MoeCube.png';
+import UserPanel from '../components/UserPanel';
 
 const languageMap = {
   'zh-CN': '中文',
   'en-US': 'English',
-}
+};
 
 const { Header, Footer } = Layout;
 const particleConfig = {
@@ -127,30 +128,34 @@ const particleConfig = {
   retina_detect: true,
 };
 
-function Index({ children, messages, dispatch, client, token, language }) {
+function Index({ children, messages, dispatch, client, language }) {
   const menu = (
     <Menu style={{ transform: 'translateX(-16px)' }}>
       {
         Object.keys(languageMap).map((lan, i) => {
           return (
             <Menu.Item key={i}>
-              <a onClick={() => { dispatch({ type: 'common/changeLanguage', payload: { language: lan } }) }}>
+              <a
+                onClick={() => {
+                  dispatch({ type: 'common/changeLanguage', payload: { language: lan } });
+                }}
+              >
                 {languageMap[lan]}
               </a>
             </Menu.Item>
-          )
+          );
         })
       }
     </Menu>
   );
   return (
     <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '100%' }}>
-      <DocumentTitle title={messages.title || 'Moe Cube'} />
+      <DocumentTitle title={messages.title || 'Moe Cube'}/>
 
       {client !== 'electron' &&
       <Header style={{ display: 'flex', alignItems: 'center' }}>
         <Link to="/" style={{ marginTop: '20px' }}>
-            <img alt="logo" src={logo} style={{ width: '140px', height: '44px' }} />
+          <img alt="logo" src={logo} style={{ width: '140px', height: '44px' }}/>
         </Link>
 
         <Menu
@@ -161,29 +166,14 @@ function Index({ children, messages, dispatch, client, token, language }) {
         >
           <Menu.Item key="1">
             <Link to="/">
-                <Format id="Home" />
+              <Format id="Home"/>
             </Link>
           </Menu.Item>
         </Menu>
 
-          <Menu
-            theme="dark"
-            mode="horizontal"
-            defaultSelectedKeys={['1']}
-            style={{ lineHeight: '64px', position: 'absolute', right: '50px' }}
-          >
-            {token && (<Menu.Item key="1">
-              <div
-                onClick={() => {
-                  dispatch({ type: 'auth/signOut' });
-                }}
-              >
-                <Format id="sign-out" />
+        <div style={{ position: 'absolute', right: '40px' }}>
+          <UserPanel />
         </div>
-            </Menu.Item>)
-            }
-          </Menu>
-
       </Header>
       }
 
@@ -198,7 +188,7 @@ function Index({ children, messages, dispatch, client, token, language }) {
       <Footer style={{ width: '100%', justifyContent: 'space-between', display: 'flex', zIndex: 100 }}>
         <div><Dropdown overlay={menu} trigger={['click']}>
           <a className="ant-dropdown-link changelanguage">
-            {languageMap[language]} <Icon type="down" className="flag" />
+            {languageMap[language]} <Icon type="down" className="flag"/>
           </a>
         </Dropdown></div>
         <div>© MoeCube 2017 all right reserved.</div>